@formio/js 5.2.4-rc.0 → 5.2.5

package/lib/mjs/components/radio/Radio.js

@@ -9,13 +9,11 @@ export default class RadioComponent extends ListComponent {
             inputType: 'radio',
             label: 'Radio',
             key: 'radio',
-            values: [
-                { label: '', value: '' },
-            ],
+            values: [{ label: '', value: '' }],
             data: {
                 url: '',
             },
-            fieldSet: false,
+            fieldSet: false
         }, ...extend);
     }
     static get builderInfo() {
@@ -25,7 +23,7 @@ export default class RadioComponent extends ListComponent {
             icon: 'dot-circle-o',
             weight: 80,
             documentation: '/userguide/form-building/form-components#radio',
-            schema: RadioComponent.schema(),
+            schema: RadioComponent.schema()
         };
     }
     static get conditionOperatorsSettings() {
@@ -41,13 +39,13 @@ export default class RadioComponent extends ListComponent {
                         dataType: classComp.dataType || '',
                         data: {
                             custom: `values = ${classComp && classComp.values ? JSON.stringify(classComp.values) : []}`,
-                        },
+                        }
                     }
                     : {
                         ...classComp,
                         type: 'select',
                     };
-            },
+            }
         };
     }
     static get serverConditionSettings() {
@@ -61,23 +59,12 @@ export default class RadioComponent extends ListComponent {
             return types;
         }
         if (dataType === 'object') {
-            return [
-                object,
-                array,
-            ];
+            return [object, array];
         }
         if (componentValueTypes[dataType]) {
-            return [
-                componentValueTypes[dataType],
-            ];
+            return [componentValueTypes[dataType]];
         }
-        return [
-            boolean,
-            string,
-            number,
-            object,
-            array,
-        ];
+        return [boolean, string, number, object, array];
     }
     constructor(component, options, data) {
         super(component, options, data);
@@ -98,7 +85,7 @@ export default class RadioComponent extends ListComponent {
         this.setValue(this.emptyValue, {
             noUpdateEvent: true,
             noValidate: true,
-            resetValue: true,
+            resetValue: true
         });
     }
     get inputInfo() {
@@ -162,7 +149,7 @@ export default class RadioComponent extends ListComponent {
         this.getTemplateKeys();
     }
     beforeSubmit() {
-        return new Promise((res) => {
+        return new Promise(res => {
             this.dataReady.then(() => res(true));
         });
     }
@@ -195,14 +182,11 @@ export default class RadioComponent extends ListComponent {
                     dataValue = _.toString(this.dataValue);
                 }
                 if (this.isSelectURL && _.isObject(this.loadedOptions[index].value)) {
-                    const optionValue = this.component.dataType === 'string'
-                        ? JSON.stringify(this.loadedOptions[index].value)
-                        : this.loadedOptions[index].value;
+                    const optionValue = this.component.dataType === 'string' ? JSON.stringify(this.loadedOptions[index].value) : this.loadedOptions[index].value;
                     input.checked = _.isEqual(optionValue, this.dataValue);
                 }
                 else {
-                    input.checked =
-                        dataValue === input.value && (input.value || this.component.dataSrc !== 'url');
+                    input.checked = (dataValue === input.value && (input.value || this.component.dataSrc !== 'url'));
                 }
                 this.addEventListener(input, 'keyup', (event) => {
                     if (event.key === ' ' && dataValue === input.value) {
@@ -236,10 +220,9 @@ export default class RadioComponent extends ListComponent {
         let value = this.component.inputType === 'checkbox' ? '' : this.dataValue;
         this.refs.input.forEach((input, index) => {
             if (input.checked) {
-                value =
-                    this.isSelectURL && _.isObject(this.loadedOptions[index].value)
-                        ? this.loadedOptions[index].value
-                        : input.value;
+                value = (this.isSelectURL && _.isObject(this.loadedOptions[index].value)) ?
+                    this.loadedOptions[index].value :
+                    input.value;
             }
         });
         return value;
@@ -256,8 +239,7 @@ export default class RadioComponent extends ListComponent {
         }
         const values = this.component.dataSrc === 'values' ? this.component.values : this.loadedOptions;
         if (values) {
-            return (values.findIndex(({ value: optionValue }) => this.normalizeValue(optionValue) === value) !==
-                -1);
+            return values.findIndex(({ value: optionValue }) => this.normalizeValue(optionValue) === value) !== -1;
         }
         return false;
     }
@@ -268,18 +250,15 @@ export default class RadioComponent extends ListComponent {
         else if (!_.isString(value)) {
             value = _.toString(value);
         }
-        const shouldUseSelectData = (options.modalPreview || this.inDataTable) &&
-            this.component.dataSrc === 'url' &&
-            (this.loadedOptions.length || this.selectData);
+        const shouldUseSelectData = (options.modalPreview || this.inDataTable)
+            && this.component.dataSrc === 'url' && (this.loadedOptions.length || this.selectData);
         if (this.component.dataSrc !== 'values' && !shouldUseSelectData) {
             return value;
         }
         const values = shouldUseSelectData ? this.loadedOptions : this.component.values;
-        const option = !values?.length && shouldUseSelectData
-            ? {
-                label: this.itemTemplate(this.selectData),
-            }
-            : _.find(values, (v) => v.value === value);
+        const option = !values?.length && shouldUseSelectData ? {
+            label: this.itemTemplate(this.selectData),
+        } : _.find(values, (v) => v.value === value);
         if (!value) {
             return _.get(option, 'label', '');
         }
@@ -288,7 +267,7 @@ export default class RadioComponent extends ListComponent {
     setValueAt(index, value) {
         if (this.refs.input && this.refs.input[index] && value !== null && value !== undefined) {
             const inputValue = this.refs.input[index].value;
-            this.refs.input[index].checked = inputValue === value.toString();
+            this.refs.input[index].checked = (inputValue === value.toString());
         }
     }
     get shouldLoad() {
@@ -322,7 +301,7 @@ export default class RadioComponent extends ListComponent {
             search,
             limit,
             skip,
-            page: Math.abs(Math.floor(skip / limit)),
+            page: Math.abs(Math.floor(skip / limit))
         }), this.shouldSanitizeValue);
         // Set ignoreCache if it is
         options.ignoreCache = this.component.ignoreCache;
@@ -345,7 +324,7 @@ export default class RadioComponent extends ListComponent {
     loadItemsFromMetadata() {
         this.listData.forEach((item, i) => {
             this.loadedOptions[i] = {
-                label: this.itemTemplate(item),
+                label: this.itemTemplate(item)
             };
             if (_.isEqual(item, this.selectData || _.pick(this.dataValue, _.keys(item)))) {
                 this.loadedOptions[i].value = this.dataValue;
@@ -360,9 +339,7 @@ export default class RadioComponent extends ListComponent {
             const valueAtProperty = _.get(item, this.component.valueProperty);
             this.loadedOptions[i] = {
                 value: this.component.valueProperty ? valueAtProperty : item,
-                label: this.component.valueProperty
-                    ? this.itemTemplate(item, valueAtProperty)
-                    : this.itemTemplate(item, item, i),
+                label: this.component.valueProperty ? this.itemTemplate(item, valueAtProperty) : this.itemTemplate(item, item, i)
             };
             listData.push(this.templateData[this.component.valueProperty ? valueAtProperty : i]);
             const value = this.loadedOptions[i].value;
@@ -371,7 +348,7 @@ export default class RadioComponent extends ListComponent {
             }
         });
         if (this.isSelectURL) {
-            const submission = this.root.submission;
+            const submission = this.root?.submission;
             if (!submission.metadata) {
                 submission.metadata = {};
             }
@@ -388,11 +365,7 @@ export default class RadioComponent extends ListComponent {
             const value = this.dataValue;
             this.refs.wrapper.forEach((wrapper, index) => {
                 const input = this.refs.input[index];
-                const checked = value === undefined || value === null
-                    ? false
-                    : input.type === 'checkbox'
-                        ? value[input.value] || input.checked
-                        : input.value.toString() === value.toString();
+                const checked = (value === undefined || value === null) ? false : (input.type === 'checkbox') ? value[input.value] || input.checked : (input.value.toString() === value.toString());
                 if (checked) {
                     //add class to container when selected
                     this.addClass(wrapper, this.optionSelectedClass);
@@ -422,7 +395,7 @@ export default class RadioComponent extends ListComponent {
         const shouldResetValue = flags && flags.modified && !flags.noUpdateEvent && this.previousValue === this.currentValue;
         if (shouldResetValue) {
             this.resetValue();
-            this.triggerChange(flags);
+            this.triggerChange?.(flags);
             this.setSelectedClasses();
         }
         this.previousValue = this.dataValue;
@@ -440,9 +413,7 @@ export default class RadioComponent extends ListComponent {
         }
         switch (dataType) {
             case 'auto':
-                if (!isNaN(parseFloat(value)) &&
-                    isFinite(value) &&
-                    _.toString(value) === Number(value).toString()) {
+                if (!isNaN(parseFloat(value)) && isFinite(value) && _.toString(value) === Number(value).toString()) {
                     value = +value;
                 }
                 if (value === 'true') {
@@ -468,7 +439,7 @@ export default class RadioComponent extends ListComponent {
                 break;
         }
         if (this.isSelectURL && this.templateData && this.templateData[value]) {
-            const submission = this.root.submission;
+            const submission = this.root?.submission;
             if (!submission.metadata.selectData) {
                 submission.metadata.selectData = {};
             }

package/lib/mjs/components/radio/editForm/Radio.edit.data.js

@@ -13,14 +13,12 @@ export default [
                 { label: 'URL', value: 'url' },
             ],
         },
-        validate: {
-            required: true,
+        'validate': {
+            'required': true
         },
         onChange(context) {
             if (context && context.flags && context.flags && context.flags.modified) {
-                context.data.values = [
-                    { label: '', value: '' },
-                ];
+                context.data.values = [{ label: '', value: '' }];
             }
         },
     },
@@ -32,9 +30,7 @@ export default [
         tooltip: 'The radio button values that can be picked for this field. Values are text submitted with the form data. Labels are text that appears next to the radio buttons on the form.',
         weight: 10,
         reorder: true,
-        defaultValue: [
-            { label: '', value: '' },
-        ],
+        defaultValue: [{ label: '', value: '' }],
         components: [
             {
                 label: 'Label',
@@ -50,8 +46,8 @@ export default [
                 allowCalculateOverride: true,
                 calculateValue: 'value = _.camelCase(row.label);',
                 validate: {
-                    required: true,
-                },
+                    required: true
+                }
             },
             {
                 type: 'select',
@@ -72,12 +68,7 @@ export default [
             },
         ],
         conditional: {
-            json: {
-                '===': [
-                    { var: 'data.dataSrc' },
-                    'values',
-                ],
-            },
+            json: { '===': [{ var: 'data.dataSrc' }, 'values'] },
         },
     },
     {
@@ -103,12 +94,7 @@ export default [
     {
         key: 'template',
         conditional: {
-            json: {
-                '===': [
-                    { var: 'data.dataSrc' },
-                    'url',
-                ],
-            },
+            json: { '===': [{ var: 'data.dataSrc' }, 'url'] },
         },
-    },
+    }
 ];

package/lib/mjs/components/radio/editForm/Radio.edit.display.js

@@ -1,7 +1,7 @@
 export default [
     {
         key: 'placeholder',
-        ignore: true,
+        ignore: true
     },
     {
         type: 'select',
@@ -17,9 +17,9 @@ export default [
                 { label: 'Top', value: 'top' },
                 { label: 'Left', value: 'left' },
                 { label: 'Right', value: 'right' },
-                { label: 'Bottom', value: 'bottom' },
-            ],
-        },
+                { label: 'Bottom', value: 'bottom' }
+            ]
+        }
     },
     {
         type: 'checkbox',
@@ -27,6 +27,6 @@ export default [
         key: 'inline',
         label: 'Inline Layout',
         tooltip: 'Displays the checkboxes/radios horizontally.',
-        weight: 650,
-    },
+        weight: 650
+    }
 ];

package/lib/mjs/components/radio/editForm/Radio.edit.validation.js

@@ -1,11 +1,11 @@
 export default [
     {
         key: 'validateOn',
-        ignore: true,
+        ignore: true
     },
     {
         key: 'unique',
-        ignore: true,
+        ignore: true
     },
     {
         weight: 52,

package/lib/mjs/components/recaptcha/ReCaptcha.form.js

@@ -9,23 +9,23 @@ export default function (...extend) {
     return Components.baseEditForm([
         {
             key: 'display',
-            components: ReCaptchaEditDisplay,
+            components: ReCaptchaEditDisplay
         },
         {
             key: 'data',
-            ignore: true,
+            ignore: true
         },
         {
             key: 'validation',
-            ignore: true,
+            ignore: true
         },
         {
             key: 'conditional',
-            ignore: true,
+            ignore: true
         },
         {
             key: 'logic',
-            ignore: true,
+            ignore: true
         },
     ], ...extend);
 }

package/lib/mjs/components/recaptcha/ReCaptcha.js

@@ -8,7 +8,7 @@ export default class ReCaptchaComponent extends Component {
         return Component.schema({
             type: 'recaptcha',
             key: 'recaptcha',
-            label: 'reCAPTCHA',
+            label: 'reCAPTCHA'
         }, ...extend);
     }
     static get builderInfo() {
@@ -20,10 +20,7 @@ export default class ReCaptchaComponent extends Component {
     static get conditionOperatorsSettings() {
         return {
             ...super.conditionOperatorsSettings,
-            operators: [
-                'isEmpty',
-                'isNotEmpty',
-            ],
+            operators: ['isEmpty', 'isNotEmpty'],
         };
     }
     static get serverConditionSettings() {
@@ -44,7 +41,7 @@ export default class ReCaptchaComponent extends Component {
             this.append(this.text(this.name));
         }
         else {
-            const siteKey = _get(this.root.form, 'settings.recaptcha.siteKey');
+            const siteKey = _get(this.root?.form, 'settings.recaptcha.siteKey');
             if (siteKey) {
                 const recaptchaApiScriptUrl = `https://www.google.com/recaptcha/api.js?render=${siteKey}`;
                 this.recaptchaApiReady = Formio.requireLibrary('googleRecaptcha', 'grecaptcha', recaptchaApiScriptUrl, true);
@@ -61,13 +58,13 @@ export default class ReCaptchaComponent extends Component {
         return true;
     }
     async verify(actionName) {
-        const siteKey = _get(this.root.form, 'settings.recaptcha.siteKey');
+        const siteKey = _get(this.root?.form, 'settings.recaptcha.siteKey');
         if (!siteKey) {
             console.warn('There is no Site Key specified in settings in form JSON');
             return;
         }
         if (!this.recaptchaApiReady) {
-            const recaptchaApiScriptUrl = `https://www.google.com/recaptcha/api.js?render=${_get(this.root.form, 'settings.recaptcha.siteKey')}`;
+            const recaptchaApiScriptUrl = `https://www.google.com/recaptcha/api.js?render=${_get(this.root?.form, 'settings.recaptcha.siteKey')}`;
             this.recaptchaApiReady = Formio.requireLibrary('googleRecaptcha', 'grecaptcha', recaptchaApiScriptUrl, true);
         }
         try {
@@ -95,13 +92,14 @@ export default class ReCaptchaComponent extends Component {
                 }
             });
         }
-        catch (ignoreErr) {
+        catch (err) {
             this.loading = false;
         }
     }
     beforeSubmit() {
         if (this.recaptchaVerifiedPromise) {
-            return this.recaptchaVerifiedPromise.then(() => super.beforeSubmit());
+            return this.recaptchaVerifiedPromise
+                .then(() => super.beforeSubmit());
         }
         return super.beforeSubmit();
     }

package/lib/mjs/components/recaptcha/editForm/ReCaptcha.edit.display.js

@@ -16,17 +16,17 @@ export default [
         values: [
             {
                 label: 'Form Load',
-                value: 'formLoad',
+                value: 'formLoad'
             },
             {
                 label: 'Button Click',
-                value: 'buttonClick',
-            },
+                value: 'buttonClick'
+            }
         ],
         validate: {
-            required: true,
+            required: true
         },
-        weight: 650,
+        weight: 650
     },
     {
         type: 'select',
@@ -43,75 +43,75 @@ export default [
         data: {
             custom(context) {
                 return getContextButtons(context);
-            },
-        },
+            }
+        }
     },
     {
         key: 'label',
-        ignore: true,
+        ignore: true
     },
     {
         key: 'hideLabel',
-        ignore: true,
+        ignore: true
     },
     {
         key: 'labelPosition',
-        ignore: true,
+        ignore: true
     },
     {
         key: 'placeholder',
-        ignore: true,
+        ignore: true
     },
     {
         key: 'description',
-        ignore: true,
+        ignore: true
     },
     {
         key: 'tooltip',
-        ignore: true,
+        ignore: true
     },
     {
         key: 'errorLabel',
-        ignore: true,
+        ignore: true
     },
     {
         key: 'customClass',
-        ignore: true,
+        ignore: true
     },
     {
         key: 'tabindex',
-        ignore: true,
+        ignore: true
     },
     {
         key: 'multiple',
-        ignore: true,
+        ignore: true
     },
     {
         key: 'clearOnHide',
-        ignore: true,
+        ignore: true
     },
     {
         key: 'hidden',
-        ignore: true,
+        ignore: true
     },
     {
         key: 'mask',
-        ignore: true,
+        ignore: true
     },
     {
         key: 'dataGridLabel',
-        ignore: true,
+        ignore: true
     },
     {
         key: 'disabled',
-        ignore: true,
+        ignore: true
     },
     {
         key: 'autofocus',
-        ignore: true,
+        ignore: true
     },
     {
         key: 'tableView',
-        ignore: true,
+        ignore: true
     },
 ];

package/lib/mjs/components/select/Select.form.js

@@ -11,15 +11,15 @@ export default function (...extend) {
     return listComponentForm([
         {
             key: 'display',
-            components: SelectEditDisplay,
+            components: SelectEditDisplay
         },
         {
             key: 'data',
-            components: SelectEditData,
+            components: SelectEditData
         },
         {
             key: 'validation',
-            components: SelectEditValidation,
+            components: SelectEditValidation
         },
     ], ...extend);
 }