@formio/js 5.2.4-rc.0 → 5.2.5

package/lib/mjs/components/datagrid/DataGrid.js

@@ -11,7 +11,7 @@ export default class DataGridComponent extends NestedArrayComponent {
             clearOnHide: true,
             input: true,
             tree: true,
-            components: [],
+            components: []
         }, ...extend);
     }
     static get builderInfo() {
@@ -22,7 +22,7 @@ export default class DataGridComponent extends NestedArrayComponent {
             documentation: '/userguide/form-building/data-components#data-grid',
             showPreview: false,
             weight: 30,
-            schema: DataGridComponent.schema(),
+            schema: DataGridComponent.schema()
         };
     }
     constructor(...args) {
@@ -34,9 +34,7 @@ export default class DataGridComponent extends NestedArrayComponent {
         this.components = this.components || [];
         // Add new values based on minLength.
         this.rows = [];
-        this.columns = [
-            ...this.component.components,
-        ];
+        this.columns = [...this.component.components];
         if (this.initRows || !_.isEqual(this.dataValue, this.emptyValue)) {
             this.createRows(true);
         }
@@ -64,11 +62,7 @@ export default class DataGridComponent extends NestedArrayComponent {
         return this.builderMode || this.path === 'defaultValue' || !this.initEmpty;
     }
     get emptyValue() {
-        return this.initEmpty
-            ? []
-            : [
-                {},
-            ];
+        return this.initEmpty ? [] : [{}];
     }
     get addAnotherPosition() {
         return _.get(this.component, 'addAnotherPosition', 'bottom');
@@ -86,21 +80,15 @@ export default class DataGridComponent extends NestedArrayComponent {
         const isEmptyInit = this.initEmpty;
         // Ensure we have one and only one row in builder mode.
         if (isBuilderMode || (isEmptyInit && !this.dataValue.length)) {
-            return isEmptyInit && !isBuilderMode
-                ? []
-                : [
-                    {},
-                ];
+            return isEmptyInit && !isBuilderMode ? [] : [{}];
         }
         const value = super.defaultValue;
         let defaultValue;
         if (Array.isArray(value)) {
             defaultValue = value;
         }
-        else if (value && typeof value === 'object') {
-            defaultValue = [
-                value,
-            ];
+        else if (value && (typeof value === 'object')) {
+            defaultValue = [value];
         }
         else {
             defaultValue = this.emptyValue;
@@ -150,23 +138,11 @@ export default class DataGridComponent extends NestedArrayComponent {
      * @returns {Array<T[]>} - The chunked rows
      */
     getRowChunks(groups, rows) {
-        const [, chunks,] = groups.reduce(([startIndex, acc,], size) => {
+        const [, chunks] = groups.reduce(([startIndex, acc], size) => {
             const endIndex = startIndex + size;
-            return [
-                endIndex,
-                [
-                    ...acc,
-                    [
-                        startIndex,
-                        endIndex,
-                    ],
-                ],
-            ];
-        }, [
-            0,
-            [],
-        ]);
-        return chunks.map((range) => _.slice(rows, ...range));
+            return [endIndex, [...acc, [startIndex, endIndex]]];
+        }, [0, []]);
+        return chunks.map(range => _.slice(rows, ...range));
     }
     /**
      * Create groups object.
@@ -179,13 +155,11 @@ export default class DataGridComponent extends NestedArrayComponent {
         const indexes = sizes.reduce((groupIndexes, size) => {
             const last = groupIndexes[groupIndexes.length - 1];
             return groupIndexes.concat(last + size);
-        }, [
-            0,
-        ]);
+        }, [0]);
         return groups.reduce((gidxs, group, idx) => {
             return {
                 ...gidxs,
-                [indexes[idx]]: group,
+                [indexes[idx]]: group
             };
         }, {});
     }
@@ -206,29 +180,20 @@ export default class DataGridComponent extends NestedArrayComponent {
         this.dataValue = _.range(n).map(() => ({}));
     }
     hasExtraColumn() {
-        return this.hasRemoveButtons() || this.canAddColumn;
+        return (this.hasRemoveButtons() || this.canAddColumn);
     }
     hasRemoveButtons() {
-        return (!this.builderMode &&
-            !this.component.disableAddingRemovingRows &&
+        return !this.builderMode && !this.component.disableAddingRemovingRows &&
             !this.options.readOnly &&
             !this.disabled &&
             this.fullMode &&
-            this.dataValue.length > _.get(this.component, 'validate.minLength', 0));
+            (this.dataValue.length > _.get(this.component, 'validate.minLength', 0));
     }
     hasTopSubmit() {
-        return (this.hasAddButton() &&
-            [
-                'top',
-                'both',
-            ].includes(this.addAnotherPosition));
+        return this.hasAddButton() && ['top', 'both'].includes(this.addAnotherPosition);
     }
     hasBottomSubmit() {
-        return (this.hasAddButton() &&
-            [
-                'bottom',
-                'both',
-            ].includes(this.addAnotherPosition));
+        return this.hasAddButton() && ['bottom', 'both'].includes(this.addAnotherPosition);
     }
     get canAddColumn() {
         return this.builderMode && !this.options.design;
@@ -269,11 +234,11 @@ export default class DataGridComponent extends NestedArrayComponent {
             placeholder: this.renderTemplate('builderPlaceholder', {
                 position: this.componentComponents.length,
             }),
-            colWidth: colWidth.toString(),
+            colWidth: colWidth.toString()
         }));
     }
     getRows() {
-        return this.rows.map((row) => {
+        return this.rows.map(row => {
             const components = {};
             _.each(row, (col, key) => {
                 components[key] = col.render();
@@ -283,7 +248,7 @@ export default class DataGridComponent extends NestedArrayComponent {
     }
     getColumns() {
         return this.columns.filter((comp) => {
-            return !this.visibleColumns.hasOwnProperty(comp.key) || this.visibleColumns[comp.key];
+            return (!this.visibleColumns.hasOwnProperty(comp.key) || this.visibleColumns[comp.key]);
         });
     }
     hasHeader() {
@@ -305,9 +270,7 @@ export default class DataGridComponent extends NestedArrayComponent {
             this.refs[`${this.datagridKey}-row`].forEach((row, index) => {
                 row.dragInfo = { index };
             });
-            this.dragula = dragula([
-                this.refs[`${this.datagridKey}-tbody`],
-            ], {
+            this.dragula = dragula([this.refs[`${this.datagridKey}-tbody`]], {
                 moves: (_draggedElement, _oldParent, clickedElement) => {
                     const clickedElementKey = clickedElement.getAttribute('data-key');
                     const oldParentKey = _oldParent.getAttribute('data-key');
@@ -315,7 +278,7 @@ export default class DataGridComponent extends NestedArrayComponent {
                     if (oldParentKey === clickedElementKey) {
                         return clickedElement.classList.contains('formio-drag-button');
                     }
-                },
+                }
             }).on('drop', this.onReorder.bind(this));
             this.dragula.on('cloned', (el, original) => {
                 if (el && el.children && original && original.children) {
@@ -351,9 +314,7 @@ export default class DataGridComponent extends NestedArrayComponent {
         this.rows.forEach((row, rowIndex) => {
             let columnIndex = 0;
             columns.forEach((col) => {
-                this.attachComponents(this.refs[this.datagridKey][rowIndex * rowLength + columnIndex], [
-                    this.rows[rowIndex][col.key],
-                ], this.getComponentsContainer());
+                this.attachComponents(this.refs[this.datagridKey][(rowIndex * rowLength) + columnIndex], [this.rows[rowIndex][col.key]], this.getComponentsContainer());
                 columnIndex++;
             });
         });
@@ -429,26 +390,22 @@ export default class DataGridComponent extends NestedArrayComponent {
         this.rows[index] = this.createRowComponents(row, index);
         this.emit('dataGridAddRow', {
             component: this.component,
-            row,
+            row
         });
         this.checkConditions();
-        this.triggerChange({ modified: true });
+        this.triggerChange?.({ modified: true });
         this.redraw().then(() => {
             this.focusOnNewRowElement(this.rows[index]);
         });
     }
     updateComponentsRowIndex(components, rowIndex) {
         components.forEach((component, colIndex) => {
-            if (this.componentsMap[component.paths.dataPath]) {
-                delete this.componentsMap[component.paths.dataPath];
-            }
             if (component.options?.name) {
                 const newName = `[${this.key}][${rowIndex}]`;
                 component.options.name = component.options.name.replace(`[${this.key}][${component.rowIndex}]`, newName);
             }
             component.rowIndex = rowIndex;
             component.row = `${rowIndex}-${colIndex}`;
-            this.componentsMap[component.paths.dataPath] = component;
         });
     }
     updateRowsComponents(rowIndex) {
@@ -461,7 +418,7 @@ export default class DataGridComponent extends NestedArrayComponent {
         const flags = { isReordered: !makeEmpty, resetValue: makeEmpty };
         this.splice(index, flags);
         this.emit('dataGridDeleteRow', { index });
-        const [row,] = this.rows.splice(index, 1);
+        const [row] = this.rows.splice(index, 1);
         this.removeSubmissionMetadataRow(index);
         this.removeRowComponents(row);
         this.updateRowsComponents(index);
@@ -500,7 +457,7 @@ export default class DataGridComponent extends NestedArrayComponent {
         const removed = !!removedRows.length;
         // Delete components of extra rows (to make sure that this.components contain only components of exisiting rows)
         if (removed) {
-            removedRows.forEach((row) => this.removeRowComponents(row));
+            removedRows.forEach(row => this.removeRowComponents(row));
         }
         if (!init && (added || removed)) {
             this.redraw();
@@ -522,10 +479,10 @@ export default class DataGridComponent extends NestedArrayComponent {
                 }
                 // If we're in a nested form we need to ensure our changes are triggered upstream
                 if (changed.instance.root?.id && this.root?.id !== changed.instance.root.id) {
-                    changed.instance.root.triggerChange(flags, changed, modified);
+                    changed.instance.root.triggerChange?.(flags, changed, modified);
                 }
                 else {
-                    this.triggerChange({ modified });
+                    this.triggerChange?.({ modified });
                 }
             };
             let columnComponent;
@@ -534,13 +491,14 @@ export default class DataGridComponent extends NestedArrayComponent {
                 columnComponent = col;
             }
             else {
-                columnComponent = { ...col, id: col.id + rowIndex };
+                columnComponent = { ...col, id: (col.id + rowIndex) };
             }
             const component = this.createComponent(columnComponent, options, row);
             component.parentDisabled = !!this.disabled;
             component.rowIndex = rowIndex;
             component.inDataGrid = true;
-            if (columnComponent.tabindex && parseInt(columnComponent.tabindex) > this.tabIndex) {
+            if (columnComponent.tabindex &&
+                parseInt(columnComponent.tabindex) > this.tabIndex) {
                 this.tabIndex = parseInt(columnComponent.tabindex);
             }
             components[col.key] = component;
@@ -561,16 +519,12 @@ export default class DataGridComponent extends NestedArrayComponent {
         const dataValue = this.dataValue;
         this.rows.forEach((row, rowIndex) => {
             _.each(row, (col, key) => {
-                if (col && typeof col.checkConditions === 'function') {
+                if (col && (typeof col.checkConditions === 'function')) {
                     const firstRowCheck = visibility[key] === undefined;
-                    visibility[key] =
-                        !!visibility[key] ||
-                            (col.checkConditions(data, flags, dataValue[rowIndex]) && col.type !== 'hidden');
+                    visibility[key] = !!visibility[key] ||
+                        (col.checkConditions(data, flags, dataValue[rowIndex]) && col.type !== 'hidden');
                     if (col.component.logic && firstRowCheck) {
-                        const compIndex = _.findIndex(this.columns, [
-                            'key',
-                            key,
-                        ]);
+                        const compIndex = _.findIndex(this.columns, ['key', key]);
                         const equalColumns = _.isEqualWith(this.columns[compIndex], col.component, (col1, col2, key) => {
                             // Don't compare columns by their auto-generated ids.
                             if (key === 'id') {
@@ -614,15 +568,11 @@ export default class DataGridComponent extends NestedArrayComponent {
         }
         if (!Array.isArray(value)) {
             if (typeof value === 'object') {
-                value = [
-                    value,
-                ];
+                value = [value];
             }
             else {
                 this.createRows();
-                value = [
-                    {},
-                ];
+                value = [{}];
             }
         }
         // Make sure we always have at least one row.
@@ -633,8 +583,7 @@ export default class DataGridComponent extends NestedArrayComponent {
         const isSettingSubmission = flags.fromSubmission && !_.isEqual(value, this.emptyValue);
         const changed = this.hasChanged(value, this.dataValue);
         this.dataValue = value;
-        if (this.initRows ||
-            isSettingSubmission ||
+        if (this.initRows || isSettingSubmission ||
             (Array.isArray(this.dataValue) && this.dataValue.length !== this.rows.length)) {
             if (!this.createRows() && changed) {
                 this.redraw();
@@ -657,7 +606,7 @@ export default class DataGridComponent extends NestedArrayComponent {
     }
     toggleGroup(element, index) {
         element.classList.toggle('collapsed');
-        _.each(this.refs.chunks[index], (row) => {
+        _.each(this.refs.chunks[index], row => {
             row.classList.toggle('hidden');
         });
     }

package/lib/mjs/components/datagrid/editForm/DataGrid.edit.data.js

@@ -1,6 +1,6 @@
 export default [
     {
         key: 'multiple',
-        ignore: true,
+        ignore: true
     },
 ];

package/lib/mjs/components/datagrid/editForm/DataGrid.edit.display.js

@@ -1,7 +1,7 @@
 export default [
     {
         key: 'placeholder',
-        ignore: true,
+        ignore: true
     },
     {
         type: 'checkbox',
@@ -49,7 +49,7 @@ export default [
         input: true,
         customConditional(context) {
             return !context.data.disableAddingRemovingRows;
-        },
+        }
     },
     {
         type: 'select',
@@ -63,13 +63,13 @@ export default [
             values: [
                 { label: 'Top', value: 'top' },
                 { label: 'Bottom', value: 'bottom' },
-                { label: 'Both', value: 'both' },
-            ],
+                { label: 'Both', value: 'both' }
+            ]
         },
         weight: 411,
         customConditional(context) {
             return !context.data.disableAddingRemovingRows;
-        },
+        }
     },
     {
         type: 'checkbox',
@@ -83,7 +83,7 @@ export default [
         type: 'checkbox',
         label: 'Enable Row Groups',
         weight: 440,
-        input: true,
+        input: true
     },
     {
         label: 'Groups',
@@ -110,9 +110,9 @@ export default [
                 input: true,
                 key: 'label',
                 widget: {
-                    type: '',
+                    type: ''
                 },
-                row: '0-0',
+                row: '0-0'
             },
             {
                 label: 'Number of Rows',
@@ -122,11 +122,11 @@ export default [
                 type: 'number',
                 input: true,
                 key: 'numberOfRows',
-                row: '0-1',
-            },
+                row: '0-1'
+            }
         ],
         weight: 441,
-        conditional: { json: { var: 'data.enableRowGroups' } },
+        conditional: { json: { var: 'data.enableRowGroups' } }
     },
     {
         label: 'Hide Group on Header Click',
@@ -134,7 +134,7 @@ export default [
         input: true,
         key: 'groupToggle',
         weight: 442,
-        conditional: { json: { var: 'data.enableRowGroups' } },
+        conditional: { json: { var: 'data.enableRowGroups' } }
     },
     {
         label: 'Initialize Empty',
@@ -142,6 +142,6 @@ export default [
         input: true,
         key: 'initEmpty',
         tooltip: 'The DataGrid will have no visible rows when initialized.',
-        weight: 450,
-    },
+        weight: 450
+    }
 ];

package/lib/mjs/components/datagrid/editForm/DataGrid.edit.validation.js

@@ -10,7 +10,7 @@ export default [
         placeholder: 'Minimum Length',
         type: 'textfield',
         tooltip: 'The minimum length requirement this field must meet.',
-        input: true,
+        input: true
     },
     {
         weight: 120,
@@ -19,6 +19,6 @@ export default [
         placeholder: 'Maximum Length',
         type: 'textfield',
         tooltip: 'The maximum length requirement this field must meet.',
-        input: true,
-    },
+        input: true
+    }
 ];

package/lib/mjs/components/datamap/DataMap.form.js

@@ -10,11 +10,11 @@ export default function (...extend) {
     return Components.baseEditForm([
         {
             key: 'display',
-            components: DataMapEditDisplay,
+            components: DataMapEditDisplay
         },
         {
             key: 'data',
-            components: DataMapEditData,
+            components: DataMapEditData
         },
     ], ...extend);
 }

package/lib/mjs/components/datamap/DataMap.js

@@ -17,13 +17,13 @@ export default class DataMapComponent extends DataGridComponent {
                 type: 'textfield',
                 key: 'value',
                 label: 'Value',
-                input: true,
+                input: true
             },
             input: true,
             validate: {
                 maxLength: 0,
-                minLength: 0,
-            },
+                minLength: 0
+            }
         }, ...extend);
     }
     static get builderInfo() {
@@ -34,20 +34,18 @@ export default class DataMapComponent extends DataGridComponent {
             documentation: '/userguide/form-building/data-components#data-map',
             showPreview: false,
             weight: 20,
-            schema: DataMapComponent.schema(),
+            schema: DataMapComponent.schema()
         };
     }
     get schema() {
         const schema = super.schema;
-        if (this.components && this.components.length > 0) {
+        if (this.components && (this.components.length > 0)) {
             schema.valueComponent = this.components[this.components.length - 1].schema;
         }
         return _.omit(schema, 'components');
     }
     static savedValueTypes(schema) {
-        return (getComponentSavedTypes(schema) || [
-            componentValueTypes.object,
-        ]);
+        return getComponentSavedTypes(schema) || [componentValueTypes.object];
     }
     constructor(component, options, data) {
         super(component, options, data);
@@ -59,7 +57,7 @@ export default class DataMapComponent extends DataGridComponent {
         this.createRows();
         this.visibleColumns = {
             key: true,
-            [this.valueKey]: true,
+            [this.valueKey]: true
         };
         this.component.valueComponent.hideLabel = true;
     }
@@ -101,9 +99,7 @@ export default class DataMapComponent extends DataGridComponent {
     getRowValues() {
         const dataValue = this.dataValue;
         if (this.builderMode) {
-            return [
-                dataValue,
-            ];
+            return [dataValue];
         }
         if (_.isEmpty(dataValue)) {
             return [];
@@ -112,45 +108,38 @@ export default class DataMapComponent extends DataGridComponent {
     }
     getComponentsContainer() {
         if (this.builderMode) {
-            return this.getComponents().map((comp) => comp.component);
+            return this.getComponents().map(comp => comp.component);
         }
         return super.getComponentsContainer();
     }
     get iteratableRows() {
         return this.rows.map((row) => {
-            return Object.keys(row).map((key) => ({
+            return Object.keys(row).map(key => ({
                 components: row[key],
                 data: row[key].dataValue,
             }));
         });
     }
     componentContext(component) {
-        return this.iteratableRows[component.row].find((comp) => comp.components.key === component.key)
-            .data;
+        return this.iteratableRows[component.row].find(comp => comp.components.key === component.key).data;
     }
     hasHeader() {
         return true;
     }
     hasRemoveButtons() {
-        return (!this.component.disableAddingRemovingRows &&
+        return !this.component.disableAddingRemovingRows &&
             !this.options.readOnly &&
             !this.disabled &&
-            this.fullMode);
+            this.fullMode;
     }
     getColumns() {
         const keySchema = Object.assign({}, this.keySchema);
         const valueSchema = Object.assign({}, this.component.valueComponent);
         keySchema.hideLabel = false;
         valueSchema.hideLabel = false;
-        return this.component.keyBeforeValue
-            ? [
-                keySchema,
-                valueSchema,
-            ]
-            : [
-                valueSchema,
-                keySchema,
-            ];
+        return this.component.keyBeforeValue ?
+            [keySchema, valueSchema] :
+            [valueSchema, keySchema];
     }
     getRowKey(rowIndex) {
         const keys = Object.keys(this.dataValue);
@@ -166,7 +155,7 @@ export default class DataMapComponent extends DataGridComponent {
         _.each(this.rows[rowIndex], (component) => {
             if (component.key === '__key') {
                 component.data = {
-                    __key: Object.keys(rowData)[rowIndex],
+                    '__key': Object.keys(rowData)[rowIndex],
                 };
             }
             else {
@@ -176,23 +165,23 @@ export default class DataMapComponent extends DataGridComponent {
     }
     getValueAsString(value, options) {
         if (options?.email && this.visible && !this.skipInEmail && _.isObject(value)) {
-            let result = `
+            let result = (`
         <table border="1" style="width:100%">
           <tbody>
-      `;
+      `);
             result = Object.keys(value).reduce((result, key) => {
-                result += `
+                result += (`
           <tr>
             <th style="padding: 5px 10px;">${key}</th>
             <td style="width:100%;padding:5px 10px;">${this.getView(value[key], options)}</td>
           </tr>
-        `;
+        `);
                 return result;
             }, result);
-            result += `
+            result += (`
           </tbody>
         </table>
-      `;
+      `);
             return result;
         }
         if (_.isEmpty(value)) {
@@ -205,24 +194,24 @@ export default class DataMapComponent extends DataGridComponent {
         return typeof value === 'object' ? '[Complex Data]' : value;
     }
     getDataValueAsTable(value, options) {
-        let result = `
+        let result = (`
       <table border="1" style="width:100%">
         <tbody>
-    `;
+    `);
         if (this.visible && _.isObject(value)) {
             Object.keys(value).forEach((key) => {
-                result += `
+                result += (`
           <tr>
             <th style="padding: 5px 10px;">${key}</th>
             <td style="width:100%;padding:5px 10px;">${this.getView(value[key], options)}</td>
           </tr>
-        `;
+        `);
             });
         }
-        result += `
+        result += (`
         </tbody>
       </table>
-    `;
+    `);
         return result;
     }
     createRowComponents(row, rowIndex) {
@@ -235,9 +224,7 @@ export default class DataMapComponent extends DataGridComponent {
         options.row = `${rowIndex}`;
         options.rowIndex = rowIndex;
         const components = {};
-        components['__key'] = this.createComponent(this.keySchema, options, {
-            __key: this.builderMode ? this.defaultRowKey : key,
-        });
+        components['__key'] = this.createComponent(this.keySchema, options, { __key: this.builderMode ? this.defaultRowKey : key });
         components['__key'].on('componentChange', (event) => {
             const dataValue = this.dataValue;
             const newKey = uniqueKey(dataValue, event.value);
@@ -274,7 +261,7 @@ export default class DataMapComponent extends DataGridComponent {
         const index = this.rows.length;
         this.rows[index] = this.createRowComponents(this.dataValue, index);
         this.redraw();
-        this.triggerChange();
+        this.triggerChange?.();
     }
     removeRow(index) {
         const keys = Object.keys(this.dataValue);
@@ -283,7 +270,7 @@ export default class DataMapComponent extends DataGridComponent {
         }
         this.rows.splice(index, 1);
         this.redraw();
-        this.triggerChange();
+        this.triggerChange?.();
     }
     setValue(value, flags = {}) {
         const changed = this.hasChanged(value, this.dataValue);
@@ -293,7 +280,7 @@ export default class DataMapComponent extends DataGridComponent {
         return changed;
     }
     checkColumns() {
-        if (this.builderMode || !this.dataValue || !Object.keys(this.dataValue).length) {
+        if (this.builderMode || (!this.dataValue || !Object.keys(this.dataValue).length)) {
             return { rebuild: false, show: true };
         }
         if (Object.keys(this.dataValue).length > (this.rows || []).length) {