@formio/js 5.2.3 → 5.2.4-rc.0

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,7 +34,9 @@ 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);
         }
@@ -62,7 +64,11 @@ 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');
@@ -80,15 +86,21 @@ 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;
@@ -138,11 +150,23 @@ 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.
@@ -155,11 +179,13 @@ 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,
             };
         }, {});
     }
@@ -180,20 +206,29 @@ 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;
@@ -234,11 +269,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();
@@ -248,7 +283,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() {
@@ -270,7 +305,9 @@ 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');
@@ -278,7 +315,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) {
@@ -314,7 +351,9 @@ 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++;
             });
         });
@@ -390,7 +429,7 @@ 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 });
@@ -400,12 +439,16 @@ export default class DataGridComponent extends NestedArrayComponent {
     }
     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) {
@@ -418,7 +461,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);
@@ -457,7 +500,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();
@@ -478,7 +521,7 @@ export default class DataGridComponent extends NestedArrayComponent {
                     _.set(formComp, 'components', changed.component.components);
                 }
                 // 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)) {
+                if (changed.instance.root?.id && this.root?.id !== changed.instance.root.id) {
                     changed.instance.root.triggerChange(flags, changed, modified);
                 }
                 else {
@@ -491,14 +534,13 @@ 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;
@@ -519,12 +561,16 @@ 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') {
@@ -568,11 +614,15 @@ 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.
@@ -583,7 +633,8 @@ 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();
@@ -606,7 +657,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,18 +34,20 @@ 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);
@@ -57,7 +59,7 @@ export default class DataMapComponent extends DataGridComponent {
         this.createRows();
         this.visibleColumns = {
             key: true,
-            [this.valueKey]: true
+            [this.valueKey]: true,
         };
         this.component.valueComponent.hideLabel = true;
     }
@@ -99,7 +101,9 @@ export default class DataMapComponent extends DataGridComponent {
     getRowValues() {
         const dataValue = this.dataValue;
         if (this.builderMode) {
-            return [dataValue];
+            return [
+                dataValue,
+            ];
         }
         if (_.isEmpty(dataValue)) {
             return [];
@@ -108,38 +112,45 @@ 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);
@@ -155,7 +166,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 {
@@ -165,23 +176,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)) {
@@ -194,24 +205,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) {
@@ -224,7 +235,9 @@ 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);
@@ -280,7 +293,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) {

package/lib/mjs/components/datamap/editForm/DataMap.edit.data.js

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