@formio/js 5.0.0-dev.5940.cf4089b → 5.0.0-dev.5947.acce78f
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.
- package/Changelog.md +1 -0
- package/dist/formio.form.js +580 -590
- package/dist/formio.form.min.js +1 -1
- package/dist/formio.form.min.js.LICENSE.txt +1 -3
- package/dist/formio.full.js +581 -591
- package/dist/formio.full.min.js +1 -1
- package/dist/formio.full.min.js.LICENSE.txt +1 -3
- package/dist/formio.js +3006 -287
- package/dist/formio.min.js +1 -1
- package/dist/formio.min.js.LICENSE.txt +12 -0
- package/dist/formio.utils.js +41 -51
- package/dist/formio.utils.min.js +1 -1
- package/dist/formio.utils.min.js.LICENSE.txt +1 -3
- package/lib/cjs/Webform.d.ts +1 -1
- package/lib/cjs/Webform.js +27 -28
- package/lib/cjs/WebformBuilder.js +6 -13
- package/lib/cjs/Wizard.js +4 -11
- package/lib/cjs/components/Components.d.ts +0 -7
- package/lib/cjs/components/Components.js +1 -33
- package/lib/cjs/components/_classes/component/Component.d.ts +24 -7
- package/lib/cjs/components/_classes/component/Component.js +47 -13
- package/lib/cjs/components/_classes/componentModal/ComponentModal.d.ts +1 -0
- package/lib/cjs/components/_classes/componentModal/ComponentModal.js +1 -0
- package/lib/cjs/components/_classes/nested/NestedComponent.d.ts +4 -19
- package/lib/cjs/components/_classes/nested/NestedComponent.js +38 -53
- package/lib/cjs/components/_classes/nestedarray/NestedArrayComponent.d.ts +2 -1
- package/lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js +9 -46
- package/lib/cjs/components/datagrid/DataGrid.d.ts +0 -1
- package/lib/cjs/components/datagrid/DataGrid.js +1 -45
- package/lib/cjs/components/datamap/DataMap.js +1 -2
- package/lib/cjs/components/editgrid/EditGrid.js +11 -8
- package/lib/cjs/components/form/Form.d.ts +1 -3
- package/lib/cjs/components/form/Form.js +16 -24
- package/lib/cjs/components/selectboxes/SelectBoxes.js +0 -1
- package/lib/cjs/formio.form.js +0 -1
- package/lib/cjs/utils/conditionOperators/DateGreaterThan.js +2 -2
- package/lib/cjs/utils/conditionOperators/IsEmptyValue.d.ts +2 -2
- package/lib/cjs/utils/conditionOperators/IsEmptyValue.js +2 -2
- package/lib/cjs/utils/conditionOperators/IsEqualTo.d.ts +2 -2
- package/lib/cjs/utils/conditionOperators/IsEqualTo.js +2 -2
- package/lib/cjs/utils/formUtils.d.ts +25 -14
- package/lib/cjs/utils/formUtils.js +11 -16
- package/lib/cjs/utils/utils.d.ts +1 -2
- package/lib/cjs/utils/utils.js +15 -31
- package/lib/mjs/Webform.d.ts +1 -1
- package/lib/mjs/Webform.js +24 -27
- package/lib/mjs/WebformBuilder.js +6 -13
- package/lib/mjs/Wizard.js +2 -8
- package/lib/mjs/components/Components.d.ts +0 -7
- package/lib/mjs/components/Components.js +1 -32
- package/lib/mjs/components/_classes/component/Component.d.ts +24 -7
- package/lib/mjs/components/_classes/component/Component.js +49 -14
- package/lib/mjs/components/_classes/componentModal/ComponentModal.d.ts +1 -0
- package/lib/mjs/components/_classes/componentModal/ComponentModal.js +1 -0
- package/lib/mjs/components/_classes/nested/NestedComponent.d.ts +4 -19
- package/lib/mjs/components/_classes/nested/NestedComponent.js +39 -54
- package/lib/mjs/components/_classes/nestedarray/NestedArrayComponent.d.ts +2 -1
- package/lib/mjs/components/_classes/nestedarray/NestedArrayComponent.js +8 -43
- package/lib/mjs/components/datagrid/DataGrid.d.ts +0 -1
- package/lib/mjs/components/datagrid/DataGrid.js +1 -45
- package/lib/mjs/components/datamap/DataMap.js +1 -2
- package/lib/mjs/components/editgrid/EditGrid.js +13 -7
- package/lib/mjs/components/form/Form.d.ts +1 -3
- package/lib/mjs/components/form/Form.js +17 -24
- package/lib/mjs/components/selectboxes/SelectBoxes.js +0 -1
- package/lib/mjs/formio.form.js +0 -1
- package/lib/mjs/utils/conditionOperators/DateGreaterThan.js +2 -2
- package/lib/mjs/utils/conditionOperators/IsEmptyValue.d.ts +2 -2
- package/lib/mjs/utils/conditionOperators/IsEmptyValue.js +2 -2
- package/lib/mjs/utils/conditionOperators/IsEqualTo.d.ts +2 -2
- package/lib/mjs/utils/conditionOperators/IsEqualTo.js +2 -2
- package/lib/mjs/utils/formUtils.d.ts +25 -14
- package/lib/mjs/utils/formUtils.js +2 -12
- package/lib/mjs/utils/utils.d.ts +1 -2
- package/lib/mjs/utils/utils.js +14 -29
- package/package.json +4 -4
|
@@ -6,7 +6,7 @@ import isMobile from 'ismobilejs';
|
|
|
6
6
|
import { processOne, processOneSync, validateProcessInfo } from '@formio/core/process';
|
|
7
7
|
import { Formio } from '../../../Formio';
|
|
8
8
|
import * as FormioUtils from '../../../utils/utils';
|
|
9
|
-
import { fastCloneDeep, boolValue,
|
|
9
|
+
import { fastCloneDeep, boolValue, isInsideScopingComponent, currentTimezone, getScriptPlugin, getContextualRowData } from '../../../utils/utils';
|
|
10
10
|
import Element from '../../../Element';
|
|
11
11
|
import ComponentModal from '../componentModal/ComponentModal';
|
|
12
12
|
import Widgets from '../../../widgets';
|
|
@@ -221,6 +221,10 @@ export default class Component extends Element {
|
|
|
221
221
|
* @private
|
|
222
222
|
*/
|
|
223
223
|
this._hasCondition = null;
|
|
224
|
+
/**
|
|
225
|
+
* The row index for this component.
|
|
226
|
+
*/
|
|
227
|
+
this._rowIndex = undefined;
|
|
224
228
|
/**
|
|
225
229
|
* References to dom elements
|
|
226
230
|
*/
|
|
@@ -231,11 +235,6 @@ export default class Component extends Element {
|
|
|
231
235
|
this.options.components[component.type]) {
|
|
232
236
|
_.merge(component, this.options.components[component.type]);
|
|
233
237
|
}
|
|
234
|
-
/**
|
|
235
|
-
* The data path to this specific component instance.
|
|
236
|
-
* @type {string}
|
|
237
|
-
*/
|
|
238
|
-
this.path = component?.key || '';
|
|
239
238
|
/**
|
|
240
239
|
* An array of all the children components errors.
|
|
241
240
|
*/
|
|
@@ -304,6 +303,14 @@ export default class Component extends Element {
|
|
|
304
303
|
* @type {Component}
|
|
305
304
|
*/
|
|
306
305
|
this.parent = this.options.parent;
|
|
306
|
+
/**
|
|
307
|
+
* The component paths for this component.
|
|
308
|
+
* @type {import('@formio/core').ComponentPaths} - The component paths.
|
|
309
|
+
*/
|
|
310
|
+
this.paths = FormioUtils.getComponentPaths(this.component, this.parent?.component, {
|
|
311
|
+
...this.parent?.paths,
|
|
312
|
+
dataIndex: this.options.rowIndex === undefined ? this.parent?.paths?.dataIndex : this.options.rowIndex
|
|
313
|
+
});
|
|
307
314
|
this.options.name = this.options.name || 'data';
|
|
308
315
|
this._path = '';
|
|
309
316
|
// Needs for Nextgen Rules Engine
|
|
@@ -409,12 +416,7 @@ export default class Component extends Element {
|
|
|
409
416
|
}
|
|
410
417
|
/* eslint-enable max-statements */
|
|
411
418
|
get componentsMap() {
|
|
412
|
-
|
|
413
|
-
return this.localRoot.childComponentsMap;
|
|
414
|
-
}
|
|
415
|
-
const localMap = {};
|
|
416
|
-
localMap[this.path] = this;
|
|
417
|
-
return localMap;
|
|
419
|
+
return this.root?.childComponentsMap || {};
|
|
418
420
|
}
|
|
419
421
|
get data() {
|
|
420
422
|
return this._data;
|
|
@@ -460,6 +462,25 @@ export default class Component extends Element {
|
|
|
460
462
|
this.component.addons.forEach((addon) => this.createAddon(addon));
|
|
461
463
|
}
|
|
462
464
|
}
|
|
465
|
+
/**
|
|
466
|
+
* Get Row Index.
|
|
467
|
+
* @returns {number} - The row index.
|
|
468
|
+
*/
|
|
469
|
+
get rowIndex() {
|
|
470
|
+
return this._rowIndex;
|
|
471
|
+
}
|
|
472
|
+
/**
|
|
473
|
+
* Set Row Index to row and update each component.
|
|
474
|
+
* @param {number} value - The row index.
|
|
475
|
+
* @returns {void}
|
|
476
|
+
*/
|
|
477
|
+
set rowIndex(value) {
|
|
478
|
+
this.paths = FormioUtils.getComponentPaths(this.component, this.parent?.component, {
|
|
479
|
+
...(this.parent?.paths || {}),
|
|
480
|
+
...{ dataIndex: value }
|
|
481
|
+
});
|
|
482
|
+
this._rowIndex = value;
|
|
483
|
+
}
|
|
463
484
|
afterComponentAssign() {
|
|
464
485
|
//implement in extended classes
|
|
465
486
|
}
|
|
@@ -528,6 +549,12 @@ export default class Component extends Element {
|
|
|
528
549
|
get key() {
|
|
529
550
|
return _.get(this.component, 'key', '');
|
|
530
551
|
}
|
|
552
|
+
get path() {
|
|
553
|
+
return this.paths.dataPath;
|
|
554
|
+
}
|
|
555
|
+
set path(path) {
|
|
556
|
+
throw new Error('Should not be setting the path of a component.');
|
|
557
|
+
}
|
|
531
558
|
set parentVisible(value) {
|
|
532
559
|
this._parentVisible = value;
|
|
533
560
|
}
|
|
@@ -1246,7 +1273,7 @@ export default class Component extends Element {
|
|
|
1246
1273
|
if (refreshData === 'data') {
|
|
1247
1274
|
this.refresh(this.data, changed, flags);
|
|
1248
1275
|
}
|
|
1249
|
-
else if ((changePath &&
|
|
1276
|
+
else if ((changePath && (changed.instance?.paths?.localPath === refreshData)) && changed && changed.instance &&
|
|
1250
1277
|
// Make sure the changed component is not in a different "context". Solves issues where refreshOn being set
|
|
1251
1278
|
// in fields inside EditGrids could alter their state from other rows (which is bad).
|
|
1252
1279
|
this.inContext(changed.instance)) {
|
|
@@ -2857,6 +2884,9 @@ export default class Component extends Element {
|
|
|
2857
2884
|
* @returns {string} - The message to show when the component is invalid.
|
|
2858
2885
|
*/
|
|
2859
2886
|
invalidMessage(data, dirty, ignoreCondition, row) {
|
|
2887
|
+
if (!row) {
|
|
2888
|
+
row = getContextualRowData(this.component, data, this.paths);
|
|
2889
|
+
}
|
|
2860
2890
|
if (!ignoreCondition && !this.checkCondition(row, data)) {
|
|
2861
2891
|
return '';
|
|
2862
2892
|
}
|
|
@@ -2874,6 +2904,8 @@ export default class Component extends Element {
|
|
|
2874
2904
|
data,
|
|
2875
2905
|
row,
|
|
2876
2906
|
path: this.path || this.component.key,
|
|
2907
|
+
parent: this.parent?.component,
|
|
2908
|
+
paths: this.paths,
|
|
2877
2909
|
scope: validationScope,
|
|
2878
2910
|
instance: this,
|
|
2879
2911
|
processors: [
|
|
@@ -2926,7 +2958,7 @@ export default class Component extends Element {
|
|
|
2926
2958
|
if (flags.silentCheck) {
|
|
2927
2959
|
return [];
|
|
2928
2960
|
}
|
|
2929
|
-
let isDirty = this.dirty || flags.dirty;
|
|
2961
|
+
let isDirty = (flags.dirty === false) ? false : (this.dirty || flags.dirty);
|
|
2930
2962
|
if (this.options.alwaysDirty) {
|
|
2931
2963
|
isDirty = true;
|
|
2932
2964
|
}
|
|
@@ -2951,7 +2983,10 @@ export default class Component extends Element {
|
|
|
2951
2983
|
component: this.component,
|
|
2952
2984
|
data,
|
|
2953
2985
|
row,
|
|
2986
|
+
local: !!flags.local,
|
|
2954
2987
|
value: this.validationValue,
|
|
2988
|
+
parent: this.parent?.component,
|
|
2989
|
+
paths: this.paths,
|
|
2955
2990
|
path: this.path || this.component.key,
|
|
2956
2991
|
instance: this,
|
|
2957
2992
|
form: this.root ? this.root._form : {},
|
|
@@ -56,18 +56,6 @@ export default class NestedComponent extends Field {
|
|
|
56
56
|
* @returns {object} - The current form object.
|
|
57
57
|
*/
|
|
58
58
|
get currentForm(): object;
|
|
59
|
-
/**
|
|
60
|
-
* Set Row Index to row and update each component.
|
|
61
|
-
* @param {number} value - The row index.
|
|
62
|
-
* @returns {void}
|
|
63
|
-
*/
|
|
64
|
-
set rowIndex(value: number);
|
|
65
|
-
/**
|
|
66
|
-
* Get Row Index.
|
|
67
|
-
* @returns {number} - The row index.
|
|
68
|
-
*/
|
|
69
|
-
get rowIndex(): number;
|
|
70
|
-
_rowIndex: number | undefined;
|
|
71
59
|
/**
|
|
72
60
|
* Get Contextual data of the component.
|
|
73
61
|
* @returns {object} - The contextual data of the component.
|
|
@@ -115,14 +103,11 @@ export default class NestedComponent extends Field {
|
|
|
115
103
|
*/
|
|
116
104
|
eachComponent(fn: Function): void;
|
|
117
105
|
/**
|
|
118
|
-
* Returns a component provided a key. This performs a deep search within the
|
|
119
|
-
* component tree.
|
|
106
|
+
* Returns a component provided a key. This performs a deep search within the component tree.
|
|
120
107
|
* @param {string} path - The path to the component.
|
|
121
|
-
* @param {Function} [fn] - Called with the component once found.
|
|
122
|
-
* @param {string} [originalPath] - The original path to the component.
|
|
123
108
|
* @returns {any} - The component that is located.
|
|
124
109
|
*/
|
|
125
|
-
getComponent(path: string
|
|
110
|
+
getComponent(path: string): any;
|
|
126
111
|
/**
|
|
127
112
|
* Return a component provided the Id of the component.
|
|
128
113
|
* @param {string} id - The Id of the component.
|
|
@@ -211,12 +196,12 @@ export default class NestedComponent extends Field {
|
|
|
211
196
|
calculateValue(data: any, flags: any, row: any): any;
|
|
212
197
|
isLastPage(): boolean;
|
|
213
198
|
isValid(data: any, dirty: any): any;
|
|
214
|
-
validationProcessor({ scope, data, row, instance,
|
|
199
|
+
validationProcessor({ scope, data, row, instance, paths }: {
|
|
215
200
|
scope: any;
|
|
216
201
|
data: any;
|
|
217
202
|
row: any;
|
|
218
203
|
instance: any;
|
|
219
|
-
|
|
204
|
+
paths: any;
|
|
220
205
|
}, flags: any): void;
|
|
221
206
|
/**
|
|
222
207
|
* Perform a validation on all child components of this nested component.
|
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
import _ from 'lodash';
|
|
3
3
|
import Field from '../field/Field';
|
|
4
4
|
import Components from '../../Components';
|
|
5
|
-
|
|
5
|
+
'';
|
|
6
|
+
import { getComponentPaths, getRandomComponentId, componentMatches, getBestMatch, getStringFromComponentPath } from '../../../utils/utils';
|
|
6
7
|
import { process as processAsync, processSync } from '@formio/core/process';
|
|
7
8
|
/**
|
|
8
9
|
* NestedComponent class.
|
|
@@ -198,6 +199,10 @@ export default class NestedComponent extends Field {
|
|
|
198
199
|
*/
|
|
199
200
|
set rowIndex(value) {
|
|
200
201
|
this._rowIndex = value;
|
|
202
|
+
this.paths = getComponentPaths(this.component, this.parent?.component, {
|
|
203
|
+
...(this.parent?.paths || {}),
|
|
204
|
+
...{ dataIndex: value }
|
|
205
|
+
});
|
|
201
206
|
this.eachComponent((component) => {
|
|
202
207
|
component.rowIndex = value;
|
|
203
208
|
});
|
|
@@ -293,56 +298,36 @@ export default class NestedComponent extends Field {
|
|
|
293
298
|
});
|
|
294
299
|
}
|
|
295
300
|
/**
|
|
296
|
-
* Returns a component provided a key. This performs a deep search within the
|
|
297
|
-
* component tree.
|
|
301
|
+
* Returns a component provided a key. This performs a deep search within the component tree.
|
|
298
302
|
* @param {string} path - The path to the component.
|
|
299
|
-
* @param {Function} [fn] - Called with the component once found.
|
|
300
|
-
* @param {string} [originalPath] - The original path to the component.
|
|
301
303
|
* @returns {any} - The component that is located.
|
|
302
304
|
*/
|
|
303
|
-
getComponent(path
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
const matchPath = component.hasInput && component.path ? pathStr.includes(component.path) : true;
|
|
328
|
-
if (component.component.key === key) {
|
|
329
|
-
possibleComp = component;
|
|
330
|
-
if (matchPath) {
|
|
331
|
-
comp = component;
|
|
332
|
-
if (remainingPath.length > 0 && 'getComponent' in component) {
|
|
333
|
-
comp = component.getComponent(remainingPath, fn, originalPath);
|
|
334
|
-
}
|
|
335
|
-
else if (fn) {
|
|
336
|
-
fn(component, components);
|
|
337
|
-
}
|
|
338
|
-
return false;
|
|
339
|
-
}
|
|
340
|
-
}
|
|
305
|
+
getComponent(path) {
|
|
306
|
+
path = getStringFromComponentPath(path);
|
|
307
|
+
const matches = {
|
|
308
|
+
path: undefined,
|
|
309
|
+
fullPath: undefined,
|
|
310
|
+
localPath: undefined,
|
|
311
|
+
fullLocalPath: undefined,
|
|
312
|
+
dataPath: undefined,
|
|
313
|
+
localDataPath: undefined,
|
|
314
|
+
key: undefined,
|
|
315
|
+
};
|
|
316
|
+
this.everyComponent((component) => {
|
|
317
|
+
// All searches are relative to this component so replace this path from the child paths.
|
|
318
|
+
componentMatches(component.component, {
|
|
319
|
+
path: component.paths?.path?.replace(new RegExp(`^${this.paths?.path}\\.?`), ''),
|
|
320
|
+
fullPath: component.paths?.fullPath?.replace(new RegExp(`^${this.paths?.fullPath}\\.?`), ''),
|
|
321
|
+
localPath: component.paths?.localPath?.replace(new RegExp(`^${this.paths?.localPath}\\.?`), ''),
|
|
322
|
+
fullLocalPath: component.paths?.fullLocalPath?.replace(new RegExp(`^${this.paths?.fullLocalPath}\\.?`), ''),
|
|
323
|
+
dataPath: component.paths?.dataPath?.replace(new RegExp(`^${this.paths?.dataPath}\\.?`), ''),
|
|
324
|
+
localDataPath: component.paths?.localDataPath?.replace(new RegExp(`^${this.paths?.localDataPath}\\.?`), ''),
|
|
325
|
+
}, path, this.rowIndex, matches, (type, match) => {
|
|
326
|
+
match.instance = component;
|
|
327
|
+
return match;
|
|
328
|
+
});
|
|
341
329
|
});
|
|
342
|
-
|
|
343
|
-
comp = possibleComp;
|
|
344
|
-
}
|
|
345
|
-
return comp;
|
|
330
|
+
return getBestMatch(matches)?.instance;
|
|
346
331
|
}
|
|
347
332
|
/**
|
|
348
333
|
* Return a component provided the Id of the component.
|
|
@@ -678,19 +663,16 @@ export default class NestedComponent extends Field {
|
|
|
678
663
|
isValid(data, dirty) {
|
|
679
664
|
return this.getComponents().reduce((valid, comp) => comp.isValid(data, dirty) && valid, super.isValid(data, dirty));
|
|
680
665
|
}
|
|
681
|
-
validationProcessor({ scope, data, row, instance,
|
|
666
|
+
validationProcessor({ scope, data, row, instance, paths }, flags) {
|
|
682
667
|
const { dirty } = flags;
|
|
683
668
|
if (this.root.hasExtraPages && this.page !== this.root.page) {
|
|
684
|
-
instance = this.
|
|
685
|
-
? this.
|
|
686
|
-
: this.getComponent(
|
|
669
|
+
instance = this.componentsMap?.hasOwnProperty(paths.dataPath)
|
|
670
|
+
? this.componentsMap[paths.dataPath]
|
|
671
|
+
: this.getComponent(paths.dataPath);
|
|
687
672
|
}
|
|
688
673
|
if (!instance) {
|
|
689
674
|
return;
|
|
690
675
|
}
|
|
691
|
-
if (!instance.component.path) {
|
|
692
|
-
instance.component.path = component.path;
|
|
693
|
-
}
|
|
694
676
|
instance.checkComponentValidity(data, dirty, row, flags, scope.errors);
|
|
695
677
|
if (instance.processOwnValidation) {
|
|
696
678
|
scope.noRecurse = true;
|
|
@@ -722,7 +704,10 @@ export default class NestedComponent extends Field {
|
|
|
722
704
|
components,
|
|
723
705
|
instances: this.componentsMap,
|
|
724
706
|
data: data,
|
|
707
|
+
local: !!flags.local,
|
|
725
708
|
scope: { errors: [] },
|
|
709
|
+
parent: this.component,
|
|
710
|
+
parentPaths: this.paths,
|
|
726
711
|
processors: [
|
|
727
712
|
{
|
|
728
713
|
process: validationProcessorProcess,
|
|
@@ -2,6 +2,8 @@ export default class NestedArrayComponent extends NestedDataComponent {
|
|
|
2
2
|
static savedValueTypes(): string[];
|
|
3
3
|
componentContext(component: any): any;
|
|
4
4
|
get iteratableRows(): void;
|
|
5
|
+
set rowIndex(value: number | undefined);
|
|
6
|
+
get rowIndex(): number | undefined;
|
|
5
7
|
prevHasAddButton: any;
|
|
6
8
|
checkAddButtonChanged(): void;
|
|
7
9
|
checkData(data: any, flags: any, row: any): any;
|
|
@@ -10,7 +12,6 @@ export default class NestedArrayComponent extends NestedDataComponent {
|
|
|
10
12
|
checkRow(...args: any[]): any;
|
|
11
13
|
processRow(method: any, data: any, opts: any, row: any, components: any, silentCheck: any): any;
|
|
12
14
|
hasAddButton(): any;
|
|
13
|
-
getComponent(path: any, fn: any, originalPath: any): any;
|
|
14
15
|
everyComponent(fn: any, rowIndex: any, options?: {}): void;
|
|
15
16
|
_getEmailTableHeader(options: any): string;
|
|
16
17
|
_getEmailTableBody(options: any): string;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
import _ from 'lodash';
|
|
3
|
-
import {
|
|
3
|
+
import { Utils } from '@formio/core/utils';
|
|
4
|
+
const { getComponentPaths } = Utils;
|
|
5
|
+
import { componentValueTypes, isLayoutComponent } from '../../../utils/utils';
|
|
4
6
|
import Component from '../component/Component';
|
|
5
7
|
import NestedDataComponent from '../nesteddata/NestedDataComponent';
|
|
6
8
|
export default class NestedArrayComponent extends NestedDataComponent {
|
|
@@ -19,9 +21,13 @@ export default class NestedArrayComponent extends NestedDataComponent {
|
|
|
19
21
|
throw new Error('Getter #iteratableRows() is not implemented');
|
|
20
22
|
}
|
|
21
23
|
get rowIndex() {
|
|
22
|
-
return
|
|
24
|
+
return this._rowIndex;
|
|
23
25
|
}
|
|
24
26
|
set rowIndex(value) {
|
|
27
|
+
this.paths = getComponentPaths(this.component, this.parent?.component, {
|
|
28
|
+
...(this.parent?.paths || {}),
|
|
29
|
+
...{ dataIndex: value }
|
|
30
|
+
});
|
|
25
31
|
this._rowIndex = value;
|
|
26
32
|
}
|
|
27
33
|
init() {
|
|
@@ -84,47 +90,6 @@ export default class NestedArrayComponent extends NestedDataComponent {
|
|
|
84
90
|
value: this.dataValue,
|
|
85
91
|
}, 'show'));
|
|
86
92
|
}
|
|
87
|
-
getComponent(path, fn, originalPath) {
|
|
88
|
-
originalPath = originalPath || getStringFromComponentPath(path);
|
|
89
|
-
if (this.componentsMap.hasOwnProperty(originalPath)) {
|
|
90
|
-
if (fn) {
|
|
91
|
-
return fn(this.componentsMap[originalPath]);
|
|
92
|
-
}
|
|
93
|
-
else {
|
|
94
|
-
return this.componentsMap[originalPath];
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
path = Array.isArray(path) ? path : [path];
|
|
98
|
-
let key = path.shift();
|
|
99
|
-
const remainingPath = path;
|
|
100
|
-
let result = [];
|
|
101
|
-
let possibleComp = null;
|
|
102
|
-
let comp = null;
|
|
103
|
-
let rowIndex = null;
|
|
104
|
-
if (_.isNumber(key)) {
|
|
105
|
-
rowIndex = key;
|
|
106
|
-
key = remainingPath.shift();
|
|
107
|
-
}
|
|
108
|
-
if (!_.isString(key)) {
|
|
109
|
-
return result;
|
|
110
|
-
}
|
|
111
|
-
this.everyComponent((component, components) => {
|
|
112
|
-
if (component.component.key === key) {
|
|
113
|
-
possibleComp = component;
|
|
114
|
-
if (remainingPath.length > 0 && 'getComponent' in component) {
|
|
115
|
-
comp = component.getComponent(remainingPath, fn, originalPath);
|
|
116
|
-
}
|
|
117
|
-
else if (fn) {
|
|
118
|
-
fn(component, components);
|
|
119
|
-
}
|
|
120
|
-
result = rowIndex !== null ? comp : result.concat(comp || possibleComp);
|
|
121
|
-
}
|
|
122
|
-
}, rowIndex);
|
|
123
|
-
if ((!result || result.length === 0) && possibleComp) {
|
|
124
|
-
result = rowIndex !== null ? possibleComp : [possibleComp];
|
|
125
|
-
}
|
|
126
|
-
return result;
|
|
127
|
-
}
|
|
128
93
|
everyComponent(fn, rowIndex, options = {}) {
|
|
129
94
|
if (_.isObject(rowIndex)) {
|
|
130
95
|
options = rowIndex;
|
|
@@ -87,7 +87,6 @@ export default class DataGridComponent extends NestedArrayComponent {
|
|
|
87
87
|
show: boolean;
|
|
88
88
|
};
|
|
89
89
|
checkComponentConditions(data: any, flags: any, row: any): boolean;
|
|
90
|
-
getComponent(path: any, fn: any): any;
|
|
91
90
|
toggleGroup(element: any, index: any): void;
|
|
92
91
|
}
|
|
93
92
|
import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';
|
|
@@ -1,7 +1,6 @@
|
|
|
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
4
|
export default class DataGridComponent extends NestedArrayComponent {
|
|
6
5
|
static schema(...extend) {
|
|
7
6
|
return NestedArrayComponent.schema({
|
|
@@ -422,7 +421,6 @@ export default class DataGridComponent extends NestedArrayComponent {
|
|
|
422
421
|
}
|
|
423
422
|
component.rowIndex = rowIndex;
|
|
424
423
|
component.row = `${rowIndex}-${colIndex}`;
|
|
425
|
-
component.path = Components.getComponentPath(component);
|
|
426
424
|
});
|
|
427
425
|
}
|
|
428
426
|
updateRowsComponents(rowIndex) {
|
|
@@ -488,6 +486,7 @@ export default class DataGridComponent extends NestedArrayComponent {
|
|
|
488
486
|
const options = _.clone(this.options);
|
|
489
487
|
options.name += `[${rowIndex}]`;
|
|
490
488
|
options.row = `${rowIndex}-${colIndex}`;
|
|
489
|
+
options.rowIndex = rowIndex;
|
|
491
490
|
let columnComponent;
|
|
492
491
|
if (this.builderMode) {
|
|
493
492
|
col.id = col.id + rowIndex;
|
|
@@ -610,49 +609,6 @@ export default class DataGridComponent extends NestedArrayComponent {
|
|
|
610
609
|
restoreComponentsContext() {
|
|
611
610
|
this.rows.forEach((row, index) => _.forIn(row, (component) => component.data = this.dataValue[index]));
|
|
612
611
|
}
|
|
613
|
-
getComponent(path, fn) {
|
|
614
|
-
path = Array.isArray(path) ? path : [path];
|
|
615
|
-
const [key, ...remainingPath] = path;
|
|
616
|
-
let result = [];
|
|
617
|
-
if (_.isNumber(key) && remainingPath.length) {
|
|
618
|
-
const compKey = remainingPath.pop();
|
|
619
|
-
result = this.rows[key][compKey];
|
|
620
|
-
// If the component is inside a Layout Component, try to find it among all the row's components
|
|
621
|
-
if (!result) {
|
|
622
|
-
Object.entries(this.rows[key]).forEach(([, comp]) => {
|
|
623
|
-
if ('getComponent' in comp) {
|
|
624
|
-
const possibleResult = comp.getComponent([compKey], fn);
|
|
625
|
-
if (possibleResult) {
|
|
626
|
-
result = possibleResult;
|
|
627
|
-
}
|
|
628
|
-
}
|
|
629
|
-
});
|
|
630
|
-
}
|
|
631
|
-
if (result && _.isFunction(fn)) {
|
|
632
|
-
fn(result, this.getComponents());
|
|
633
|
-
}
|
|
634
|
-
if (remainingPath.length && 'getComponent' in result) {
|
|
635
|
-
return result.getComponent(remainingPath, fn);
|
|
636
|
-
}
|
|
637
|
-
return result;
|
|
638
|
-
}
|
|
639
|
-
if (!_.isString(key)) {
|
|
640
|
-
return result;
|
|
641
|
-
}
|
|
642
|
-
this.everyComponent((component, components) => {
|
|
643
|
-
if (component.component.key === key) {
|
|
644
|
-
let comp = component;
|
|
645
|
-
if (remainingPath.length > 0 && 'getComponent' in component) {
|
|
646
|
-
comp = component.getComponent(remainingPath, fn);
|
|
647
|
-
}
|
|
648
|
-
else if (fn) {
|
|
649
|
-
fn(component, components);
|
|
650
|
-
}
|
|
651
|
-
result = result.concat(comp);
|
|
652
|
-
}
|
|
653
|
-
});
|
|
654
|
-
return result.length > 0 ? result : null;
|
|
655
|
-
}
|
|
656
612
|
toggleGroup(element, index) {
|
|
657
613
|
element.classList.toggle('collapsed');
|
|
658
614
|
_.each(this.refs.chunks[index], row => {
|
|
@@ -3,7 +3,6 @@ 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';
|
|
7
6
|
export default class DataMapComponent extends DataGridComponent {
|
|
8
7
|
static schema(...extend) {
|
|
9
8
|
return Component.schema({
|
|
@@ -227,6 +226,7 @@ export default class DataMapComponent extends DataGridComponent {
|
|
|
227
226
|
options.events = new EventEmitter();
|
|
228
227
|
options.name += `[${rowIndex}]`;
|
|
229
228
|
options.row = `${rowIndex}`;
|
|
229
|
+
options.rowIndex = rowIndex;
|
|
230
230
|
const components = {};
|
|
231
231
|
components['__key'] = this.createComponent(this.keySchema, options, { __key: this.builderMode ? this.defaultRowKey : key });
|
|
232
232
|
components['__key'].on('componentChange', (event) => {
|
|
@@ -236,7 +236,6 @@ export default class DataMapComponent extends DataGridComponent {
|
|
|
236
236
|
delete dataValue[key];
|
|
237
237
|
const comp = components[this.valueKey];
|
|
238
238
|
comp.component.key = newKey;
|
|
239
|
-
comp.path = Components.getComponentPath(comp);
|
|
240
239
|
key = newKey;
|
|
241
240
|
});
|
|
242
241
|
const valueComponent = _.clone(this.component.valueComponent);
|
|
@@ -923,6 +923,7 @@ export default class EditGridComponent extends NestedArrayComponent {
|
|
|
923
923
|
const options = _.clone(this.options);
|
|
924
924
|
options.name += `[${rowIndex}]`;
|
|
925
925
|
options.row = `${rowIndex}-${colIndex}`;
|
|
926
|
+
options.rowIndex = rowIndex;
|
|
926
927
|
options.onChange = (flags = {}, changed, modified) => {
|
|
927
928
|
if (changed.instance.root?.id && (this.root?.id !== changed.instance.root.id)) {
|
|
928
929
|
changed.instance.root.triggerChange(flags, changed, modified);
|
|
@@ -939,7 +940,7 @@ export default class EditGridComponent extends NestedArrayComponent {
|
|
|
939
940
|
...flags,
|
|
940
941
|
changed,
|
|
941
942
|
}, editRow.data, editRow.components);
|
|
942
|
-
this.validateRow(editRow, false);
|
|
943
|
+
this.validateRow(editRow, false, false);
|
|
943
944
|
}
|
|
944
945
|
if (this.variableTypeComponentsIndexes.length) {
|
|
945
946
|
this.checkRowVariableTypeComponents(editRow, rowIndex);
|
|
@@ -979,22 +980,24 @@ export default class EditGridComponent extends NestedArrayComponent {
|
|
|
979
980
|
validateRow(editRow, dirty, forceSilentCheck, fromSubmission) {
|
|
980
981
|
editRow.errors = [];
|
|
981
982
|
if (this.shouldValidateRow(editRow, dirty, fromSubmission)) {
|
|
982
|
-
const silentCheck = (this.component.rowDrafts && !this.shouldValidateDraft(editRow)) || forceSilentCheck;
|
|
983
|
+
const silentCheck = forceSilentCheck === false ? false : ((this.component.rowDrafts && !this.shouldValidateDraft(editRow)) || forceSilentCheck);
|
|
983
984
|
const rootValue = fastCloneDeep(this.rootValue);
|
|
984
985
|
const editGridValue = _.get(rootValue, this.path, []);
|
|
985
986
|
editGridValue[editRow.rowIndex] = editRow.data;
|
|
986
987
|
_.set(rootValue, this.path, editGridValue);
|
|
987
988
|
const validationProcessorProcess = (context) => this.validationProcessor(context, { dirty, silentCheck });
|
|
988
989
|
const errors = processSync({
|
|
989
|
-
components:
|
|
990
|
-
component.parentPath = `${this.path}[${editRow.rowIndex}]`;
|
|
991
|
-
return component;
|
|
992
|
-
}),
|
|
990
|
+
components: this.component.components,
|
|
993
991
|
data: rootValue,
|
|
994
992
|
row: editRow.data,
|
|
995
993
|
process: 'validateRow',
|
|
996
994
|
instances: this.componentsMap,
|
|
997
995
|
scope: { errors: [] },
|
|
996
|
+
parent: this.component,
|
|
997
|
+
parentPaths: {
|
|
998
|
+
...this.paths,
|
|
999
|
+
dataIndex: editRow.rowIndex
|
|
1000
|
+
},
|
|
998
1001
|
processors: [
|
|
999
1002
|
{
|
|
1000
1003
|
process: validationProcessorProcess,
|
|
@@ -1026,9 +1029,12 @@ export default class EditGridComponent extends NestedArrayComponent {
|
|
|
1026
1029
|
});
|
|
1027
1030
|
}
|
|
1028
1031
|
}
|
|
1029
|
-
if (!this.component.rowDrafts || this.root?.submitted) {
|
|
1032
|
+
if (editRow.alerts && (!this.component.rowDrafts || this.root?.submitted)) {
|
|
1030
1033
|
this.showRowErrorAlerts(editRow, editRow.errors);
|
|
1031
1034
|
}
|
|
1035
|
+
else if (editRow.errors?.length) {
|
|
1036
|
+
this.setCustomValidity(editRow.errors, dirty);
|
|
1037
|
+
}
|
|
1032
1038
|
return editRow.errors;
|
|
1033
1039
|
}
|
|
1034
1040
|
showRowErrorAlerts(editRow, errors) {
|
|
@@ -21,7 +21,7 @@ export default class FormComponent extends Component {
|
|
|
21
21
|
get useOriginalRevision(): any;
|
|
22
22
|
setFormRevision(rev: any): void;
|
|
23
23
|
subFormRevision: any;
|
|
24
|
-
getComponent(path: any
|
|
24
|
+
getComponent(path: any): any;
|
|
25
25
|
getSubOptions(options?: {}): {};
|
|
26
26
|
render(): string;
|
|
27
27
|
asString(value: any): any;
|
|
@@ -55,8 +55,6 @@ export default class FormComponent extends Component {
|
|
|
55
55
|
*/
|
|
56
56
|
loadSubForm(fromAttach: boolean): Promise<any>;
|
|
57
57
|
subFormLoading: boolean | undefined;
|
|
58
|
-
get subFormData(): any;
|
|
59
|
-
checkComponentValidity(data: any, dirty: any, row: any, options: any, errors?: any[]): any;
|
|
60
58
|
checkComponentConditions(data: any, flags: any, row: any): any;
|
|
61
59
|
calculateValue(data: any, flags: any, row: any): any;
|
|
62
60
|
setPristine(pristine: any): void;
|