123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161 |
- // TESTS: Generation of Modeled MetaData using field models
- import { ValueTransformer } from './../dynaform/interfaces';
- import * as fmd from './../dynaform/models'; // fmd = Form Meta Data
- // ---------------------------------------------------------------------------------------------------------------------
- // Native
- const basicTextField = new fmd.TextField({
- name: 'basicTextField',
- label: 'Field One',
- placeholder: 'Type a value here'
- });
- const styledTextField = new fmd.TextField({
- name: 'styledTextField',
- placeholder: 'With a DOM id and CSS classes applied',
- class: ['red', 'bgPaleBlue'],
- id: 'yoyo'
- });
- const textareaField = new fmd.TextareaField({
- name: 'textareaField',
- placeholder: 'Type your long-winded comments here'
- });
- const passwordField = new fmd.PasswordField({
- name: 'passwordField',
- placeholder: 'It\'s a secret'
- });
- const selectField = new fmd.SelectField({
- name: 'selectField',
- options: ['', 'Apples', 'Oranges', 'Pears', 'Gorgonzola']
- });
- const radioField = new fmd.RadioField({
- name: 'radioField',
- options: ['Tea', 'Coffee', 'Cocoa', 'Yerba Maté']
- });
- const disabledTextField = new fmd.TextField({
- name: 'disabledTextField',
- placeholder: 'You can\'t touch this',
- isDisabled: true
- });
- const radioFieldHorizontal = new fmd.RadioField({
- name: 'radioFieldHorizontal',
- options: ['Fish', 'Fowl', 'Neither'],
- horizontal: true
- });
- // ---------------------------------------------------------------------------------------------------------------------
- // Custom
- const checkbutton = new fmd.CheckbuttonField({
- name: 'checkbutton',
- value: '456'
- });
- const checkbutton2 = new fmd.CheckbuttonField({
- name: 'checkbutton2',
- value: 'Yowsa'
- });
- const modifiers = ['Matches', 'Starts With', 'Contains'];
- const transformerFunctions: ValueTransformer = {
- inputFn: val => {
- let modifier = 'Starts With';
- if (/^%.*?%$/.test(val)) {
- modifier = 'Contains';
- } else if (/^[^%].*?[^%]$/.test(val)) {
- modifier = 'Matches';
- } else if (/^%.*/.test(val)) {
- modifier = 'Starts With';
- }
- const transformedVal = val.replace(/%/g, '').trim();
- return { modifier: modifier, value: transformedVal };
- },
- outputFn: (mod, val) => {
- let transformedValue;
- switch (mod) {
- case 'Starts With':
- transformedValue = `%${val}`;
- break;
- case 'Contains':
- transformedValue = `%${val}%`;
- break;
- case 'Matches':
- default:
- transformedValue = val;
- break;
- }
- return transformedValue;
- }
- };
- const dropdownModifiedInput = new fmd.DropdownModifiedInputField({
- name: 'dropdownModifiedInput',
- value: 'lovely',
- modifiers,
- transform: transformerFunctions
- });
- const checkbuttonGroup = new fmd.CheckbuttonGroup({
- name: 'checkbuttonGroup',
- firstEnablesRest: true,
- meta: [{name: 'iMaskTheOthers'}, {name: 'groupMemberTwo'}, {name: 'groupMemberThree'}]
- });
- // ---------------------------------------------------------------------------------------------------------------------
- // Kendo
- const timepicker = new fmd.TimepickerField({
- name: 'timepicker'
- });
- const datepicker = new fmd.DatepickerField({
- name: 'datepicker'
- });
- // ---------------------------------------------------------------------------------------------------------------------
- // Container
- const container = new fmd.Container({
- // basicTextField,
- // styledTextField,
- // textareaField,
- // passwordField,
- // selectField,
- // radioField,
- // disabledTextField,
- // radioFieldHorizontal,
- checkbutton2,
- // dropdownModifiedInput,
- // checkbuttonGroup,
- // timepicker,
- // datepicker
- });
- // ---------------------------------------------------------------------------------------------------------------------
- export const formMetaDataObj = {
- basicTextField,
- // styledTextField,
- // textareaField,
- // passwordField,
- // selectField,
- // radioField,
- // disabledTextField,
- // radioFieldHorizontal,
- checkbutton,
- // dropdownModifiedInput,
- // checkbuttonGroup,
- // timepicker,
- // datepicker,
- container
- };
- console.log(formMetaDataObj);
|