@worksafevictoria/wcl7.5 1.17.0-beta.10 → 1.17.0-beta.12

package/src/components/SubComponents/FormInstance/services/registry-factory.js

@@ -44,197 +44,197 @@ import { UnknownFormElement } from '../models/overrides/unknown'
 import { URLFormElement } from '../models/overrides/url'
 
 export class RegisterFactory {
-  static getFormIOElement(webformElement, formSettingsMeta, parent) {
+  static getFormIOElement(webformElement, formSettingsMeta, parent, tree) {
     const matchingElements = [
       {
         isApplicable: (webformElement, type) =>
           type === 'textfield' &&
           webformElement['#input_mask']?.includes(`'alias': 'currency`),
-        factory: CurrencyFormElement
+        factory: CurrencyFormElement,
       },
       {
         isApplicable: (webformElement, type) =>
           type === 'email' ||
           webformElement['#input_mask']?.includes(`'alias': 'email`),
-        factory: EmailFormElement
+        factory: EmailFormElement,
       },
       {
         isApplicable: 'tel',
-        factory: PhoneNumberFormElement
+        factory: PhoneNumberFormElement,
       },
       {
         isApplicable: 'select',
-        factory: SelectFormElement
+        factory: SelectFormElement,
       },
       {
         isApplicable: [
           'webform_select_other',
           'webform_checkboxes_other',
-          'webform_radios_other'
+          'webform_radios_other',
         ],
-        factory: OptionsOtherFormElement
+        factory: OptionsOtherFormElement,
       },
       {
         isApplicable: 'radios',
-        factory: RadioFormElement
+        factory: RadioFormElement,
       },
       {
         isApplicable: ['datelist'],
-        factory: DateListFormElement
+        factory: DateListFormElement,
       },
       {
         isApplicable: ['date', 'datetime'],
-        factory: DateFormElement
+        factory: DateFormElement,
       },
       {
         isApplicable: 'webform_time',
-        factory: TimeFormElement
+        factory: TimeFormElement,
       },
       {
         isApplicable: 'number',
-        factory: NumberFormElement
+        factory: NumberFormElement,
       },
       {
         isApplicable: 'range',
-        factory: RangeFormElement
+        factory: RangeFormElement,
       },
       {
         isApplicable: 'webform_likert',
-        factory: LikertFormElement
+        factory: LikertFormElement,
       },
       {
         isApplicable: 'tableselect',
-        factory: TableSelectFormElement
+        factory: TableSelectFormElement,
       },
       {
         isApplicable: 'webform_multiple',
-        factory: MultipleFormElement
+        factory: MultipleFormElement,
       },
       {
         isApplicable: 'webform_custom_composite',
-        factory: CustomCompositeFormElement
+        factory: CustomCompositeFormElement,
       },
       {
         isApplicable: 'webform_signature',
-        factory: SignatureFormElement
+        factory: SignatureFormElement,
       },
       {
         isApplicable: ['webform_message'],
-        factory: MessageFormElement
+        factory: MessageFormElement,
       },
       {
         isApplicable: [
           'webform_markup',
           'processed_text',
           'webform_horizontal_rule',
-          'label'
+          'label',
         ],
-        factory: MarkupFormElement
+        factory: MarkupFormElement,
       },
       {
         isApplicable: ['managed_file'],
-        factory: FileFormElement
+        factory: FileFormElement,
       },
       {
         isApplicable: ['textformat'],
-        factory: TextFormatFormElement
+        factory: TextFormatFormElement,
       },
       {
         isApplicable: 'url',
-        factory: URLFormElement
+        factory: URLFormElement,
       },
       {
         isApplicable: ['checkbox', 'webform_same'],
-        factory: CheckboxFormElement
+        factory: CheckboxFormElement,
       },
       {
         isApplicable: ['checkboxes'],
-        factory: CheckboxesFormElement
+        factory: CheckboxesFormElement,
       },
       {
         isApplicable: 'webform_autocomplete',
-        factory: AutoCompleteFormElement
+        factory: AutoCompleteFormElement,
       },
       {
         isApplicable: 'webform_more',
-        factory: MoreTextFormElement
+        factory: MoreTextFormElement,
       },
       {
         isApplicable: ['hidden'],
-        factory: HiddenFormElement
+        factory: HiddenFormElement,
       },
       {
         isApplicable: 'webform_address',
-        factory: AddresseFormElement
+        factory: AddresseFormElement,
       },
       {
         isApplicable: ['textfield'],
-        factory: TextFormElement
+        factory: TextFormElement,
       },
       {
         isApplicable: ['value', 'textarea'],
-        factory: TextAreaFormElement
+        factory: TextAreaFormElement,
       },
       {
         isApplicable: 'webform_rating',
-        factory: RatingFormElement
+        factory: RatingFormElement,
       },
       // Matt testing
       {
         isApplicable: 'webform_testing',
-        factory: TestingFormElement
+        factory: TestingFormElement,
       },
 
       // end Matt testing
       {
         isApplicable: 'webform_scale',
-        factory: ScaleFormElement
+        factory: ScaleFormElement,
       },
       {
         isApplicable: 'webform_actions',
-        factory: SubmitFormElement
+        factory: SubmitFormElement,
       },
       {
         isApplicable: (webformElement) =>
           webformElement['#webform_plugin_id'] === 'webform_wizard_page',
-        factory: PageFormElement
+        factory: PageFormElement,
       },
       {
         isApplicable: 'details',
-        factory: DetailFormElement
+        factory: DetailFormElement,
       },
       {
         isApplicable: 'container',
-        factory: ContainerFormElement
+        factory: ContainerFormElement,
       },
       {
         isApplicable: 'webform_table',
-        factory: TableFormElement
+        factory: TableFormElement,
       },
       {
         isApplicable: 'webform_table_row',
-        factory: TableRowFormElement
+        factory: TableRowFormElement,
       },
       {
         isApplicable: 'item',
-        factory: TwigFormElement
+        factory: TwigFormElement,
       },
       {
         isApplicable: ['fieldset', 'webform_section'],
-        factory: SectionFormElement
+        factory: SectionFormElement,
       },
       {
         isApplicable: 'webform_flexbox',
-        factory: FlexboxFormElement
+        factory: FlexboxFormElement,
       },
       {
         isApplicable: 'webform_email_confirm',
-        factory: EmailConfirmFormElement
+        factory: EmailConfirmFormElement,
       },
       {
         isApplicable: 'webform_codemirror',
-        factory: CodeFormElement
-      }
+        factory: CodeFormElement,
+      },
     ]
 
     const matchingElement = matchingElements.find((item) => {
@@ -252,7 +252,7 @@ export class RegisterFactory {
     const ElementFactory = matchingElement?.factory
     const moreElement = RegisterFactory.getMoreTextInstance(
       webformElement,
-      parent
+      parent,
     )
     const elementInstance = matchingElement
       ? new ElementFactory(webformElement, parent, moreElement)
@@ -263,6 +263,8 @@ export class RegisterFactory {
     }
 
     elementInstance.setFormSettingsMeta(formSettingsMeta)
+    // Set the tree for logic parsing
+    elementInstance.tree = tree
     return elementInstance
   }
 
@@ -274,9 +276,9 @@ export class RegisterFactory {
           ...webFormElement,
           '#type': 'webform_more',
           '#webform_id': 'webform_more' + webFormElement['#webform_id'],
-          '#webform_key': 'webform_more' + webFormElement['#webform_key']
+          '#webform_key': 'webform_more' + webFormElement['#webform_key'],
         },
-        parent
+        parent,
       )
     }
     return moreElement

package/src/components/SubComponents/FormInstance/stories/mocks/checkboxesother.json

@@ -184,14 +184,5 @@
     "#ajax_processed": false,
     "#sorted": true,
     "#after_build_done": true
-  },
-  "#tree": false,
-  "#weight": 0.001,
-  "#processed": false,
-  "#required": false,
-  "#title_display": "before",
-  "#description_display": "after",
-  "#errors": null,
-  "#id": "edit-elements",
-  "#sorted": true
+  }
 }

