@formio/js 5.0.0-dev.5707.d029d4d → 5.0.0-dev.5710.e2e8388

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

@@ -1,8 +1,7 @@
 import _ from 'lodash';
 import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';
 import { fastCloneDeep, getFocusableElements } from '../../utils/utils';
-import { Components } from '../Components';
-import dragula from 'dragula';
+import Components from '../Components';
 export default class DataGridComponent extends NestedArrayComponent {
     static schema(...extend) {
         return NestedArrayComponent.schema({
@@ -39,6 +38,9 @@ export default class DataGridComponent extends NestedArrayComponent {
         if (this.initRows || !_.isEqual(this.dataValue, this.emptyValue)) {
             this.createRows(true);
         }
+        if (this.allowReorder) {
+            this.dragulaReady = this.getDragula();
+        }
         this.visibleColumns = {};
         this.prevHasAddButton = this.hasAddButton();
         this.checkColumns();
@@ -279,31 +281,25 @@ 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`]], {
-                moves: (_draggedElement, _oldParent, clickedElement) => {
-                    const clickedElementKey = clickedElement.getAttribute('data-key');
-                    const oldParentKey = _oldParent.getAttribute('data-key');
-                    //Check if the clicked button belongs to that container, if false, it belongs to the nested container
-                    if (oldParentKey === clickedElementKey) {
-                        return clickedElement.classList.contains('formio-drag-button');
-                    }
+            this.dragulaReady.then((dragula) => {
+                // The drop event may call redraw twice which calls attach twice and because this block of code is asynchronous
+                // BOTH redraws may be called before this block of code runs (which causes this block of code to run twice sequentially).
+                // This causes two dragula() calls on the same container which breaks dragula. To fix this the return value must
+                // be saved in this.dragula and have its container contents reset if it exists
+                if (this.dragula && this.dragula.containers) {
+                    this.dragula.containers = [];
                 }
-            }).on('drop', this.onReorder.bind(this));
-            this.dragula.on('cloned', (el, original) => {
-                if (el && el.children && original && original.children) {
-                    _.each(original.children, (child, index) => {
-                        const styles = getComputedStyle(child, null);
-                        if (styles.cssText !== '') {
-                            el.children[index].style.cssText = styles.cssText;
+                this.dragula = dragula([this.refs[`${this.datagridKey}-tbody`]], {
+                    moves: (_draggedElement, _oldParent, clickedElement) => {
+                        const clickedElementKey = clickedElement.getAttribute('data-key');
+                        const oldParentKey = _oldParent.getAttribute('data-key');
+                        //Check if the clicked button belongs to that container, if false, it belongs to the nested container
+                        if (oldParentKey === clickedElementKey) {
+                            return clickedElement.classList.contains('formio-drag-button');
                         }
-                        else {
-                            const cssText = Object.values(styles).reduce((css, propertyName) => {
-                                return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;
-                            }, '');
-                            el.children[index].style.cssText = cssText;
-                        }
-                    });
-                }
+                    }
+                }).on('drop', this.onReorder.bind(this))
+                    .on('cloned', this.onCloned.bind(this));
             });
         }
         this.refs[`${this.datagridKey}-addRow`].forEach((addButton) => {
@@ -370,6 +366,22 @@ export default class DataGridComponent extends NestedArrayComponent {
         this.setValue(dataValue, { isReordered: true });
         this.rebuild();
     }
+    onCloned(el, original) {
+        if (el && el.children && original && original.children) {
+            _.each(original.children, (child, index) => {
+                const styles = getComputedStyle(child, null);
+                if (styles.cssText !== '') {
+                    el.children[index].style.cssText = styles.cssText;
+                }
+                else {
+                    const cssText = Object.values(styles).reduce((css, propertyName) => {
+                        return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;
+                    }, '');
+                    el.children[index].style.cssText = cssText;
+                }
+            });
+        }
+    }
     focusOnNewRowElement(row) {
         Object.keys(row).find((key) => {
             const element = row[key].element;

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

@@ -3,7 +3,7 @@ import DataGridComponent from '../datagrid/DataGrid';
 import _ from 'lodash';
 import EventEmitter from 'eventemitter3';
 import { componentValueTypes, getComponentSavedTypes, uniqueKey } from '../../utils/utils';
-import { Components } from '../Components';
+import Components from '../Components';
 export default class DataMapComponent extends DataGridComponent {
     static schema(...extend) {
         return Component.schema({

package/lib/mjs/components/editgrid/EditGrid.js

@@ -1089,7 +1089,8 @@ export default class EditGridComponent extends NestedArrayComponent {
             return false;
         }
         else if (rowsEditing && this.saveEditMode && !this.component.openWhenEmpty) {
-            this.setCustomValidity(this.t(this.errorMessage('unsavedRowsError')), dirty);
+            this._errors = this.setCustomValidity(this.t(this.errorMessage('unsavedRowsError')), dirty);
+            errors.push(...this._errors);
             return false;
         }
         const message = this.invalid || this.invalidMessage(data, dirty, false, row);

package/lib/mjs/components/editgrid/fixtures/comp16.d.ts

@@ -0,0 +1,52 @@
+declare namespace _default {
+    let type: string;
+    let display: string;
+    let components: ({
+        title: string;
+        breadcrumbClickable: boolean;
+        buttonSettings: {
+            previous: boolean;
+            cancel: boolean;
+            next: boolean;
+        };
+        collapsible: boolean;
+        tableView: boolean;
+        key: string;
+        type: string;
+        label: string;
+        input: boolean;
+        components: {
+            label: string;
+            tableView: boolean;
+            rowDrafts: boolean;
+            key: string;
+            type: string;
+            input: boolean;
+            components: {
+                label: string;
+                tableView: boolean;
+                key: string;
+                type: string;
+                input: boolean;
+                alwaysEnabled: boolean;
+            }[];
+            alwaysEnabled: boolean;
+        }[];
+        alwaysEnabled: boolean;
+        showValidations?: undefined;
+    } | {
+        label: string;
+        showValidations: boolean;
+        alwaysEnabled: boolean;
+        tableView: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        title?: undefined;
+        breadcrumbClickable?: undefined;
+        buttonSettings?: undefined;
+        collapsible?: undefined;
+        components?: undefined;
+    })[];
+}
+export default _default;

package/lib/mjs/components/editgrid/fixtures/comp16.js

@@ -0,0 +1,69 @@
+export default {
+    type: 'form',
+    display: 'wizard',
+    components: [
+        {
+            title: 'Page 1',
+            breadcrumbClickable: true,
+            buttonSettings: {
+                previous: true,
+                cancel: true,
+                next: true
+            },
+            collapsible: false,
+            tableView: false,
+            key: 'page3',
+            type: 'panel',
+            label: 'Page 2',
+            input: false,
+            components: [
+                {
+                    label: 'Edit Grid',
+                    tableView: true,
+                    rowDrafts: false,
+                    key: 'editGrid',
+                    type: 'editgrid',
+                    input: true,
+                    components: [
+                        {
+                            label: 'Text Field',
+                            tableView: true,
+                            key: 'textField',
+                            type: 'textfield',
+                            input: true,
+                            alwaysEnabled: false
+                        }
+                    ],
+                    alwaysEnabled: false
+                }
+            ],
+            alwaysEnabled: false
+        },
+        {
+            title: 'Page 2',
+            breadcrumbClickable: true,
+            buttonSettings: {
+                previous: true,
+                cancel: true,
+                next: true
+            },
+            collapsible: false,
+            tableView: false,
+            key: 'page2',
+            type: 'panel',
+            label: 'Page 1',
+            input: false,
+            alwaysEnabled: false,
+            components: []
+        },
+        {
+            label: 'Submit',
+            showValidations: false,
+            alwaysEnabled: false,
+            tableView: false,
+            key: 'submit',
+            type: 'button',
+            input: true
+        }
+    ]
+};

package/lib/mjs/components/editgrid/fixtures/index.d.ts

@@ -13,8 +13,9 @@ import comp6 from './comp6';
 import comp7 from './comp7';
 import comp8 from './comp8';
 import comp9 from './comp9';
+import comp16 from './comp16';
 import compOpenWhenEmpty from './comp-openWhenEmpty';
 import withOpenWhenEmptyAndConditions from './comp-with-conditions-and-openWhenEmpty';
 import compWithCustomDefaultValue from './comp-with-custom-default-value';
 import compTestEvents from './comp-test-events';
-export { comp1, comp2, comp3, comp10, comp11, comp12, comp13, comp14, comp15, comp4, comp5, comp6, comp7, comp8, comp9, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };
+export { comp1, comp2, comp3, comp10, comp11, comp12, comp13, comp14, comp15, comp4, comp5, comp6, comp7, comp8, comp9, comp16, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };

package/lib/mjs/components/editgrid/fixtures/index.js

@@ -13,8 +13,9 @@ import comp12 from './comp12';
 import comp13 from './comp13';
 import comp14 from './comp14';
 import comp15 from './comp15';
+import comp16 from './comp16';
 import withOpenWhenEmptyAndConditions from './comp-with-conditions-and-openWhenEmpty';
 import compOpenWhenEmpty from './comp-openWhenEmpty';
 import compWithCustomDefaultValue from './comp-with-custom-default-value';
 import compTestEvents from './comp-test-events';
-export { comp1, comp2, comp3, comp10, comp11, comp12, comp13, comp14, comp15, comp4, comp5, comp6, comp7, comp8, comp9, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };
+export { comp1, comp2, comp3, comp10, comp11, comp12, comp13, comp14, comp15, comp4, comp5, comp6, comp7, comp8, comp9, comp16, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-dev.5707.d029d4d",
+  "version": "5.0.0-dev.5710.e2e8388",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {