@formio/js 5.0.0-dev.5702.41702de → 5.0.0-dev.5703.20a26ed

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/Changelog.md +11 -0
  2. package/dist/formio.embed.js +1 -1
  3. package/dist/formio.embed.min.js +1 -1
  4. package/dist/formio.form.js +6 -102
  5. package/dist/formio.form.min.js +1 -1
  6. package/dist/formio.full.js +6 -6
  7. package/dist/formio.full.min.js +1 -1
  8. package/dist/formio.js +1 -1
  9. package/dist/formio.min.js +1 -1
  10. package/lib/cjs/CDN.d.ts +1 -0
  11. package/lib/cjs/CDN.js +1 -0
  12. package/lib/cjs/Webform.js +0 -2
  13. package/lib/cjs/components/_classes/component/Component.d.ts +1 -0
  14. package/lib/cjs/components/_classes/component/Component.js +18 -0
  15. package/lib/cjs/components/datagrid/DataGrid.d.ts +2 -0
  16. package/lib/cjs/components/datagrid/DataGrid.js +38 -26
  17. package/lib/cjs/components/datamap/DataMap.js +2 -2
  18. package/lib/cjs/components/editgrid/EditGrid.js +2 -1
  19. package/lib/cjs/components/editgrid/fixtures/comp16.d.ts +52 -0
  20. package/lib/cjs/components/editgrid/fixtures/comp16.js +71 -0
  21. package/lib/cjs/components/editgrid/fixtures/index.d.ts +2 -1
  22. package/lib/cjs/components/editgrid/fixtures/index.js +3 -1
  23. package/lib/mjs/CDN.d.ts +1 -0
  24. package/lib/mjs/CDN.js +1 -0
  25. package/lib/mjs/Webform.js +0 -2
  26. package/lib/mjs/components/_classes/component/Component.d.ts +1 -0
  27. package/lib/mjs/components/_classes/component/Component.js +7 -0
  28. package/lib/mjs/components/datagrid/DataGrid.d.ts +2 -0
  29. package/lib/mjs/components/datagrid/DataGrid.js +37 -25
  30. package/lib/mjs/components/datamap/DataMap.js +1 -1
  31. package/lib/mjs/components/editgrid/EditGrid.js +2 -1
  32. package/lib/mjs/components/editgrid/fixtures/comp16.d.ts +52 -0
  33. package/lib/mjs/components/editgrid/fixtures/comp16.js +69 -0
  34. package/lib/mjs/components/editgrid/fixtures/index.d.ts +2 -1
  35. package/lib/mjs/components/editgrid/fixtures/index.js +2 -1
  36. package/package.json +1 -1