package/src/components/SubComponents/FormInstance/stories/mocks/emailconfirm.json

@@ -97,14 +97,5 @@
     },
     "#sorted": true,
     "#after_build_done": true
-  },
-  "#tree": false,
-  "#weight": 0.001,
-  "#processed": false,
-  "#required": false,
-  "#title_display": "before",
-  "#description_display": "after",
-  "#errors": null,
-  "#id": "edit-elements",
-  "#sorted": true
+  }
 }

package/src/components/SubComponents/FormInstance/stories/mocks/jahd.json

@@ -1351,9 +1351,5 @@
     "#title_display": "before",
     "#description_display": "after",
     "#id": "edit-enter-details"
-  },
-  "#required": false,
-  "#title_display": "before",
-  "#description_display": "after",
-  "#id": "kitchen_sink_formio_v1"
+  }
 }

package/src/components/SubComponents/FormInstance/stories/mocks/quad.json

@@ -241,9 +241,5 @@
     "#title_display": "before",
     "#description_display": "after",
     "#id": "edit-results"
-  },
-  "#required": false,
-  "#title_display": "before",
-  "#description_display": "after",
-  "#id": "edit-elements"
+  }
 }

package/src/components/SubComponents/FormInstance/stories/mocks/radiosother.json

@@ -164,13 +164,5 @@
     "#ajax_processed": false,
     "#sorted": true,
     "#after_build_done": true
