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