@rolster/react-forms 19.4.13 → 19.4.14
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/dist/cjs/index.cjs +221 -181
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/es/index.mjs +221 -183
- package/dist/es/index.mjs.map +1 -1
- package/dist/esm/form-array/form-array-control.js +15 -5
- package/dist/esm/form-array/form-array-control.js.map +1 -1
- package/dist/esm/form-array/form-array-group.d.ts +1 -1
- package/dist/esm/form-array/form-array-group.js +2 -1
- package/dist/esm/form-array/form-array-group.js.map +1 -1
- package/dist/esm/form-array/form-array-list.js.map +1 -1
- package/dist/esm/form-array/form-array.d.ts +1 -1
- package/dist/esm/form-control/form-control.helper.js.map +1 -1
- package/dist/esm/form-list/form-list.d.ts +4 -0
- package/dist/esm/form-list/form-list.js +29 -0
- package/dist/esm/form-list/form-list.js.map +1 -0
- package/dist/esm/form-list/form-list.type.d.ts +7 -0
- package/dist/esm/form-list/form-list.type.js +2 -0
- package/dist/esm/form-list/form-list.type.js.map +1 -0
- package/dist/esm/helpers.d.ts +1 -1
- package/dist/esm/hooks.d.ts +1 -1
- package/dist/esm/index.d.ts +9 -7
- package/dist/esm/index.js +9 -7
- package/dist/esm/index.js.map +1 -1
- package/package.json +12 -5
package/dist/cjs/index.cjs
CHANGED
|
@@ -1,8 +1,175 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var helpers = require('@rolster/forms/helpers');
|
|
4
|
-
var uuid = require('uuid');
|
|
5
4
|
var react = require('react');
|
|
5
|
+
var uuid = require('uuid');
|
|
6
|
+
|
|
7
|
+
function refactorForValid$2(groups, validators) {
|
|
8
|
+
const errors = validators ? helpers.formArrayIsValid({ groups, validators }) : [];
|
|
9
|
+
return {
|
|
10
|
+
errors,
|
|
11
|
+
valid: errors.length === 0 && helpers.verifyAllTrueInGroups(groups, 'valid')
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
function refactorForGroups(groups, validators) {
|
|
15
|
+
return {
|
|
16
|
+
...refactorForValid$2(groups, validators),
|
|
17
|
+
groups,
|
|
18
|
+
controls: groups.map(({ controls }) => controls),
|
|
19
|
+
value: groups.map(({ controls }) => helpers.controlsToValue(controls))
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
function refactorForControls$1(action, state, groups) {
|
|
23
|
+
switch (action) {
|
|
24
|
+
case 'validators':
|
|
25
|
+
return refactorForValid$2(groups, state.validators);
|
|
26
|
+
case 'reset':
|
|
27
|
+
case 'list':
|
|
28
|
+
case 'value':
|
|
29
|
+
return refactorForGroups(groups, state.validators);
|
|
30
|
+
default:
|
|
31
|
+
return { groups };
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
function useFormArray(options, validators) {
|
|
35
|
+
const formArray = helpers.createFormArrayOptions(options, validators);
|
|
36
|
+
const refArrayValue = react.useRef(formArray.groups || []);
|
|
37
|
+
const refArrayGroups = react.useRef(new Map());
|
|
38
|
+
const [state, setState] = react.useState(() => {
|
|
39
|
+
return {
|
|
40
|
+
...refactorForValid$2(refArrayValue.current, formArray.validators),
|
|
41
|
+
controls: refArrayValue.current.map(({ controls }) => controls),
|
|
42
|
+
dirty: false,
|
|
43
|
+
dirties: false,
|
|
44
|
+
disabled: false,
|
|
45
|
+
groups: refArrayValue.current,
|
|
46
|
+
touched: false,
|
|
47
|
+
toucheds: false,
|
|
48
|
+
value: refArrayValue.current.map(({ controls }) => helpers.controlsToValue(controls)),
|
|
49
|
+
validators: formArray.validators
|
|
50
|
+
};
|
|
51
|
+
});
|
|
52
|
+
const subscriber = react.useCallback((action, group) => {
|
|
53
|
+
setState((state) => {
|
|
54
|
+
const groups = state.groups.map((currentGroup) => {
|
|
55
|
+
return currentGroup.uuid === group.uuid ? group : currentGroup;
|
|
56
|
+
});
|
|
57
|
+
return {
|
|
58
|
+
...state,
|
|
59
|
+
...refactorForControls$1(action, state, groups)
|
|
60
|
+
};
|
|
61
|
+
});
|
|
62
|
+
}, []);
|
|
63
|
+
react.useEffect(() => {
|
|
64
|
+
const previousGroups = refArrayGroups.current;
|
|
65
|
+
const currentGroups = new Map();
|
|
66
|
+
state.groups.forEach((group) => {
|
|
67
|
+
currentGroups.set(group.uuid, group);
|
|
68
|
+
if (previousGroups.get(group.uuid) !== group) {
|
|
69
|
+
group.subscribe(subscriber);
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
refArrayGroups.current = currentGroups;
|
|
73
|
+
}, [state.groups]);
|
|
74
|
+
const disable = react.useCallback(() => {
|
|
75
|
+
setState((state) => ({ ...state, disabled: true }));
|
|
76
|
+
}, []);
|
|
77
|
+
const enable = react.useCallback(() => {
|
|
78
|
+
setState((state) => ({ ...state, disabled: false }));
|
|
79
|
+
}, []);
|
|
80
|
+
const setValue = react.useCallback((groups) => {
|
|
81
|
+
setState((state) => ({
|
|
82
|
+
...state,
|
|
83
|
+
...refactorForGroups(groups, state.validators)
|
|
84
|
+
}));
|
|
85
|
+
}, []);
|
|
86
|
+
const setStartValue = react.useCallback((groups) => {
|
|
87
|
+
setState((state) => ({
|
|
88
|
+
...state,
|
|
89
|
+
...refactorForGroups(groups, state.validators)
|
|
90
|
+
}));
|
|
91
|
+
}, []);
|
|
92
|
+
const setDefaultValue = react.useCallback((groups) => {
|
|
93
|
+
setState((state) => ({
|
|
94
|
+
...state,
|
|
95
|
+
...refactorForGroups(groups, state.validators)
|
|
96
|
+
}));
|
|
97
|
+
refArrayValue.current = groups;
|
|
98
|
+
}, []);
|
|
99
|
+
const push = react.useCallback((group) => {
|
|
100
|
+
refArrayGroups.current.set(group.uuid, group);
|
|
101
|
+
group.subscribe(subscriber);
|
|
102
|
+
setState((state) => ({
|
|
103
|
+
...state,
|
|
104
|
+
...refactorForGroups([...state.groups, group], state.validators)
|
|
105
|
+
}));
|
|
106
|
+
}, []);
|
|
107
|
+
const merge = react.useCallback((groups) => {
|
|
108
|
+
groups.forEach((group) => {
|
|
109
|
+
group.subscribe(subscriber);
|
|
110
|
+
refArrayGroups.current.set(group.uuid, group);
|
|
111
|
+
});
|
|
112
|
+
setState((state) => ({
|
|
113
|
+
...state,
|
|
114
|
+
...refactorForGroups([...state.groups, ...groups], state.validators)
|
|
115
|
+
}));
|
|
116
|
+
}, []);
|
|
117
|
+
const remove = react.useCallback(({ uuid }) => {
|
|
118
|
+
refArrayGroups.current.delete(uuid);
|
|
119
|
+
setState((state) => ({
|
|
120
|
+
...state,
|
|
121
|
+
...refactorForGroups(state.groups.filter((group) => group.uuid !== uuid), state.validators)
|
|
122
|
+
}));
|
|
123
|
+
}, []);
|
|
124
|
+
const findByUuid = react.useCallback((uuid) => {
|
|
125
|
+
return refArrayGroups.current.get(uuid);
|
|
126
|
+
}, []);
|
|
127
|
+
const setValidators = react.useCallback((validators) => {
|
|
128
|
+
setState((state) => ({
|
|
129
|
+
...state,
|
|
130
|
+
...refactorForValid$2(state.groups, validators),
|
|
131
|
+
validators
|
|
132
|
+
}));
|
|
133
|
+
}, []);
|
|
134
|
+
const formArrayHasError = react.useCallback((key) => {
|
|
135
|
+
return helpers.hasError(state.errors, key);
|
|
136
|
+
}, [state.errors]);
|
|
137
|
+
const formArraySomeErrors = react.useCallback((keys) => {
|
|
138
|
+
return helpers.someErrors(state.errors, keys);
|
|
139
|
+
}, [state.errors]);
|
|
140
|
+
const reset = react.useCallback(() => {
|
|
141
|
+
refArrayValue.current.forEach((group) => group.reset());
|
|
142
|
+
refArrayGroups.current = new Map();
|
|
143
|
+
setState((state) => ({
|
|
144
|
+
...state,
|
|
145
|
+
...refactorForGroups(refArrayValue.current, state.validators)
|
|
146
|
+
}));
|
|
147
|
+
}, []);
|
|
148
|
+
return {
|
|
149
|
+
...state,
|
|
150
|
+
disable,
|
|
151
|
+
enable,
|
|
152
|
+
enabled: !state.disabled,
|
|
153
|
+
error: state.errors[0],
|
|
154
|
+
findByUuid,
|
|
155
|
+
hasError: formArrayHasError,
|
|
156
|
+
invalid: !state.valid,
|
|
157
|
+
merge,
|
|
158
|
+
pristine: !state.dirty,
|
|
159
|
+
pristines: !state.dirties,
|
|
160
|
+
push,
|
|
161
|
+
remove,
|
|
162
|
+
reset,
|
|
163
|
+
setDefaultValue,
|
|
164
|
+
setStartValue,
|
|
165
|
+
setValidators,
|
|
166
|
+
setValue,
|
|
167
|
+
someErrors: formArraySomeErrors,
|
|
168
|
+
untouched: !state.touched,
|
|
169
|
+
untoucheds: !state.toucheds,
|
|
170
|
+
wrong: state.touched && !state.valid
|
|
171
|
+
};
|
|
172
|
+
}
|
|
6
173
|
|
|
7
174
|
class RolsterArrayControl {
|
|
8
175
|
constructor(options) {
|
|
@@ -25,19 +192,29 @@ class RolsterArrayControl {
|
|
|
25
192
|
this.validators = options.validators;
|
|
26
193
|
}
|
|
27
194
|
focus() {
|
|
28
|
-
this.unfocused
|
|
195
|
+
if (this.unfocused) {
|
|
196
|
+
this.refresh('focused', { focused: true });
|
|
197
|
+
}
|
|
29
198
|
}
|
|
30
199
|
blur() {
|
|
31
|
-
|
|
200
|
+
if (this.focused) {
|
|
201
|
+
this.refresh('focused', { focused: false, touched: true });
|
|
202
|
+
}
|
|
32
203
|
}
|
|
33
204
|
disable() {
|
|
34
|
-
this.enabled
|
|
205
|
+
if (this.enabled) {
|
|
206
|
+
this.refresh('disabled', { disabled: true });
|
|
207
|
+
}
|
|
35
208
|
}
|
|
36
209
|
enable() {
|
|
37
|
-
|
|
210
|
+
if (this.disabled) {
|
|
211
|
+
this.refresh('disabled', { disabled: false });
|
|
212
|
+
}
|
|
38
213
|
}
|
|
39
214
|
touch() {
|
|
40
|
-
this.untouched
|
|
215
|
+
if (this.untouched) {
|
|
216
|
+
this.refresh('touched', { touched: true });
|
|
217
|
+
}
|
|
41
218
|
}
|
|
42
219
|
setDefaultValue(value) {
|
|
43
220
|
if (value !== this.defaultValue) {
|
|
@@ -139,14 +316,14 @@ function replaceControl(controls, control) {
|
|
|
139
316
|
}, { ...controls });
|
|
140
317
|
}
|
|
141
318
|
|
|
142
|
-
function refactorForValid$
|
|
319
|
+
function refactorForValid$1(controls, validators) {
|
|
143
320
|
const errors = validators ? helpers.formGroupIsValid({ controls, validators }) : [];
|
|
144
321
|
return {
|
|
145
322
|
errors,
|
|
146
323
|
valid: errors.length === 0 && helpers.verifyAllTrueInControls(controls, 'valid')
|
|
147
324
|
};
|
|
148
325
|
}
|
|
149
|
-
function refactorForControls
|
|
326
|
+
function refactorForControls(action, group, controls) {
|
|
150
327
|
switch (action) {
|
|
151
328
|
case 'focused':
|
|
152
329
|
case 'touched':
|
|
@@ -155,10 +332,10 @@ function refactorForControls$1(action, group, controls) {
|
|
|
155
332
|
toucheds: helpers.verifyAllTrueInControls(controls, 'touched')
|
|
156
333
|
};
|
|
157
334
|
case 'validators':
|
|
158
|
-
return refactorForValid$
|
|
335
|
+
return refactorForValid$1(controls, group.validators);
|
|
159
336
|
case 'reset':
|
|
160
337
|
return {
|
|
161
|
-
...refactorForValid$
|
|
338
|
+
...refactorForValid$1(controls, group.validators),
|
|
162
339
|
dirty: helpers.verifyAnyTrueInControls(controls, 'dirty'),
|
|
163
340
|
dirties: helpers.verifyAllTrueInControls(controls, 'dirty'),
|
|
164
341
|
touched: helpers.verifyAnyTrueInControls(controls, 'touched'),
|
|
@@ -168,7 +345,7 @@ function refactorForControls$1(action, group, controls) {
|
|
|
168
345
|
case 'list':
|
|
169
346
|
case 'value':
|
|
170
347
|
return {
|
|
171
|
-
...refactorForValid$
|
|
348
|
+
...refactorForValid$1(controls, group.validators),
|
|
172
349
|
dirty: helpers.verifyAnyTrueInControls(controls, 'dirty'),
|
|
173
350
|
dirties: helpers.verifyAllTrueInControls(controls, 'dirty'),
|
|
174
351
|
value: helpers.controlsToValue(controls)
|
|
@@ -201,7 +378,7 @@ class RolsterArrayGroup {
|
|
|
201
378
|
const controls = replaceControl(this._controls, control);
|
|
202
379
|
this._controls = controls;
|
|
203
380
|
this.refresh(action, {
|
|
204
|
-
...refactorForControls
|
|
381
|
+
...refactorForControls(action, this, controls),
|
|
205
382
|
controls
|
|
206
383
|
});
|
|
207
384
|
};
|
|
@@ -217,7 +394,7 @@ class RolsterArrayGroup {
|
|
|
217
394
|
}
|
|
218
395
|
setValidators(validators) {
|
|
219
396
|
this.refresh('validators', {
|
|
220
|
-
...refactorForValid$
|
|
397
|
+
...refactorForValid$1(this._controls, validators),
|
|
221
398
|
validators
|
|
222
399
|
});
|
|
223
400
|
}
|
|
@@ -230,12 +407,13 @@ class RolsterArrayGroup {
|
|
|
230
407
|
});
|
|
231
408
|
}
|
|
232
409
|
refresh(action, options) {
|
|
233
|
-
this.subscriber
|
|
410
|
+
if (this.subscriber) {
|
|
234
411
|
this.subscriber(action, new RolsterArrayGroup({
|
|
235
412
|
...this,
|
|
236
413
|
...options,
|
|
237
414
|
controls: this._controls
|
|
238
415
|
}));
|
|
416
|
+
}
|
|
239
417
|
}
|
|
240
418
|
}
|
|
241
419
|
class ReactRolsterArrayGroup extends RolsterArrayGroup {
|
|
@@ -381,173 +559,6 @@ function formArrayList(options) {
|
|
|
381
559
|
});
|
|
382
560
|
}
|
|
383
561
|
|
|
384
|
-
function refactorForValid$1(groups, validators) {
|
|
385
|
-
const errors = validators ? helpers.formArrayIsValid({ groups, validators }) : [];
|
|
386
|
-
return {
|
|
387
|
-
errors,
|
|
388
|
-
valid: errors.length === 0 && helpers.verifyAllTrueInGroups(groups, 'valid')
|
|
389
|
-
};
|
|
390
|
-
}
|
|
391
|
-
function refactorForGroups(groups, validators) {
|
|
392
|
-
return {
|
|
393
|
-
...refactorForValid$1(groups, validators),
|
|
394
|
-
groups,
|
|
395
|
-
controls: groups.map(({ controls }) => controls),
|
|
396
|
-
value: groups.map(({ controls }) => helpers.controlsToValue(controls))
|
|
397
|
-
};
|
|
398
|
-
}
|
|
399
|
-
function refactorForControls(action, state, groups) {
|
|
400
|
-
switch (action) {
|
|
401
|
-
case 'validators':
|
|
402
|
-
return refactorForValid$1(groups, state.validators);
|
|
403
|
-
case 'reset':
|
|
404
|
-
case 'list':
|
|
405
|
-
case 'value':
|
|
406
|
-
return refactorForGroups(groups, state.validators);
|
|
407
|
-
default:
|
|
408
|
-
return { groups };
|
|
409
|
-
}
|
|
410
|
-
}
|
|
411
|
-
function useFormArray(options, validators) {
|
|
412
|
-
const formArray = helpers.createFormArrayOptions(options, validators);
|
|
413
|
-
const refArrayValue = react.useRef(formArray.groups || []);
|
|
414
|
-
const refArrayGroups = react.useRef(new Map());
|
|
415
|
-
const [state, setState] = react.useState(() => {
|
|
416
|
-
return {
|
|
417
|
-
...refactorForValid$1(refArrayValue.current, formArray.validators),
|
|
418
|
-
controls: refArrayValue.current.map(({ controls }) => controls),
|
|
419
|
-
dirty: false,
|
|
420
|
-
dirties: false,
|
|
421
|
-
disabled: false,
|
|
422
|
-
groups: refArrayValue.current,
|
|
423
|
-
touched: false,
|
|
424
|
-
toucheds: false,
|
|
425
|
-
value: refArrayValue.current.map(({ controls }) => helpers.controlsToValue(controls)),
|
|
426
|
-
validators: formArray.validators
|
|
427
|
-
};
|
|
428
|
-
});
|
|
429
|
-
const subscriber = react.useCallback((action, group) => {
|
|
430
|
-
setState((state) => {
|
|
431
|
-
const groups = state.groups.map((currentGroup) => {
|
|
432
|
-
return currentGroup.uuid === group.uuid ? group : currentGroup;
|
|
433
|
-
});
|
|
434
|
-
return {
|
|
435
|
-
...state,
|
|
436
|
-
...refactorForControls(action, state, groups)
|
|
437
|
-
};
|
|
438
|
-
});
|
|
439
|
-
}, []);
|
|
440
|
-
react.useEffect(() => {
|
|
441
|
-
const previousGroups = refArrayGroups.current;
|
|
442
|
-
const currentGroups = new Map();
|
|
443
|
-
state.groups.forEach((group) => {
|
|
444
|
-
currentGroups.set(group.uuid, group);
|
|
445
|
-
if (previousGroups.get(group.uuid) !== group) {
|
|
446
|
-
group.subscribe(subscriber);
|
|
447
|
-
}
|
|
448
|
-
});
|
|
449
|
-
refArrayGroups.current = currentGroups;
|
|
450
|
-
}, [state.groups]);
|
|
451
|
-
const disable = react.useCallback(() => {
|
|
452
|
-
setState((state) => ({ ...state, disabled: true }));
|
|
453
|
-
}, []);
|
|
454
|
-
const enable = react.useCallback(() => {
|
|
455
|
-
setState((state) => ({ ...state, disabled: false }));
|
|
456
|
-
}, []);
|
|
457
|
-
const setValue = react.useCallback((groups) => {
|
|
458
|
-
setState((state) => ({
|
|
459
|
-
...state,
|
|
460
|
-
...refactorForGroups(groups, state.validators)
|
|
461
|
-
}));
|
|
462
|
-
}, []);
|
|
463
|
-
const setStartValue = react.useCallback((groups) => {
|
|
464
|
-
setState((state) => ({
|
|
465
|
-
...state,
|
|
466
|
-
...refactorForGroups(groups, state.validators)
|
|
467
|
-
}));
|
|
468
|
-
}, []);
|
|
469
|
-
const setDefaultValue = react.useCallback((groups) => {
|
|
470
|
-
setState((state) => ({
|
|
471
|
-
...state,
|
|
472
|
-
...refactorForGroups(groups, state.validators)
|
|
473
|
-
}));
|
|
474
|
-
refArrayValue.current = groups;
|
|
475
|
-
}, []);
|
|
476
|
-
const push = react.useCallback((group) => {
|
|
477
|
-
refArrayGroups.current.set(group.uuid, group);
|
|
478
|
-
group.subscribe(subscriber);
|
|
479
|
-
setState((state) => ({
|
|
480
|
-
...state,
|
|
481
|
-
...refactorForGroups([...state.groups, group], state.validators)
|
|
482
|
-
}));
|
|
483
|
-
}, []);
|
|
484
|
-
const merge = react.useCallback((groups) => {
|
|
485
|
-
groups.forEach((group) => {
|
|
486
|
-
group.subscribe(subscriber);
|
|
487
|
-
refArrayGroups.current.set(group.uuid, group);
|
|
488
|
-
});
|
|
489
|
-
setState((state) => ({
|
|
490
|
-
...state,
|
|
491
|
-
...refactorForGroups([...state.groups, ...groups], state.validators)
|
|
492
|
-
}));
|
|
493
|
-
}, []);
|
|
494
|
-
const remove = react.useCallback(({ uuid }) => {
|
|
495
|
-
refArrayGroups.current.delete(uuid);
|
|
496
|
-
setState((state) => ({
|
|
497
|
-
...state,
|
|
498
|
-
...refactorForGroups(state.groups.filter((group) => group.uuid !== uuid), state.validators)
|
|
499
|
-
}));
|
|
500
|
-
}, []);
|
|
501
|
-
const findByUuid = react.useCallback((uuid) => {
|
|
502
|
-
return refArrayGroups.current.get(uuid);
|
|
503
|
-
}, []);
|
|
504
|
-
const setValidators = react.useCallback((validators) => {
|
|
505
|
-
setState((state) => ({
|
|
506
|
-
...state,
|
|
507
|
-
...refactorForValid$1(state.groups, validators),
|
|
508
|
-
validators
|
|
509
|
-
}));
|
|
510
|
-
}, []);
|
|
511
|
-
const formArrayHasError = react.useCallback((key) => {
|
|
512
|
-
return helpers.hasError(state.errors, key);
|
|
513
|
-
}, [state.errors]);
|
|
514
|
-
const formArraySomeErrors = react.useCallback((keys) => {
|
|
515
|
-
return helpers.someErrors(state.errors, keys);
|
|
516
|
-
}, [state.errors]);
|
|
517
|
-
const reset = react.useCallback(() => {
|
|
518
|
-
refArrayValue.current.forEach((group) => group.reset());
|
|
519
|
-
refArrayGroups.current = new Map();
|
|
520
|
-
setState((state) => ({
|
|
521
|
-
...state,
|
|
522
|
-
...refactorForGroups(refArrayValue.current, state.validators)
|
|
523
|
-
}));
|
|
524
|
-
}, []);
|
|
525
|
-
return {
|
|
526
|
-
...state,
|
|
527
|
-
disable,
|
|
528
|
-
enable,
|
|
529
|
-
enabled: !state.disabled,
|
|
530
|
-
error: state.errors[0],
|
|
531
|
-
findByUuid,
|
|
532
|
-
hasError: formArrayHasError,
|
|
533
|
-
invalid: !state.valid,
|
|
534
|
-
merge,
|
|
535
|
-
pristine: !state.dirty,
|
|
536
|
-
pristines: !state.dirties,
|
|
537
|
-
push,
|
|
538
|
-
remove,
|
|
539
|
-
reset,
|
|
540
|
-
setDefaultValue,
|
|
541
|
-
setStartValue,
|
|
542
|
-
setValidators,
|
|
543
|
-
setValue,
|
|
544
|
-
someErrors: formArraySomeErrors,
|
|
545
|
-
untouched: !state.touched,
|
|
546
|
-
untoucheds: !state.toucheds,
|
|
547
|
-
wrong: state.touched && !state.valid
|
|
548
|
-
};
|
|
549
|
-
}
|
|
550
|
-
|
|
551
562
|
function errorsInControl(value, validators) {
|
|
552
563
|
return validators ? helpers.formControlIsValid({ value, validators }) : [];
|
|
553
564
|
}
|
|
@@ -801,6 +812,33 @@ function useFormGroup(options, validators) {
|
|
|
801
812
|
};
|
|
802
813
|
}
|
|
803
814
|
|
|
815
|
+
function useReactList(value, validators) {
|
|
816
|
+
const control = useReactControl(value || [], validators);
|
|
817
|
+
const push = react.useCallback((item) => {
|
|
818
|
+
control.setValue([...control.value, item]);
|
|
819
|
+
}, [control.value, control.setValue]);
|
|
820
|
+
const remove = react.useCallback((item) => {
|
|
821
|
+
const value = control.value.filter((current) => current !== item);
|
|
822
|
+
if (value.length !== control.value.length) {
|
|
823
|
+
control.setValue(value);
|
|
824
|
+
}
|
|
825
|
+
}, [control.value, control.setValue]);
|
|
826
|
+
const clear = react.useCallback(() => {
|
|
827
|
+
if (control.value.length > 0) {
|
|
828
|
+
control.setValue([]);
|
|
829
|
+
}
|
|
830
|
+
}, [control.value, control.setValue]);
|
|
831
|
+
return {
|
|
832
|
+
...control,
|
|
833
|
+
clear,
|
|
834
|
+
push,
|
|
835
|
+
remove
|
|
836
|
+
};
|
|
837
|
+
}
|
|
838
|
+
function useFormList(value, validators) {
|
|
839
|
+
return useReactList(value, validators);
|
|
840
|
+
}
|
|
841
|
+
|
|
804
842
|
function useInputRefControl(options) {
|
|
805
843
|
const formRef = useInputControl(options);
|
|
806
844
|
const setValueRef = react.useRef(options.setValue);
|
|
@@ -877,8 +915,10 @@ exports.useFormArray = useFormArray;
|
|
|
877
915
|
exports.useFormArrayGroupSelect = useFormArrayGroupSelect;
|
|
878
916
|
exports.useFormControl = useFormControl;
|
|
879
917
|
exports.useFormGroup = useFormGroup;
|
|
918
|
+
exports.useFormList = useFormList;
|
|
880
919
|
exports.useInputControl = useInputControl;
|
|
881
920
|
exports.useNumberRefControl = useNumberRefControl;
|
|
882
921
|
exports.useReactControl = useReactControl;
|
|
922
|
+
exports.useReactList = useReactList;
|
|
883
923
|
exports.useTextRefControl = useTextRefControl;
|
|
884
924
|
//# sourceMappingURL=index.cjs.map
|