-  },
-  "#tree": false,
-  "#processed": false,
-  "#required": false,
-  "#title_display": "before",
-  "#description_display": "after",
-  "#errors": null,
-  "#id": "edit-elements",
-  "#sorted": true
+  }
 }

package/src/components/SubComponents/FormInstance/stories/mocks/sameas.json

@@ -58,9 +58,5 @@
     "#name": "samea",
     "#value": 0,
     "#checked": false
-  },
-  "#required": false,
-  "#title_display": "before",
-  "#description_display": "after",
-  "#id": "edit-elements"
+  }
 }

package/src/components/SubComponents/FormInstance/stories/mocks/selectother.json

@@ -102,14 +102,5 @@
     "#ajax_processed": false,
     "#sorted": true,
     "#after_build_done": true
-  },
-  "#tree": false,
-  "#weight": 0.001,
-  "#processed": false,
-  "#required": false,
-  "#title_display": "before",
-  "#description_display": "after",
-  "#errors": null,
-  "#id": "edit-elements",
-  "#sorted": true
+  }
 }

package/src/components/SubComponents/FormInstance/stories/mocks/styles.json

@@ -73,9 +73,5 @@
     "#id": "edit-element-without-styles",
     "#name": "element_without_styles",
     "#value": ""
-  },
-  "#required": false,
-  "#title_display": "before",
-  "#description_display": "after",
-  "#id": "edit-elements"
+  }
 }

package/src/components/SubComponents/FormInstance/stories/mocks/table-select.json

@@ -454,19 +454,5 @@
     },
     "#sorted": true,
     "#after_build_done": true
-  },
-  "#tree": false,
-  "#parents": ["elements"],
-  "#array_parents": ["elements"],
-  "#weight": 0.001,
-  "#processed": false,
-  "#required": false,
-  "#attributes": {
-    "data-drupal-selector": "edit-elements"
-  },
-  "#title_display": "before",
-  "#description_display": "after",
-  "#errors": null,
-  "#id": "edit-elements",
-  "#sorted": true
+  }
 }

package/src/components/SubComponents/FormInstance/stories/mocks/token.json

@@ -252,9 +252,5 @@
         "#name": "tokens"
       }
     }
-  },
-  "#required": false,
-  "#title_display": "before",
-  "#description_display": "after",
-  "#id": "edit-elements"
+  }
 }

package/src/components/SubComponents/FormInstance/stories/mocks/twig.json

@@ -138,17 +138,5 @@
     },
     "#sorted": true,
     "#after_build_done": true
-  },
-  "#tree": false,
-  "#weight": 0.001,
-  "#processed": false,
-  "#required": false,
-  "#attributes": {
-    "data-drupal-selector": "edit-elements"
-  },
-  "#title_display": "before",
-  "#description_display": "after",
-  "#errors": null,
-  "#id": "edit-elements",
-  "#sorted": true
+  }
 }

package/src/components/SubComponents/FormInstance/stories/mocks/wizard.json

@@ -337,17 +337,5 @@
     },
     "#theme": "webform_actions",
     "#after_build_done": true
-  },
-  "#tree": false,
-  "#weight": 0.002,
-  "#processed": false,
-  "#required": false,
-  "#attributes": {
-    "data-drupal-selector": "edit-elements"
-  },
-  "#title_display": "before",
-  "#description_display": "after",
-  "#errors": null,
-  "#id": "edit-elements",
-  "#sorted": true
+  }
 }

package/src/components/SubComponents/FormInstance/tests/form-test-utils.js

