@formio/js 5.2.4-rc.0 → 5.2.5

package/lib/mjs/components/file/editForm/File.edit.file.js

@@ -15,10 +15,10 @@ export default [
             custom() {
                 return _.map(Formio.Providers.getProviders('storage'), (storage, key) => ({
                     label: storage.title,
-                    value: key,
+                    value: key
                 }));
-            },
-        },
+            }
+        }
     },
     {
         type: 'checkbox',
@@ -27,12 +27,7 @@ export default [
         label: 'Use the S3 Multipart Upload API',
         tooltip: "The <a href='https://docs.aws.amazon.com/AmazonS3/latest/userguide/mpuoverview.html'>S3 Multipart Upload API</a> is designed to improve the upload experience for larger objects (> 5GB).",
         conditional: {
-            json: {
-                '===': [
-                    { var: 'data.storage' },
-                    's3',
-                ],
-            },
+            json: { '===': [{ var: 'data.storage' }, 's3'] }
         },
     },
     {
@@ -62,12 +57,7 @@ export default [
             },
         ],
         conditional: {
-            json: {
-                '===': [
-                    { var: 'data.useMultipartUpload' },
-                    true,
-                ],
-            },
+            json: { '===': [{ var: 'data.useMultipartUpload' }, true] }
         },
     },
     {
@@ -79,13 +69,8 @@ export default [
         placeholder: 'Enter the url to post the files to.',
         tooltip: "See <a href='https://github.com/danialfarid/ng-file-upload#server-side' target='_blank'>https://github.com/danialfarid/ng-file-upload#server-side</a> for how to set up the server.",
         conditional: {
-            json: {
-                '===': [
-                    { var: 'data.storage' },
-                    'url',
-                ],
-            },
-        },
+            json: { '===': [{ var: 'data.storage' }, 'url'] }
+        }
     },
     {
         type: 'textfield',
@@ -98,14 +83,12 @@ export default [
             json: {
                 in: [
                     {
-                        var: 'data.storage',
+                        var: 'data.storage'
                     },
-                    [
-                        'indexeddb',
-                    ],
+                    ['indexeddb']
                 ],
-            },
-        },
+            }
+        }
     },
     {
         type: 'textfield',
@@ -118,14 +101,12 @@ export default [
             json: {
                 in: [
                     {
-                        var: 'data.storage',
+                        var: 'data.storage'
                     },
-                    [
-                        'indexeddb',
-                    ],
+                    ['indexeddb']
                 ],
-            },
-        },
+            }
+        }
     },
     {
         type: 'textarea',
@@ -145,14 +126,11 @@ export default [
     }`,
         conditional: {
             json: {
-                '===': [
-                    {
-                        var: 'data.storage',
-                    },
-                    'url',
-                ],
-            },
-        },
+                '===': [{
+                        var: 'data.storage'
+                    }, 'url']
+            }
+        }
     },
     {
         type: 'textfield',
@@ -164,16 +142,12 @@ export default [
         tooltip: 'Key name that you would like to modify for the file while calling API request.',
         conditional: {
             json: {
-                '===': [
-                    {
-                        var: 'data.storage',
-                    },
-                    'url',
-                ],
-            },
-        },
-    },
-    {
+                '===': [{
+                        var: 'data.storage'
+                    }, 'url']
+            }
+        }
+    }, {
         type: 'textfield',
         input: true,
         key: 'dir',
@@ -208,8 +182,7 @@ export default [
                             type: 'string',
                         },
                         text: '(optional) Enter an ID of the folder for the files',
-                    },
-                    {
+                    }, {
                         name: 'Change label',
                         type: 'property',
                         property: {
@@ -220,8 +193,7 @@ export default [
                         text: 'Folder ID',
                     },
                 ],
-            },
-            {
+            }, {
                 name: 'Change to Directory',
                 trigger: {
                     type: 'simple',
@@ -247,8 +219,7 @@ export default [
                             type: 'string',
                         },
                         text: '(optional) Enter a directory for the files',
-                    },
-                    {
+                    }, {
                         name: 'Change label',
                         type: 'property',
                         property: {
@@ -269,7 +240,7 @@ export default [
         label: 'File Name Template',
         placeholder: '(optional) { {name} }-{ {guid} }',
         tooltip: 'Specify template for name of uploaded file(s). Regular template variables are available (`data`, `component`, `user`, `value`, `moment` etc.), also `fileName`, `guid` variables are available. `guid` part must be present, if not found in template, will be added at the end.',
-        weight: 25,
+        weight: 25
     },
     {
         type: 'checkbox',
@@ -277,7 +248,7 @@ export default [
         key: 'image',
         label: 'Display as image(s)',
         tooltip: 'Instead of a list of linked files, images will be rendered in the view.',
-        weight: 30,
+        weight: 30
     },
     {
         type: 'checkbox',
@@ -295,13 +266,8 @@ export default [
         tooltip: 'When this is checked, the file download will send a POST request to the download URL with the x-jwt-token header. This will allow your endpoint to create a Private download system.',
         weight: 31,
         conditional: {
-            json: {
-                '===': [
-                    { var: 'data.storage' },
-                    'url',
-                ],
-            },
-        },
+            json: { '===': [{ var: 'data.storage' }, 'url'] }
+        }
     },
     {
         type: 'textfield',
@@ -312,13 +278,8 @@ export default [
         tooltip: 'The image size for previewing images.',
         weight: 40,
         conditional: {
-            json: {
-                '==': [
-                    { var: 'data.image' },
-                    true,
-                ],
-            },
-        },
+            json: { '==': [{ var: 'data.image' }, true] }
+        }
     },
     {
         type: 'checkbox',
@@ -326,7 +287,7 @@ export default [
         key: 'webcam',
         label: 'Enable web camera',
         tooltip: 'This will allow using an attached camera to directly take a picture instead of uploading an existing file.',
-        weight: 32,
+        weight: 32
     },
     {
         type: 'textfield',
@@ -337,13 +298,8 @@ export default [
         tooltip: 'The webcam size for taking pictures.',
         weight: 38,
         conditional: {
-            json: {
-                '==': [
-                    { var: 'data.webcam' },
-                    true,
-                ],
-            },
-        },
+            json: { '==': [{ var: 'data.webcam' }, true] }
+        }
     },
     {
         type: 'radio',
@@ -357,17 +313,17 @@ export default [
         values: [
             {
                 label: 'Disabled',
-                value: 'false',
+                value: 'false'
             },
             {
                 label: 'Environment (rear camera)',
-                value: 'environment',
+                value: 'environment'
             },
             {
                 label: 'User (front camera)',
-                value: 'user',
-            },
-        ],
+                value: 'user'
+            }
+        ]
     },
     {
         type: 'datagrid',
@@ -381,15 +337,15 @@ export default [
                 label: 'Label',
                 key: 'label',
                 input: true,
-                type: 'textfield',
+                type: 'textfield'
             },
             {
                 label: 'Value',
                 key: 'value',
                 input: true,
-                type: 'textfield',
-            },
-        ],
+                type: 'textfield'
+            }
+        ]
     },
     {
         type: 'textfield',
@@ -397,8 +353,8 @@ export default [
         key: 'filePattern',
         label: 'File Pattern',
         placeholder: '.jpg,video/*,application/pdf',
-        tooltip: "See <a href='https://github.com/danialfarid/ng-file-upload#full-reference' target='_blank'>https://github.com/danialfarid/ng-file-upload#full-reference</a> for how to specify file patterns.",
-        weight: 50,
+        tooltip: 'See <a href=\'https://github.com/danialfarid/ng-file-upload#full-reference\' target=\'_blank\'>https://github.com/danialfarid/ng-file-upload#full-reference</a> for how to specify file patterns.',
+        weight: 50
     },
     {
         type: 'textfield',
@@ -406,8 +362,8 @@ export default [
         key: 'fileMinSize',
         label: 'File Minimum Size',
         placeholder: '1MB',
-        tooltip: "See <a href='https://github.com/danialfarid/ng-file-upload#full-reference' target='_blank'>https://github.com/danialfarid/ng-file-upload#full-reference</a> for how to specify file sizes.",
-        weight: 60,
+        tooltip: 'See <a href=\'https://github.com/danialfarid/ng-file-upload#full-reference\' target=\'_blank\'>https://github.com/danialfarid/ng-file-upload#full-reference</a> for how to specify file sizes.',
+        weight: 60
     },
     {
         type: 'textfield',
@@ -415,7 +371,7 @@ export default [
         key: 'fileMaxSize',
         label: 'File Maximum Size',
         placeholder: '10MB',
-        tooltip: "See <a href='https://github.com/danialfarid/ng-file-upload#full-reference' target='_blank'>https://github.com/danialfarid/ng-file-upload#full-reference</a> for how to specify file sizes.",
-        weight: 70,
+        tooltip: 'See <a href=\'https://github.com/danialfarid/ng-file-upload#full-reference\' target=\'_blank\'>https://github.com/danialfarid/ng-file-upload#full-reference</a> for how to specify file sizes.',
+        weight: 70
     },
 ];

package/lib/mjs/components/file/editForm/File.edit.validation.js

@@ -1,10 +1,10 @@
 export default [
     {
         key: 'unique',
-        ignore: true,
+        ignore: true
     },
     {
         key: 'validateOn',
-        ignore: true,
+        ignore: true
     },
 ];

package/lib/mjs/components/form/Form.form.js

@@ -11,19 +11,19 @@ export default function (...extend) {
     return nestedComponentForm([
         {
             key: 'display',
-            components: FormEditDisplay,
+            components: FormEditDisplay
         },
         {
             label: 'Form',
             key: 'form',
             weight: 10,
-            components: FormEditForm,
+            components: FormEditForm
         },
         {
             label: 'Data',
             key: 'data',
             weight: 10,
-            components: FormEditData,
+            components: FormEditData
         },
     ], ...extend);
 }

package/lib/mjs/components/form/Form.js

@@ -1,3 +1,4 @@
+/* eslint-disable max-statements */
 import _ from 'lodash';
 import Component from '../_classes/component/Component';
 import ComponentModal from '../_classes/componentModal/ComponentModal';
@@ -25,20 +26,18 @@ export default class FormComponent extends Component {
             group: 'premium',
             documentation: '/userguide/form-building/premium-components#nested-form',
             weight: 110,
-            schema: FormComponent.schema(),
+            schema: FormComponent.schema()
         };
     }
     static savedValueTypes() {
-        return [
-            componentValueTypes.object,
-        ];
+        return [componentValueTypes.object];
     }
     init() {
         super.init();
         this.formObj = {
             display: this.component.display,
             settings: this.component.settings,
-            components: this.component.components,
+            components: this.component.components
         };
         this.valueChanged = false;
         this.subForm = null;
@@ -90,11 +89,9 @@ export default class FormComponent extends Component {
             delete this.component.formRevision;
         }
         // Add revision version if set.
-        if (this.component.revision ||
-            this.component.revision === 0 ||
-            this.component.formRevision ||
-            this.component.formRevision === 0 ||
-            this.component.revisionId) {
+        if (this.component.revision || this.component.revision === 0 ||
+            this.component.formRevision || this.component.formRevision === 0
+            || this.component.revisionId) {
             this.setFormRevision(this.component.revisionId || this.component.revision || this.component.formRevision);
         }
         return this.createSubForm();
@@ -143,6 +140,7 @@ export default class FormComponent extends Component {
         }
         return this.subForm.getComponent(path);
     }
+    /* eslint-disable max-statements */
     getSubOptions(options = {}) {
         options.events = this.createEmitter();
         // Make sure to not show the submit button in wizards in the nested forms.
@@ -213,6 +211,7 @@ export default class FormComponent extends Component {
         options.parent = this;
         return options;
     }
+    /* eslint-enable max-statements */
     render() {
         if (this.builderMode) {
             return super.render(this.component.label || 'Nested form');
@@ -237,27 +236,27 @@ export default class FormComponent extends Component {
             return 'No data provided';
         }
         if (options?.email) {
-            let result = `
+            let result = (`
         <table border="1" style="width:100%">
           <tbody>
-      `;
+      `);
             this.everyComponent((component) => {
                 if (component.isInputComponent && component.visible && !component.skipInEmail) {
-                    result += `
+                    result += (`
             <tr>
               <th style="padding: 5px 10px;">${component.label}</th>
               <td style="width:100%;padding:5px 10px;">${component.getView(component.dataValue, options)}</td>
             </tr>
-          `;
+          `);
                 }
             }, {
                 ...options,
                 fromRoot: true,
             });
-            result += `
+            result += (`
           </tbody>
         </table>
-      `;
+      `);
             return result;
         }
         if (_.isEmpty(value)) {
@@ -270,7 +269,8 @@ export default class FormComponent extends Component {
         if (this.builderMode) {
             return super.attach(element);
         }
-        return super.attach(element).then(() => {
+        return super.attach(element)
+            .then(() => {
             if (this.isSubFormLazyLoad() && !this.hasLoadedForm && !this.subFormLoading) {
                 this.createSubForm(true);
             }
@@ -281,7 +281,7 @@ export default class FormComponent extends Component {
                 this.empty(element);
                 if (this.options.builder) {
                     this.setContent(element, this.ce('div', {
-                        class: 'text-muted text-center p-2',
+                        class: 'text-muted text-center p-2'
                     }, this.text(this.formObj.title)));
                     return;
                 }
@@ -289,19 +289,16 @@ export default class FormComponent extends Component {
                 const postAttach = () => {
                     if (!this.builderMode && this.component.modalEdit) {
                         const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;
-                        const currentValue = modalShouldBeOpened
-                            ? this.componentModal.currentValue
-                            : this.dataValue;
+                        const currentValue = modalShouldBeOpened ? this.componentModal.currentValue : this.dataValue;
                         this.componentModal = new ComponentModal(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);
-                        this.subForm.element =
-                            this.componentModal.refs.componentContent || this.subForm.element;
+                        this.subForm.element = this.componentModal.refs.componentContent || this.subForm.element;
                         this.setOpenModalElement();
                     }
                     this.calculateValue();
                 };
                 if (this.subForm) {
                     if (this.isNestedWizard) {
-                        element = this.root.element;
+                        element = this.root?.element;
                     }
                     return this.subForm.attach(element).then(() => {
                         this.valueChanged = this.hasSetValue;
@@ -331,24 +328,24 @@ export default class FormComponent extends Component {
         return this._currentForm;
     }
     get hasLoadedForm() {
-        return (this.formObj &&
-            this.formObj.components &&
-            Array.isArray(this.formObj.components) &&
-            this.formObj.components.length);
+        return this.formObj
+            && this.formObj.components
+            && Array.isArray(this.formObj.components)
+            && this.formObj.components.length;
     }
     set currentForm(instance) {
         this._currentForm = instance;
         if (!this.subForm) {
             return;
         }
-        this.subForm.getComponents().forEach((component) => {
+        this.subForm.getComponents().forEach(component => {
             component.currentForm = this;
         });
     }
     get isRevisionChanged() {
-        return (_.isNumber(this.subFormRevision) &&
-            _.isNumber(this.formObj._vid) &&
-            this.formObj._vid !== this.subFormRevision);
+        return _.isNumber(this.subFormRevision)
+            && _.isNumber(this.formObj._vid)
+            && this.formObj._vid !== this.subFormRevision;
     }
     get subFormData() {
         return this.dataValue?.data || {};
@@ -383,7 +380,7 @@ export default class FormComponent extends Component {
     }
     updateSubWizards(subForm) {
         if (this.isNestedWizard && this.root?.subWizards && subForm?._form?.display === 'wizard') {
-            const existedForm = this.root.subWizards.findIndex((form) => form.component.form === this.component.form);
+            const existedForm = this.root.subWizards.findIndex(form => form.component.form === this.component.form);
             if (existedForm !== -1) {
                 this.root.subWizards[existedForm] = this;
             }
@@ -408,8 +405,7 @@ export default class FormComponent extends Component {
      * @returns {*} - The subform instance.
      */
     createSubForm(fromAttach, beforeSubmit) {
-        this.subFormReady = this.loadSubForm(fromAttach, beforeSubmit)
-            .then((form) => {
+        this.subFormReady = this.loadSubForm(fromAttach, beforeSubmit).then((form) => {
             if (!form) {
                 return;
             }
@@ -422,8 +418,7 @@ export default class FormComponent extends Component {
                 this.subForm.destroy();
             }
             // Render the form.
-            return new Form(form, this.getSubOptions()).ready
-                .then((instance) => {
+            return (new Form(form, this.getSubOptions())).ready.then((instance) => {
                 this.subForm = instance;
                 this.subForm.currentForm = this;
                 this.subForm.parentVisible = this.visible;
@@ -433,8 +428,8 @@ export default class FormComponent extends Component {
                 this.subForm.on('change', () => {
                     if (this.subForm && !this.shouldConditionallyClear()) {
                         this.dataValue = this.subForm.getValue();
-                        this.triggerChange({
-                            noEmit: true,
+                        this.triggerChange?.({
+                            noEmit: true
                         });
                     }
                 });
@@ -446,12 +441,10 @@ export default class FormComponent extends Component {
                 this.valueChanged = this.hasSetValue;
                 this.onChange();
                 return this.subForm;
-            })
-                .catch((err) => {
+            }).catch((err) => {
                 console.log(err);
             });
-        })
-            .then((subForm) => {
+        }).then((subForm) => {
             this.updateSubWizards(subForm);
             return subForm;
         });
@@ -473,17 +466,11 @@ export default class FormComponent extends Component {
      */
     loadSubForm(fromAttach, beforeSubmit) {
         const loadHiddenForm = beforeSubmit && !this.component.clearOnHide;
-        if (this.builderMode ||
-            (this.conditionallyHidden() && !loadHiddenForm) ||
-            (this.isSubFormLazyLoad() && !fromAttach)) {
+        if (this.builderMode || (this.conditionallyHidden() && !loadHiddenForm) || (this.isSubFormLazyLoad() && !fromAttach)) {
             return Promise.resolve();
         }
-        if (this.hasLoadedForm &&
-            !this.isRevisionChanged &&
-            !(this.options.pdf &&
-                this.component?.useOriginalRevision &&
-                _.isNull(this.subForm) &&
-                !this.subFormLoading)) {
+        if (this.hasLoadedForm && !this.isRevisionChanged &&
+            !(this.options.pdf && this.component?.useOriginalRevision && _.isNull(this.subForm) && !this.subFormLoading)) {
             // Pass config down to sub forms.
             if (this.root && this.root.form && this.root.form.config && !this.formObj.config) {
                 this.formObj.config = this.root.form.config;
@@ -498,8 +485,7 @@ export default class FormComponent extends Component {
                     project: this.root.formio.projectUrl,
                 }
                 : {};
-            return new Formio(this.formSrc, options)
-                .loadForm({ params: { live: 1 } })
+            return (new Formio(this.formSrc, options)).loadForm({ params: { live: 1 } })
                 .then((formObj) => {
                 this.formObj = formObj;
                 if (this.options.pdf && this.component.useOriginalRevision) {
@@ -554,7 +540,8 @@ export default class FormComponent extends Component {
     get shouldSubmit() {
         return (this.subFormReady &&
             (!this.component.hasOwnProperty('reference') || this.component.reference) &&
-            !this.shouldConditionallyClear());
+            !this.shouldConditionallyClear() &&
+            !(this.component.hidden && this.component.clearOnHide));
     }
     /**
      * Returns the data for the subform.
@@ -581,15 +568,12 @@ export default class FormComponent extends Component {
                 }
                 this.subForm.nosubmit = false;
                 this.subForm.submitted = true;
-                return this.subForm
-                    .submitForm({}, true)
-                    .then((result) => {
+                return this.subForm.submitForm({}, true).then(result => {
                     this.subForm.loading = false;
                     this.subForm.showAllErrors = false;
                     this.dataValue = result.submission;
                     return this.dataValue;
-                })
-                    .catch((err) => {
+                }).catch(err => {
                     this.subForm.showAllErrors = true;
                     this.subForm.onSubmissionError(err);
                     return Promise.reject(err);
@@ -655,10 +639,10 @@ export default class FormComponent extends Component {
         this.valueChanged = true;
         if (this.subForm) {
             const revisionPath = submission._frid ? '_frid' : '_vid';
-            const shouldLoadOriginalRevision = this.useOriginalRevision &&
-                (_.isNumber(submission[revisionPath]) || _.isNumber(submission._fvid)) &&
-                _.isNumber(this.subForm.form?.[revisionPath]) &&
-                submission._fvid !== this.subForm.form[revisionPath];
+            const shouldLoadOriginalRevision = this.useOriginalRevision
+                && (_.isNumber(submission[revisionPath]) || _.isNumber(submission._fvid))
+                && _.isNumber(this.subForm.form?.[revisionPath])
+                && submission._fvid !== this.subForm.form[revisionPath];
             if (shouldLoadOriginalRevision) {
                 this.setFormRevision(submission._frid || submission._fvid);
                 this.createSubForm().then(() => {
@@ -672,7 +656,10 @@ export default class FormComponent extends Component {
         return changed;
     }
     setSubFormValue(submission, flags) {
-        const shouldLoadSubmissionById = submission && submission._id && this.subForm.formio && _.isEmpty(submission.data);
+        const shouldLoadSubmissionById = submission
+            && submission._id
+            && this.subForm.formio
+            && _.isEmpty(submission.data);
         const shouldLoadDraftById = this.options.saveDraft && _.isEmpty(submission.data) && _.get(this.subForm, 'submission._id');
         if (shouldLoadSubmissionById || shouldLoadDraftById) {
             const formId = submission.form || this.formObj.form || this.component.form;
@@ -738,7 +725,7 @@ export default class FormComponent extends Component {
      * @returns {boolean} - TRUE if this form is a Nested Wizard, FALSE otherwise
      */
     get isNestedWizard() {
-        return (this.subForm?._form?.display === 'wizard' && this.parent?.parent?._form?.display === 'wizard');
+        return this.subForm?._form?.display === 'wizard' && this.parent?.parent?._form?.display === 'wizard';
     }
     get visible() {
         return super.visible;
@@ -762,7 +749,7 @@ export default class FormComponent extends Component {
             isNestedWizard ? this.rebuild() : this.redraw();
         }
         if (!value && isNestedWizard) {
-            this.root.redraw();
+            this.root?.redraw();
         }
     }
     get parentVisible() {
@@ -833,7 +820,7 @@ export default class FormComponent extends Component {
     deleteValue() {
         super.setValue(null, {
             noUpdateEvent: true,
-            noDefault: true,
+            noDefault: true
         });
         this.unset();
     }