testfields.v1.ts 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. // TESTS: Generation of Modeled MetaData using field models
  2. import { ValueTransformer } from './../dynaform/interfaces';
  3. import * as fmd from './../dynaform/models'; // fmd = Form Meta Data
  4. // ---------------------------------------------------------------------------------------------------------------------
  5. // Native
  6. const basicTextField = new fmd.TextField({
  7. name: 'basicTextField',
  8. label: 'Field One',
  9. placeholder: 'Type a value here'
  10. });
  11. const styledTextField = new fmd.TextField({
  12. name: 'styledTextField',
  13. placeholder: 'With a DOM id and CSS classes applied',
  14. class: ['red', 'bgPaleBlue'],
  15. id: 'yoyo'
  16. });
  17. const textareaField = new fmd.TextareaField({
  18. name: 'textareaField',
  19. placeholder: 'Type your long-winded comments here'
  20. });
  21. const passwordField = new fmd.PasswordField({
  22. name: 'passwordField',
  23. placeholder: 'It\'s a secret'
  24. });
  25. const selectField = new fmd.SelectField({
  26. name: 'selectField',
  27. options: ['', 'Apples', 'Oranges', 'Pears', 'Gorgonzola']
  28. });
  29. const radioField = new fmd.RadioField({
  30. name: 'radioField',
  31. options: ['Tea', 'Coffee', 'Cocoa', 'Yerba Maté']
  32. });
  33. const disabledTextField = new fmd.TextField({
  34. name: 'disabledTextField',
  35. placeholder: 'You can\'t touch this',
  36. isDisabled: true
  37. });
  38. const radioFieldHorizontal = new fmd.RadioField({
  39. name: 'radioFieldHorizontal',
  40. options: ['Fish', 'Fowl', 'Neither'],
  41. horizontal: true
  42. });
  43. // ---------------------------------------------------------------------------------------------------------------------
  44. // Custom
  45. const checkbutton = new fmd.CheckbuttonField({
  46. name: 'checkbutton',
  47. value: '456'
  48. });
  49. const checkbutton2 = new fmd.CheckbuttonField({
  50. name: 'checkbutton2',
  51. value: 'Yowsa'
  52. });
  53. const modifiers = ['Matches', 'Starts With', 'Contains'];
  54. const transformerFunctions: ValueTransformer = {
  55. inputFn: val => {
  56. let modifier = 'Starts With';
  57. if (/^%.*?%$/.test(val)) {
  58. modifier = 'Contains';
  59. } else if (/^[^%].*?[^%]$/.test(val)) {
  60. modifier = 'Matches';
  61. } else if (/^%.*/.test(val)) {
  62. modifier = 'Starts With';
  63. }
  64. const transformedVal = val.replace(/%/g, '').trim();
  65. return { modifier: modifier, value: transformedVal };
  66. },
  67. outputFn: (mod, val) => {
  68. let transformedValue;
  69. switch (mod) {
  70. case 'Starts With':
  71. transformedValue = `%${val}`;
  72. break;
  73. case 'Contains':
  74. transformedValue = `%${val}%`;
  75. break;
  76. case 'Matches':
  77. default:
  78. transformedValue = val;
  79. break;
  80. }
  81. return transformedValue;
  82. }
  83. };
  84. const dropdownModifiedInput = new fmd.DropdownModifiedInputField({
  85. name: 'dropdownModifiedInput',
  86. value: 'lovely',
  87. modifiers,
  88. transform: transformerFunctions
  89. });
  90. const checkbuttonGroup = new fmd.CheckbuttonGroup({
  91. name: 'checkbuttonGroup',
  92. firstEnablesRest: true,
  93. meta: [{name: 'iMaskTheOthers'}, {name: 'groupMemberTwo'}, {name: 'groupMemberThree'}]
  94. });
  95. // ---------------------------------------------------------------------------------------------------------------------
  96. // Kendo
  97. const timepicker = new fmd.TimepickerField({
  98. name: 'timepicker'
  99. });
  100. const datepicker = new fmd.DatepickerField({
  101. name: 'datepicker'
  102. });
  103. // ---------------------------------------------------------------------------------------------------------------------
  104. // Container
  105. const container = new fmd.Container({
  106. // basicTextField,
  107. // styledTextField,
  108. // textareaField,
  109. // passwordField,
  110. // selectField,
  111. // radioField,
  112. // disabledTextField,
  113. // radioFieldHorizontal,
  114. checkbutton2,
  115. // dropdownModifiedInput,
  116. // checkbuttonGroup,
  117. // timepicker,
  118. // datepicker
  119. });
  120. // ---------------------------------------------------------------------------------------------------------------------
  121. export const formMetaDataObj = {
  122. basicTextField,
  123. // styledTextField,
  124. // textareaField,
  125. // passwordField,
  126. // selectField,
  127. // radioField,
  128. // disabledTextField,
  129. // radioFieldHorizontal,
  130. checkbutton,
  131. // dropdownModifiedInput,
  132. // checkbuttonGroup,
  133. // timepicker,
  134. // datepicker,
  135. container
  136. };
  137. console.log(formMetaDataObj);