@@ -5,17 +5,20 @@ import { FormSubmitParser } from '../services/form-submit-parser'
 export class FormTestUtils {
   static initialiseParser = () => {
     const parser = new FormRenderParser()
+
     parser.initialise('', false)
     let counter = 0
     jest.spyOn(formUtils, 'generateUniqueId').mockImplementation(() => {
       counter += 0
       return counter
     })
+
     return parser
   }
 
   static getParsedComponentsFromJSON = (json) => {
     const formIOform = FormTestUtils.getParsedFormFromJSON(json)
+    //console.log('🚀 ~ FormTestUtils ~ formIOform:', formIOform)
     const components = JSON.parse(
       JSON.stringify(formIOform.definition.components),
     )

package/src/components/SubComponents/FormInstance/tests/form.test.js

@@ -10,9 +10,10 @@ describe(`Form parser`, () => {
 
   it(`should render a multi page form`, () => {
     const form = getParsedComponentsFromJSON(wizard)
+    console.log('🚀 ~ form:', form)
     expect(form).toEqual({
       display: 'wizard',
-      id: 'edit-elements'
+      // id: 'edit-elements',
     })
   })
 })

package/src/components/SubComponents/FormInstance/tests/radiosother.test.js

@@ -5,6 +5,7 @@ const testComponent = 'radio other'
 describe(`Form ${testComponent} parser`, () => {
   it(`should render a ${testComponent} component`, () => {
     const components = FormTestUtils.getParsedComponentsFromJSON(json)
+    console.log('🚀 ~ components:', JSON.stringify(components))
     expect(components).toEqual(
       FormTestUtils.getComparisonJSON([
         {
@@ -32,11 +33,11 @@ describe(`Form ${testComponent} parser`, () => {
                   values: [
                     { label: 'Friday', value: 'Friday' },
                     { label: 'Saturday', value: 'Saturday' },
-                    { label: 'Other…', value: '_other_' }
-                  ]
-                }
+                    { label: 'Other…', value: '_other_' },
+                  ],
+                },
               ],
-              width: 12
+              width: 12,
             },
             {
               components: [
@@ -54,11 +55,11 @@ describe(`Form ${testComponent} parser`, () => {
                   mask: false,
                   placeholder: 'Enter other…',
                   type: 'textfield',
-                  validate: { maxLength: 255, required: false }
-                }
+                  validate: { maxLength: 255, required: false },
+                },
               ],
-              width: 12
-            }
+              width: 12,
+            },
           ],
           customClass: 'custom-formio-1',
           defaultValue: { other: null, radios: null },
@@ -71,9 +72,9 @@ describe(`Form ${testComponent} parser`, () => {
           labelPosition: 'top',
           mask: false,
           type: 'columns',
-          validate: {}
-        }
-      ])
+          validate: {},
+        },
+      ]),
     )
   })
 })

package/src/components/SubComponents/FormInstance/tests/rule-disabled.test.js

@@ -22,7 +22,7 @@ describe(`Form ${testComponent} parser`, () => {
           placeholder:
             "type 'disable' to disable textfield2 and 'ro' to make textfield3 readonly",
           type: 'textfield',
-          validate: { maxLength: 255, required: false }
+          validate: { maxLength: 255, required: false },
         },
         {
           attributes: { counter: 2 },
@@ -42,36 +42,20 @@ describe(`Form ${testComponent} parser`, () => {
                   name: 0,
                   property: { label: 0, type: 'boolean', value: 'disabled' },
                   state: true,
-                  type: 'property'
-                }
+                  type: 'property',
+                },
               ],
               defaultProps: { disabled: false },
               name: 0,
               trigger: {
                 javascript: "result = (Boolean(data.textfield1 === 'disable'))",
-                type: 'javascript'
-              }
+                type: 'javascript',
+              },
             },
-            {
-              actions: [
-                {
-                  name: 0,
-                  property: { label: 0, type: 'boolean', value: 'disabled' },
-                  state: true,
-                  type: 'property'
-                }
-              ],
-              defaultProps: { disabled: false },
-              name: 0,
-              trigger: {
-                javascript: "result = (Boolean(data.textfield1 === 'disable'))",
-                type: 'javascript'
-              }
-            }
           ],
           mask: false,
           type: 'textfield',
-          validate: { maxLength: 255, required: false }
+          validate: { maxLength: 255, required: false },
         },
         {
           attributes: { counter: 3 },
@@ -91,38 +75,22 @@ describe(`Form ${testComponent} parser`, () => {
                   name: 0,
                   property: { label: 0, type: 'boolean', value: 'disabled' },
                   state: true,
-                  type: 'property'
-                }
+                  type: 'property',
+                },
               ],
               defaultProps: { disabled: false },
               name: 0,
               trigger: {
                 javascript: "result = (Boolean(data.textfield1 === 'ro'))",
-                type: 'javascript'
-              }
+                type: 'javascript',
+              },
             },
-            {
-              actions: [
-                {
-                  name: 0,
-                  property: { label: 0, type: 'boolean', value: 'disabled' },
-                  state: true,
-                  type: 'property'
-                }
-              ],
-              defaultProps: { disabled: false },
-              name: 0,
-              trigger: {
-                javascript: "result = (Boolean(data.textfield1 === 'ro'))",
-                type: 'javascript'
-              }
-            }
           ],
           mask: false,
           type: 'textfield',
-          validate: { maxLength: 255, required: false }
-        }
-      ])
+          validate: { maxLength: 255, required: false },
+        },
+      ]),
     )
   })
 })