package/lib/cjs/CDN.d.ts CHANGED
@@ -13,6 +13,7 @@ declare class CDN {
13
13
  bootswatch: string;
14
14
  'bootstrap-icons': string;
15
15
  ckeditor: string;
16
+ dragula: string;
16
17
  flatpickr: string;
17
18
  'flatpickr-formio': string;
18
19
  'font-awesome': string;
package/lib/cjs/CDN.js CHANGED
@@ -17,6 +17,7 @@ class CDN {
17
17
  'bootswatch': '5.3.3',
18
18
  'bootstrap-icons': '1.11.1',
19
19
  'ckeditor': '19.0.0',
20
+ 'dragula': '3.7.3',
20
21
  'flatpickr': '4.6.8',
21
22
  'flatpickr-formio': '4.6.13-formio.3',
22
23
  'font-awesome': '4.7.0',
@@ -17,7 +17,6 @@ const formUtils_1 = require("./utils/formUtils");
17
17
  if (typeof window !== 'undefined' && typeof window.global === 'undefined') {
18
18
  window.global = window;
19
19
  }
20
- const dragula_1 = __importDefault(require("dragula"));
21
20
  // Initialize the available forms.
22
21
  Formio_1.Formio.forms = {};
23
22
  // Allow people to register components.
@@ -314,7 +313,6 @@ class Webform extends NestedDataComponent_1.default {
314
313
  // Ensure the root is set to this component.
315
314
  this.root = this;
316
315
  this.localRoot = this;
317
- this.root.dragulaLib = dragula_1.default;
318
316
  }
319
317
  /* eslint-enable max-statements */
320
318
  get language() {
@@ -830,6 +830,7 @@ declare class Component extends Element {
830
830
  quill: any;
831
831
  get shouldSanitizeValue(): boolean;
832
832
  addAce(element: any, settings: any, onChange: any): any;
833
+ getDragula(): Promise<any>;
833
834
  get tree(): any;
834
835
  /**
835
836
  * The empty value for this component.
@@ -22,6 +22,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
22
22
  __setModuleDefault(result, mod);
23
23
  return result;
24
24
  };
25
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
26
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
27
+ return new (P || (P = Promise))(function (resolve, reject) {
28
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
29
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
30
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
31
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
32
+ });
33
+ };
25
34
  var __importDefault = (this && this.__importDefault) || function (mod) {
26
35
  return (mod && mod.__esModule) ? mod : { "default": mod };
27
36
  };
@@ -2374,6 +2383,15 @@ class Component extends Element_1.default {
2374
2383
  return editor;
2375
2384
  });
2376
2385
  }
2386
+ getDragula() {
2387
+ return __awaiter(this, void 0, void 0, function* () {
2388
+ return new Promise((resolve) => {
2389
+ return Formio_1.Formio.requireLibrary('dragula', 'dragula', `${Formio_1.Formio.cdn.dragula}/dragula.js`, true, (ready) => {
2390
+ return ready.then(resolve);
2391
+ });
2392
+ });
2393
+ });
2394
+ }
2377
2395
  get tree() {
2378
2396
  return this.component.tree || false;
2379
2397
  }
@@ -12,6 +12,7 @@ export default class DataGridComponent extends NestedArrayComponent {
12
12
  tabIndex: number;
13
13
  rows: any[] | undefined;
14
14
  columns: any[] | undefined;
15
+ dragulaReady: Promise<any> | undefined;
15
16
  visibleColumns: {} | undefined;
16
17
  set dataValue(value: any[]);
17
18
  get dataValue(): any[];
@@ -71,6 +72,7 @@ export default class DataGridComponent extends NestedArrayComponent {
71
72
  */
72
73
  reorderValues(valuesArr: any, oldPosition: number, newPosition: number, movedBelow: boolean | any): void;
73
74
  onReorder(element: any, _target: any, _source: any, sibling: any): void;
75
+ onCloned(el: any, original: any): void;
74
76
  focusOnNewRowElement(row: any): void;
75
77
  addRow(): void;
76
78
  updateComponentsRowIndex(components: any, rowIndex: any): void;
@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  const lodash_1 = __importDefault(require("lodash"));
7
7
  const NestedArrayComponent_1 = __importDefault(require("../_classes/nestedarray/NestedArrayComponent"));
8
8
  const utils_1 = require("../../utils/utils");
9
- const Components_1 = require("../Components");
10
- const dragula_1 = __importDefault(require("dragula"));
9
+ const Components_1 = __importDefault(require("../Components"));
11
10
  class DataGridComponent extends NestedArrayComponent_1.default {
12
11
  static schema(...extend) {
13
12
  return NestedArrayComponent_1.default.schema({
@@ -44,6 +43,9 @@ class DataGridComponent extends NestedArrayComponent_1.default {
44
43
  if (this.initRows || !lodash_1.default.isEqual(this.dataValue, this.emptyValue)) {
45
44
  this.createRows(true);
46
45
  }
46
+ if (this.allowReorder) {
47
+ this.dragulaReady = this.getDragula();
48
+ }
47
49
  this.visibleColumns = {};
48
50
  this.prevHasAddButton = this.hasAddButton();
49
51
  this.checkColumns();
@@ -282,31 +284,25 @@ class DataGridComponent extends NestedArrayComponent_1.default {
282
284
  this.refs[`${this.datagridKey}-row`].forEach((row, index) => {
283
285
  row.dragInfo = { index };
284
286
  });
285
- this.dragula = (0, dragula_1.default)([this.refs[`${this.datagridKey}-tbody`]], {
286
- moves: (_draggedElement, _oldParent, clickedElement) => {
287
- const clickedElementKey = clickedElement.getAttribute('data-key');
288
- const oldParentKey = _oldParent.getAttribute('data-key');
289
- //Check if the clicked button belongs to that container, if false, it belongs to the nested container
290
- if (oldParentKey === clickedElementKey) {
291
- return clickedElement.classList.contains('formio-drag-button');
292
- }
287
+ this.dragulaReady.then((dragula) => {
288
+ // The drop event may call redraw twice which calls attach twice and because this block of code is asynchronous
289
+ // BOTH redraws may be called before this block of code runs (which causes this block of code to run twice sequentially).
290
+ // This causes two dragula() calls on the same container which breaks dragula. To fix this the return value must
291
+ // be saved in this.dragula and have its container contents reset if it exists
292
+ if (this.dragula && this.dragula.containers) {
293
+ this.dragula.containers = [];
293
294
  }
294
- }).on('drop', this.onReorder.bind(this));
295
- this.dragula.on('cloned', (el, original) => {
296
- if (el && el.children && original && original.children) {
297
- lodash_1.default.each(original.children, (child, index) => {
298
- const styles = getComputedStyle(child, null);
299
- if (styles.cssText !== '') {
300
- el.children[index].style.cssText = styles.cssText;
295
+ this.dragula = dragula([this.refs[`${this.datagridKey}-tbody`]], {
296
+ moves: (_draggedElement, _oldParent, clickedElement) => {
297
+ const clickedElementKey = clickedElement.getAttribute('data-key');
298
+ const oldParentKey = _oldParent.getAttribute('data-key');
299
+ //Check if the clicked button belongs to that container, if false, it belongs to the nested container
300
+ if (oldParentKey === clickedElementKey) {
301
+ return clickedElement.classList.contains('formio-drag-button');
301
302
  }
302
- else {
303
- const cssText = Object.values(styles).reduce((css, propertyName) => {
304
- return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;
305
- }, '');
306
- el.children[index].style.cssText = cssText;
307
- }
308
- });
309
- }
303
+ }
304
+ }).on('drop', this.onReorder.bind(this))
305
+ .on('cloned', this.onCloned.bind(this));
310
306
  });
311
307
  }
312
308
  this.refs[`${this.datagridKey}-addRow`].forEach((addButton) => {
@@ -373,6 +369,22 @@ class DataGridComponent extends NestedArrayComponent_1.default {
373
369
  this.setValue(dataValue, { isReordered: true });
374
370
  this.rebuild();
375
371
  }
372
+ onCloned(el, original) {
373
+ if (el && el.children && original && original.children) {
374
+ lodash_1.default.each(original.children, (child, index) => {
375
+ const styles = getComputedStyle(child, null);
376
+ if (styles.cssText !== '') {
377
+ el.children[index].style.cssText = styles.cssText;
378
+ }
379
+ else {
380
+ const cssText = Object.values(styles).reduce((css, propertyName) => {
381
+ return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;
382
+ }, '');
383
+ el.children[index].style.cssText = cssText;
384
+ }
385
+ });
386
+ }
387
+ }
376
388
  focusOnNewRowElement(row) {
377
389
  Object.keys(row).find((key) => {
378
390
  const element = row[key].element;
@@ -422,7 +434,7 @@ class DataGridComponent extends NestedArrayComponent_1.default {
422
434
  }
423
435
  component.rowIndex = rowIndex;
424
436
  component.row = `${rowIndex}-${colIndex}`;
425
- component.path = Components_1.Components.getComponentPath(component);
437
+ component.path = Components_1.default.getComponentPath(component);
426
438
  });
427
439
  }
428
440
  updateRowsComponents(rowIndex) {
@@ -8,7 +8,7 @@ const DataGrid_1 = __importDefault(require("../datagrid/DataGrid"));
8
8
  const lodash_1 = __importDefault(require("lodash"));
9
9
  const eventemitter3_1 = __importDefault(require("eventemitter3"));
10
10
  const utils_1 = require("../../utils/utils");
11
- const Components_1 = require("../Components");
11
+ const Components_1 = __importDefault(require("../Components"));
12
12
  class DataMapComponent extends DataGrid_1.default {
13
13
  static schema(...extend) {
14
14
  return Component_1.default.schema({
@@ -241,7 +241,7 @@ class DataMapComponent extends DataGrid_1.default {
241
241
  delete dataValue[key];
242
242
  const comp = components[this.valueKey];
243
243
  comp.component.key = newKey;
244
- comp.path = Components_1.Components.calculateComponentPath(comp);
244
+ comp.path = Components_1.default.calculateComponentPath(comp);
245
245
  key = newKey;
246
246
  });
247
247
  const valueComponent = lodash_1.default.clone(this.component.valueComponent);
@@ -1101,7 +1101,8 @@ class EditGridComponent extends NestedArrayComponent_1.default {
1101
1101
  return false;
1102
1102
  }
1103
1103
  else if (rowsEditing && this.saveEditMode && !this.component.openWhenEmpty) {
1104
- this.setCustomValidity(this.t(this.errorMessage('unsavedRowsError')), dirty);
1104
+ this._errors = this.setCustomValidity(this.t(this.errorMessage('unsavedRowsError')), dirty);
1105
+ errors.push(...this._errors);
1105
1106
  return false;
1106
1107
  }
1107
1108
  const message = this.invalid || this.invalidMessage(data, dirty, false, row);
@@ -0,0 +1,52 @@
1
+ declare namespace _default {
2
+ let type: string;
3
+ let display: string;
4
+ let components: ({
5
+ title: string;
6
+ breadcrumbClickable: boolean;
7
+ buttonSettings: {
8
+ previous: boolean;
9
+ cancel: boolean;
10
+ next: boolean;
11
+ };
12
+ collapsible: boolean;
13
+ tableView: boolean;
14
+ key: string;
15
+ type: string;
16
+ label: string;
17
+ input: boolean;
18
+ components: {
19
+ label: string;
20
+ tableView: boolean;
21
+ rowDrafts: boolean;
22
+ key: string;
23
+ type: string;
24
+ input: boolean;
25
+ components: {
26
+ label: string;
27
+ tableView: boolean;
28
+ key: string;
29
+ type: string;
30
+ input: boolean;
31
+ alwaysEnabled: boolean;
32
+ }[];
33
+ alwaysEnabled: boolean;
34
+ }[];
35
+ alwaysEnabled: boolean;
36
+ showValidations?: undefined;
37
+ } | {
38
+ label: string;
39
+ showValidations: boolean;
40
+ alwaysEnabled: boolean;
41
+ tableView: boolean;
42
+ key: string;
43
+ type: string;
44
+ input: boolean;
45
+ title?: undefined;
46
+ breadcrumbClickable?: undefined;
47
+ buttonSettings?: undefined;
48
+ collapsible?: undefined;
49
+ components?: undefined;
50
+ })[];
51
+ }
52
+ export default _default;
@@ -0,0 +1,71 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.default = {
4
+ type: 'form',
5
+ display: 'wizard',
6
+ components: [
7
+ {
8
+ title: 'Page 1',
9
+ breadcrumbClickable: true,
10
+ buttonSettings: {
11
+ previous: true,
12
+ cancel: true,
13
+ next: true
14
+ },
15
+ collapsible: false,
16
+ tableView: false,
17
+ key: 'page3',
18
+ type: 'panel',
19
+ label: 'Page 2',
20
+ input: false,
21
+ components: [
22
+ {
23
+ label: 'Edit Grid',
24
+ tableView: true,
25
+ rowDrafts: false,
26
+ key: 'editGrid',
27
+ type: 'editgrid',
28
+ input: true,
29
+ components: [
30
+ {
31
+ label: 'Text Field',
32
+ tableView: true,
33
+ key: 'textField',
34
+ type: 'textfield',
35
+ input: true,
36
+ alwaysEnabled: false
37
+ }
38
+ ],
39
+ alwaysEnabled: false
40
+ }
41
+ ],
42
+ alwaysEnabled: false
43
+ },
44
+ {
45
+ title: 'Page 2',
46
+ breadcrumbClickable: true,
47
+ buttonSettings: {
48
+ previous: true,
49
+ cancel: true,
50
+ next: true
51
+ },
52
+ collapsible: false,
53
+ tableView: false,
54
+ key: 'page2',
55
+ type: 'panel',
56
+ label: 'Page 1',
57
+ input: false,
58
+ alwaysEnabled: false,
59
+ components: []
60
+ },
61
+ {
62
+ label: 'Submit',
63
+ showValidations: false,
64
+ alwaysEnabled: false,
65
+ tableView: false,
66
+ key: 'submit',
67
+ type: 'button',
68
+ input: true
69
+ }
70
+ ]
71
+ };
@@ -13,8 +13,9 @@ import comp6 from './comp6';
13
13
  import comp7 from './comp7';
14
14
  import comp8 from './comp8';
15
15
  import comp9 from './comp9';
16
+ import comp16 from './comp16';
16
17
  import compOpenWhenEmpty from './comp-openWhenEmpty';
17
18
  import withOpenWhenEmptyAndConditions from './comp-with-conditions-and-openWhenEmpty';
18
19
  import compWithCustomDefaultValue from './comp-with-custom-default-value';
19
20
  import compTestEvents from './comp-test-events';
20
- export { comp1, comp2, comp3, comp10, comp11, comp12, comp13, comp14, comp15, comp4, comp5, comp6, comp7, comp8, comp9, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };
21
+ export { comp1, comp2, comp3, comp10, comp11, comp12, comp13, comp14, comp15, comp4, comp5, comp6, comp7, comp8, comp9, comp16, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.compTestEvents = exports.compWithCustomDefaultValue = exports.withOpenWhenEmptyAndConditions = exports.compOpenWhenEmpty = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp15 = exports.comp14 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
6
+ exports.compTestEvents = exports.compWithCustomDefaultValue = exports.withOpenWhenEmptyAndConditions = exports.compOpenWhenEmpty = exports.comp16 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp15 = exports.comp14 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
7
7
  const comp1_1 = __importDefault(require("./comp1"));
8
8
  exports.comp1 = comp1_1.default;
9
9
  const comp2_1 = __importDefault(require("./comp2"));
@@ -34,6 +34,8 @@ const comp14_1 = __importDefault(require("./comp14"));
34
34
  exports.comp14 = comp14_1.default;
35
35
  const comp15_1 = __importDefault(require("./comp15"));
36
36
  exports.comp15 = comp15_1.default;
37
+ const comp16_1 = __importDefault(require("./comp16"));
38
+ exports.comp16 = comp16_1.default;
37
39
  const comp_with_conditions_and_openWhenEmpty_1 = __importDefault(require("./comp-with-conditions-and-openWhenEmpty"));
38
40
  exports.withOpenWhenEmptyAndConditions = comp_with_conditions_and_openWhenEmpty_1.default;
39
41
  const comp_openWhenEmpty_1 = __importDefault(require("./comp-openWhenEmpty"));
package/lib/mjs/CDN.d.ts CHANGED
@@ -13,6 +13,7 @@ declare class CDN {
13
13
  bootswatch: string;
14
14
  'bootstrap-icons': string;
15
15
  ckeditor: string;
16
+ dragula: string;
16
17
  flatpickr: string;
17
18
  'flatpickr-formio': string;
18
19
  'font-awesome': string;
package/lib/mjs/CDN.js CHANGED
@@ -16,6 +16,7 @@ class CDN {
16
16
  'bootswatch': '5.3.3',
17
17
  'bootstrap-icons': '1.11.1',
18
18
  'ckeditor': '19.0.0',
19
+ 'dragula': '3.7.3',
19
20
  'flatpickr': '4.6.8',
20
21
  'flatpickr-formio': '4.6.13-formio.3',
21
22
  'font-awesome': '4.7.0',
@@ -12,7 +12,6 @@ import { eachComponent } from "./utils/formUtils";
12
12
  if (typeof window !== 'undefined' && typeof window.global === 'undefined') {
13
13
  window.global = window;
14
14
  }
15
- import dragula from "dragula";
16
15
  // Initialize the available forms.
17
16
  Formio.forms = {};
18
17
  // Allow people to register components.
@@ -286,7 +285,6 @@ export default class Webform extends NestedDataComponent {
286
285
  // Ensure the root is set to this component.
287
286
  this.root = this;
288
287
  this.localRoot = this;
289
- this.root.dragulaLib = dragula;
290
288
  }
291
289
  /* eslint-enable max-statements */
292
290
  get language() {
@@ -830,6 +830,7 @@ declare class Component extends Element {
830
830
  quill: any;
831
831
  get shouldSanitizeValue(): boolean;
832
832
  addAce(element: any, settings: any, onChange: any): any;
833
+ getDragula(): Promise<any>;
833
834
  get tree(): any;
834
835
  /**
835
836
  * The empty value for this component.
@@ -2351,6 +2351,13 @@ export default class Component extends Element {
2351
2351
  return editor;
2352
2352
  });
2353
2353
  }
2354
+ async getDragula() {
2355
+ return new Promise((resolve) => {
2356
+ return Formio.requireLibrary('dragula', 'dragula', `${Formio.cdn.dragula}/dragula.js`, true, (ready) => {
2357
+ return ready.then(resolve);
2358
+ });
2359
+ });
2360
+ }
2354
2361
  get tree() {
2355
2362
  return this.component.tree || false;
2356
2363
  }
@@ -12,6 +12,7 @@ export default class DataGridComponent extends NestedArrayComponent {
12
12
  tabIndex: number;
13
13
  rows: any[] | undefined;
14
14
  columns: any[] | undefined;
15
+ dragulaReady: Promise<any> | undefined;
15
16
  visibleColumns: {} | undefined;
16
17
  set dataValue(value: any[]);
17
18
  get dataValue(): any[];
@@ -71,6 +72,7 @@ export default class DataGridComponent extends NestedArrayComponent {
71
72
  */
72
73
  reorderValues(valuesArr: any, oldPosition: number, newPosition: number, movedBelow: boolean | any): void;
73
74
  onReorder(element: any, _target: any, _source: any, sibling: any): void;
75
+ onCloned(el: any, original: any): void;
74
76
  focusOnNewRowElement(row: any): void;
75
77
  addRow(): void;
76
78
  updateComponentsRowIndex(components: any, rowIndex: any): void;
@@ -1,8 +1,7 @@
1
1
  import _ from 'lodash';
2
2
  import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';
3
3
  import { fastCloneDeep, getFocusableElements } from '../../utils/utils';
4
- import { Components } from '../Components';
5
- import dragula from 'dragula';
4
+ import Components from '../Components';
6
5
  export default class DataGridComponent extends NestedArrayComponent {
7
6
  static schema(...extend) {
8
7
  return NestedArrayComponent.schema({
@@ -39,6 +38,9 @@ export default class DataGridComponent extends NestedArrayComponent {
39
38
  if (this.initRows || !_.isEqual(this.dataValue, this.emptyValue)) {
40
39
  this.createRows(true);
41
40
  }
41
+ if (this.allowReorder) {
42
+ this.dragulaReady = this.getDragula();
43
+ }
42
44
  this.visibleColumns = {};
43
45
  this.prevHasAddButton = this.hasAddButton();
44
46
  this.checkColumns();
@@ -279,31 +281,25 @@ export default class DataGridComponent extends NestedArrayComponent {
279
281
  this.refs[`${this.datagridKey}-row`].forEach((row, index) => {
280
282
  row.dragInfo = { index };
281
283
  });
282
- this.dragula = dragula([this.refs[`${this.datagridKey}-tbody`]], {
283
- moves: (_draggedElement, _oldParent, clickedElement) => {
284
- const clickedElementKey = clickedElement.getAttribute('data-key');
285
- const oldParentKey = _oldParent.getAttribute('data-key');
286
- //Check if the clicked button belongs to that container, if false, it belongs to the nested container
287
- if (oldParentKey === clickedElementKey) {
288
- return clickedElement.classList.contains('formio-drag-button');
289
- }
284
+ this.dragulaReady.then((dragula) => {
285
+ // The drop event may call redraw twice which calls attach twice and because this block of code is asynchronous
286
+ // BOTH redraws may be called before this block of code runs (which causes this block of code to run twice sequentially).
287
+ // This causes two dragula() calls on the same container which breaks dragula. To fix this the return value must
288
+ // be saved in this.dragula and have its container contents reset if it exists
289
+ if (this.dragula && this.dragula.containers) {
290
+ this.dragula.containers = [];
290
291
  }
291
- }).on('drop', this.onReorder.bind(this));
292
- this.dragula.on('cloned', (el, original) => {
293
- if (el && el.children && original && original.children) {
294
- _.each(original.children, (child, index) => {
295
- const styles = getComputedStyle(child, null);
296
- if (styles.cssText !== '') {
297
- el.children[index].style.cssText = styles.cssText;
292
+ this.dragula = dragula([this.refs[`${this.datagridKey}-tbody`]], {
293
+ moves: (_draggedElement, _oldParent, clickedElement) => {
294
+ const clickedElementKey = clickedElement.getAttribute('data-key');
295
+ const oldParentKey = _oldParent.getAttribute('data-key');
296
+ //Check if the clicked button belongs to that container, if false, it belongs to the nested container
297
+ if (oldParentKey === clickedElementKey) {
298
+ return clickedElement.classList.contains('formio-drag-button');
298
299
  }
299
- else {
300
- const cssText = Object.values(styles).reduce((css, propertyName) => {
301
- return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;
302
- }, '');
303
- el.children[index].style.cssText = cssText;
304
- }
305
- });
306
- }
300
+ }
301
+ }).on('drop', this.onReorder.bind(this))
302
+ .on('cloned', this.onCloned.bind(this));
307
303
  });
308
304
  }
309
305
  this.refs[`${this.datagridKey}-addRow`].forEach((addButton) => {
@@ -370,6 +366,22 @@ export default class DataGridComponent extends NestedArrayComponent {
370
366
  this.setValue(dataValue, { isReordered: true });
371
367
  this.rebuild();
372
368
  }
369
+ onCloned(el, original) {
370
+ if (el && el.children && original && original.children) {
371
+ _.each(original.children, (child, index) => {
372
+ const styles = getComputedStyle(child, null);
373
+ if (styles.cssText !== '') {
374
+ el.children[index].style.cssText = styles.cssText;
375
+ }
376
+ else {
377
+ const cssText = Object.values(styles).reduce((css, propertyName) => {
378
+ return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;
379
+ }, '');
380
+ el.children[index].style.cssText = cssText;
381
+ }
382
+ });
383
+ }
384
+ }
373
385
  focusOnNewRowElement(row) {
374
386
  Object.keys(row).find((key) => {
375
387
  const element = row[key].element;
@@ -3,7 +3,7 @@ import DataGridComponent from '../datagrid/DataGrid';
3
3
  import _ from 'lodash';
4
4
  import EventEmitter from 'eventemitter3';
5
5
  import { componentValueTypes, getComponentSavedTypes, uniqueKey } from '../../utils/utils';
6
- import { Components } from '../Components';
6
+ import Components from '../Components';
7
7
  export default class DataMapComponent extends DataGridComponent {
8
8
  static schema(...extend) {
9
9
  return Component.schema({
@@ -1089,7 +1089,8 @@ export default class EditGridComponent extends NestedArrayComponent {
1089
1089
  return false;
1090
1090
  }
1091
1091
  else if (rowsEditing && this.saveEditMode && !this.component.openWhenEmpty) {
1092
- this.setCustomValidity(this.t(this.errorMessage('unsavedRowsError')), dirty);
1092
+ this._errors = this.setCustomValidity(this.t(this.errorMessage('unsavedRowsError')), dirty);
1093
+ errors.push(...this._errors);
1093
1094
  return false;
1094
1095
  }
1095
1096
  const message = this.invalid || this.invalidMessage(data, dirty, false, row);
@@ -0,0 +1,52 @@
1
+ declare namespace _default {
2
+ let type: string;
3
+ let display: string;
4
+ let components: ({
5
+ title: string;
6
+ breadcrumbClickable: boolean;
7
+ buttonSettings: {
8
+ previous: boolean;
9
+ cancel: boolean;
10
+ next: boolean;
11
+ };
12
+ collapsible: boolean;
13
+ tableView: boolean;
14
+ key: string;
15
+ type: string;
16
+ label: string;
17
+ input: boolean;
18
+ components: {
19
+ label: string;
20
+ tableView: boolean;
21
+ rowDrafts: boolean;
22
+ key: string;
23
+ type: string;
24
+ input: boolean;
25
+ components: {
26
+ label: string;
27
+ tableView: boolean;
28
+ key: string;
29
+ type: string;
30
+ input: boolean;
31
+ alwaysEnabled: boolean;
32
+ }[];
33
+ alwaysEnabled: boolean;
34
+ }[];
35
+ alwaysEnabled: boolean;
36
+ showValidations?: undefined;
37
+ } | {
38
+ label: string;
39
+ showValidations: boolean;
40
+ alwaysEnabled: boolean;
41
+ tableView: boolean;
42
+ key: string;
43
+ type: string;
44
+ input: boolean;
45
+ title?: undefined;
46
+ breadcrumbClickable?: undefined;
47
+ buttonSettings?: undefined;
48
+ collapsible?: undefined;
49
+ components?: undefined;
50
+ })[];
51
+ }
52
+ export default _default;