@react-stately/form 3.0.2-nightly.4552 → 3.0.2-nightly.4558
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/import.mjs +1 -184
- package/dist/main.js +7 -190
- package/dist/main.js.map +1 -1
- package/dist/module.js +1 -184
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +2 -1
- package/dist/types.d.ts.map +1 -1
- package/dist/useFormValidationState.main.js +198 -0
- package/dist/useFormValidationState.main.js.map +1 -0
- package/dist/useFormValidationState.mjs +188 -0
- package/dist/useFormValidationState.module.js +188 -0
- package/dist/useFormValidationState.module.js.map +1 -0
- package/package.json +3 -3
package/dist/import.mjs
CHANGED
|
@@ -1,16 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {DEFAULT_VALIDATION_RESULT as $e5be200c675c3b3a$export$dad6ae84456c676a, FormValidationContext as $e5be200c675c3b3a$export$571b5131b7e65c11, mergeValidation as $e5be200c675c3b3a$export$75ee7c75d68f5b0e, privateValidationStateProp as $e5be200c675c3b3a$export$a763b9476acd3eb, useFormValidationState as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, VALID_VALIDITY_STATE as $e5be200c675c3b3a$export$aca958c65c314e6c} from "./useFormValidationState.mjs";
|
|
2
2
|
|
|
3
3
|
/*
|
|
4
|
-
* Copyright 2023 Adobe. All rights reserved.
|
|
5
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
6
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
7
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
8
|
-
*
|
|
9
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
10
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
11
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
12
|
-
* governing permissions and limitations under the License.
|
|
13
|
-
*/ /*
|
|
14
4
|
* Copyright 2023 Adobe. All rights reserved.
|
|
15
5
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
16
6
|
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
@@ -21,179 +11,6 @@ import {createContext as $jcIOw$createContext, useMemo as $jcIOw$useMemo, useCon
|
|
|
21
11
|
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
22
12
|
* governing permissions and limitations under the License.
|
|
23
13
|
*/
|
|
24
|
-
const $e5be200c675c3b3a$export$aca958c65c314e6c = {
|
|
25
|
-
badInput: false,
|
|
26
|
-
customError: false,
|
|
27
|
-
patternMismatch: false,
|
|
28
|
-
rangeOverflow: false,
|
|
29
|
-
rangeUnderflow: false,
|
|
30
|
-
stepMismatch: false,
|
|
31
|
-
tooLong: false,
|
|
32
|
-
tooShort: false,
|
|
33
|
-
typeMismatch: false,
|
|
34
|
-
valueMissing: false,
|
|
35
|
-
valid: true
|
|
36
|
-
};
|
|
37
|
-
const $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE = {
|
|
38
|
-
...$e5be200c675c3b3a$export$aca958c65c314e6c,
|
|
39
|
-
customError: true,
|
|
40
|
-
valid: false
|
|
41
|
-
};
|
|
42
|
-
const $e5be200c675c3b3a$export$dad6ae84456c676a = {
|
|
43
|
-
isInvalid: false,
|
|
44
|
-
validationDetails: $e5be200c675c3b3a$export$aca958c65c314e6c,
|
|
45
|
-
validationErrors: []
|
|
46
|
-
};
|
|
47
|
-
const $e5be200c675c3b3a$export$571b5131b7e65c11 = (0, $jcIOw$createContext)({});
|
|
48
|
-
const $e5be200c675c3b3a$export$a763b9476acd3eb = "__formValidationState" + Date.now();
|
|
49
|
-
function $e5be200c675c3b3a$export$fc1a364ae1f3ff10(props) {
|
|
50
|
-
// Private prop for parent components to pass state to children.
|
|
51
|
-
if (props[$e5be200c675c3b3a$export$a763b9476acd3eb]) {
|
|
52
|
-
let { realtimeValidation: realtimeValidation, displayValidation: displayValidation, updateValidation: updateValidation, resetValidation: resetValidation, commitValidation: commitValidation } = props[$e5be200c675c3b3a$export$a763b9476acd3eb];
|
|
53
|
-
return {
|
|
54
|
-
realtimeValidation: realtimeValidation,
|
|
55
|
-
displayValidation: displayValidation,
|
|
56
|
-
updateValidation: updateValidation,
|
|
57
|
-
resetValidation: resetValidation,
|
|
58
|
-
commitValidation: commitValidation
|
|
59
|
-
};
|
|
60
|
-
}
|
|
61
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
62
|
-
return $e5be200c675c3b3a$var$useFormValidationStateImpl(props);
|
|
63
|
-
}
|
|
64
|
-
function $e5be200c675c3b3a$var$useFormValidationStateImpl(props) {
|
|
65
|
-
let { isInvalid: isInvalid, validationState: validationState, name: name, value: value, builtinValidation: builtinValidation, validate: validate, validationBehavior: validationBehavior = "aria" } = props;
|
|
66
|
-
// backward compatibility.
|
|
67
|
-
if (validationState) isInvalid || (isInvalid = validationState === "invalid");
|
|
68
|
-
// If the isInvalid prop is true, update validation result in realtime (controlled).
|
|
69
|
-
let controlledError = isInvalid ? {
|
|
70
|
-
isInvalid: true,
|
|
71
|
-
validationErrors: [],
|
|
72
|
-
validationDetails: $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE
|
|
73
|
-
} : null;
|
|
74
|
-
// Perform custom client side validation.
|
|
75
|
-
let clientError = (0, $jcIOw$useMemo)(()=>$e5be200c675c3b3a$var$getValidationResult($e5be200c675c3b3a$var$runValidate(validate, value)), [
|
|
76
|
-
validate,
|
|
77
|
-
value
|
|
78
|
-
]);
|
|
79
|
-
if (builtinValidation === null || builtinValidation === void 0 ? void 0 : builtinValidation.validationDetails.valid) builtinValidation = null;
|
|
80
|
-
// Get relevant server errors from the form.
|
|
81
|
-
let serverErrors = (0, $jcIOw$useContext)($e5be200c675c3b3a$export$571b5131b7e65c11);
|
|
82
|
-
let serverErrorMessages = (0, $jcIOw$useMemo)(()=>{
|
|
83
|
-
if (name) return Array.isArray(name) ? name.flatMap((name)=>$e5be200c675c3b3a$var$asArray(serverErrors[name])) : $e5be200c675c3b3a$var$asArray(serverErrors[name]);
|
|
84
|
-
return [];
|
|
85
|
-
}, [
|
|
86
|
-
serverErrors,
|
|
87
|
-
name
|
|
88
|
-
]);
|
|
89
|
-
// Show server errors when the form gets a new value, and clear when the user changes the value.
|
|
90
|
-
let [lastServerErrors, setLastServerErrors] = (0, $jcIOw$useState)(serverErrors);
|
|
91
|
-
let [isServerErrorCleared, setServerErrorCleared] = (0, $jcIOw$useState)(false);
|
|
92
|
-
if (serverErrors !== lastServerErrors) {
|
|
93
|
-
setLastServerErrors(serverErrors);
|
|
94
|
-
setServerErrorCleared(false);
|
|
95
|
-
}
|
|
96
|
-
let serverError = (0, $jcIOw$useMemo)(()=>$e5be200c675c3b3a$var$getValidationResult(isServerErrorCleared ? [] : serverErrorMessages), [
|
|
97
|
-
isServerErrorCleared,
|
|
98
|
-
serverErrorMessages
|
|
99
|
-
]);
|
|
100
|
-
// Track the next validation state in a ref until commitValidation is called.
|
|
101
|
-
let nextValidation = (0, $jcIOw$useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
|
|
102
|
-
let [currentValidity, setCurrentValidity] = (0, $jcIOw$useState)($e5be200c675c3b3a$export$dad6ae84456c676a);
|
|
103
|
-
let lastError = (0, $jcIOw$useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
|
|
104
|
-
let commitValidation = ()=>{
|
|
105
|
-
if (!commitQueued) return;
|
|
106
|
-
setCommitQueued(false);
|
|
107
|
-
let error = clientError || builtinValidation || nextValidation.current;
|
|
108
|
-
if (!$e5be200c675c3b3a$var$isEqualValidation(error, lastError.current)) {
|
|
109
|
-
lastError.current = error;
|
|
110
|
-
setCurrentValidity(error);
|
|
111
|
-
}
|
|
112
|
-
};
|
|
113
|
-
let [commitQueued, setCommitQueued] = (0, $jcIOw$useState)(false);
|
|
114
|
-
(0, $jcIOw$useEffect)(commitValidation);
|
|
115
|
-
// realtimeValidation is used to update the native input element's state based on custom validation logic.
|
|
116
|
-
// displayValidation is the currently displayed validation state that the user sees (e.g. on input change/form submit).
|
|
117
|
-
// With validationBehavior="aria", all errors are displayed in realtime rather than on submit.
|
|
118
|
-
let realtimeValidation = controlledError || serverError || clientError || builtinValidation || $e5be200c675c3b3a$export$dad6ae84456c676a;
|
|
119
|
-
let displayValidation = validationBehavior === "native" ? controlledError || serverError || currentValidity : controlledError || serverError || clientError || builtinValidation || currentValidity;
|
|
120
|
-
return {
|
|
121
|
-
realtimeValidation: realtimeValidation,
|
|
122
|
-
displayValidation: displayValidation,
|
|
123
|
-
updateValidation (value) {
|
|
124
|
-
// If validationBehavior is 'aria', update in realtime. Otherwise, store in a ref until commit.
|
|
125
|
-
if (validationBehavior === "aria" && !$e5be200c675c3b3a$var$isEqualValidation(currentValidity, value)) setCurrentValidity(value);
|
|
126
|
-
else nextValidation.current = value;
|
|
127
|
-
},
|
|
128
|
-
resetValidation () {
|
|
129
|
-
// Update the currently displayed validation state to valid on form reset,
|
|
130
|
-
// even if the native validity says it isn't. It'll show again on the next form submit.
|
|
131
|
-
let error = $e5be200c675c3b3a$export$dad6ae84456c676a;
|
|
132
|
-
if (!$e5be200c675c3b3a$var$isEqualValidation(error, lastError.current)) {
|
|
133
|
-
lastError.current = error;
|
|
134
|
-
setCurrentValidity(error);
|
|
135
|
-
}
|
|
136
|
-
// Do not commit validation after the next render. This avoids a condition where
|
|
137
|
-
// useSelect calls commitValidation inside an onReset handler.
|
|
138
|
-
if (validationBehavior === "native") setCommitQueued(false);
|
|
139
|
-
setServerErrorCleared(true);
|
|
140
|
-
},
|
|
141
|
-
commitValidation () {
|
|
142
|
-
// Commit validation state so the user sees it on blur/change/submit. Also clear any server errors.
|
|
143
|
-
// Wait until after the next render to commit so that the latest value has been validated.
|
|
144
|
-
if (validationBehavior === "native") setCommitQueued(true);
|
|
145
|
-
setServerErrorCleared(true);
|
|
146
|
-
}
|
|
147
|
-
};
|
|
148
|
-
}
|
|
149
|
-
function $e5be200c675c3b3a$var$asArray(v) {
|
|
150
|
-
if (!v) return [];
|
|
151
|
-
return Array.isArray(v) ? v : [
|
|
152
|
-
v
|
|
153
|
-
];
|
|
154
|
-
}
|
|
155
|
-
function $e5be200c675c3b3a$var$runValidate(validate, value) {
|
|
156
|
-
if (typeof validate === "function") {
|
|
157
|
-
let e = validate(value);
|
|
158
|
-
if (e && typeof e !== "boolean") return $e5be200c675c3b3a$var$asArray(e);
|
|
159
|
-
}
|
|
160
|
-
return [];
|
|
161
|
-
}
|
|
162
|
-
function $e5be200c675c3b3a$var$getValidationResult(errors) {
|
|
163
|
-
return errors.length ? {
|
|
164
|
-
isInvalid: true,
|
|
165
|
-
validationErrors: errors,
|
|
166
|
-
validationDetails: $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE
|
|
167
|
-
} : null;
|
|
168
|
-
}
|
|
169
|
-
function $e5be200c675c3b3a$var$isEqualValidation(a, b) {
|
|
170
|
-
if (a === b) return true;
|
|
171
|
-
return a && b && a.isInvalid === b.isInvalid && a.validationErrors.length === b.validationErrors.length && a.validationErrors.every((a, i)=>a === b.validationErrors[i]) && Object.entries(a.validationDetails).every(([k, v])=>b.validationDetails[k] === v);
|
|
172
|
-
}
|
|
173
|
-
function $e5be200c675c3b3a$export$75ee7c75d68f5b0e(...results) {
|
|
174
|
-
let errors = new Set();
|
|
175
|
-
let isInvalid = false;
|
|
176
|
-
let validationDetails = {
|
|
177
|
-
...$e5be200c675c3b3a$export$aca958c65c314e6c
|
|
178
|
-
};
|
|
179
|
-
for (let v of results){
|
|
180
|
-
var _validationDetails, _key;
|
|
181
|
-
for (let e of v.validationErrors)errors.add(e);
|
|
182
|
-
// Only these properties apply for checkboxes.
|
|
183
|
-
isInvalid || (isInvalid = v.isInvalid);
|
|
184
|
-
for(let key in validationDetails)(_validationDetails = validationDetails)[_key = key] || (_validationDetails[_key] = v.validationDetails[key]);
|
|
185
|
-
}
|
|
186
|
-
validationDetails.valid = !isInvalid;
|
|
187
|
-
return {
|
|
188
|
-
isInvalid: isInvalid,
|
|
189
|
-
validationErrors: [
|
|
190
|
-
...errors
|
|
191
|
-
],
|
|
192
|
-
validationDetails: validationDetails
|
|
193
|
-
};
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
|
|
197
14
|
|
|
198
15
|
|
|
199
16
|
export {$e5be200c675c3b3a$export$571b5131b7e65c11 as FormValidationContext, $e5be200c675c3b3a$export$fc1a364ae1f3ff10 as useFormValidationState, $e5be200c675c3b3a$export$dad6ae84456c676a as DEFAULT_VALIDATION_RESULT, $e5be200c675c3b3a$export$aca958c65c314e6c as VALID_VALIDITY_STATE, $e5be200c675c3b3a$export$a763b9476acd3eb as privateValidationStateProp, $e5be200c675c3b3a$export$75ee7c75d68f5b0e as mergeValidation};
|
package/dist/main.js
CHANGED
|
@@ -1,27 +1,17 @@
|
|
|
1
|
-
var $
|
|
1
|
+
var $5d10129a174740d4$exports = require("./useFormValidationState.main.js");
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
function $parcel$export(e, n, v, s) {
|
|
5
5
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
$parcel$export(module.exports, "FormValidationContext", () => $5d10129a174740d4$
|
|
9
|
-
$parcel$export(module.exports, "useFormValidationState", () => $5d10129a174740d4$
|
|
10
|
-
$parcel$export(module.exports, "DEFAULT_VALIDATION_RESULT", () => $5d10129a174740d4$
|
|
11
|
-
$parcel$export(module.exports, "VALID_VALIDITY_STATE", () => $5d10129a174740d4$
|
|
12
|
-
$parcel$export(module.exports, "privateValidationStateProp", () => $5d10129a174740d4$
|
|
13
|
-
$parcel$export(module.exports, "mergeValidation", () => $5d10129a174740d4$
|
|
8
|
+
$parcel$export(module.exports, "FormValidationContext", () => $5d10129a174740d4$exports.FormValidationContext);
|
|
9
|
+
$parcel$export(module.exports, "useFormValidationState", () => $5d10129a174740d4$exports.useFormValidationState);
|
|
10
|
+
$parcel$export(module.exports, "DEFAULT_VALIDATION_RESULT", () => $5d10129a174740d4$exports.DEFAULT_VALIDATION_RESULT);
|
|
11
|
+
$parcel$export(module.exports, "VALID_VALIDITY_STATE", () => $5d10129a174740d4$exports.VALID_VALIDITY_STATE);
|
|
12
|
+
$parcel$export(module.exports, "privateValidationStateProp", () => $5d10129a174740d4$exports.privateValidationStateProp);
|
|
13
|
+
$parcel$export(module.exports, "mergeValidation", () => $5d10129a174740d4$exports.mergeValidation);
|
|
14
14
|
/*
|
|
15
|
-
* Copyright 2023 Adobe. All rights reserved.
|
|
16
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
17
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
18
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
19
|
-
*
|
|
20
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
21
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
22
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
23
|
-
* governing permissions and limitations under the License.
|
|
24
|
-
*/ /*
|
|
25
15
|
* Copyright 2023 Adobe. All rights reserved.
|
|
26
16
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
27
17
|
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
@@ -32,179 +22,6 @@ $parcel$export(module.exports, "mergeValidation", () => $5d10129a174740d4$export
|
|
|
32
22
|
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
33
23
|
* governing permissions and limitations under the License.
|
|
34
24
|
*/
|
|
35
|
-
const $5d10129a174740d4$export$aca958c65c314e6c = {
|
|
36
|
-
badInput: false,
|
|
37
|
-
customError: false,
|
|
38
|
-
patternMismatch: false,
|
|
39
|
-
rangeOverflow: false,
|
|
40
|
-
rangeUnderflow: false,
|
|
41
|
-
stepMismatch: false,
|
|
42
|
-
tooLong: false,
|
|
43
|
-
tooShort: false,
|
|
44
|
-
typeMismatch: false,
|
|
45
|
-
valueMissing: false,
|
|
46
|
-
valid: true
|
|
47
|
-
};
|
|
48
|
-
const $5d10129a174740d4$var$CUSTOM_VALIDITY_STATE = {
|
|
49
|
-
...$5d10129a174740d4$export$aca958c65c314e6c,
|
|
50
|
-
customError: true,
|
|
51
|
-
valid: false
|
|
52
|
-
};
|
|
53
|
-
const $5d10129a174740d4$export$dad6ae84456c676a = {
|
|
54
|
-
isInvalid: false,
|
|
55
|
-
validationDetails: $5d10129a174740d4$export$aca958c65c314e6c,
|
|
56
|
-
validationErrors: []
|
|
57
|
-
};
|
|
58
|
-
const $5d10129a174740d4$export$571b5131b7e65c11 = (0, $dlKOn$react.createContext)({});
|
|
59
|
-
const $5d10129a174740d4$export$a763b9476acd3eb = "__formValidationState" + Date.now();
|
|
60
|
-
function $5d10129a174740d4$export$fc1a364ae1f3ff10(props) {
|
|
61
|
-
// Private prop for parent components to pass state to children.
|
|
62
|
-
if (props[$5d10129a174740d4$export$a763b9476acd3eb]) {
|
|
63
|
-
let { realtimeValidation: realtimeValidation, displayValidation: displayValidation, updateValidation: updateValidation, resetValidation: resetValidation, commitValidation: commitValidation } = props[$5d10129a174740d4$export$a763b9476acd3eb];
|
|
64
|
-
return {
|
|
65
|
-
realtimeValidation: realtimeValidation,
|
|
66
|
-
displayValidation: displayValidation,
|
|
67
|
-
updateValidation: updateValidation,
|
|
68
|
-
resetValidation: resetValidation,
|
|
69
|
-
commitValidation: commitValidation
|
|
70
|
-
};
|
|
71
|
-
}
|
|
72
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
73
|
-
return $5d10129a174740d4$var$useFormValidationStateImpl(props);
|
|
74
|
-
}
|
|
75
|
-
function $5d10129a174740d4$var$useFormValidationStateImpl(props) {
|
|
76
|
-
let { isInvalid: isInvalid, validationState: validationState, name: name, value: value, builtinValidation: builtinValidation, validate: validate, validationBehavior: validationBehavior = "aria" } = props;
|
|
77
|
-
// backward compatibility.
|
|
78
|
-
if (validationState) isInvalid || (isInvalid = validationState === "invalid");
|
|
79
|
-
// If the isInvalid prop is true, update validation result in realtime (controlled).
|
|
80
|
-
let controlledError = isInvalid ? {
|
|
81
|
-
isInvalid: true,
|
|
82
|
-
validationErrors: [],
|
|
83
|
-
validationDetails: $5d10129a174740d4$var$CUSTOM_VALIDITY_STATE
|
|
84
|
-
} : null;
|
|
85
|
-
// Perform custom client side validation.
|
|
86
|
-
let clientError = (0, $dlKOn$react.useMemo)(()=>$5d10129a174740d4$var$getValidationResult($5d10129a174740d4$var$runValidate(validate, value)), [
|
|
87
|
-
validate,
|
|
88
|
-
value
|
|
89
|
-
]);
|
|
90
|
-
if (builtinValidation === null || builtinValidation === void 0 ? void 0 : builtinValidation.validationDetails.valid) builtinValidation = null;
|
|
91
|
-
// Get relevant server errors from the form.
|
|
92
|
-
let serverErrors = (0, $dlKOn$react.useContext)($5d10129a174740d4$export$571b5131b7e65c11);
|
|
93
|
-
let serverErrorMessages = (0, $dlKOn$react.useMemo)(()=>{
|
|
94
|
-
if (name) return Array.isArray(name) ? name.flatMap((name)=>$5d10129a174740d4$var$asArray(serverErrors[name])) : $5d10129a174740d4$var$asArray(serverErrors[name]);
|
|
95
|
-
return [];
|
|
96
|
-
}, [
|
|
97
|
-
serverErrors,
|
|
98
|
-
name
|
|
99
|
-
]);
|
|
100
|
-
// Show server errors when the form gets a new value, and clear when the user changes the value.
|
|
101
|
-
let [lastServerErrors, setLastServerErrors] = (0, $dlKOn$react.useState)(serverErrors);
|
|
102
|
-
let [isServerErrorCleared, setServerErrorCleared] = (0, $dlKOn$react.useState)(false);
|
|
103
|
-
if (serverErrors !== lastServerErrors) {
|
|
104
|
-
setLastServerErrors(serverErrors);
|
|
105
|
-
setServerErrorCleared(false);
|
|
106
|
-
}
|
|
107
|
-
let serverError = (0, $dlKOn$react.useMemo)(()=>$5d10129a174740d4$var$getValidationResult(isServerErrorCleared ? [] : serverErrorMessages), [
|
|
108
|
-
isServerErrorCleared,
|
|
109
|
-
serverErrorMessages
|
|
110
|
-
]);
|
|
111
|
-
// Track the next validation state in a ref until commitValidation is called.
|
|
112
|
-
let nextValidation = (0, $dlKOn$react.useRef)($5d10129a174740d4$export$dad6ae84456c676a);
|
|
113
|
-
let [currentValidity, setCurrentValidity] = (0, $dlKOn$react.useState)($5d10129a174740d4$export$dad6ae84456c676a);
|
|
114
|
-
let lastError = (0, $dlKOn$react.useRef)($5d10129a174740d4$export$dad6ae84456c676a);
|
|
115
|
-
let commitValidation = ()=>{
|
|
116
|
-
if (!commitQueued) return;
|
|
117
|
-
setCommitQueued(false);
|
|
118
|
-
let error = clientError || builtinValidation || nextValidation.current;
|
|
119
|
-
if (!$5d10129a174740d4$var$isEqualValidation(error, lastError.current)) {
|
|
120
|
-
lastError.current = error;
|
|
121
|
-
setCurrentValidity(error);
|
|
122
|
-
}
|
|
123
|
-
};
|
|
124
|
-
let [commitQueued, setCommitQueued] = (0, $dlKOn$react.useState)(false);
|
|
125
|
-
(0, $dlKOn$react.useEffect)(commitValidation);
|
|
126
|
-
// realtimeValidation is used to update the native input element's state based on custom validation logic.
|
|
127
|
-
// displayValidation is the currently displayed validation state that the user sees (e.g. on input change/form submit).
|
|
128
|
-
// With validationBehavior="aria", all errors are displayed in realtime rather than on submit.
|
|
129
|
-
let realtimeValidation = controlledError || serverError || clientError || builtinValidation || $5d10129a174740d4$export$dad6ae84456c676a;
|
|
130
|
-
let displayValidation = validationBehavior === "native" ? controlledError || serverError || currentValidity : controlledError || serverError || clientError || builtinValidation || currentValidity;
|
|
131
|
-
return {
|
|
132
|
-
realtimeValidation: realtimeValidation,
|
|
133
|
-
displayValidation: displayValidation,
|
|
134
|
-
updateValidation (value) {
|
|
135
|
-
// If validationBehavior is 'aria', update in realtime. Otherwise, store in a ref until commit.
|
|
136
|
-
if (validationBehavior === "aria" && !$5d10129a174740d4$var$isEqualValidation(currentValidity, value)) setCurrentValidity(value);
|
|
137
|
-
else nextValidation.current = value;
|
|
138
|
-
},
|
|
139
|
-
resetValidation () {
|
|
140
|
-
// Update the currently displayed validation state to valid on form reset,
|
|
141
|
-
// even if the native validity says it isn't. It'll show again on the next form submit.
|
|
142
|
-
let error = $5d10129a174740d4$export$dad6ae84456c676a;
|
|
143
|
-
if (!$5d10129a174740d4$var$isEqualValidation(error, lastError.current)) {
|
|
144
|
-
lastError.current = error;
|
|
145
|
-
setCurrentValidity(error);
|
|
146
|
-
}
|
|
147
|
-
// Do not commit validation after the next render. This avoids a condition where
|
|
148
|
-
// useSelect calls commitValidation inside an onReset handler.
|
|
149
|
-
if (validationBehavior === "native") setCommitQueued(false);
|
|
150
|
-
setServerErrorCleared(true);
|
|
151
|
-
},
|
|
152
|
-
commitValidation () {
|
|
153
|
-
// Commit validation state so the user sees it on blur/change/submit. Also clear any server errors.
|
|
154
|
-
// Wait until after the next render to commit so that the latest value has been validated.
|
|
155
|
-
if (validationBehavior === "native") setCommitQueued(true);
|
|
156
|
-
setServerErrorCleared(true);
|
|
157
|
-
}
|
|
158
|
-
};
|
|
159
|
-
}
|
|
160
|
-
function $5d10129a174740d4$var$asArray(v) {
|
|
161
|
-
if (!v) return [];
|
|
162
|
-
return Array.isArray(v) ? v : [
|
|
163
|
-
v
|
|
164
|
-
];
|
|
165
|
-
}
|
|
166
|
-
function $5d10129a174740d4$var$runValidate(validate, value) {
|
|
167
|
-
if (typeof validate === "function") {
|
|
168
|
-
let e = validate(value);
|
|
169
|
-
if (e && typeof e !== "boolean") return $5d10129a174740d4$var$asArray(e);
|
|
170
|
-
}
|
|
171
|
-
return [];
|
|
172
|
-
}
|
|
173
|
-
function $5d10129a174740d4$var$getValidationResult(errors) {
|
|
174
|
-
return errors.length ? {
|
|
175
|
-
isInvalid: true,
|
|
176
|
-
validationErrors: errors,
|
|
177
|
-
validationDetails: $5d10129a174740d4$var$CUSTOM_VALIDITY_STATE
|
|
178
|
-
} : null;
|
|
179
|
-
}
|
|
180
|
-
function $5d10129a174740d4$var$isEqualValidation(a, b) {
|
|
181
|
-
if (a === b) return true;
|
|
182
|
-
return a && b && a.isInvalid === b.isInvalid && a.validationErrors.length === b.validationErrors.length && a.validationErrors.every((a, i)=>a === b.validationErrors[i]) && Object.entries(a.validationDetails).every(([k, v])=>b.validationDetails[k] === v);
|
|
183
|
-
}
|
|
184
|
-
function $5d10129a174740d4$export$75ee7c75d68f5b0e(...results) {
|
|
185
|
-
let errors = new Set();
|
|
186
|
-
let isInvalid = false;
|
|
187
|
-
let validationDetails = {
|
|
188
|
-
...$5d10129a174740d4$export$aca958c65c314e6c
|
|
189
|
-
};
|
|
190
|
-
for (let v of results){
|
|
191
|
-
var _validationDetails, _key;
|
|
192
|
-
for (let e of v.validationErrors)errors.add(e);
|
|
193
|
-
// Only these properties apply for checkboxes.
|
|
194
|
-
isInvalid || (isInvalid = v.isInvalid);
|
|
195
|
-
for(let key in validationDetails)(_validationDetails = validationDetails)[_key = key] || (_validationDetails[_key] = v.validationDetails[key]);
|
|
196
|
-
}
|
|
197
|
-
validationDetails.valid = !isInvalid;
|
|
198
|
-
return {
|
|
199
|
-
isInvalid: isInvalid,
|
|
200
|
-
validationErrors: [
|
|
201
|
-
...errors
|
|
202
|
-
],
|
|
203
|
-
validationDetails: validationDetails
|
|
204
|
-
};
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
|
|
208
25
|
|
|
209
26
|
|
|
210
27
|
//# sourceMappingURL=main.js.map
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-stately/form/src/index.ts","packages/@react-stately/form/src/useFormValidationState.ts"],"sourcesContent":["/*\n * Copyright 2023 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport {FormValidationContext, useFormValidationState, DEFAULT_VALIDATION_RESULT, VALID_VALIDITY_STATE, privateValidationStateProp, mergeValidation} from './useFormValidationState';\nexport type {FormValidationState} from './useFormValidationState';\n","/*\n * Copyright 2023 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {createContext, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {Validation, ValidationErrors, ValidationFunction, ValidationResult} from '@react-types/shared';\n\nexport const VALID_VALIDITY_STATE: ValidityState = {\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valueMissing: false,\n valid: true\n};\n\nconst CUSTOM_VALIDITY_STATE: ValidityState = {\n ...VALID_VALIDITY_STATE,\n customError: true,\n valid: false\n};\n\nexport const DEFAULT_VALIDATION_RESULT: ValidationResult = {\n isInvalid: false,\n validationDetails: VALID_VALIDITY_STATE,\n validationErrors: []\n};\n\nexport const FormValidationContext = createContext<ValidationErrors>({});\n\nexport const privateValidationStateProp = '__formValidationState' + Date.now();\n\ninterface FormValidationProps<T> extends Validation<T> {\n builtinValidation?: ValidationResult,\n name?: string | string[],\n value: T\n}\n\nexport interface FormValidationState {\n /** Realtime validation results, updated as the user edits the value. */\n realtimeValidation: ValidationResult,\n /** Currently displayed validation results, updated when the user commits their changes. */\n displayValidation: ValidationResult,\n /** Updates the current validation result. Not displayed to the user until `commitValidation` is called. */\n updateValidation(result: ValidationResult): void,\n /** Resets the displayed validation state to valid when the user resets the form. */\n resetValidation(): void,\n /** Commits the realtime validation so it is displayed to the user. */\n commitValidation(): void\n}\n\nexport function useFormValidationState<T>(props: FormValidationProps<T>): FormValidationState {\n // Private prop for parent components to pass state to children.\n if (props[privateValidationStateProp]) {\n let {realtimeValidation, displayValidation, updateValidation, resetValidation, commitValidation} = props[privateValidationStateProp] as FormValidationState;\n return {realtimeValidation, displayValidation, updateValidation, resetValidation, commitValidation};\n }\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useFormValidationStateImpl(props);\n}\n\nfunction useFormValidationStateImpl<T>(props: FormValidationProps<T>): FormValidationState {\n let {isInvalid, validationState, name, value, builtinValidation, validate, validationBehavior = 'aria'} = props;\n\n // backward compatibility.\n if (validationState) {\n isInvalid ||= validationState === 'invalid';\n }\n\n // If the isInvalid prop is true, update validation result in realtime (controlled).\n let controlledError: ValidationResult | null = isInvalid ? {\n isInvalid: true,\n validationErrors: [],\n validationDetails: CUSTOM_VALIDITY_STATE\n } : null;\n\n // Perform custom client side validation.\n let clientError: ValidationResult | null = useMemo(() => getValidationResult(runValidate(validate, value)), [validate, value]);\n\n if (builtinValidation?.validationDetails.valid) {\n builtinValidation = null;\n }\n\n // Get relevant server errors from the form.\n let serverErrors = useContext(FormValidationContext);\n let serverErrorMessages = useMemo(() => {\n if (name) {\n return Array.isArray(name) ? name.flatMap(name => asArray(serverErrors[name])) : asArray(serverErrors[name]);\n }\n return [];\n }, [serverErrors, name]);\n\n // Show server errors when the form gets a new value, and clear when the user changes the value.\n let [lastServerErrors, setLastServerErrors] = useState(serverErrors);\n let [isServerErrorCleared, setServerErrorCleared] = useState(false);\n if (serverErrors !== lastServerErrors) {\n setLastServerErrors(serverErrors);\n setServerErrorCleared(false);\n }\n\n let serverError: ValidationResult | null = useMemo(() =>\n getValidationResult(isServerErrorCleared ? [] : serverErrorMessages),\n [isServerErrorCleared, serverErrorMessages]\n );\n\n // Track the next validation state in a ref until commitValidation is called.\n let nextValidation = useRef(DEFAULT_VALIDATION_RESULT);\n let [currentValidity, setCurrentValidity] = useState(DEFAULT_VALIDATION_RESULT);\n\n let lastError = useRef(DEFAULT_VALIDATION_RESULT);\n let commitValidation = () => {\n if (!commitQueued) {\n return;\n }\n\n setCommitQueued(false);\n let error = clientError || builtinValidation || nextValidation.current;\n if (!isEqualValidation(error, lastError.current)) {\n lastError.current = error;\n setCurrentValidity(error);\n }\n };\n\n let [commitQueued, setCommitQueued] = useState(false);\n useEffect(commitValidation);\n\n // realtimeValidation is used to update the native input element's state based on custom validation logic.\n // displayValidation is the currently displayed validation state that the user sees (e.g. on input change/form submit).\n // With validationBehavior=\"aria\", all errors are displayed in realtime rather than on submit.\n let realtimeValidation = controlledError || serverError || clientError || builtinValidation || DEFAULT_VALIDATION_RESULT;\n let displayValidation = validationBehavior === 'native'\n ? controlledError || serverError || currentValidity\n : controlledError || serverError || clientError || builtinValidation || currentValidity;\n\n return {\n realtimeValidation,\n displayValidation,\n updateValidation(value) {\n // If validationBehavior is 'aria', update in realtime. Otherwise, store in a ref until commit.\n if (validationBehavior === 'aria' && !isEqualValidation(currentValidity, value)) {\n setCurrentValidity(value);\n } else {\n nextValidation.current = value;\n }\n },\n resetValidation() {\n // Update the currently displayed validation state to valid on form reset,\n // even if the native validity says it isn't. It'll show again on the next form submit.\n let error = DEFAULT_VALIDATION_RESULT;\n if (!isEqualValidation(error, lastError.current)) {\n lastError.current = error;\n setCurrentValidity(error);\n }\n\n // Do not commit validation after the next render. This avoids a condition where\n // useSelect calls commitValidation inside an onReset handler.\n if (validationBehavior === 'native') {\n setCommitQueued(false);\n }\n\n setServerErrorCleared(true);\n },\n commitValidation() {\n // Commit validation state so the user sees it on blur/change/submit. Also clear any server errors.\n // Wait until after the next render to commit so that the latest value has been validated.\n if (validationBehavior === 'native') {\n setCommitQueued(true);\n }\n setServerErrorCleared(true);\n }\n };\n}\n\nfunction asArray<T>(v: T | T[]): T[] {\n if (!v) {\n return [];\n }\n\n return Array.isArray(v) ? v : [v];\n}\n\nfunction runValidate<T>(validate: ValidationFunction<T>, value: T): string[] {\n if (typeof validate === 'function') {\n let e = validate(value);\n if (e && typeof e !== 'boolean') {\n return asArray(e);\n }\n }\n\n return [];\n}\n\nfunction getValidationResult(errors: string[]): ValidationResult | null {\n return errors.length ? {\n isInvalid: true,\n validationErrors: errors,\n validationDetails: CUSTOM_VALIDITY_STATE\n } : null;\n}\n\nfunction isEqualValidation(a: ValidationResult | null, b: ValidationResult | null): boolean {\n if (a === b) {\n return true;\n }\n\n return a && b\n && a.isInvalid === b.isInvalid\n && a.validationErrors.length === b.validationErrors.length\n && a.validationErrors.every((a, i) => a === b.validationErrors[i])\n && Object.entries(a.validationDetails).every(([k, v]) => b.validationDetails[k] === v);\n}\n\nexport function mergeValidation(...results: ValidationResult[]): ValidationResult {\n let errors = new Set<string>();\n let isInvalid = false;\n let validationDetails = {\n ...VALID_VALIDITY_STATE\n };\n\n for (let v of results) {\n for (let e of v.validationErrors) {\n errors.add(e);\n }\n\n // Only these properties apply for checkboxes.\n isInvalid ||= v.isInvalid;\n for (let key in validationDetails) {\n validationDetails[key] ||= v.validationDetails[key];\n }\n }\n\n validationDetails.valid = !isInvalid;\n return {\n isInvalid,\n validationErrors: [...errors],\n validationDetails\n };\n}\n"],"names":[],"version":3,"file":"main.js.map"}
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC","sources":["packages/@react-stately/form/src/index.ts"],"sourcesContent":["/*\n * Copyright 2023 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport {FormValidationContext, useFormValidationState, DEFAULT_VALIDATION_RESULT, VALID_VALIDITY_STATE, privateValidationStateProp, mergeValidation} from './useFormValidationState';\nexport type {FormValidationState} from './useFormValidationState';\n"],"names":[],"version":3,"file":"main.js.map"}
|
package/dist/module.js
CHANGED
|
@@ -1,16 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {DEFAULT_VALIDATION_RESULT as $e5be200c675c3b3a$export$dad6ae84456c676a, FormValidationContext as $e5be200c675c3b3a$export$571b5131b7e65c11, mergeValidation as $e5be200c675c3b3a$export$75ee7c75d68f5b0e, privateValidationStateProp as $e5be200c675c3b3a$export$a763b9476acd3eb, useFormValidationState as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, VALID_VALIDITY_STATE as $e5be200c675c3b3a$export$aca958c65c314e6c} from "./useFormValidationState.module.js";
|
|
2
2
|
|
|
3
3
|
/*
|
|
4
|
-
* Copyright 2023 Adobe. All rights reserved.
|
|
5
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
6
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
7
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
8
|
-
*
|
|
9
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
10
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
11
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
12
|
-
* governing permissions and limitations under the License.
|
|
13
|
-
*/ /*
|
|
14
4
|
* Copyright 2023 Adobe. All rights reserved.
|
|
15
5
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
16
6
|
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
@@ -21,179 +11,6 @@ import {createContext as $jcIOw$createContext, useMemo as $jcIOw$useMemo, useCon
|
|
|
21
11
|
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
22
12
|
* governing permissions and limitations under the License.
|
|
23
13
|
*/
|
|
24
|
-
const $e5be200c675c3b3a$export$aca958c65c314e6c = {
|
|
25
|
-
badInput: false,
|
|
26
|
-
customError: false,
|
|
27
|
-
patternMismatch: false,
|
|
28
|
-
rangeOverflow: false,
|
|
29
|
-
rangeUnderflow: false,
|
|
30
|
-
stepMismatch: false,
|
|
31
|
-
tooLong: false,
|
|
32
|
-
tooShort: false,
|
|
33
|
-
typeMismatch: false,
|
|
34
|
-
valueMissing: false,
|
|
35
|
-
valid: true
|
|
36
|
-
};
|
|
37
|
-
const $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE = {
|
|
38
|
-
...$e5be200c675c3b3a$export$aca958c65c314e6c,
|
|
39
|
-
customError: true,
|
|
40
|
-
valid: false
|
|
41
|
-
};
|
|
42
|
-
const $e5be200c675c3b3a$export$dad6ae84456c676a = {
|
|
43
|
-
isInvalid: false,
|
|
44
|
-
validationDetails: $e5be200c675c3b3a$export$aca958c65c314e6c,
|
|
45
|
-
validationErrors: []
|
|
46
|
-
};
|
|
47
|
-
const $e5be200c675c3b3a$export$571b5131b7e65c11 = (0, $jcIOw$createContext)({});
|
|
48
|
-
const $e5be200c675c3b3a$export$a763b9476acd3eb = "__formValidationState" + Date.now();
|
|
49
|
-
function $e5be200c675c3b3a$export$fc1a364ae1f3ff10(props) {
|
|
50
|
-
// Private prop for parent components to pass state to children.
|
|
51
|
-
if (props[$e5be200c675c3b3a$export$a763b9476acd3eb]) {
|
|
52
|
-
let { realtimeValidation: realtimeValidation, displayValidation: displayValidation, updateValidation: updateValidation, resetValidation: resetValidation, commitValidation: commitValidation } = props[$e5be200c675c3b3a$export$a763b9476acd3eb];
|
|
53
|
-
return {
|
|
54
|
-
realtimeValidation: realtimeValidation,
|
|
55
|
-
displayValidation: displayValidation,
|
|
56
|
-
updateValidation: updateValidation,
|
|
57
|
-
resetValidation: resetValidation,
|
|
58
|
-
commitValidation: commitValidation
|
|
59
|
-
};
|
|
60
|
-
}
|
|
61
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
62
|
-
return $e5be200c675c3b3a$var$useFormValidationStateImpl(props);
|
|
63
|
-
}
|
|
64
|
-
function $e5be200c675c3b3a$var$useFormValidationStateImpl(props) {
|
|
65
|
-
let { isInvalid: isInvalid, validationState: validationState, name: name, value: value, builtinValidation: builtinValidation, validate: validate, validationBehavior: validationBehavior = "aria" } = props;
|
|
66
|
-
// backward compatibility.
|
|
67
|
-
if (validationState) isInvalid || (isInvalid = validationState === "invalid");
|
|
68
|
-
// If the isInvalid prop is true, update validation result in realtime (controlled).
|
|
69
|
-
let controlledError = isInvalid ? {
|
|
70
|
-
isInvalid: true,
|
|
71
|
-
validationErrors: [],
|
|
72
|
-
validationDetails: $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE
|
|
73
|
-
} : null;
|
|
74
|
-
// Perform custom client side validation.
|
|
75
|
-
let clientError = (0, $jcIOw$useMemo)(()=>$e5be200c675c3b3a$var$getValidationResult($e5be200c675c3b3a$var$runValidate(validate, value)), [
|
|
76
|
-
validate,
|
|
77
|
-
value
|
|
78
|
-
]);
|
|
79
|
-
if (builtinValidation === null || builtinValidation === void 0 ? void 0 : builtinValidation.validationDetails.valid) builtinValidation = null;
|
|
80
|
-
// Get relevant server errors from the form.
|
|
81
|
-
let serverErrors = (0, $jcIOw$useContext)($e5be200c675c3b3a$export$571b5131b7e65c11);
|
|
82
|
-
let serverErrorMessages = (0, $jcIOw$useMemo)(()=>{
|
|
83
|
-
if (name) return Array.isArray(name) ? name.flatMap((name)=>$e5be200c675c3b3a$var$asArray(serverErrors[name])) : $e5be200c675c3b3a$var$asArray(serverErrors[name]);
|
|
84
|
-
return [];
|
|
85
|
-
}, [
|
|
86
|
-
serverErrors,
|
|
87
|
-
name
|
|
88
|
-
]);
|
|
89
|
-
// Show server errors when the form gets a new value, and clear when the user changes the value.
|
|
90
|
-
let [lastServerErrors, setLastServerErrors] = (0, $jcIOw$useState)(serverErrors);
|
|
91
|
-
let [isServerErrorCleared, setServerErrorCleared] = (0, $jcIOw$useState)(false);
|
|
92
|
-
if (serverErrors !== lastServerErrors) {
|
|
93
|
-
setLastServerErrors(serverErrors);
|
|
94
|
-
setServerErrorCleared(false);
|
|
95
|
-
}
|
|
96
|
-
let serverError = (0, $jcIOw$useMemo)(()=>$e5be200c675c3b3a$var$getValidationResult(isServerErrorCleared ? [] : serverErrorMessages), [
|
|
97
|
-
isServerErrorCleared,
|
|
98
|
-
serverErrorMessages
|
|
99
|
-
]);
|
|
100
|
-
// Track the next validation state in a ref until commitValidation is called.
|
|
101
|
-
let nextValidation = (0, $jcIOw$useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
|
|
102
|
-
let [currentValidity, setCurrentValidity] = (0, $jcIOw$useState)($e5be200c675c3b3a$export$dad6ae84456c676a);
|
|
103
|
-
let lastError = (0, $jcIOw$useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
|
|
104
|
-
let commitValidation = ()=>{
|
|
105
|
-
if (!commitQueued) return;
|
|
106
|
-
setCommitQueued(false);
|
|
107
|
-
let error = clientError || builtinValidation || nextValidation.current;
|
|
108
|
-
if (!$e5be200c675c3b3a$var$isEqualValidation(error, lastError.current)) {
|
|
109
|
-
lastError.current = error;
|
|
110
|
-
setCurrentValidity(error);
|
|
111
|
-
}
|
|
112
|
-
};
|
|
113
|
-
let [commitQueued, setCommitQueued] = (0, $jcIOw$useState)(false);
|
|
114
|
-
(0, $jcIOw$useEffect)(commitValidation);
|
|
115
|
-
// realtimeValidation is used to update the native input element's state based on custom validation logic.
|
|
116
|
-
// displayValidation is the currently displayed validation state that the user sees (e.g. on input change/form submit).
|
|
117
|
-
// With validationBehavior="aria", all errors are displayed in realtime rather than on submit.
|
|
118
|
-
let realtimeValidation = controlledError || serverError || clientError || builtinValidation || $e5be200c675c3b3a$export$dad6ae84456c676a;
|
|
119
|
-
let displayValidation = validationBehavior === "native" ? controlledError || serverError || currentValidity : controlledError || serverError || clientError || builtinValidation || currentValidity;
|
|
120
|
-
return {
|
|
121
|
-
realtimeValidation: realtimeValidation,
|
|
122
|
-
displayValidation: displayValidation,
|
|
123
|
-
updateValidation (value) {
|
|
124
|
-
// If validationBehavior is 'aria', update in realtime. Otherwise, store in a ref until commit.
|
|
125
|
-
if (validationBehavior === "aria" && !$e5be200c675c3b3a$var$isEqualValidation(currentValidity, value)) setCurrentValidity(value);
|
|
126
|
-
else nextValidation.current = value;
|
|
127
|
-
},
|
|
128
|
-
resetValidation () {
|
|
129
|
-
// Update the currently displayed validation state to valid on form reset,
|
|
130
|
-
// even if the native validity says it isn't. It'll show again on the next form submit.
|
|
131
|
-
let error = $e5be200c675c3b3a$export$dad6ae84456c676a;
|
|
132
|
-
if (!$e5be200c675c3b3a$var$isEqualValidation(error, lastError.current)) {
|
|
133
|
-
lastError.current = error;
|
|
134
|
-
setCurrentValidity(error);
|
|
135
|
-
}
|
|
136
|
-
// Do not commit validation after the next render. This avoids a condition where
|
|
137
|
-
// useSelect calls commitValidation inside an onReset handler.
|
|
138
|
-
if (validationBehavior === "native") setCommitQueued(false);
|
|
139
|
-
setServerErrorCleared(true);
|
|
140
|
-
},
|
|
141
|
-
commitValidation () {
|
|
142
|
-
// Commit validation state so the user sees it on blur/change/submit. Also clear any server errors.
|
|
143
|
-
// Wait until after the next render to commit so that the latest value has been validated.
|
|
144
|
-
if (validationBehavior === "native") setCommitQueued(true);
|
|
145
|
-
setServerErrorCleared(true);
|
|
146
|
-
}
|
|
147
|
-
};
|
|
148
|
-
}
|
|
149
|
-
function $e5be200c675c3b3a$var$asArray(v) {
|
|
150
|
-
if (!v) return [];
|
|
151
|
-
return Array.isArray(v) ? v : [
|
|
152
|
-
v
|
|
153
|
-
];
|
|
154
|
-
}
|
|
155
|
-
function $e5be200c675c3b3a$var$runValidate(validate, value) {
|
|
156
|
-
if (typeof validate === "function") {
|
|
157
|
-
let e = validate(value);
|
|
158
|
-
if (e && typeof e !== "boolean") return $e5be200c675c3b3a$var$asArray(e);
|
|
159
|
-
}
|
|
160
|
-
return [];
|
|
161
|
-
}
|
|
162
|
-
function $e5be200c675c3b3a$var$getValidationResult(errors) {
|
|
163
|
-
return errors.length ? {
|
|
164
|
-
isInvalid: true,
|
|
165
|
-
validationErrors: errors,
|
|
166
|
-
validationDetails: $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE
|
|
167
|
-
} : null;
|
|
168
|
-
}
|
|
169
|
-
function $e5be200c675c3b3a$var$isEqualValidation(a, b) {
|
|
170
|
-
if (a === b) return true;
|
|
171
|
-
return a && b && a.isInvalid === b.isInvalid && a.validationErrors.length === b.validationErrors.length && a.validationErrors.every((a, i)=>a === b.validationErrors[i]) && Object.entries(a.validationDetails).every(([k, v])=>b.validationDetails[k] === v);
|
|
172
|
-
}
|
|
173
|
-
function $e5be200c675c3b3a$export$75ee7c75d68f5b0e(...results) {
|
|
174
|
-
let errors = new Set();
|
|
175
|
-
let isInvalid = false;
|
|
176
|
-
let validationDetails = {
|
|
177
|
-
...$e5be200c675c3b3a$export$aca958c65c314e6c
|
|
178
|
-
};
|
|
179
|
-
for (let v of results){
|
|
180
|
-
var _validationDetails, _key;
|
|
181
|
-
for (let e of v.validationErrors)errors.add(e);
|
|
182
|
-
// Only these properties apply for checkboxes.
|
|
183
|
-
isInvalid || (isInvalid = v.isInvalid);
|
|
184
|
-
for(let key in validationDetails)(_validationDetails = validationDetails)[_key = key] || (_validationDetails[_key] = v.validationDetails[key]);
|
|
185
|
-
}
|
|
186
|
-
validationDetails.valid = !isInvalid;
|
|
187
|
-
return {
|
|
188
|
-
isInvalid: isInvalid,
|
|
189
|
-
validationErrors: [
|
|
190
|
-
...errors
|
|
191
|
-
],
|
|
192
|
-
validationDetails: validationDetails
|
|
193
|
-
};
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
|
|
197
14
|
|
|
198
15
|
|
|
199
16
|
export {$e5be200c675c3b3a$export$571b5131b7e65c11 as FormValidationContext, $e5be200c675c3b3a$export$fc1a364ae1f3ff10 as useFormValidationState, $e5be200c675c3b3a$export$dad6ae84456c676a as DEFAULT_VALIDATION_RESULT, $e5be200c675c3b3a$export$aca958c65c314e6c as VALID_VALIDITY_STATE, $e5be200c675c3b3a$export$a763b9476acd3eb as privateValidationStateProp, $e5be200c675c3b3a$export$75ee7c75d68f5b0e as mergeValidation};
|