@rolster/react-forms 18.9.0 → 18.10.0
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.js +118 -100
- package/dist/cjs/index.js.map +1 -1
- package/dist/es/index.js +119 -101
- package/dist/es/index.js.map +1 -1
- package/dist/esm/form-array/form-array-control.d.ts +1 -0
- package/dist/esm/form-array/form-array-control.js +4 -0
- package/dist/esm/form-array/form-array-control.js.map +1 -1
- package/dist/esm/form-array/form-array-list.js +2 -2
- package/dist/esm/form-array/form-array-list.js.map +1 -1
- package/dist/esm/form-array/form-array.js +71 -61
- package/dist/esm/form-array/form-array.js.map +1 -1
- package/dist/esm/form-control.js +40 -36
- package/dist/esm/form-control.js.map +1 -1
- package/dist/esm/form-group.js +3 -3
- package/dist/esm/form-group.js.map +1 -1
- package/package.json +3 -3
|
@@ -1,30 +1,29 @@
|
|
|
1
1
|
import { createFormArrayOptions } from '@rolster/forms/arguments';
|
|
2
2
|
import { arrayIsValid, controlsToValue, groupAllChecked, groupPartialChecked, hasError as rolsterHasError, someErrors as rolsterSomeErrors } from '@rolster/forms/helpers';
|
|
3
|
-
import { useEffect, useRef, useState } from 'react';
|
|
3
|
+
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
4
4
|
import { RolsterArrayGroup } from './form-array-group';
|
|
5
|
-
export function useFormArray(options,
|
|
6
|
-
const
|
|
7
|
-
const groups =
|
|
8
|
-
const
|
|
5
|
+
export function useFormArray(options, validators) {
|
|
6
|
+
const _options = createFormArrayOptions(options, validators);
|
|
7
|
+
const groups = _options.groups || [];
|
|
8
|
+
const _value = useRef(groups);
|
|
9
9
|
const [state, setState] = useState({
|
|
10
10
|
controls: groups.map(({ controls }) => controls),
|
|
11
11
|
disabled: false,
|
|
12
12
|
groups,
|
|
13
13
|
value: groups.map(({ controls }) => controlsToValue(controls)),
|
|
14
|
-
validators:
|
|
14
|
+
validators: _options.validators
|
|
15
|
+
});
|
|
16
|
+
const [errors, setErrors] = useState([]);
|
|
17
|
+
const [controlState, setControlState] = useState({
|
|
18
|
+
valid: false,
|
|
19
|
+
dirty: false,
|
|
20
|
+
dirtyAll: false,
|
|
21
|
+
touched: false,
|
|
22
|
+
touchedAll: false
|
|
15
23
|
});
|
|
16
|
-
const errors = state.validators
|
|
17
|
-
? arrayIsValid({ groups, validators: state.validators })
|
|
18
|
-
: [];
|
|
19
|
-
const error = errors[0];
|
|
20
|
-
const valid = errors.length === 0 && groupAllChecked(state.groups, 'valid');
|
|
21
|
-
const dirty = groupPartialChecked(state.groups, 'dirty');
|
|
22
|
-
const dirtyAll = groupAllChecked(state.groups, 'dirty');
|
|
23
|
-
const touched = groupPartialChecked(state.groups, 'touched');
|
|
24
|
-
const touchedAll = groupAllChecked(state.groups, 'touched');
|
|
25
24
|
useEffect(() => {
|
|
26
25
|
const subscriber = (options) => {
|
|
27
|
-
|
|
26
|
+
setValue(state.groups.map((group) => group.uuid === options.uuid
|
|
28
27
|
? new RolsterArrayGroup(options)
|
|
29
28
|
: group));
|
|
30
29
|
};
|
|
@@ -32,70 +31,81 @@ export function useFormArray(options, arrayValidators) {
|
|
|
32
31
|
group.subscribe(subscriber);
|
|
33
32
|
});
|
|
34
33
|
}, [state.groups]);
|
|
35
|
-
|
|
34
|
+
useEffect(() => {
|
|
35
|
+
setErrors(state.validators
|
|
36
|
+
? arrayIsValid({
|
|
37
|
+
groups: state.groups,
|
|
38
|
+
validators: state.validators
|
|
39
|
+
})
|
|
40
|
+
: []);
|
|
41
|
+
}, [state.groups, state.validators]);
|
|
42
|
+
useEffect(() => {
|
|
43
|
+
setControlState({
|
|
44
|
+
valid: errors.length === 0 && groupAllChecked(state.groups, 'valid'),
|
|
45
|
+
dirty: groupPartialChecked(state.groups, 'dirty'),
|
|
46
|
+
dirtyAll: groupAllChecked(state.groups, 'dirty'),
|
|
47
|
+
touched: groupPartialChecked(state.groups, 'touched'),
|
|
48
|
+
touchedAll: groupAllChecked(state.groups, 'touched')
|
|
49
|
+
});
|
|
50
|
+
}, [state.groups, errors]);
|
|
51
|
+
const disable = useCallback(() => {
|
|
36
52
|
setState((state) => ({ ...state, disabled: true }));
|
|
37
|
-
}
|
|
38
|
-
|
|
53
|
+
}, []);
|
|
54
|
+
const enable = useCallback(() => {
|
|
39
55
|
setState((state) => ({ ...state, disabled: false }));
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
setState((
|
|
43
|
-
...
|
|
56
|
+
}, []);
|
|
57
|
+
const setValue = useCallback((groups) => {
|
|
58
|
+
setState((_state) => ({
|
|
59
|
+
..._state,
|
|
44
60
|
groups,
|
|
45
61
|
controls: groups.map(({ controls }) => controls),
|
|
46
62
|
value: groups.map(({ controls }) => controlsToValue(controls))
|
|
47
63
|
}));
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
}
|
|
67
|
-
function reset() {
|
|
68
|
-
setGroups(currentState.current);
|
|
69
|
-
}
|
|
70
|
-
function setValidators(validators) {
|
|
64
|
+
}, []);
|
|
65
|
+
const setInitialValue = useCallback((groups) => {
|
|
66
|
+
setValue(groups);
|
|
67
|
+
_value.current = groups;
|
|
68
|
+
}, []);
|
|
69
|
+
const push = useCallback((group) => {
|
|
70
|
+
setValue([...state.groups, group]);
|
|
71
|
+
}, []);
|
|
72
|
+
const merge = useCallback((groups) => {
|
|
73
|
+
setValue([...state.groups, ...groups]);
|
|
74
|
+
}, []);
|
|
75
|
+
const remove = useCallback(({ uuid }) => {
|
|
76
|
+
setValue(state.groups.filter((group) => group.uuid !== uuid));
|
|
77
|
+
}, []);
|
|
78
|
+
const reset = useCallback(() => {
|
|
79
|
+
setValue(_value.current);
|
|
80
|
+
}, []);
|
|
81
|
+
const setValidators = useCallback((validators) => {
|
|
71
82
|
setState((state) => ({ ...state, validators }));
|
|
72
|
-
}
|
|
83
|
+
}, []);
|
|
84
|
+
const hasError = useCallback((key) => rolsterHasError(errors, key), [errors]);
|
|
85
|
+
const someErrors = useCallback((keys) => rolsterSomeErrors(errors, keys), [errors]);
|
|
73
86
|
return {
|
|
74
87
|
...state,
|
|
75
|
-
|
|
76
|
-
dirtyAll,
|
|
88
|
+
...controlState,
|
|
77
89
|
disable,
|
|
78
90
|
enable,
|
|
79
91
|
enabled: !state.disabled,
|
|
80
|
-
error,
|
|
81
|
-
errors,
|
|
92
|
+
error: errors[0],
|
|
93
|
+
errors: errors,
|
|
82
94
|
hasError,
|
|
83
|
-
invalid: !valid,
|
|
95
|
+
invalid: !controlState.valid,
|
|
84
96
|
merge,
|
|
85
|
-
pristine: !dirty,
|
|
86
|
-
pristineAll: !dirtyAll,
|
|
97
|
+
pristine: !controlState.dirty,
|
|
98
|
+
pristineAll: !controlState.dirtyAll,
|
|
87
99
|
push,
|
|
88
100
|
remove,
|
|
89
101
|
reset,
|
|
90
|
-
|
|
102
|
+
setInitialValue,
|
|
91
103
|
setValidators,
|
|
104
|
+
setValue,
|
|
92
105
|
someErrors,
|
|
93
|
-
touched,
|
|
94
|
-
touchedAll,
|
|
95
|
-
|
|
96
|
-
untouchedAll: !touchedAll,
|
|
97
|
-
valid,
|
|
98
|
-
wrong: touched && !valid
|
|
106
|
+
untouched: !controlState.touched,
|
|
107
|
+
untouchedAll: !controlState.touchedAll,
|
|
108
|
+
wrong: controlState.touched && !controlState.valid
|
|
99
109
|
};
|
|
100
110
|
}
|
|
101
111
|
//# sourceMappingURL=form-array.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-array.js","sourceRoot":"","sources":["../../../src/form-array/form-array.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EACL,YAAY,EACZ,eAAe,EACf,eAAe,EACf,mBAAmB,EACnB,QAAQ,IAAI,eAAe,EAC3B,UAAU,IAAI,iBAAiB,EAChC,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"form-array.js","sourceRoot":"","sources":["../../../src/form-array/form-array.ts"],"names":[],"mappings":"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"}
|
package/dist/esm/form-control.js
CHANGED
|
@@ -1,60 +1,63 @@
|
|
|
1
1
|
import { createFormControlOptions } from '@rolster/forms/arguments';
|
|
2
2
|
import { controlIsValid, hasError as rolsterHasError, someErrors as rolsterSomeErrors } from '@rolster/forms/helpers';
|
|
3
|
-
import { useRef, useState } from 'react';
|
|
4
|
-
function useControl(
|
|
5
|
-
const
|
|
3
|
+
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
4
|
+
function useControl(options, validators) {
|
|
5
|
+
const _options = createFormControlOptions(options, validators);
|
|
6
6
|
const [state, setState] = useState({
|
|
7
7
|
dirty: false,
|
|
8
8
|
disabled: false,
|
|
9
9
|
focused: false,
|
|
10
|
-
touched: !!touched,
|
|
11
|
-
validators,
|
|
12
|
-
value
|
|
10
|
+
touched: !!_options.touched,
|
|
11
|
+
validators: _options.validators,
|
|
12
|
+
value: _options.value
|
|
13
13
|
});
|
|
14
|
-
const
|
|
14
|
+
const [errors, setErrors] = useState([]);
|
|
15
|
+
const initialValue = useRef(_options.value);
|
|
15
16
|
const elementRef = useRef(null);
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
17
|
+
useEffect(() => {
|
|
18
|
+
setErrors(state.validators
|
|
19
|
+
? controlIsValid({
|
|
20
|
+
value: state.value,
|
|
21
|
+
validators: state.validators
|
|
22
|
+
})
|
|
23
|
+
: []);
|
|
24
|
+
}, [state.value, state.validators]);
|
|
25
|
+
const focus = useCallback(() => {
|
|
24
26
|
setState((state) => ({ ...state, focused: true }));
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
+
}, []);
|
|
28
|
+
const blur = useCallback(() => {
|
|
27
29
|
setState((state) => ({ ...state, focused: false, touched: true }));
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
+
}, []);
|
|
31
|
+
const disable = useCallback(() => {
|
|
30
32
|
setState((state) => ({ ...state, disabled: true }));
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
+
}, []);
|
|
34
|
+
const enable = useCallback(() => {
|
|
33
35
|
setState((state) => ({ ...state, disabled: false }));
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
+
}, []);
|
|
37
|
+
const touch = useCallback(() => {
|
|
36
38
|
setState((state) => ({ ...state, touched: true }));
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
+
}, []);
|
|
40
|
+
const setInitialValue = useCallback((value) => {
|
|
41
|
+
initialValue.current = value;
|
|
42
|
+
setState((state) => ({ ...state, dirty: true, value }));
|
|
43
|
+
}, []);
|
|
44
|
+
const setValue = useCallback((value) => {
|
|
39
45
|
setState((state) => ({ ...state, dirty: true, value }));
|
|
40
|
-
}
|
|
41
|
-
|
|
46
|
+
}, []);
|
|
47
|
+
const setValidators = useCallback((validators) => {
|
|
42
48
|
setState((state) => ({ ...state, validators }));
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
return rolsterHasError(errors, key);
|
|
46
|
-
}
|
|
47
|
-
function someErrors(keys) {
|
|
48
|
-
return rolsterSomeErrors(errors, keys);
|
|
49
|
-
}
|
|
50
|
-
function reset() {
|
|
49
|
+
}, []);
|
|
50
|
+
const reset = useCallback(() => {
|
|
51
51
|
setState((state) => ({
|
|
52
52
|
...state,
|
|
53
53
|
dirty: false,
|
|
54
54
|
value: initialValue.current,
|
|
55
55
|
touched: false
|
|
56
56
|
}));
|
|
57
|
-
}
|
|
57
|
+
}, []);
|
|
58
|
+
const hasError = useCallback((key) => rolsterHasError(errors, key), [errors]);
|
|
59
|
+
const someErrors = useCallback((keys) => rolsterSomeErrors(errors, keys), [errors]);
|
|
60
|
+
const valid = errors.length === 0;
|
|
58
61
|
return {
|
|
59
62
|
...state,
|
|
60
63
|
blur,
|
|
@@ -69,6 +72,7 @@ function useControl(controlOptions, controlValidators) {
|
|
|
69
72
|
invalid: !valid,
|
|
70
73
|
pristine: !state.dirty,
|
|
71
74
|
reset,
|
|
75
|
+
setInitialValue,
|
|
72
76
|
setValidators,
|
|
73
77
|
setValue,
|
|
74
78
|
someErrors,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-control.js","sourceRoot":"","sources":["../../src/form-control.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AACpE,OAAO,EACL,cAAc,EACd,QAAQ,IAAI,eAAe,EAC3B,UAAU,IAAI,iBAAiB,EAChC,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"form-control.js","sourceRoot":"","sources":["../../src/form-control.ts"],"names":[],"mappings":"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"}
|
package/dist/esm/form-group.js
CHANGED
|
@@ -2,9 +2,9 @@ import { createFormGroupOptions } from '@rolster/forms/arguments';
|
|
|
2
2
|
import { controlsAllChecked, controlsPartialChecked, controlsToValue, groupIsValid } from '@rolster/forms/helpers';
|
|
3
3
|
import { useState } from 'react';
|
|
4
4
|
export function useFormGroup(options, groupValidators) {
|
|
5
|
-
const
|
|
6
|
-
const [validators, setValidators] = useState(
|
|
7
|
-
const { controls } =
|
|
5
|
+
const _options = createFormGroupOptions(options, groupValidators);
|
|
6
|
+
const [validators, setValidators] = useState(_options.validators);
|
|
7
|
+
const { controls } = _options;
|
|
8
8
|
const errors = validators ? groupIsValid({ controls, validators }) : [];
|
|
9
9
|
const valid = errors.length === 0 && controlsAllChecked(controls, 'valid');
|
|
10
10
|
const value = controlsToValue(controls);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-group.js","sourceRoot":"","sources":["../../src/form-group.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EACL,kBAAkB,EAClB,sBAAsB,EACtB,eAAe,EACf,YAAY,EACb,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAUjC,MAAM,UAAU,YAAY,CAC1B,OAAgC,EAChC,eAAuC;IAEvC,MAAM,
|
|
1
|
+
{"version":3,"file":"form-group.js","sourceRoot":"","sources":["../../src/form-group.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EACL,kBAAkB,EAClB,sBAAsB,EACtB,eAAe,EACf,YAAY,EACb,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAUjC,MAAM,UAAU,YAAY,CAC1B,OAAgC,EAChC,eAAuC;IAEvC,MAAM,QAAQ,GAAG,sBAAsB,CACrC,OAAO,EACP,eAAe,CAChB,CAAC;IAEF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;IAElE,MAAM,EAAE,QAAQ,EAAE,GAAG,QAAQ,CAAC;IAE9B,MAAM,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACxE,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,kBAAkB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IAC3E,MAAM,KAAK,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;IACxC,MAAM,KAAK,GAAG,sBAAsB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IACxD,MAAM,QAAQ,GAAG,kBAAkB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IACvD,MAAM,OAAO,GAAG,sBAAsB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAC5D,MAAM,UAAU,GAAG,kBAAkB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAE3D,SAAS,KAAK;QACZ,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAC1C,OAAO,CAAC,KAAK,EAAE,CAAC;QAClB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,OAAO;QACL,QAAQ;QACR,KAAK;QACL,QAAQ;QACR,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;QAChB,MAAM;QACN,OAAO,EAAE,CAAC,KAAK;QACf,QAAQ,EAAE,CAAC,KAAK;QAChB,WAAW,EAAE,CAAC,QAAQ;QACtB,KAAK;QACL,aAAa;QACb,OAAO;QACP,UAAU;QACV,SAAS,EAAE,CAAC,OAAO;QACnB,YAAY,EAAE,CAAC,UAAU;QACzB,KAAK;QACL,KAAK;QACL,KAAK,EAAE,OAAO,IAAI,CAAC,KAAK;KACzB,CAAC;AACJ,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rolster/react-forms",
|
|
3
|
-
"version": "18.
|
|
3
|
+
"version": "18.10.0",
|
|
4
4
|
"description": "It implements a set of classes that allow managing the control of states of the input components in React",
|
|
5
5
|
"module": "dist/esm/index.js",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -27,10 +27,10 @@
|
|
|
27
27
|
"prepublishOnly": "npm run build"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@rolster/forms": "^2.
|
|
30
|
+
"@rolster/forms": "^2.9.0",
|
|
31
31
|
"@rolster/validators": "^2.1.0",
|
|
32
32
|
"react": "^18.2.0",
|
|
33
|
-
"uuid": "^
|
|
33
|
+
"uuid": "^11.0.3"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@rollup/plugin-commonjs": "^25.0.4",
|