@formio/js 5.2.3 → 5.2.4-rc.0

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

@@ -16,7 +16,7 @@ class DataGridComponent extends NestedArrayComponent_1.default {
             clearOnHide: true,
             input: true,
             tree: true,
-            components: []
+            components: [],
         }, ...extend);
     }
     static get builderInfo() {
@@ -27,7 +27,7 @@ class DataGridComponent extends NestedArrayComponent_1.default {
             documentation: '/userguide/form-building/data-components#data-grid',
             showPreview: false,
             weight: 30,
-            schema: DataGridComponent.schema()
+            schema: DataGridComponent.schema(),
         };
     }
     constructor(...args) {
@@ -39,7 +39,9 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         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 || !lodash_1.default.isEqual(this.dataValue, this.emptyValue)) {
             this.createRows(true);
         }
@@ -67,7 +69,11 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         return this.builderMode || this.path === 'defaultValue' || !this.initEmpty;
     }
     get emptyValue() {
-        return this.initEmpty ? [] : [{}];
+        return this.initEmpty
+            ? []
+            : [
+                {},
+            ];
     }
     get addAnotherPosition() {
         return lodash_1.default.get(this.component, 'addAnotherPosition', 'bottom');
@@ -85,15 +91,21 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         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;
@@ -144,11 +156,23 @@ class DataGridComponent extends NestedArrayComponent_1.default {
      * @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 => lodash_1.default.slice(rows, ...range));
+            return [
+                endIndex,
+                [
+                    ...acc,
+                    [
+                        startIndex,
+                        endIndex,
+                    ],
+                ],
+            ];
+        }, [
+            0,
+            [],
+        ]);
+        return chunks.map((range) => lodash_1.default.slice(rows, ...range));
     }
     /**
      * Create groups object.
@@ -161,7 +185,9 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         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 Object.assign(Object.assign({}, gidxs), { [indexes[idx]]: group });
         }, {});
@@ -183,20 +209,29 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         this.dataValue = lodash_1.default.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 > lodash_1.default.get(this.component, 'validate.minLength', 0));
+            this.dataValue.length > lodash_1.default.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;
@@ -237,11 +272,11 @@ class DataGridComponent extends NestedArrayComponent_1.default {
             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 = {};
             lodash_1.default.each(row, (col, key) => {
                 components[key] = col.render();
@@ -251,7 +286,7 @@ class DataGridComponent extends NestedArrayComponent_1.default {
     }
     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() {
@@ -273,7 +308,9 @@ class DataGridComponent extends NestedArrayComponent_1.default {
             this.refs[`${this.datagridKey}-row`].forEach((row, index) => {
                 row.dragInfo = { index };
             });
-            this.dragula = (0, dragula_1.default)([this.refs[`${this.datagridKey}-tbody`]], {
+            this.dragula = (0, dragula_1.default)([
+                this.refs[`${this.datagridKey}-tbody`],
+            ], {
                 moves: (_draggedElement, _oldParent, clickedElement) => {
                     const clickedElementKey = clickedElement.getAttribute('data-key');
                     const oldParentKey = _oldParent.getAttribute('data-key');
@@ -281,7 +318,7 @@ class DataGridComponent extends NestedArrayComponent_1.default {
                     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) {
@@ -317,7 +354,9 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         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++;
             });
         });
@@ -393,7 +432,7 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         this.rows[index] = this.createRowComponents(row, index);
         this.emit('dataGridAddRow', {
             component: this.component,
-            row
+            row,
         });
         this.checkConditions();
         this.triggerChange({ modified: true });
@@ -404,12 +443,16 @@ class DataGridComponent extends NestedArrayComponent_1.default {
     updateComponentsRowIndex(components, rowIndex) {
         components.forEach((component, colIndex) => {
             var _a;
+            if (this.componentsMap[component.paths.dataPath]) {
+                delete this.componentsMap[component.paths.dataPath];
+            }
             if ((_a = component.options) === null || _a === void 0 ? void 0 : _a.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) {
@@ -422,7 +465,7 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         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);
@@ -461,7 +504,7 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         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();
@@ -483,7 +526,7 @@ class DataGridComponent extends NestedArrayComponent_1.default {
                     lodash_1.default.set(formComp, 'components', changed.component.components);
                 }
                 // If we're in a nested form we need to ensure our changes are triggered upstream
-                if (((_a = changed.instance.root) === null || _a === void 0 ? void 0 : _a.id) && (((_b = this.root) === null || _b === void 0 ? void 0 : _b.id) !== changed.instance.root.id)) {
+                if (((_a = changed.instance.root) === null || _a === void 0 ? void 0 : _a.id) && ((_b = this.root) === null || _b === void 0 ? void 0 : _b.id) !== changed.instance.root.id) {
                     changed.instance.root.triggerChange(flags, changed, modified);
                 }
                 else {
@@ -496,14 +539,13 @@ class DataGridComponent extends NestedArrayComponent_1.default {
                 columnComponent = col;
             }
             else {
-                columnComponent = Object.assign(Object.assign({}, col), { id: (col.id + rowIndex) });
+                columnComponent = Object.assign(Object.assign({}, 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;
@@ -524,12 +566,16 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         const dataValue = this.dataValue;
         this.rows.forEach((row, rowIndex) => {
             lodash_1.default.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 = lodash_1.default.findIndex(this.columns, ['key', key]);
+                        const compIndex = lodash_1.default.findIndex(this.columns, [
+                            'key',
+                            key,
+                        ]);
                         const equalColumns = lodash_1.default.isEqualWith(this.columns[compIndex], col.component, (col1, col2, key) => {
                             // Don't compare columns by their auto-generated ids.
                             if (key === 'id') {
@@ -573,11 +619,15 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         }
         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.
@@ -588,7 +638,8 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         const isSettingSubmission = flags.fromSubmission && !lodash_1.default.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();
@@ -611,7 +662,7 @@ class DataGridComponent extends NestedArrayComponent_1.default {
     }
     toggleGroup(element, index) {
         element.classList.toggle('collapsed');
-        lodash_1.default.each(this.refs.chunks[index], row => {
+        lodash_1.default.each(this.refs.chunks[index], (row) => {
             row.classList.toggle('hidden');
         });
     }

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

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = [
     {
         key: 'multiple',
-        ignore: true
+        ignore: true,
     },
 ];

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = [
     {
         key: 'placeholder',
-        ignore: true
+        ignore: true,
     },
     {
         type: 'checkbox',
@@ -51,7 +51,7 @@ exports.default = [
         input: true,
         customConditional(context) {
             return !context.data.disableAddingRemovingRows;
-        }
+        },
     },
     {
         type: 'select',
@@ -65,13 +65,13 @@ exports.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',
@@ -85,7 +85,7 @@ exports.default = [
         type: 'checkbox',
         label: 'Enable Row Groups',
         weight: 440,
-        input: true
+        input: true,
     },
     {
         label: 'Groups',
@@ -112,9 +112,9 @@ exports.default = [
                 input: true,
                 key: 'label',
                 widget: {
-                    type: ''
+                    type: '',
                 },
-                row: '0-0'
+                row: '0-0',
             },
             {
                 label: 'Number of Rows',
@@ -124,11 +124,11 @@ exports.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',
@@ -136,7 +136,7 @@ exports.default = [
         input: true,
         key: 'groupToggle',
         weight: 442,
-        conditional: { json: { var: 'data.enableRowGroups' } }
+        conditional: { json: { var: 'data.enableRowGroups' } },
     },
     {
         label: 'Initialize Empty',
@@ -144,6 +144,6 @@ exports.default = [
         input: true,
         key: 'initEmpty',
         tooltip: 'The DataGrid will have no visible rows when initialized.',
-        weight: 450
-    }
+        weight: 450,
+    },
 ];

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

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

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

@@ -15,11 +15,11 @@ function default_1(...extend) {
     return Components_1.default.baseEditForm([
         {
             key: 'display',
-            components: DataMap_edit_display_1.default
+            components: DataMap_edit_display_1.default,
         },
         {
             key: 'data',
-            components: DataMap_edit_data_1.default
+            components: DataMap_edit_data_1.default,
         },
     ], ...extend);
 }

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

@@ -22,13 +22,13 @@ class DataMapComponent extends DataGrid_1.default {
                 type: 'textfield',
                 key: 'value',
                 label: 'Value',
-                input: true
+                input: true,
             },
             input: true,
             validate: {
                 maxLength: 0,
-                minLength: 0
-            }
+                minLength: 0,
+            },
         }, ...extend);
     }
     static get builderInfo() {
@@ -39,18 +39,20 @@ class DataMapComponent extends DataGrid_1.default {
             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 lodash_1.default.omit(schema, 'components');
     }
     static savedValueTypes(schema) {
-        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];
+        return ((0, utils_1.getComponentSavedTypes)(schema) || [
+            utils_1.componentValueTypes.object,
+        ]);
     }
     constructor(component, options, data) {
         super(component, options, data);
@@ -62,7 +64,7 @@ class DataMapComponent extends DataGrid_1.default {
         this.createRows();
         this.visibleColumns = {
             key: true,
-            [this.valueKey]: true
+            [this.valueKey]: true,
         };
         this.component.valueComponent.hideLabel = true;
     }
@@ -104,7 +106,9 @@ class DataMapComponent extends DataGrid_1.default {
     getRowValues() {
         const dataValue = this.dataValue;
         if (this.builderMode) {
-            return [dataValue];
+            return [
+                dataValue,
+            ];
         }
         if (lodash_1.default.isEmpty(dataValue)) {
             return [];
@@ -113,38 +117,45 @@ class DataMapComponent extends DataGrid_1.default {
     }
     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);
@@ -160,7 +171,7 @@ class DataMapComponent extends DataGrid_1.default {
         lodash_1.default.each(this.rows[rowIndex], (component) => {
             if (component.key === '__key') {
                 component.data = {
-                    '__key': Object.keys(rowData)[rowIndex],
+                    __key: Object.keys(rowData)[rowIndex],
                 };
             }
             else {
@@ -170,23 +181,23 @@ class DataMapComponent extends DataGrid_1.default {
     }
     getValueAsString(value, options) {
         if ((options === null || options === void 0 ? void 0 : options.email) && this.visible && !this.skipInEmail && lodash_1.default.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 (lodash_1.default.isEmpty(value)) {
@@ -199,24 +210,24 @@ class DataMapComponent extends DataGrid_1.default {
         return typeof value === 'object' ? '[Complex Data]' : value;
     }
     getDataValueAsTable(value, options) {
-        let result = (`
+        let result = `
       <table border="1" style="width:100%">
         <tbody>
-    `);
+    `;
         if (this.visible && lodash_1.default.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) {
@@ -229,7 +240,9 @@ class DataMapComponent extends DataGrid_1.default {
         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 = (0, utils_1.uniqueKey)(dataValue, event.value);
@@ -285,7 +298,7 @@ class DataMapComponent extends DataGrid_1.default {
         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/cjs/components/datamap/editForm/DataMap.edit.data.js

@@ -8,5 +8,5 @@ exports.default = [
     {
         key: 'defaultValue',
         ignore: true,
-    }
+    },
 ];