@rolster/react-forms 18.8.2 → 18.9.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 +419 -419
- package/dist/cjs/index.js.map +1 -1
- package/dist/es/index.js +419 -419
- package/dist/es/index.js.map +1 -1
- package/dist/esm/form-array/form-array-control.d.ts +67 -67
- package/dist/esm/form-array/form-array-control.js +95 -95
- package/dist/esm/form-array/form-array-group.d.ts +32 -32
- package/dist/esm/form-array/form-array-group.js +54 -54
- package/dist/esm/form-array/form-array-list.d.ts +26 -26
- package/dist/esm/form-array/form-array-list.js +66 -66
- package/dist/esm/form-array/form-array.d.ts +5 -5
- package/dist/esm/form-array/form-array.js +100 -100
- package/dist/esm/form-array/index.d.ts +4 -4
- package/dist/esm/form-array/index.js +4 -4
- package/dist/esm/form-control.d.ts +27 -27
- package/dist/esm/form-control.js +90 -90
- package/dist/esm/form-group.d.ts +4 -4
- package/dist/esm/form-group.js +39 -39
- package/dist/esm/form-ref.d.ts +17 -17
- package/dist/esm/form-ref.js +35 -35
- package/dist/esm/index.d.ts +4 -4
- package/dist/esm/index.js +4 -4
- package/dist/esm/types.d.ts +51 -51
- package/dist/esm/types.js +1 -1
- package/package.json +5 -5
package/dist/cjs/index.js
CHANGED
|
@@ -7,435 +7,435 @@ var helpers = require('@rolster/forms/helpers');
|
|
|
7
7
|
var uuid = require('uuid');
|
|
8
8
|
var react = require('react');
|
|
9
9
|
|
|
10
|
-
class RolsterReactArrayControl {
|
|
11
|
-
constructor(options) {
|
|
12
|
-
this.initialValue = options.initialValue;
|
|
13
|
-
this.uuid = options.uuid;
|
|
14
|
-
this.focused = !!options.focused;
|
|
15
|
-
this.unfocused = !this.focused;
|
|
16
|
-
this.touched = !!options.touched;
|
|
17
|
-
this.untouched = !this.touched;
|
|
18
|
-
this.dirty = !!options.dirty;
|
|
19
|
-
this.pristine = !this.dirty;
|
|
20
|
-
this.disabled = !!options.disabled;
|
|
21
|
-
this.enabled = !this.disabled;
|
|
22
|
-
const { value, validators } = options;
|
|
23
|
-
this.value = value;
|
|
24
|
-
this.validators = validators;
|
|
25
|
-
this.errors = validators ? helpers.controlIsValid({ value, validators }) : [];
|
|
26
|
-
this.error = this.errors[0];
|
|
27
|
-
}
|
|
28
|
-
focus() {
|
|
29
|
-
this.unfocused && this.refresh({ focused: true });
|
|
30
|
-
}
|
|
31
|
-
blur() {
|
|
32
|
-
this.focused && this.refresh({ focused: false, touched: true });
|
|
33
|
-
}
|
|
34
|
-
disable() {
|
|
35
|
-
this.enabled && this.refresh({ disabled: true });
|
|
36
|
-
}
|
|
37
|
-
enable() {
|
|
38
|
-
this.disabled && this.refresh({ disabled: false });
|
|
39
|
-
}
|
|
40
|
-
touch() {
|
|
41
|
-
this.untouched && this.refresh({ touched: true });
|
|
42
|
-
}
|
|
43
|
-
setValue(value) {
|
|
44
|
-
this.refresh({ value });
|
|
45
|
-
}
|
|
46
|
-
setValidators(validators) {
|
|
47
|
-
this.refresh({ validators });
|
|
48
|
-
}
|
|
49
|
-
subscribe(subscriber) {
|
|
50
|
-
this.subscriber = subscriber;
|
|
51
|
-
}
|
|
52
|
-
hasError(key) {
|
|
53
|
-
return helpers.hasError(this.errors, key);
|
|
54
|
-
}
|
|
55
|
-
someErrors(keys) {
|
|
56
|
-
return helpers.someErrors(this.errors, keys);
|
|
57
|
-
}
|
|
58
|
-
reset() {
|
|
59
|
-
this.refresh({
|
|
60
|
-
dirty: false,
|
|
61
|
-
touched: false,
|
|
62
|
-
value: this.initialValue
|
|
63
|
-
});
|
|
64
|
-
}
|
|
65
|
-
refresh(changes) {
|
|
66
|
-
this.subscriber &&
|
|
67
|
-
this.subscriber({
|
|
68
|
-
...this,
|
|
69
|
-
...changes,
|
|
70
|
-
initialValue: this.initialValue
|
|
71
|
-
});
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
class RolsterArrayControl extends RolsterReactArrayControl {
|
|
75
|
-
constructor(options) {
|
|
76
|
-
super(options);
|
|
77
|
-
this.valid = this.errors.length === 0;
|
|
78
|
-
this.invalid = !this.valid;
|
|
79
|
-
this.wrong = this.touched && this.invalid;
|
|
80
|
-
}
|
|
81
|
-
clone(options) {
|
|
82
|
-
return new RolsterArrayControl(options);
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
function rolsterArrayControl(options, validators) {
|
|
86
|
-
const controlOptions = _arguments.createFormControlOptions(options, validators);
|
|
87
|
-
return new RolsterArrayControl({
|
|
88
|
-
...controlOptions,
|
|
89
|
-
initialValue: controlOptions.value,
|
|
90
|
-
uuid: uuid.v4()
|
|
91
|
-
});
|
|
92
|
-
}
|
|
93
|
-
function reactArrayControl(options, validators) {
|
|
94
|
-
return rolsterArrayControl(options, validators);
|
|
95
|
-
}
|
|
96
|
-
function formArrayControl(options, validators) {
|
|
97
|
-
return rolsterArrayControl(options, validators);
|
|
98
|
-
}
|
|
99
|
-
function inputArrayControl(options, validators) {
|
|
100
|
-
return rolsterArrayControl(options, validators);
|
|
10
|
+
class RolsterReactArrayControl {
|
|
11
|
+
constructor(options) {
|
|
12
|
+
this.initialValue = options.initialValue;
|
|
13
|
+
this.uuid = options.uuid;
|
|
14
|
+
this.focused = !!options.focused;
|
|
15
|
+
this.unfocused = !this.focused;
|
|
16
|
+
this.touched = !!options.touched;
|
|
17
|
+
this.untouched = !this.touched;
|
|
18
|
+
this.dirty = !!options.dirty;
|
|
19
|
+
this.pristine = !this.dirty;
|
|
20
|
+
this.disabled = !!options.disabled;
|
|
21
|
+
this.enabled = !this.disabled;
|
|
22
|
+
const { value, validators } = options;
|
|
23
|
+
this.value = value;
|
|
24
|
+
this.validators = validators;
|
|
25
|
+
this.errors = validators ? helpers.controlIsValid({ value, validators }) : [];
|
|
26
|
+
this.error = this.errors[0];
|
|
27
|
+
}
|
|
28
|
+
focus() {
|
|
29
|
+
this.unfocused && this.refresh({ focused: true });
|
|
30
|
+
}
|
|
31
|
+
blur() {
|
|
32
|
+
this.focused && this.refresh({ focused: false, touched: true });
|
|
33
|
+
}
|
|
34
|
+
disable() {
|
|
35
|
+
this.enabled && this.refresh({ disabled: true });
|
|
36
|
+
}
|
|
37
|
+
enable() {
|
|
38
|
+
this.disabled && this.refresh({ disabled: false });
|
|
39
|
+
}
|
|
40
|
+
touch() {
|
|
41
|
+
this.untouched && this.refresh({ touched: true });
|
|
42
|
+
}
|
|
43
|
+
setValue(value) {
|
|
44
|
+
this.refresh({ value });
|
|
45
|
+
}
|
|
46
|
+
setValidators(validators) {
|
|
47
|
+
this.refresh({ validators });
|
|
48
|
+
}
|
|
49
|
+
subscribe(subscriber) {
|
|
50
|
+
this.subscriber = subscriber;
|
|
51
|
+
}
|
|
52
|
+
hasError(key) {
|
|
53
|
+
return helpers.hasError(this.errors, key);
|
|
54
|
+
}
|
|
55
|
+
someErrors(keys) {
|
|
56
|
+
return helpers.someErrors(this.errors, keys);
|
|
57
|
+
}
|
|
58
|
+
reset() {
|
|
59
|
+
this.refresh({
|
|
60
|
+
dirty: false,
|
|
61
|
+
touched: false,
|
|
62
|
+
value: this.initialValue
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
refresh(changes) {
|
|
66
|
+
this.subscriber &&
|
|
67
|
+
this.subscriber({
|
|
68
|
+
...this,
|
|
69
|
+
...changes,
|
|
70
|
+
initialValue: this.initialValue
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
class RolsterArrayControl extends RolsterReactArrayControl {
|
|
75
|
+
constructor(options) {
|
|
76
|
+
super(options);
|
|
77
|
+
this.valid = this.errors.length === 0;
|
|
78
|
+
this.invalid = !this.valid;
|
|
79
|
+
this.wrong = this.touched && this.invalid;
|
|
80
|
+
}
|
|
81
|
+
clone(options) {
|
|
82
|
+
return new RolsterArrayControl(options);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
function rolsterArrayControl(options, validators) {
|
|
86
|
+
const controlOptions = _arguments.createFormControlOptions(options, validators);
|
|
87
|
+
return new RolsterArrayControl({
|
|
88
|
+
...controlOptions,
|
|
89
|
+
initialValue: controlOptions.value,
|
|
90
|
+
uuid: uuid.v4()
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
function reactArrayControl(options, validators) {
|
|
94
|
+
return rolsterArrayControl(options, validators);
|
|
95
|
+
}
|
|
96
|
+
function formArrayControl(options, validators) {
|
|
97
|
+
return rolsterArrayControl(options, validators);
|
|
98
|
+
}
|
|
99
|
+
function inputArrayControl(options, validators) {
|
|
100
|
+
return rolsterArrayControl(options, validators);
|
|
101
101
|
}
|
|
102
102
|
|
|
103
|
-
class RolsterArrayGroup {
|
|
104
|
-
constructor(options) {
|
|
105
|
-
const { controls, resource, uuid, validators } = options;
|
|
106
|
-
this.uuid = uuid;
|
|
107
|
-
this.controls = controls;
|
|
108
|
-
this.validators = validators;
|
|
109
|
-
this.resource = resource;
|
|
110
|
-
this.errors = validators ? helpers.groupIsValid({ controls, validators }) : [];
|
|
111
|
-
this.error = this.errors[0];
|
|
112
|
-
this.valid =
|
|
113
|
-
this.errors.length === 0 && helpers.controlsAllChecked(controls, 'valid');
|
|
114
|
-
this.invalid = !this.valid;
|
|
115
|
-
this.dirty = helpers.controlsPartialChecked(controls, 'dirty');
|
|
116
|
-
this.dirtyAll = helpers.controlsAllChecked(controls, 'dirty');
|
|
117
|
-
this.touched = helpers.controlsPartialChecked(controls, 'touched');
|
|
118
|
-
this.touchedAll = helpers.controlsAllChecked(controls, 'touched');
|
|
119
|
-
this.untouched = !this.touched;
|
|
120
|
-
this.untouchedAll = !this.touchedAll;
|
|
121
|
-
this.pristine = !this.dirty;
|
|
122
|
-
this.pristineAll = !this.dirtyAll;
|
|
123
|
-
this.wrong = this.touched && this.invalid;
|
|
124
|
-
this.value = helpers.controlsToValue(controls);
|
|
125
|
-
const subscriber = (options) => {
|
|
126
|
-
this.refresh({
|
|
127
|
-
controls: Object.entries(this.controls).reduce((controls, [key, control]) => {
|
|
128
|
-
controls[key] =
|
|
129
|
-
control.uuid === options.uuid ? control.clone(options) : control;
|
|
130
|
-
return controls;
|
|
131
|
-
}, {})
|
|
132
|
-
});
|
|
133
|
-
};
|
|
134
|
-
Object.values(controls).forEach((control) => {
|
|
135
|
-
control.subscribe(subscriber);
|
|
136
|
-
});
|
|
137
|
-
}
|
|
138
|
-
setValidators(validators) {
|
|
139
|
-
this.refresh({ validators });
|
|
140
|
-
}
|
|
141
|
-
subscribe(subscriber) {
|
|
142
|
-
this.subscriber = subscriber;
|
|
143
|
-
}
|
|
144
|
-
refresh(changes) {
|
|
145
|
-
this.subscriber && this.subscriber({ ...this, ...changes });
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
function formArrayGroup(options, validators) {
|
|
149
|
-
return new RolsterArrayGroup({
|
|
150
|
-
..._arguments.createFormGroupOptions(options, validators),
|
|
151
|
-
uuid: uuid.v4()
|
|
152
|
-
});
|
|
103
|
+
class RolsterArrayGroup {
|
|
104
|
+
constructor(options) {
|
|
105
|
+
const { controls, resource, uuid, validators } = options;
|
|
106
|
+
this.uuid = uuid;
|
|
107
|
+
this.controls = controls;
|
|
108
|
+
this.validators = validators;
|
|
109
|
+
this.resource = resource;
|
|
110
|
+
this.errors = validators ? helpers.groupIsValid({ controls, validators }) : [];
|
|
111
|
+
this.error = this.errors[0];
|
|
112
|
+
this.valid =
|
|
113
|
+
this.errors.length === 0 && helpers.controlsAllChecked(controls, 'valid');
|
|
114
|
+
this.invalid = !this.valid;
|
|
115
|
+
this.dirty = helpers.controlsPartialChecked(controls, 'dirty');
|
|
116
|
+
this.dirtyAll = helpers.controlsAllChecked(controls, 'dirty');
|
|
117
|
+
this.touched = helpers.controlsPartialChecked(controls, 'touched');
|
|
118
|
+
this.touchedAll = helpers.controlsAllChecked(controls, 'touched');
|
|
119
|
+
this.untouched = !this.touched;
|
|
120
|
+
this.untouchedAll = !this.touchedAll;
|
|
121
|
+
this.pristine = !this.dirty;
|
|
122
|
+
this.pristineAll = !this.dirtyAll;
|
|
123
|
+
this.wrong = this.touched && this.invalid;
|
|
124
|
+
this.value = helpers.controlsToValue(controls);
|
|
125
|
+
const subscriber = (options) => {
|
|
126
|
+
this.refresh({
|
|
127
|
+
controls: Object.entries(this.controls).reduce((controls, [key, control]) => {
|
|
128
|
+
controls[key] =
|
|
129
|
+
control.uuid === options.uuid ? control.clone(options) : control;
|
|
130
|
+
return controls;
|
|
131
|
+
}, {})
|
|
132
|
+
});
|
|
133
|
+
};
|
|
134
|
+
Object.values(controls).forEach((control) => {
|
|
135
|
+
control.subscribe(subscriber);
|
|
136
|
+
});
|
|
137
|
+
}
|
|
138
|
+
setValidators(validators) {
|
|
139
|
+
this.refresh({ validators });
|
|
140
|
+
}
|
|
141
|
+
subscribe(subscriber) {
|
|
142
|
+
this.subscriber = subscriber;
|
|
143
|
+
}
|
|
144
|
+
refresh(changes) {
|
|
145
|
+
this.subscriber && this.subscriber({ ...this, ...changes });
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
function formArrayGroup(options, validators) {
|
|
149
|
+
return new RolsterArrayGroup({
|
|
150
|
+
..._arguments.createFormGroupOptions(options, validators),
|
|
151
|
+
uuid: uuid.v4()
|
|
152
|
+
});
|
|
153
153
|
}
|
|
154
154
|
|
|
155
|
-
class RolsterArrayList extends RolsterReactArrayControl {
|
|
156
|
-
constructor(options) {
|
|
157
|
-
const value = options.controls.map((controls) => helpers.controlsToValue(controls));
|
|
158
|
-
super({ ...options, value });
|
|
159
|
-
this.valueToControls = options.valueToControls;
|
|
160
|
-
this.controls = options.controls;
|
|
161
|
-
this.valid =
|
|
162
|
-
this.errors.length === 0 &&
|
|
163
|
-
this.controls.reduce((valid, controls) => valid && helpers.controlsAllChecked(controls, 'valid'), true);
|
|
164
|
-
this.invalid = !this.valid;
|
|
165
|
-
this.wrong = this.touched && this.invalid;
|
|
166
|
-
options.controls.forEach((controls) => {
|
|
167
|
-
this.subscribeControls(controls);
|
|
168
|
-
});
|
|
169
|
-
}
|
|
170
|
-
setValue(value) {
|
|
171
|
-
this.refresh({
|
|
172
|
-
controls: value.map((value) => this.valueToControls(value))
|
|
173
|
-
});
|
|
174
|
-
}
|
|
175
|
-
clone(options) {
|
|
176
|
-
return new RolsterArrayList(options);
|
|
177
|
-
}
|
|
178
|
-
push(controls) {
|
|
179
|
-
this.refresh({
|
|
180
|
-
controls: [...this.controls, controls]
|
|
181
|
-
});
|
|
182
|
-
}
|
|
183
|
-
remove(controls) {
|
|
184
|
-
this.refresh({
|
|
185
|
-
controls: this.controls.filter((currentControls) => currentControls !== controls)
|
|
186
|
-
});
|
|
187
|
-
}
|
|
188
|
-
refresh(changes) {
|
|
189
|
-
super.refresh(changes);
|
|
190
|
-
}
|
|
191
|
-
subscribeControls(newControls) {
|
|
192
|
-
Object.values(newControls).forEach((control) => {
|
|
193
|
-
control.subscribe((options) => {
|
|
194
|
-
const controls = this.controls.map((currentControls) => currentControls !== newControls
|
|
195
|
-
? currentControls
|
|
196
|
-
: Object.entries(newControls).reduce((controls, [key, control]) => {
|
|
197
|
-
controls[key] =
|
|
198
|
-
control.uuid === options.uuid
|
|
199
|
-
? control.clone(options)
|
|
200
|
-
: control;
|
|
201
|
-
return controls;
|
|
202
|
-
}, {}));
|
|
203
|
-
this.refresh({ controls });
|
|
204
|
-
});
|
|
205
|
-
});
|
|
206
|
-
}
|
|
207
|
-
}
|
|
208
|
-
function formArrayList(valueToControls, options) {
|
|
209
|
-
const value = options?.value || [];
|
|
210
|
-
return new RolsterArrayList({
|
|
211
|
-
...options,
|
|
212
|
-
valueToControls,
|
|
213
|
-
controls: value.map((value) => valueToControls(value)),
|
|
214
|
-
initialValue: value,
|
|
215
|
-
uuid: uuid.v4()
|
|
216
|
-
});
|
|
155
|
+
class RolsterArrayList extends RolsterReactArrayControl {
|
|
156
|
+
constructor(options) {
|
|
157
|
+
const value = options.controls.map((controls) => helpers.controlsToValue(controls));
|
|
158
|
+
super({ ...options, value });
|
|
159
|
+
this.valueToControls = options.valueToControls;
|
|
160
|
+
this.controls = options.controls;
|
|
161
|
+
this.valid =
|
|
162
|
+
this.errors.length === 0 &&
|
|
163
|
+
this.controls.reduce((valid, controls) => valid && helpers.controlsAllChecked(controls, 'valid'), true);
|
|
164
|
+
this.invalid = !this.valid;
|
|
165
|
+
this.wrong = this.touched && this.invalid;
|
|
166
|
+
options.controls.forEach((controls) => {
|
|
167
|
+
this.subscribeControls(controls);
|
|
168
|
+
});
|
|
169
|
+
}
|
|
170
|
+
setValue(value) {
|
|
171
|
+
this.refresh({
|
|
172
|
+
controls: value.map((value) => this.valueToControls(value))
|
|
173
|
+
});
|
|
174
|
+
}
|
|
175
|
+
clone(options) {
|
|
176
|
+
return new RolsterArrayList(options);
|
|
177
|
+
}
|
|
178
|
+
push(controls) {
|
|
179
|
+
this.refresh({
|
|
180
|
+
controls: [...this.controls, controls]
|
|
181
|
+
});
|
|
182
|
+
}
|
|
183
|
+
remove(controls) {
|
|
184
|
+
this.refresh({
|
|
185
|
+
controls: this.controls.filter((currentControls) => currentControls !== controls)
|
|
186
|
+
});
|
|
187
|
+
}
|
|
188
|
+
refresh(changes) {
|
|
189
|
+
super.refresh(changes);
|
|
190
|
+
}
|
|
191
|
+
subscribeControls(newControls) {
|
|
192
|
+
Object.values(newControls).forEach((control) => {
|
|
193
|
+
control.subscribe((options) => {
|
|
194
|
+
const controls = this.controls.map((currentControls) => currentControls !== newControls
|
|
195
|
+
? currentControls
|
|
196
|
+
: Object.entries(newControls).reduce((controls, [key, control]) => {
|
|
197
|
+
controls[key] =
|
|
198
|
+
control.uuid === options.uuid
|
|
199
|
+
? control.clone(options)
|
|
200
|
+
: control;
|
|
201
|
+
return controls;
|
|
202
|
+
}, {}));
|
|
203
|
+
this.refresh({ controls });
|
|
204
|
+
});
|
|
205
|
+
});
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
function formArrayList(valueToControls, options) {
|
|
209
|
+
const value = options?.value || [];
|
|
210
|
+
return new RolsterArrayList({
|
|
211
|
+
...options,
|
|
212
|
+
valueToControls,
|
|
213
|
+
controls: value.map((value) => valueToControls(value)),
|
|
214
|
+
initialValue: value,
|
|
215
|
+
uuid: uuid.v4()
|
|
216
|
+
});
|
|
217
217
|
}
|
|
218
218
|
|
|
219
|
-
function useFormArray(options, arrayValidators) {
|
|
220
|
-
const arrayOptions = _arguments.createFormArrayOptions(options, arrayValidators);
|
|
221
|
-
const groups = arrayOptions.groups || [];
|
|
222
|
-
const currentState = react.useRef(groups);
|
|
223
|
-
const [state, setState] = react.useState({
|
|
224
|
-
controls: groups.map(({ controls }) => controls),
|
|
225
|
-
disabled: false,
|
|
226
|
-
groups,
|
|
227
|
-
value: groups.map(({ controls }) => helpers.controlsToValue(controls)),
|
|
228
|
-
validators: arrayOptions.validators
|
|
229
|
-
});
|
|
230
|
-
const errors = state.validators
|
|
231
|
-
? helpers.arrayIsValid({ groups, validators: state.validators })
|
|
232
|
-
: [];
|
|
233
|
-
const error = errors[0];
|
|
234
|
-
const valid = errors.length === 0 && helpers.groupAllChecked(state.groups, 'valid');
|
|
235
|
-
const dirty = helpers.groupPartialChecked(state.groups, 'dirty');
|
|
236
|
-
const dirtyAll = helpers.groupAllChecked(state.groups, 'dirty');
|
|
237
|
-
const touched = helpers.groupPartialChecked(state.groups, 'touched');
|
|
238
|
-
const touchedAll = helpers.groupAllChecked(state.groups, 'touched');
|
|
239
|
-
react.useEffect(() => {
|
|
240
|
-
const subscriber = (options) => {
|
|
241
|
-
setGroups(state.groups.map((group) => group.uuid === options.uuid
|
|
242
|
-
? new RolsterArrayGroup(options)
|
|
243
|
-
: group));
|
|
244
|
-
};
|
|
245
|
-
state.groups.forEach((group) => {
|
|
246
|
-
group.subscribe(subscriber);
|
|
247
|
-
});
|
|
248
|
-
}, [state.groups]);
|
|
249
|
-
function disable() {
|
|
250
|
-
setState((state) => ({ ...state, disabled: true }));
|
|
251
|
-
}
|
|
252
|
-
function enable() {
|
|
253
|
-
setState((state) => ({ ...state, disabled: false }));
|
|
254
|
-
}
|
|
255
|
-
function setGroups(groups) {
|
|
256
|
-
setState((currentState) => ({
|
|
257
|
-
...currentState,
|
|
258
|
-
groups,
|
|
259
|
-
controls: groups.map(({ controls }) => controls),
|
|
260
|
-
value: groups.map(({ controls }) => helpers.controlsToValue(controls))
|
|
261
|
-
}));
|
|
262
|
-
}
|
|
263
|
-
function push(group) {
|
|
264
|
-
setGroups([...state.groups, group]);
|
|
265
|
-
}
|
|
266
|
-
function merge(groups) {
|
|
267
|
-
setGroups([...state.groups, ...groups]);
|
|
268
|
-
}
|
|
269
|
-
function set(groups) {
|
|
270
|
-
setGroups(groups);
|
|
271
|
-
}
|
|
272
|
-
function remove({ uuid }) {
|
|
273
|
-
setGroups(state.groups.filter((group) => group.uuid !== uuid));
|
|
274
|
-
}
|
|
275
|
-
function hasError(key) {
|
|
276
|
-
return helpers.hasError(errors, key);
|
|
277
|
-
}
|
|
278
|
-
function someErrors(keys) {
|
|
279
|
-
return helpers.someErrors(errors, keys);
|
|
280
|
-
}
|
|
281
|
-
function reset() {
|
|
282
|
-
setGroups(currentState.current);
|
|
283
|
-
}
|
|
284
|
-
function setValidators(validators) {
|
|
285
|
-
setState((state) => ({ ...state, validators }));
|
|
286
|
-
}
|
|
287
|
-
return {
|
|
288
|
-
...state,
|
|
289
|
-
dirty,
|
|
290
|
-
dirtyAll,
|
|
291
|
-
disable,
|
|
292
|
-
enable,
|
|
293
|
-
enabled: !state.disabled,
|
|
294
|
-
error,
|
|
295
|
-
errors,
|
|
296
|
-
hasError,
|
|
297
|
-
invalid: !valid,
|
|
298
|
-
merge,
|
|
299
|
-
pristine: !dirty,
|
|
300
|
-
pristineAll: !dirtyAll,
|
|
301
|
-
push,
|
|
302
|
-
remove,
|
|
303
|
-
reset,
|
|
304
|
-
set,
|
|
305
|
-
setValidators,
|
|
306
|
-
someErrors,
|
|
307
|
-
touched,
|
|
308
|
-
touchedAll,
|
|
309
|
-
untouched: !touched,
|
|
310
|
-
untouchedAll: !touchedAll,
|
|
311
|
-
valid,
|
|
312
|
-
wrong: touched && !valid
|
|
313
|
-
};
|
|
219
|
+
function useFormArray(options, arrayValidators) {
|
|
220
|
+
const arrayOptions = _arguments.createFormArrayOptions(options, arrayValidators);
|
|
221
|
+
const groups = arrayOptions.groups || [];
|
|
222
|
+
const currentState = react.useRef(groups);
|
|
223
|
+
const [state, setState] = react.useState({
|
|
224
|
+
controls: groups.map(({ controls }) => controls),
|
|
225
|
+
disabled: false,
|
|
226
|
+
groups,
|
|
227
|
+
value: groups.map(({ controls }) => helpers.controlsToValue(controls)),
|
|
228
|
+
validators: arrayOptions.validators
|
|
229
|
+
});
|
|
230
|
+
const errors = state.validators
|
|
231
|
+
? helpers.arrayIsValid({ groups, validators: state.validators })
|
|
232
|
+
: [];
|
|
233
|
+
const error = errors[0];
|
|
234
|
+
const valid = errors.length === 0 && helpers.groupAllChecked(state.groups, 'valid');
|
|
235
|
+
const dirty = helpers.groupPartialChecked(state.groups, 'dirty');
|
|
236
|
+
const dirtyAll = helpers.groupAllChecked(state.groups, 'dirty');
|
|
237
|
+
const touched = helpers.groupPartialChecked(state.groups, 'touched');
|
|
238
|
+
const touchedAll = helpers.groupAllChecked(state.groups, 'touched');
|
|
239
|
+
react.useEffect(() => {
|
|
240
|
+
const subscriber = (options) => {
|
|
241
|
+
setGroups(state.groups.map((group) => group.uuid === options.uuid
|
|
242
|
+
? new RolsterArrayGroup(options)
|
|
243
|
+
: group));
|
|
244
|
+
};
|
|
245
|
+
state.groups.forEach((group) => {
|
|
246
|
+
group.subscribe(subscriber);
|
|
247
|
+
});
|
|
248
|
+
}, [state.groups]);
|
|
249
|
+
function disable() {
|
|
250
|
+
setState((state) => ({ ...state, disabled: true }));
|
|
251
|
+
}
|
|
252
|
+
function enable() {
|
|
253
|
+
setState((state) => ({ ...state, disabled: false }));
|
|
254
|
+
}
|
|
255
|
+
function setGroups(groups) {
|
|
256
|
+
setState((currentState) => ({
|
|
257
|
+
...currentState,
|
|
258
|
+
groups,
|
|
259
|
+
controls: groups.map(({ controls }) => controls),
|
|
260
|
+
value: groups.map(({ controls }) => helpers.controlsToValue(controls))
|
|
261
|
+
}));
|
|
262
|
+
}
|
|
263
|
+
function push(group) {
|
|
264
|
+
setGroups([...state.groups, group]);
|
|
265
|
+
}
|
|
266
|
+
function merge(groups) {
|
|
267
|
+
setGroups([...state.groups, ...groups]);
|
|
268
|
+
}
|
|
269
|
+
function set(groups) {
|
|
270
|
+
setGroups(groups);
|
|
271
|
+
}
|
|
272
|
+
function remove({ uuid }) {
|
|
273
|
+
setGroups(state.groups.filter((group) => group.uuid !== uuid));
|
|
274
|
+
}
|
|
275
|
+
function hasError(key) {
|
|
276
|
+
return helpers.hasError(errors, key);
|
|
277
|
+
}
|
|
278
|
+
function someErrors(keys) {
|
|
279
|
+
return helpers.someErrors(errors, keys);
|
|
280
|
+
}
|
|
281
|
+
function reset() {
|
|
282
|
+
setGroups(currentState.current);
|
|
283
|
+
}
|
|
284
|
+
function setValidators(validators) {
|
|
285
|
+
setState((state) => ({ ...state, validators }));
|
|
286
|
+
}
|
|
287
|
+
return {
|
|
288
|
+
...state,
|
|
289
|
+
dirty,
|
|
290
|
+
dirtyAll,
|
|
291
|
+
disable,
|
|
292
|
+
enable,
|
|
293
|
+
enabled: !state.disabled,
|
|
294
|
+
error,
|
|
295
|
+
errors,
|
|
296
|
+
hasError,
|
|
297
|
+
invalid: !valid,
|
|
298
|
+
merge,
|
|
299
|
+
pristine: !dirty,
|
|
300
|
+
pristineAll: !dirtyAll,
|
|
301
|
+
push,
|
|
302
|
+
remove,
|
|
303
|
+
reset,
|
|
304
|
+
set,
|
|
305
|
+
setValidators,
|
|
306
|
+
someErrors,
|
|
307
|
+
touched,
|
|
308
|
+
touchedAll,
|
|
309
|
+
untouched: !touched,
|
|
310
|
+
untouchedAll: !touchedAll,
|
|
311
|
+
valid,
|
|
312
|
+
wrong: touched && !valid
|
|
313
|
+
};
|
|
314
314
|
}
|
|
315
315
|
|
|
316
|
-
function useControl(controlOptions, controlValidators) {
|
|
317
|
-
const { value, touched, validators } = _arguments.createFormControlOptions(controlOptions, controlValidators);
|
|
318
|
-
const [state, setState] = react.useState({
|
|
319
|
-
dirty: false,
|
|
320
|
-
disabled: false,
|
|
321
|
-
focused: false,
|
|
322
|
-
touched: !!touched,
|
|
323
|
-
validators,
|
|
324
|
-
value
|
|
325
|
-
});
|
|
326
|
-
const initialValue = react.useRef(value);
|
|
327
|
-
const elementRef = react.useRef(null);
|
|
328
|
-
const errors = state.validators
|
|
329
|
-
? helpers.controlIsValid({
|
|
330
|
-
value: state.value,
|
|
331
|
-
validators: state.validators
|
|
332
|
-
})
|
|
333
|
-
: [];
|
|
334
|
-
const valid = errors.length === 0;
|
|
335
|
-
function focus() {
|
|
336
|
-
setState((state) => ({ ...state, focused: true }));
|
|
337
|
-
}
|
|
338
|
-
function blur() {
|
|
339
|
-
setState((state) => ({ ...state, focused: false, touched: true }));
|
|
340
|
-
}
|
|
341
|
-
function disable() {
|
|
342
|
-
setState((state) => ({ ...state, disabled: true }));
|
|
343
|
-
}
|
|
344
|
-
function enable() {
|
|
345
|
-
setState((state) => ({ ...state, disabled: false }));
|
|
346
|
-
}
|
|
347
|
-
function touch() {
|
|
348
|
-
setState((state) => ({ ...state, touched: true }));
|
|
349
|
-
}
|
|
350
|
-
function setValue(value) {
|
|
351
|
-
setState((state) => ({ ...state, dirty: true, value }));
|
|
352
|
-
}
|
|
353
|
-
function setValidators(validators) {
|
|
354
|
-
setState((state) => ({ ...state, validators }));
|
|
355
|
-
}
|
|
356
|
-
function hasError(key) {
|
|
357
|
-
return helpers.hasError(errors, key);
|
|
358
|
-
}
|
|
359
|
-
function someErrors(keys) {
|
|
360
|
-
return helpers.someErrors(errors, keys);
|
|
361
|
-
}
|
|
362
|
-
function reset() {
|
|
363
|
-
setState((state) => ({
|
|
364
|
-
...state,
|
|
365
|
-
dirty: false,
|
|
366
|
-
value: initialValue.current,
|
|
367
|
-
touched: false
|
|
368
|
-
}));
|
|
369
|
-
}
|
|
370
|
-
return {
|
|
371
|
-
...state,
|
|
372
|
-
blur,
|
|
373
|
-
disable,
|
|
374
|
-
elementRef,
|
|
375
|
-
enable,
|
|
376
|
-
enabled: !state.disabled,
|
|
377
|
-
error: errors[0],
|
|
378
|
-
errors,
|
|
379
|
-
focus,
|
|
380
|
-
hasError,
|
|
381
|
-
invalid: !valid,
|
|
382
|
-
pristine: !state.dirty,
|
|
383
|
-
reset,
|
|
384
|
-
setValidators,
|
|
385
|
-
setValue,
|
|
386
|
-
someErrors,
|
|
387
|
-
touch,
|
|
388
|
-
unfocused: !state.focused,
|
|
389
|
-
untouched: !state.touched,
|
|
390
|
-
valid,
|
|
391
|
-
wrong: state.touched && !valid
|
|
392
|
-
};
|
|
393
|
-
}
|
|
394
|
-
function useReactControl(options, validators) {
|
|
395
|
-
return useControl(options, validators);
|
|
396
|
-
}
|
|
397
|
-
function useFormControl(options, validators) {
|
|
398
|
-
return useControl(options, validators);
|
|
399
|
-
}
|
|
400
|
-
function useInputControl(options, validators) {
|
|
401
|
-
return useControl(options, validators);
|
|
316
|
+
function useControl(controlOptions, controlValidators) {
|
|
317
|
+
const { value, touched, validators } = _arguments.createFormControlOptions(controlOptions, controlValidators);
|
|
318
|
+
const [state, setState] = react.useState({
|
|
319
|
+
dirty: false,
|
|
320
|
+
disabled: false,
|
|
321
|
+
focused: false,
|
|
322
|
+
touched: !!touched,
|
|
323
|
+
validators,
|
|
324
|
+
value
|
|
325
|
+
});
|
|
326
|
+
const initialValue = react.useRef(value);
|
|
327
|
+
const elementRef = react.useRef(null);
|
|
328
|
+
const errors = state.validators
|
|
329
|
+
? helpers.controlIsValid({
|
|
330
|
+
value: state.value,
|
|
331
|
+
validators: state.validators
|
|
332
|
+
})
|
|
333
|
+
: [];
|
|
334
|
+
const valid = errors.length === 0;
|
|
335
|
+
function focus() {
|
|
336
|
+
setState((state) => ({ ...state, focused: true }));
|
|
337
|
+
}
|
|
338
|
+
function blur() {
|
|
339
|
+
setState((state) => ({ ...state, focused: false, touched: true }));
|
|
340
|
+
}
|
|
341
|
+
function disable() {
|
|
342
|
+
setState((state) => ({ ...state, disabled: true }));
|
|
343
|
+
}
|
|
344
|
+
function enable() {
|
|
345
|
+
setState((state) => ({ ...state, disabled: false }));
|
|
346
|
+
}
|
|
347
|
+
function touch() {
|
|
348
|
+
setState((state) => ({ ...state, touched: true }));
|
|
349
|
+
}
|
|
350
|
+
function setValue(value) {
|
|
351
|
+
setState((state) => ({ ...state, dirty: true, value }));
|
|
352
|
+
}
|
|
353
|
+
function setValidators(validators) {
|
|
354
|
+
setState((state) => ({ ...state, validators }));
|
|
355
|
+
}
|
|
356
|
+
function hasError(key) {
|
|
357
|
+
return helpers.hasError(errors, key);
|
|
358
|
+
}
|
|
359
|
+
function someErrors(keys) {
|
|
360
|
+
return helpers.someErrors(errors, keys);
|
|
361
|
+
}
|
|
362
|
+
function reset() {
|
|
363
|
+
setState((state) => ({
|
|
364
|
+
...state,
|
|
365
|
+
dirty: false,
|
|
366
|
+
value: initialValue.current,
|
|
367
|
+
touched: false
|
|
368
|
+
}));
|
|
369
|
+
}
|
|
370
|
+
return {
|
|
371
|
+
...state,
|
|
372
|
+
blur,
|
|
373
|
+
disable,
|
|
374
|
+
elementRef,
|
|
375
|
+
enable,
|
|
376
|
+
enabled: !state.disabled,
|
|
377
|
+
error: errors[0],
|
|
378
|
+
errors,
|
|
379
|
+
focus,
|
|
380
|
+
hasError,
|
|
381
|
+
invalid: !valid,
|
|
382
|
+
pristine: !state.dirty,
|
|
383
|
+
reset,
|
|
384
|
+
setValidators,
|
|
385
|
+
setValue,
|
|
386
|
+
someErrors,
|
|
387
|
+
touch,
|
|
388
|
+
unfocused: !state.focused,
|
|
389
|
+
untouched: !state.touched,
|
|
390
|
+
valid,
|
|
391
|
+
wrong: state.touched && !valid
|
|
392
|
+
};
|
|
393
|
+
}
|
|
394
|
+
function useReactControl(options, validators) {
|
|
395
|
+
return useControl(options, validators);
|
|
396
|
+
}
|
|
397
|
+
function useFormControl(options, validators) {
|
|
398
|
+
return useControl(options, validators);
|
|
399
|
+
}
|
|
400
|
+
function useInputControl(options, validators) {
|
|
401
|
+
return useControl(options, validators);
|
|
402
402
|
}
|
|
403
403
|
|
|
404
|
-
function useFormGroup(options, groupValidators) {
|
|
405
|
-
const groupOptions = _arguments.createFormGroupOptions(options, groupValidators);
|
|
406
|
-
const [validators, setValidators] = react.useState(groupOptions.validators);
|
|
407
|
-
const { controls } = groupOptions;
|
|
408
|
-
const errors = validators ? helpers.groupIsValid({ controls, validators }) : [];
|
|
409
|
-
const valid = errors.length === 0 && helpers.controlsAllChecked(controls, 'valid');
|
|
410
|
-
const value = helpers.controlsToValue(controls);
|
|
411
|
-
const dirty = helpers.controlsPartialChecked(controls, 'dirty');
|
|
412
|
-
const dirtyAll = helpers.controlsAllChecked(controls, 'dirty');
|
|
413
|
-
const touched = helpers.controlsPartialChecked(controls, 'touched');
|
|
414
|
-
const touchedAll = helpers.controlsAllChecked(controls, 'touched');
|
|
415
|
-
function reset() {
|
|
416
|
-
Object.values(controls).forEach((control) => {
|
|
417
|
-
control.reset();
|
|
418
|
-
});
|
|
419
|
-
}
|
|
420
|
-
return {
|
|
421
|
-
controls,
|
|
422
|
-
dirty,
|
|
423
|
-
dirtyAll,
|
|
424
|
-
error: errors[0],
|
|
425
|
-
errors,
|
|
426
|
-
invalid: !valid,
|
|
427
|
-
pristine: !dirty,
|
|
428
|
-
pristineAll: !dirtyAll,
|
|
429
|
-
reset,
|
|
430
|
-
setValidators,
|
|
431
|
-
touched,
|
|
432
|
-
touchedAll,
|
|
433
|
-
untouched: !touched,
|
|
434
|
-
untouchedAll: !touchedAll,
|
|
435
|
-
valid,
|
|
436
|
-
value,
|
|
437
|
-
wrong: touched && !valid
|
|
438
|
-
};
|
|
404
|
+
function useFormGroup(options, groupValidators) {
|
|
405
|
+
const groupOptions = _arguments.createFormGroupOptions(options, groupValidators);
|
|
406
|
+
const [validators, setValidators] = react.useState(groupOptions.validators);
|
|
407
|
+
const { controls } = groupOptions;
|
|
408
|
+
const errors = validators ? helpers.groupIsValid({ controls, validators }) : [];
|
|
409
|
+
const valid = errors.length === 0 && helpers.controlsAllChecked(controls, 'valid');
|
|
410
|
+
const value = helpers.controlsToValue(controls);
|
|
411
|
+
const dirty = helpers.controlsPartialChecked(controls, 'dirty');
|
|
412
|
+
const dirtyAll = helpers.controlsAllChecked(controls, 'dirty');
|
|
413
|
+
const touched = helpers.controlsPartialChecked(controls, 'touched');
|
|
414
|
+
const touchedAll = helpers.controlsAllChecked(controls, 'touched');
|
|
415
|
+
function reset() {
|
|
416
|
+
Object.values(controls).forEach((control) => {
|
|
417
|
+
control.reset();
|
|
418
|
+
});
|
|
419
|
+
}
|
|
420
|
+
return {
|
|
421
|
+
controls,
|
|
422
|
+
dirty,
|
|
423
|
+
dirtyAll,
|
|
424
|
+
error: errors[0],
|
|
425
|
+
errors,
|
|
426
|
+
invalid: !valid,
|
|
427
|
+
pristine: !dirty,
|
|
428
|
+
pristineAll: !dirtyAll,
|
|
429
|
+
reset,
|
|
430
|
+
setValidators,
|
|
431
|
+
touched,
|
|
432
|
+
touchedAll,
|
|
433
|
+
untouched: !touched,
|
|
434
|
+
untouchedAll: !touchedAll,
|
|
435
|
+
valid,
|
|
436
|
+
value,
|
|
437
|
+
wrong: touched && !valid
|
|
438
|
+
};
|
|
439
439
|
}
|
|
440
440
|
|
|
441
441
|
exports.formArrayControl = formArrayControl;
|