react-hook-form 7.25.0 → 7.25.1
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/README.md +3 -4
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.mjs +70 -77
- package/dist/index.esm.mjs.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/dist/logic/createFormControl.d.ts.map +1 -1
- package/dist/logic/getProxyFormState.d.ts.map +1 -1
- package/dist/types/form.d.ts +5 -5
- package/dist/types/form.d.ts.map +1 -1
- package/dist/useFieldArray.d.ts.map +1 -1
- package/package.json +16 -16
package/dist/index.esm.mjs
CHANGED
@@ -70,22 +70,17 @@ const useFormContext = () => React.useContext(HookFormContext);
|
|
70
70
|
const FormProvider = (props) => (React.createElement(HookFormContext.Provider, { value: omit(props, 'children') }, props.children));
|
71
71
|
|
72
72
|
var getProxyFormState = (formState, _proxyFormState, localProxyFormState, isRoot = true) => {
|
73
|
-
function createGetter(prop) {
|
74
|
-
return () => {
|
75
|
-
if (prop in formState) {
|
76
|
-
if (_proxyFormState[prop] !== VALIDATION_MODE.all) {
|
77
|
-
_proxyFormState[prop] = !isRoot || VALIDATION_MODE.all;
|
78
|
-
}
|
79
|
-
localProxyFormState && (localProxyFormState[prop] = true);
|
80
|
-
return formState[prop];
|
81
|
-
}
|
82
|
-
return undefined;
|
83
|
-
};
|
84
|
-
}
|
85
73
|
const result = {};
|
86
74
|
for (const key in formState) {
|
87
75
|
Object.defineProperty(result, key, {
|
88
|
-
get:
|
76
|
+
get: () => {
|
77
|
+
const _key = key;
|
78
|
+
if (_proxyFormState[_key] !== VALIDATION_MODE.all) {
|
79
|
+
_proxyFormState[_key] = !isRoot || VALIDATION_MODE.all;
|
80
|
+
}
|
81
|
+
localProxyFormState && (localProxyFormState[_key] = true);
|
82
|
+
return formState[_key];
|
83
|
+
},
|
89
84
|
});
|
90
85
|
}
|
91
86
|
return result;
|
@@ -280,7 +275,7 @@ function useController(props) {
|
|
280
275
|
reportValidity: () => elm.reportValidity(),
|
281
276
|
};
|
282
277
|
}
|
283
|
-
}, [name, control]),
|
278
|
+
}, [name, control._fields]),
|
284
279
|
},
|
285
280
|
formState,
|
286
281
|
fieldState: control.getFieldState(name, formState),
|
@@ -460,89 +455,89 @@ const useFieldArray = (props) => {
|
|
460
455
|
});
|
461
456
|
const updateValues = React.useCallback((updatedFieldArrayValues) => {
|
462
457
|
_actioned.current = true;
|
463
|
-
|
458
|
+
control._updateFieldArray(name, updatedFieldArrayValues);
|
464
459
|
}, [control, name]);
|
465
460
|
const append$1 = (value, options) => {
|
466
461
|
const appendValue = convertToArrayPayload(cloneObject(value));
|
467
462
|
const updatedFieldArrayValues = append(control._getFieldArray(name), appendValue);
|
468
463
|
control._names.focus = getFocusFieldName(name, updatedFieldArrayValues.length - 1, options);
|
469
464
|
ids.current = append(ids.current, appendValue.map(generateId));
|
470
|
-
setFields(updatedFieldArrayValues);
|
471
465
|
updateValues(updatedFieldArrayValues);
|
472
|
-
|
466
|
+
setFields(updatedFieldArrayValues);
|
467
|
+
control._updateFieldArray(name, updatedFieldArrayValues, append, {
|
473
468
|
argA: fillEmptyArray(value),
|
474
|
-
}
|
469
|
+
});
|
475
470
|
};
|
476
471
|
const prepend$1 = (value, options) => {
|
477
472
|
const prependValue = convertToArrayPayload(cloneObject(value));
|
478
473
|
const updatedFieldArrayValues = prepend(control._getFieldArray(name), prependValue);
|
479
474
|
control._names.focus = getFocusFieldName(name, 0, options);
|
480
475
|
ids.current = prepend(ids.current, prependValue.map(generateId));
|
481
|
-
setFields(updatedFieldArrayValues);
|
482
476
|
updateValues(updatedFieldArrayValues);
|
483
|
-
|
477
|
+
setFields(updatedFieldArrayValues);
|
478
|
+
control._updateFieldArray(name, updatedFieldArrayValues, prepend, {
|
484
479
|
argA: fillEmptyArray(value),
|
485
|
-
}
|
480
|
+
});
|
486
481
|
};
|
487
482
|
const remove = (index) => {
|
488
483
|
const updatedFieldArrayValues = removeArrayAt(control._getFieldArray(name), index);
|
489
484
|
ids.current = removeArrayAt(ids.current, index);
|
490
|
-
setFields(updatedFieldArrayValues);
|
491
485
|
updateValues(updatedFieldArrayValues);
|
492
|
-
|
486
|
+
setFields(updatedFieldArrayValues);
|
487
|
+
control._updateFieldArray(name, updatedFieldArrayValues, removeArrayAt, {
|
493
488
|
argA: index,
|
494
|
-
}
|
489
|
+
});
|
495
490
|
};
|
496
491
|
const insert$1 = (index, value, options) => {
|
497
492
|
const insertValue = convertToArrayPayload(cloneObject(value));
|
498
493
|
const updatedFieldArrayValues = insert(control._getFieldArray(name), index, insertValue);
|
499
|
-
updateValues(updatedFieldArrayValues);
|
500
494
|
control._names.focus = getFocusFieldName(name, index, options);
|
501
495
|
ids.current = insert(ids.current, index, insertValue.map(generateId));
|
496
|
+
updateValues(updatedFieldArrayValues);
|
502
497
|
setFields(updatedFieldArrayValues);
|
503
|
-
control._updateFieldArray(name, insert, {
|
498
|
+
control._updateFieldArray(name, updatedFieldArrayValues, insert, {
|
504
499
|
argA: index,
|
505
500
|
argB: fillEmptyArray(value),
|
506
|
-
}
|
501
|
+
});
|
507
502
|
};
|
508
503
|
const swap = (indexA, indexB) => {
|
509
504
|
const updatedFieldArrayValues = control._getFieldArray(name);
|
510
505
|
swapArrayAt(updatedFieldArrayValues, indexA, indexB);
|
511
506
|
swapArrayAt(ids.current, indexA, indexB);
|
512
|
-
setFields(updatedFieldArrayValues);
|
513
507
|
updateValues(updatedFieldArrayValues);
|
514
|
-
|
508
|
+
setFields(updatedFieldArrayValues);
|
509
|
+
control._updateFieldArray(name, updatedFieldArrayValues, swapArrayAt, {
|
515
510
|
argA: indexA,
|
516
511
|
argB: indexB,
|
517
|
-
},
|
512
|
+
}, false);
|
518
513
|
};
|
519
514
|
const move = (from, to) => {
|
520
515
|
const updatedFieldArrayValues = control._getFieldArray(name);
|
521
516
|
moveArrayAt(updatedFieldArrayValues, from, to);
|
522
517
|
moveArrayAt(ids.current, from, to);
|
523
|
-
setFields(updatedFieldArrayValues);
|
524
518
|
updateValues(updatedFieldArrayValues);
|
525
|
-
|
519
|
+
setFields(updatedFieldArrayValues);
|
520
|
+
control._updateFieldArray(name, updatedFieldArrayValues, moveArrayAt, {
|
526
521
|
argA: from,
|
527
522
|
argB: to,
|
528
|
-
},
|
523
|
+
}, false);
|
529
524
|
};
|
530
525
|
const update = (index, value) => {
|
531
526
|
const updatedFieldArrayValues = updateAt(control._getFieldArray(name), index, value);
|
532
527
|
ids.current = [...updatedFieldArrayValues].map((item, i) => !item || i === index ? generateId() : ids.current[i]);
|
533
|
-
setFields([...updatedFieldArrayValues]);
|
534
528
|
updateValues(updatedFieldArrayValues);
|
535
|
-
|
529
|
+
setFields([...updatedFieldArrayValues]);
|
530
|
+
control._updateFieldArray(name, updatedFieldArrayValues, updateAt, {
|
536
531
|
argA: index,
|
537
532
|
argB: value,
|
538
|
-
},
|
533
|
+
}, true, false);
|
539
534
|
};
|
540
535
|
const replace = (value) => {
|
541
536
|
const updatedFieldArrayValues = convertToArrayPayload(value);
|
542
537
|
ids.current = updatedFieldArrayValues.map(generateId);
|
543
538
|
updateValues([...updatedFieldArrayValues]);
|
544
539
|
setFields([...updatedFieldArrayValues]);
|
545
|
-
control._updateFieldArray(name, () => updatedFieldArrayValues, {},
|
540
|
+
control._updateFieldArray(name, [...updatedFieldArrayValues], () => updatedFieldArrayValues, {}, true, false);
|
546
541
|
};
|
547
542
|
React.useEffect(() => {
|
548
543
|
control._stateFlags.action = false;
|
@@ -568,7 +563,7 @@ const useFieldArray = (props) => {
|
|
568
563
|
control._proxyFormState.isValid && control._updateValid();
|
569
564
|
}, [fields, name, control]);
|
570
565
|
React.useEffect(() => {
|
571
|
-
!get(control._formValues, name) &&
|
566
|
+
!get(control._formValues, name) && control._updateFieldArray(name);
|
572
567
|
return () => {
|
573
568
|
(control._options.shouldUnregister || shouldUnregister) &&
|
574
569
|
control.unregister(name);
|
@@ -1138,33 +1133,38 @@ function createFormControl(props = {}) {
|
|
1138
1133
|
}
|
1139
1134
|
return isValid;
|
1140
1135
|
};
|
1141
|
-
const _updateFieldArray = (name,
|
1142
|
-
|
1143
|
-
|
1144
|
-
|
1145
|
-
|
1146
|
-
|
1147
|
-
|
1148
|
-
|
1149
|
-
|
1150
|
-
|
1151
|
-
|
1152
|
-
|
1153
|
-
|
1154
|
-
|
1155
|
-
|
1156
|
-
|
1157
|
-
|
1136
|
+
const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndErrors = true) => {
|
1137
|
+
if (args && method) {
|
1138
|
+
_stateFlags.action = true;
|
1139
|
+
if (shouldUpdateFieldsAndErrors && Array.isArray(get(_fields, name))) {
|
1140
|
+
const fieldValues = method(get(_fields, name), args.argA, args.argB);
|
1141
|
+
shouldSetValues && set(_fields, name, fieldValues);
|
1142
|
+
}
|
1143
|
+
if (_proxyFormState.errors &&
|
1144
|
+
shouldUpdateFieldsAndErrors &&
|
1145
|
+
Array.isArray(get(_formState.errors, name))) {
|
1146
|
+
const errors = method(get(_formState.errors, name), args.argA, args.argB);
|
1147
|
+
shouldSetValues && set(_formState.errors, name, errors);
|
1148
|
+
unsetEmptyArray(_formState.errors, name);
|
1149
|
+
}
|
1150
|
+
if (_proxyFormState.touchedFields &&
|
1151
|
+
Array.isArray(get(_formState.touchedFields, name))) {
|
1152
|
+
const touchedFields = method(get(_formState.touchedFields, name), args.argA, args.argB);
|
1153
|
+
shouldSetValues && set(_formState.touchedFields, name, touchedFields);
|
1154
|
+
}
|
1155
|
+
if (_proxyFormState.dirtyFields) {
|
1156
|
+
_formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
|
1157
|
+
}
|
1158
|
+
_subjects.state.next({
|
1159
|
+
isDirty: _getDirty(name, values),
|
1160
|
+
dirtyFields: _formState.dirtyFields,
|
1161
|
+
errors: _formState.errors,
|
1162
|
+
isValid: _formState.isValid,
|
1163
|
+
});
|
1158
1164
|
}
|
1159
|
-
|
1160
|
-
|
1165
|
+
else {
|
1166
|
+
set(_formValues, name, values);
|
1161
1167
|
}
|
1162
|
-
_subjects.state.next({
|
1163
|
-
isDirty: _getDirty(name, values),
|
1164
|
-
dirtyFields: _formState.dirtyFields,
|
1165
|
-
errors: _formState.errors,
|
1166
|
-
isValid: _formState.isValid,
|
1167
|
-
});
|
1168
1168
|
};
|
1169
1169
|
const updateErrors = (name, error) => (set(_formState.errors, name, error),
|
1170
1170
|
_subjects.state.next({
|
@@ -1343,7 +1343,10 @@ function createFormControl(props = {}) {
|
|
1343
1343
|
fieldReference.refs.forEach((radioRef) => (radioRef.checked = radioRef.value === fieldValue));
|
1344
1344
|
}
|
1345
1345
|
}
|
1346
|
-
else if (
|
1346
|
+
else if (isFileInput(fieldReference.ref)) {
|
1347
|
+
fieldReference.ref.value = '';
|
1348
|
+
}
|
1349
|
+
else {
|
1347
1350
|
fieldReference.ref.value = fieldValue;
|
1348
1351
|
if (!fieldReference.ref.type) {
|
1349
1352
|
_subjects.watch.next({
|
@@ -1437,10 +1440,9 @@ function createFormControl(props = {}) {
|
|
1437
1440
|
}
|
1438
1441
|
!isBlurEvent && watched && _subjects.state.next({});
|
1439
1442
|
validateFields[name] = validateFields[name] ? +1 : 1;
|
1440
|
-
|
1441
|
-
|
1442
|
-
|
1443
|
-
});
|
1443
|
+
_subjects.state.next({
|
1444
|
+
isValidating: true,
|
1445
|
+
});
|
1444
1446
|
if (_options.resolver) {
|
1445
1447
|
const { errors } = await _executeSchema([name]);
|
1446
1448
|
const previousErrorLookupResult = schemaErrorLookup(_formState.errors, _fields, name);
|
@@ -1781,15 +1783,9 @@ function createFormControl(props = {}) {
|
|
1781
1783
|
get _fields() {
|
1782
1784
|
return _fields;
|
1783
1785
|
},
|
1784
|
-
set _fields(value) {
|
1785
|
-
_fields = value;
|
1786
|
-
},
|
1787
1786
|
get _formValues() {
|
1788
1787
|
return _formValues;
|
1789
1788
|
},
|
1790
|
-
set _formValues(value) {
|
1791
|
-
_formValues = value;
|
1792
|
-
},
|
1793
1789
|
get _stateFlags() {
|
1794
1790
|
return _stateFlags;
|
1795
1791
|
},
|
@@ -1799,9 +1795,6 @@ function createFormControl(props = {}) {
|
|
1799
1795
|
get _defaultValues() {
|
1800
1796
|
return _defaultValues;
|
1801
1797
|
},
|
1802
|
-
set _defaultValues(value) {
|
1803
|
-
_defaultValues = value;
|
1804
|
-
},
|
1805
1798
|
get _names() {
|
1806
1799
|
return _names;
|
1807
1800
|
},
|