112 lines
5.2 KiB
Plaintext
112 lines
5.2 KiB
Plaintext
import {setInteractionModality as $9Gacy$setInteractionModality} from "@react-aria/interactions";
|
|
import {useEffect as $9Gacy$useEffect} from "react";
|
|
import {useLayoutEffect as $9Gacy$useLayoutEffect, useEffectEvent as $9Gacy$useEffectEvent} from "@react-aria/utils";
|
|
|
|
/*
|
|
* Copyright 2023 Adobe. All rights reserved.
|
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
* governing permissions and limitations under the License.
|
|
*/
|
|
|
|
|
|
function $e93e671b31057976$export$b8473d3665f3a75a(props, state, ref) {
|
|
let { validationBehavior: validationBehavior, focus: focus } = props;
|
|
// This is a useLayoutEffect so that it runs before the useEffect in useFormValidationState, which commits the validation change.
|
|
(0, $9Gacy$useLayoutEffect)(()=>{
|
|
if (validationBehavior === 'native' && (ref === null || ref === void 0 ? void 0 : ref.current)) {
|
|
let errorMessage = state.realtimeValidation.isInvalid ? state.realtimeValidation.validationErrors.join(' ') || 'Invalid value.' : '';
|
|
ref.current.setCustomValidity(errorMessage);
|
|
// Prevent default tooltip for validation message.
|
|
// https://bugzilla.mozilla.org/show_bug.cgi?id=605277
|
|
if (!ref.current.hasAttribute('title')) ref.current.title = '';
|
|
if (!state.realtimeValidation.isInvalid) state.updateValidation($e93e671b31057976$var$getNativeValidity(ref.current));
|
|
}
|
|
});
|
|
let onReset = (0, $9Gacy$useEffectEvent)(()=>{
|
|
state.resetValidation();
|
|
});
|
|
let onInvalid = (0, $9Gacy$useEffectEvent)((e)=>{
|
|
var _ref_current;
|
|
// Only commit validation if we are not already displaying one.
|
|
// This avoids clearing server errors that the user didn't actually fix.
|
|
if (!state.displayValidation.isInvalid) state.commitValidation();
|
|
// Auto focus the first invalid input in a form, unless the error already had its default prevented.
|
|
let form = ref === null || ref === void 0 ? void 0 : (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.form;
|
|
if (!e.defaultPrevented && ref && form && $e93e671b31057976$var$getFirstInvalidInput(form) === ref.current) {
|
|
var _ref_current1;
|
|
if (focus) focus();
|
|
else (_ref_current1 = ref.current) === null || _ref_current1 === void 0 ? void 0 : _ref_current1.focus();
|
|
// Always show focus ring.
|
|
(0, $9Gacy$setInteractionModality)('keyboard');
|
|
}
|
|
// Prevent default browser error UI from appearing.
|
|
e.preventDefault();
|
|
});
|
|
let onChange = (0, $9Gacy$useEffectEvent)(()=>{
|
|
state.commitValidation();
|
|
});
|
|
(0, $9Gacy$useEffect)(()=>{
|
|
let input = ref === null || ref === void 0 ? void 0 : ref.current;
|
|
if (!input) return;
|
|
let form = input.form;
|
|
input.addEventListener('invalid', onInvalid);
|
|
input.addEventListener('change', onChange);
|
|
form === null || form === void 0 ? void 0 : form.addEventListener('reset', onReset);
|
|
return ()=>{
|
|
input.removeEventListener('invalid', onInvalid);
|
|
input.removeEventListener('change', onChange);
|
|
form === null || form === void 0 ? void 0 : form.removeEventListener('reset', onReset);
|
|
};
|
|
}, [
|
|
ref,
|
|
onInvalid,
|
|
onChange,
|
|
onReset,
|
|
validationBehavior
|
|
]);
|
|
}
|
|
function $e93e671b31057976$var$getValidity(input) {
|
|
// The native ValidityState object is live, meaning each property is a getter that returns the current state.
|
|
// We need to create a snapshot of the validity state at the time this function is called to avoid unpredictable React renders.
|
|
let validity = input.validity;
|
|
return {
|
|
badInput: validity.badInput,
|
|
customError: validity.customError,
|
|
patternMismatch: validity.patternMismatch,
|
|
rangeOverflow: validity.rangeOverflow,
|
|
rangeUnderflow: validity.rangeUnderflow,
|
|
stepMismatch: validity.stepMismatch,
|
|
tooLong: validity.tooLong,
|
|
tooShort: validity.tooShort,
|
|
typeMismatch: validity.typeMismatch,
|
|
valueMissing: validity.valueMissing,
|
|
valid: validity.valid
|
|
};
|
|
}
|
|
function $e93e671b31057976$var$getNativeValidity(input) {
|
|
return {
|
|
isInvalid: !input.validity.valid,
|
|
validationDetails: $e93e671b31057976$var$getValidity(input),
|
|
validationErrors: input.validationMessage ? [
|
|
input.validationMessage
|
|
] : []
|
|
};
|
|
}
|
|
function $e93e671b31057976$var$getFirstInvalidInput(form) {
|
|
for(let i = 0; i < form.elements.length; i++){
|
|
let element = form.elements[i];
|
|
if (!element.validity.valid) return element;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
|
|
export {$e93e671b31057976$export$b8473d3665f3a75a as useFormValidation};
|
|
//# sourceMappingURL=useFormValidation.module.js.map
|