b6bff318d9
- Agent roles integration progress - Various backend and frontend updates - Storybook cache cleanup 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2059 lines
77 KiB
JavaScript
2059 lines
77 KiB
JavaScript
import {
|
|
require_react
|
|
} from "./chunk-3TFVT2CW.js";
|
|
import {
|
|
__toESM
|
|
} from "./chunk-4MBMRILA.js";
|
|
|
|
// node_modules/react-hook-form/dist/index.esm.mjs
|
|
var React = __toESM(require_react(), 1);
|
|
var import_react = __toESM(require_react(), 1);
|
|
var isCheckBoxInput = (element) => element.type === "checkbox";
|
|
var isDateObject = (value) => value instanceof Date;
|
|
var isNullOrUndefined = (value) => value == null;
|
|
var isObjectType = (value) => typeof value === "object";
|
|
var isObject = (value) => !isNullOrUndefined(value) && !Array.isArray(value) && isObjectType(value) && !isDateObject(value);
|
|
var getEventValue = (event) => isObject(event) && event.target ? isCheckBoxInput(event.target) ? event.target.checked : event.target.value : event;
|
|
var getNodeParentName = (name) => name.substring(0, name.search(/\.\d+(\.|$)/)) || name;
|
|
var isNameInFieldArray = (names, name) => names.has(getNodeParentName(name));
|
|
var isPlainObject = (tempObject) => {
|
|
const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
|
|
return isObject(prototypeCopy) && prototypeCopy.hasOwnProperty("isPrototypeOf");
|
|
};
|
|
var isWeb = typeof window !== "undefined" && typeof window.HTMLElement !== "undefined" && typeof document !== "undefined";
|
|
function cloneObject(data) {
|
|
let copy;
|
|
const isArray = Array.isArray(data);
|
|
const isFileListInstance = typeof FileList !== "undefined" ? data instanceof FileList : false;
|
|
if (data instanceof Date) {
|
|
copy = new Date(data);
|
|
} else if (!(isWeb && (data instanceof Blob || isFileListInstance)) && (isArray || isObject(data))) {
|
|
copy = isArray ? [] : {};
|
|
if (!isArray && !isPlainObject(data)) {
|
|
copy = data;
|
|
} else {
|
|
for (const key in data) {
|
|
if (data.hasOwnProperty(key)) {
|
|
copy[key] = cloneObject(data[key]);
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
return data;
|
|
}
|
|
return copy;
|
|
}
|
|
var isKey = (value) => /^\w*$/.test(value);
|
|
var isUndefined = (val) => val === void 0;
|
|
var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
|
|
var stringToPath = (input) => compact(input.replace(/["|']|\]/g, "").split(/\.|\[/));
|
|
var get = (object, path, defaultValue) => {
|
|
if (!path || !isObject(object)) {
|
|
return defaultValue;
|
|
}
|
|
const result = (isKey(path) ? [path] : stringToPath(path)).reduce((result2, key) => isNullOrUndefined(result2) ? result2 : result2[key], object);
|
|
return isUndefined(result) || result === object ? isUndefined(object[path]) ? defaultValue : object[path] : result;
|
|
};
|
|
var isBoolean = (value) => typeof value === "boolean";
|
|
var set = (object, path, value) => {
|
|
let index = -1;
|
|
const tempPath = isKey(path) ? [path] : stringToPath(path);
|
|
const length = tempPath.length;
|
|
const lastIndex = length - 1;
|
|
while (++index < length) {
|
|
const key = tempPath[index];
|
|
let newValue = value;
|
|
if (index !== lastIndex) {
|
|
const objValue = object[key];
|
|
newValue = isObject(objValue) || Array.isArray(objValue) ? objValue : !isNaN(+tempPath[index + 1]) ? [] : {};
|
|
}
|
|
if (key === "__proto__" || key === "constructor" || key === "prototype") {
|
|
return;
|
|
}
|
|
object[key] = newValue;
|
|
object = object[key];
|
|
}
|
|
};
|
|
var EVENTS = {
|
|
BLUR: "blur",
|
|
FOCUS_OUT: "focusout",
|
|
CHANGE: "change"
|
|
};
|
|
var VALIDATION_MODE = {
|
|
onBlur: "onBlur",
|
|
onChange: "onChange",
|
|
onSubmit: "onSubmit",
|
|
onTouched: "onTouched",
|
|
all: "all"
|
|
};
|
|
var INPUT_VALIDATION_RULES = {
|
|
max: "max",
|
|
min: "min",
|
|
maxLength: "maxLength",
|
|
minLength: "minLength",
|
|
pattern: "pattern",
|
|
required: "required",
|
|
validate: "validate"
|
|
};
|
|
var HookFormContext = import_react.default.createContext(null);
|
|
HookFormContext.displayName = "HookFormContext";
|
|
var useFormContext = () => import_react.default.useContext(HookFormContext);
|
|
var FormProvider = (props) => {
|
|
const { children, ...data } = props;
|
|
return import_react.default.createElement(HookFormContext.Provider, { value: data }, children);
|
|
};
|
|
var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
|
|
const result = {
|
|
defaultValues: control._defaultValues
|
|
};
|
|
for (const key in formState) {
|
|
Object.defineProperty(result, key, {
|
|
get: () => {
|
|
const _key = key;
|
|
if (control._proxyFormState[_key] !== VALIDATION_MODE.all) {
|
|
control._proxyFormState[_key] = !isRoot || VALIDATION_MODE.all;
|
|
}
|
|
localProxyFormState && (localProxyFormState[_key] = true);
|
|
return formState[_key];
|
|
}
|
|
});
|
|
}
|
|
return result;
|
|
};
|
|
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
|
|
function useFormState(props) {
|
|
const methods = useFormContext();
|
|
const { control = methods.control, disabled, name, exact } = props || {};
|
|
const [formState, updateFormState] = import_react.default.useState(control._formState);
|
|
const _localProxyFormState = import_react.default.useRef({
|
|
isDirty: false,
|
|
isLoading: false,
|
|
dirtyFields: false,
|
|
touchedFields: false,
|
|
validatingFields: false,
|
|
isValidating: false,
|
|
isValid: false,
|
|
errors: false
|
|
});
|
|
useIsomorphicLayoutEffect(() => control._subscribe({
|
|
name,
|
|
formState: _localProxyFormState.current,
|
|
exact,
|
|
callback: (formState2) => {
|
|
!disabled && updateFormState({
|
|
...control._formState,
|
|
...formState2
|
|
});
|
|
}
|
|
}), [name, disabled, exact]);
|
|
import_react.default.useEffect(() => {
|
|
_localProxyFormState.current.isValid && control._setValid(true);
|
|
}, [control]);
|
|
return import_react.default.useMemo(() => getProxyFormState(formState, control, _localProxyFormState.current, false), [formState, control]);
|
|
}
|
|
var isString = (value) => typeof value === "string";
|
|
var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) => {
|
|
if (isString(names)) {
|
|
isGlobal && _names.watch.add(names);
|
|
return get(formValues, names, defaultValue);
|
|
}
|
|
if (Array.isArray(names)) {
|
|
return names.map((fieldName) => (isGlobal && _names.watch.add(fieldName), get(formValues, fieldName)));
|
|
}
|
|
isGlobal && (_names.watchAll = true);
|
|
return formValues;
|
|
};
|
|
function useWatch(props) {
|
|
const methods = useFormContext();
|
|
const { control = methods.control, name, defaultValue, disabled, exact } = props || {};
|
|
const _defaultValue = import_react.default.useRef(defaultValue);
|
|
const [value, updateValue] = import_react.default.useState(control._getWatch(name, _defaultValue.current));
|
|
useIsomorphicLayoutEffect(() => control._subscribe({
|
|
name,
|
|
formState: {
|
|
values: true
|
|
},
|
|
exact,
|
|
callback: (formState) => !disabled && updateValue(generateWatchOutput(name, control._names, formState.values || control._formValues, false, _defaultValue.current))
|
|
}), [name, control, disabled, exact]);
|
|
import_react.default.useEffect(() => control._removeUnmounted());
|
|
return value;
|
|
}
|
|
function useController(props) {
|
|
const methods = useFormContext();
|
|
const { name, disabled, control = methods.control, shouldUnregister } = props;
|
|
const isArrayField = isNameInFieldArray(control._names.array, name);
|
|
const value = useWatch({
|
|
control,
|
|
name,
|
|
defaultValue: get(control._formValues, name, get(control._defaultValues, name, props.defaultValue)),
|
|
exact: true
|
|
});
|
|
const formState = useFormState({
|
|
control,
|
|
name,
|
|
exact: true
|
|
});
|
|
const _props = import_react.default.useRef(props);
|
|
const _registerProps = import_react.default.useRef(control.register(name, {
|
|
...props.rules,
|
|
value,
|
|
...isBoolean(props.disabled) ? { disabled: props.disabled } : {}
|
|
}));
|
|
const fieldState = import_react.default.useMemo(() => Object.defineProperties({}, {
|
|
invalid: {
|
|
enumerable: true,
|
|
get: () => !!get(formState.errors, name)
|
|
},
|
|
isDirty: {
|
|
enumerable: true,
|
|
get: () => !!get(formState.dirtyFields, name)
|
|
},
|
|
isTouched: {
|
|
enumerable: true,
|
|
get: () => !!get(formState.touchedFields, name)
|
|
},
|
|
isValidating: {
|
|
enumerable: true,
|
|
get: () => !!get(formState.validatingFields, name)
|
|
},
|
|
error: {
|
|
enumerable: true,
|
|
get: () => get(formState.errors, name)
|
|
}
|
|
}), [formState, name]);
|
|
const onChange = import_react.default.useCallback((event) => _registerProps.current.onChange({
|
|
target: {
|
|
value: getEventValue(event),
|
|
name
|
|
},
|
|
type: EVENTS.CHANGE
|
|
}), [name]);
|
|
const onBlur = import_react.default.useCallback(() => _registerProps.current.onBlur({
|
|
target: {
|
|
value: get(control._formValues, name),
|
|
name
|
|
},
|
|
type: EVENTS.BLUR
|
|
}), [name, control._formValues]);
|
|
const ref = import_react.default.useCallback((elm) => {
|
|
const field2 = get(control._fields, name);
|
|
if (field2 && elm) {
|
|
field2._f.ref = {
|
|
focus: () => elm.focus && elm.focus(),
|
|
select: () => elm.select && elm.select(),
|
|
setCustomValidity: (message) => elm.setCustomValidity(message),
|
|
reportValidity: () => elm.reportValidity()
|
|
};
|
|
}
|
|
}, [control._fields, name]);
|
|
const field = import_react.default.useMemo(() => ({
|
|
name,
|
|
value,
|
|
...isBoolean(disabled) || formState.disabled ? { disabled: formState.disabled || disabled } : {},
|
|
onChange,
|
|
onBlur,
|
|
ref
|
|
}), [name, disabled, formState.disabled, onChange, onBlur, ref, value]);
|
|
import_react.default.useEffect(() => {
|
|
const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
|
|
control.register(name, {
|
|
..._props.current.rules,
|
|
...isBoolean(_props.current.disabled) ? { disabled: _props.current.disabled } : {}
|
|
});
|
|
const updateMounted = (name2, value2) => {
|
|
const field2 = get(control._fields, name2);
|
|
if (field2 && field2._f) {
|
|
field2._f.mount = value2;
|
|
}
|
|
};
|
|
updateMounted(name, true);
|
|
if (_shouldUnregisterField) {
|
|
const value2 = cloneObject(get(control._options.defaultValues, name));
|
|
set(control._defaultValues, name, value2);
|
|
if (isUndefined(get(control._formValues, name))) {
|
|
set(control._formValues, name, value2);
|
|
}
|
|
}
|
|
!isArrayField && control.register(name);
|
|
return () => {
|
|
(isArrayField ? _shouldUnregisterField && !control._state.action : _shouldUnregisterField) ? control.unregister(name) : updateMounted(name, false);
|
|
};
|
|
}, [name, control, isArrayField, shouldUnregister]);
|
|
import_react.default.useEffect(() => {
|
|
control._setDisabledField({
|
|
disabled,
|
|
name
|
|
});
|
|
}, [disabled, name, control]);
|
|
return import_react.default.useMemo(() => ({
|
|
field,
|
|
formState,
|
|
fieldState
|
|
}), [field, formState, fieldState]);
|
|
}
|
|
var Controller = (props) => props.render(useController(props));
|
|
var flatten = (obj) => {
|
|
const output = {};
|
|
for (const key of Object.keys(obj)) {
|
|
if (isObjectType(obj[key]) && obj[key] !== null) {
|
|
const nested = flatten(obj[key]);
|
|
for (const nestedKey of Object.keys(nested)) {
|
|
output[`${key}.${nestedKey}`] = nested[nestedKey];
|
|
}
|
|
} else {
|
|
output[key] = obj[key];
|
|
}
|
|
}
|
|
return output;
|
|
};
|
|
var POST_REQUEST = "post";
|
|
function Form(props) {
|
|
const methods = useFormContext();
|
|
const [mounted, setMounted] = import_react.default.useState(false);
|
|
const { control = methods.control, onSubmit, children, action, method = POST_REQUEST, headers, encType, onError, render, onSuccess, validateStatus, ...rest } = props;
|
|
const submit = async (event) => {
|
|
let hasError = false;
|
|
let type = "";
|
|
await control.handleSubmit(async (data) => {
|
|
const formData = new FormData();
|
|
let formDataJson = "";
|
|
try {
|
|
formDataJson = JSON.stringify(data);
|
|
} catch (_a) {
|
|
}
|
|
const flattenFormValues = flatten(control._formValues);
|
|
for (const key in flattenFormValues) {
|
|
formData.append(key, flattenFormValues[key]);
|
|
}
|
|
if (onSubmit) {
|
|
await onSubmit({
|
|
data,
|
|
event,
|
|
method,
|
|
formData,
|
|
formDataJson
|
|
});
|
|
}
|
|
if (action) {
|
|
try {
|
|
const shouldStringifySubmissionData = [
|
|
headers && headers["Content-Type"],
|
|
encType
|
|
].some((value) => value && value.includes("json"));
|
|
const response = await fetch(String(action), {
|
|
method,
|
|
headers: {
|
|
...headers,
|
|
...encType ? { "Content-Type": encType } : {}
|
|
},
|
|
body: shouldStringifySubmissionData ? formDataJson : formData
|
|
});
|
|
if (response && (validateStatus ? !validateStatus(response.status) : response.status < 200 || response.status >= 300)) {
|
|
hasError = true;
|
|
onError && onError({ response });
|
|
type = String(response.status);
|
|
} else {
|
|
onSuccess && onSuccess({ response });
|
|
}
|
|
} catch (error) {
|
|
hasError = true;
|
|
onError && onError({ error });
|
|
}
|
|
}
|
|
})(event);
|
|
if (hasError && props.control) {
|
|
props.control._subjects.state.next({
|
|
isSubmitSuccessful: false
|
|
});
|
|
props.control.setError("root.server", {
|
|
type
|
|
});
|
|
}
|
|
};
|
|
import_react.default.useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
return render ? import_react.default.createElement(import_react.default.Fragment, null, render({
|
|
submit
|
|
})) : import_react.default.createElement("form", { noValidate: mounted, action, method, encType, onSubmit: submit, ...rest }, children);
|
|
}
|
|
var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => validateAllFieldCriteria ? {
|
|
...errors[name],
|
|
types: {
|
|
...errors[name] && errors[name].types ? errors[name].types : {},
|
|
[type]: message || true
|
|
}
|
|
} : {};
|
|
var convertToArrayPayload = (value) => Array.isArray(value) ? value : [value];
|
|
var createSubject = () => {
|
|
let _observers = [];
|
|
const next = (value) => {
|
|
for (const observer of _observers) {
|
|
observer.next && observer.next(value);
|
|
}
|
|
};
|
|
const subscribe = (observer) => {
|
|
_observers.push(observer);
|
|
return {
|
|
unsubscribe: () => {
|
|
_observers = _observers.filter((o) => o !== observer);
|
|
}
|
|
};
|
|
};
|
|
const unsubscribe = () => {
|
|
_observers = [];
|
|
};
|
|
return {
|
|
get observers() {
|
|
return _observers;
|
|
},
|
|
next,
|
|
subscribe,
|
|
unsubscribe
|
|
};
|
|
};
|
|
var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
|
|
function deepEqual(object1, object2, _internal_visited = /* @__PURE__ */ new WeakSet()) {
|
|
if (isPrimitive(object1) || isPrimitive(object2)) {
|
|
return object1 === object2;
|
|
}
|
|
if (isDateObject(object1) && isDateObject(object2)) {
|
|
return object1.getTime() === object2.getTime();
|
|
}
|
|
const keys1 = Object.keys(object1);
|
|
const keys2 = Object.keys(object2);
|
|
if (keys1.length !== keys2.length) {
|
|
return false;
|
|
}
|
|
if (_internal_visited.has(object1) || _internal_visited.has(object2)) {
|
|
return true;
|
|
}
|
|
_internal_visited.add(object1);
|
|
_internal_visited.add(object2);
|
|
for (const key of keys1) {
|
|
const val1 = object1[key];
|
|
if (!keys2.includes(key)) {
|
|
return false;
|
|
}
|
|
if (key !== "ref") {
|
|
const val2 = object2[key];
|
|
if (isDateObject(val1) && isDateObject(val2) || isObject(val1) && isObject(val2) || Array.isArray(val1) && Array.isArray(val2) ? !deepEqual(val1, val2, _internal_visited) : val1 !== val2) {
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
var isEmptyObject = (value) => isObject(value) && !Object.keys(value).length;
|
|
var isFileInput = (element) => element.type === "file";
|
|
var isFunction = (value) => typeof value === "function";
|
|
var isHTMLElement = (value) => {
|
|
if (!isWeb) {
|
|
return false;
|
|
}
|
|
const owner = value ? value.ownerDocument : 0;
|
|
return value instanceof (owner && owner.defaultView ? owner.defaultView.HTMLElement : HTMLElement);
|
|
};
|
|
var isMultipleSelect = (element) => element.type === `select-multiple`;
|
|
var isRadioInput = (element) => element.type === "radio";
|
|
var isRadioOrCheckbox = (ref) => isRadioInput(ref) || isCheckBoxInput(ref);
|
|
var live = (ref) => isHTMLElement(ref) && ref.isConnected;
|
|
function baseGet(object, updatePath) {
|
|
const length = updatePath.slice(0, -1).length;
|
|
let index = 0;
|
|
while (index < length) {
|
|
object = isUndefined(object) ? index++ : object[updatePath[index++]];
|
|
}
|
|
return object;
|
|
}
|
|
function isEmptyArray(obj) {
|
|
for (const key in obj) {
|
|
if (obj.hasOwnProperty(key) && !isUndefined(obj[key])) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
function unset(object, path) {
|
|
const paths = Array.isArray(path) ? path : isKey(path) ? [path] : stringToPath(path);
|
|
const childObject = paths.length === 1 ? object : baseGet(object, paths);
|
|
const index = paths.length - 1;
|
|
const key = paths[index];
|
|
if (childObject) {
|
|
delete childObject[key];
|
|
}
|
|
if (index !== 0 && (isObject(childObject) && isEmptyObject(childObject) || Array.isArray(childObject) && isEmptyArray(childObject))) {
|
|
unset(object, paths.slice(0, -1));
|
|
}
|
|
return object;
|
|
}
|
|
var objectHasFunction = (data) => {
|
|
for (const key in data) {
|
|
if (isFunction(data[key])) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
};
|
|
function markFieldsDirty(data, fields = {}) {
|
|
const isParentNodeArray = Array.isArray(data);
|
|
if (isObject(data) || isParentNodeArray) {
|
|
for (const key in data) {
|
|
if (Array.isArray(data[key]) || isObject(data[key]) && !objectHasFunction(data[key])) {
|
|
fields[key] = Array.isArray(data[key]) ? [] : {};
|
|
markFieldsDirty(data[key], fields[key]);
|
|
} else if (!isNullOrUndefined(data[key])) {
|
|
fields[key] = true;
|
|
}
|
|
}
|
|
}
|
|
return fields;
|
|
}
|
|
function getDirtyFieldsFromDefaultValues(data, formValues, dirtyFieldsFromValues) {
|
|
const isParentNodeArray = Array.isArray(data);
|
|
if (isObject(data) || isParentNodeArray) {
|
|
for (const key in data) {
|
|
if (Array.isArray(data[key]) || isObject(data[key]) && !objectHasFunction(data[key])) {
|
|
if (isUndefined(formValues) || isPrimitive(dirtyFieldsFromValues[key])) {
|
|
dirtyFieldsFromValues[key] = Array.isArray(data[key]) ? markFieldsDirty(data[key], []) : { ...markFieldsDirty(data[key]) };
|
|
} else {
|
|
getDirtyFieldsFromDefaultValues(data[key], isNullOrUndefined(formValues) ? {} : formValues[key], dirtyFieldsFromValues[key]);
|
|
}
|
|
} else {
|
|
dirtyFieldsFromValues[key] = !deepEqual(data[key], formValues[key]);
|
|
}
|
|
}
|
|
}
|
|
return dirtyFieldsFromValues;
|
|
}
|
|
var getDirtyFields = (defaultValues, formValues) => getDirtyFieldsFromDefaultValues(defaultValues, formValues, markFieldsDirty(formValues));
|
|
var defaultResult = {
|
|
value: false,
|
|
isValid: false
|
|
};
|
|
var validResult = { value: true, isValid: true };
|
|
var getCheckboxValue = (options) => {
|
|
if (Array.isArray(options)) {
|
|
if (options.length > 1) {
|
|
const values = options.filter((option) => option && option.checked && !option.disabled).map((option) => option.value);
|
|
return { value: values, isValid: !!values.length };
|
|
}
|
|
return options[0].checked && !options[0].disabled ? (
|
|
// @ts-expect-error expected to work in the browser
|
|
options[0].attributes && !isUndefined(options[0].attributes.value) ? isUndefined(options[0].value) || options[0].value === "" ? validResult : { value: options[0].value, isValid: true } : validResult
|
|
) : defaultResult;
|
|
}
|
|
return defaultResult;
|
|
};
|
|
var getFieldValueAs = (value, { valueAsNumber, valueAsDate, setValueAs }) => isUndefined(value) ? value : valueAsNumber ? value === "" ? NaN : value ? +value : value : valueAsDate && isString(value) ? new Date(value) : setValueAs ? setValueAs(value) : value;
|
|
var defaultReturn = {
|
|
isValid: false,
|
|
value: null
|
|
};
|
|
var getRadioValue = (options) => Array.isArray(options) ? options.reduce((previous, option) => option && option.checked && !option.disabled ? {
|
|
isValid: true,
|
|
value: option.value
|
|
} : previous, defaultReturn) : defaultReturn;
|
|
function getFieldValue(_f) {
|
|
const ref = _f.ref;
|
|
if (isFileInput(ref)) {
|
|
return ref.files;
|
|
}
|
|
if (isRadioInput(ref)) {
|
|
return getRadioValue(_f.refs).value;
|
|
}
|
|
if (isMultipleSelect(ref)) {
|
|
return [...ref.selectedOptions].map(({ value }) => value);
|
|
}
|
|
if (isCheckBoxInput(ref)) {
|
|
return getCheckboxValue(_f.refs).value;
|
|
}
|
|
return getFieldValueAs(isUndefined(ref.value) ? _f.ref.value : ref.value, _f);
|
|
}
|
|
var getResolverOptions = (fieldsNames, _fields, criteriaMode, shouldUseNativeValidation) => {
|
|
const fields = {};
|
|
for (const name of fieldsNames) {
|
|
const field = get(_fields, name);
|
|
field && set(fields, name, field._f);
|
|
}
|
|
return {
|
|
criteriaMode,
|
|
names: [...fieldsNames],
|
|
fields,
|
|
shouldUseNativeValidation
|
|
};
|
|
};
|
|
var isRegex = (value) => value instanceof RegExp;
|
|
var getRuleValue = (rule) => isUndefined(rule) ? rule : isRegex(rule) ? rule.source : isObject(rule) ? isRegex(rule.value) ? rule.value.source : rule.value : rule;
|
|
var getValidationModes = (mode) => ({
|
|
isOnSubmit: !mode || mode === VALIDATION_MODE.onSubmit,
|
|
isOnBlur: mode === VALIDATION_MODE.onBlur,
|
|
isOnChange: mode === VALIDATION_MODE.onChange,
|
|
isOnAll: mode === VALIDATION_MODE.all,
|
|
isOnTouch: mode === VALIDATION_MODE.onTouched
|
|
});
|
|
var ASYNC_FUNCTION = "AsyncFunction";
|
|
var hasPromiseValidation = (fieldReference) => !!fieldReference && !!fieldReference.validate && !!(isFunction(fieldReference.validate) && fieldReference.validate.constructor.name === ASYNC_FUNCTION || isObject(fieldReference.validate) && Object.values(fieldReference.validate).find((validateFunction) => validateFunction.constructor.name === ASYNC_FUNCTION));
|
|
var hasValidation = (options) => options.mount && (options.required || options.min || options.max || options.maxLength || options.minLength || options.pattern || options.validate);
|
|
var isWatched = (name, _names, isBlurEvent) => !isBlurEvent && (_names.watchAll || _names.watch.has(name) || [..._names.watch].some((watchName) => name.startsWith(watchName) && /^\.\w+/.test(name.slice(watchName.length))));
|
|
var iterateFieldsByAction = (fields, action, fieldsNames, abortEarly) => {
|
|
for (const key of fieldsNames || Object.keys(fields)) {
|
|
const field = get(fields, key);
|
|
if (field) {
|
|
const { _f, ...currentField } = field;
|
|
if (_f) {
|
|
if (_f.refs && _f.refs[0] && action(_f.refs[0], key) && !abortEarly) {
|
|
return true;
|
|
} else if (_f.ref && action(_f.ref, _f.name) && !abortEarly) {
|
|
return true;
|
|
} else {
|
|
if (iterateFieldsByAction(currentField, action)) {
|
|
break;
|
|
}
|
|
}
|
|
} else if (isObject(currentField)) {
|
|
if (iterateFieldsByAction(currentField, action)) {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return;
|
|
};
|
|
function schemaErrorLookup(errors, _fields, name) {
|
|
const error = get(errors, name);
|
|
if (error || isKey(name)) {
|
|
return {
|
|
error,
|
|
name
|
|
};
|
|
}
|
|
const names = name.split(".");
|
|
while (names.length) {
|
|
const fieldName = names.join(".");
|
|
const field = get(_fields, fieldName);
|
|
const foundError = get(errors, fieldName);
|
|
if (field && !Array.isArray(field) && name !== fieldName) {
|
|
return { name };
|
|
}
|
|
if (foundError && foundError.type) {
|
|
return {
|
|
name: fieldName,
|
|
error: foundError
|
|
};
|
|
}
|
|
if (foundError && foundError.root && foundError.root.type) {
|
|
return {
|
|
name: `${fieldName}.root`,
|
|
error: foundError.root
|
|
};
|
|
}
|
|
names.pop();
|
|
}
|
|
return {
|
|
name
|
|
};
|
|
}
|
|
var shouldRenderFormState = (formStateData, _proxyFormState, updateFormState, isRoot) => {
|
|
updateFormState(formStateData);
|
|
const { name, ...formState } = formStateData;
|
|
return isEmptyObject(formState) || Object.keys(formState).length >= Object.keys(_proxyFormState).length || Object.keys(formState).find((key) => _proxyFormState[key] === (!isRoot || VALIDATION_MODE.all));
|
|
};
|
|
var shouldSubscribeByName = (name, signalName, exact) => !name || !signalName || name === signalName || convertToArrayPayload(name).some((currentName) => currentName && (exact ? currentName === signalName : currentName.startsWith(signalName) || signalName.startsWith(currentName)));
|
|
var skipValidation = (isBlurEvent, isTouched, isSubmitted, reValidateMode, mode) => {
|
|
if (mode.isOnAll) {
|
|
return false;
|
|
} else if (!isSubmitted && mode.isOnTouch) {
|
|
return !(isTouched || isBlurEvent);
|
|
} else if (isSubmitted ? reValidateMode.isOnBlur : mode.isOnBlur) {
|
|
return !isBlurEvent;
|
|
} else if (isSubmitted ? reValidateMode.isOnChange : mode.isOnChange) {
|
|
return isBlurEvent;
|
|
}
|
|
return true;
|
|
};
|
|
var unsetEmptyArray = (ref, name) => !compact(get(ref, name)).length && unset(ref, name);
|
|
var updateFieldArrayRootError = (errors, error, name) => {
|
|
const fieldArrayErrors = convertToArrayPayload(get(errors, name));
|
|
set(fieldArrayErrors, "root", error[name]);
|
|
set(errors, name, fieldArrayErrors);
|
|
return errors;
|
|
};
|
|
var isMessage = (value) => isString(value);
|
|
function getValidateError(result, ref, type = "validate") {
|
|
if (isMessage(result) || Array.isArray(result) && result.every(isMessage) || isBoolean(result) && !result) {
|
|
return {
|
|
type,
|
|
message: isMessage(result) ? result : "",
|
|
ref
|
|
};
|
|
}
|
|
}
|
|
var getValueAndMessage = (validationData) => isObject(validationData) && !isRegex(validationData) ? validationData : {
|
|
value: validationData,
|
|
message: ""
|
|
};
|
|
var validateField = async (field, disabledFieldNames, formValues, validateAllFieldCriteria, shouldUseNativeValidation, isFieldArray) => {
|
|
const { ref, refs, required, maxLength, minLength, min, max, pattern, validate, name, valueAsNumber, mount } = field._f;
|
|
const inputValue = get(formValues, name);
|
|
if (!mount || disabledFieldNames.has(name)) {
|
|
return {};
|
|
}
|
|
const inputRef = refs ? refs[0] : ref;
|
|
const setCustomValidity = (message) => {
|
|
if (shouldUseNativeValidation && inputRef.reportValidity) {
|
|
inputRef.setCustomValidity(isBoolean(message) ? "" : message || "");
|
|
inputRef.reportValidity();
|
|
}
|
|
};
|
|
const error = {};
|
|
const isRadio = isRadioInput(ref);
|
|
const isCheckBox = isCheckBoxInput(ref);
|
|
const isRadioOrCheckbox2 = isRadio || isCheckBox;
|
|
const isEmpty = (valueAsNumber || isFileInput(ref)) && isUndefined(ref.value) && isUndefined(inputValue) || isHTMLElement(ref) && ref.value === "" || inputValue === "" || Array.isArray(inputValue) && !inputValue.length;
|
|
const appendErrorsCurry = appendErrors.bind(null, name, validateAllFieldCriteria, error);
|
|
const getMinMaxMessage = (exceedMax, maxLengthMessage, minLengthMessage, maxType = INPUT_VALIDATION_RULES.maxLength, minType = INPUT_VALIDATION_RULES.minLength) => {
|
|
const message = exceedMax ? maxLengthMessage : minLengthMessage;
|
|
error[name] = {
|
|
type: exceedMax ? maxType : minType,
|
|
message,
|
|
ref,
|
|
...appendErrorsCurry(exceedMax ? maxType : minType, message)
|
|
};
|
|
};
|
|
if (isFieldArray ? !Array.isArray(inputValue) || !inputValue.length : required && (!isRadioOrCheckbox2 && (isEmpty || isNullOrUndefined(inputValue)) || isBoolean(inputValue) && !inputValue || isCheckBox && !getCheckboxValue(refs).isValid || isRadio && !getRadioValue(refs).isValid)) {
|
|
const { value, message } = isMessage(required) ? { value: !!required, message: required } : getValueAndMessage(required);
|
|
if (value) {
|
|
error[name] = {
|
|
type: INPUT_VALIDATION_RULES.required,
|
|
message,
|
|
ref: inputRef,
|
|
...appendErrorsCurry(INPUT_VALIDATION_RULES.required, message)
|
|
};
|
|
if (!validateAllFieldCriteria) {
|
|
setCustomValidity(message);
|
|
return error;
|
|
}
|
|
}
|
|
}
|
|
if (!isEmpty && (!isNullOrUndefined(min) || !isNullOrUndefined(max))) {
|
|
let exceedMax;
|
|
let exceedMin;
|
|
const maxOutput = getValueAndMessage(max);
|
|
const minOutput = getValueAndMessage(min);
|
|
if (!isNullOrUndefined(inputValue) && !isNaN(inputValue)) {
|
|
const valueNumber = ref.valueAsNumber || (inputValue ? +inputValue : inputValue);
|
|
if (!isNullOrUndefined(maxOutput.value)) {
|
|
exceedMax = valueNumber > maxOutput.value;
|
|
}
|
|
if (!isNullOrUndefined(minOutput.value)) {
|
|
exceedMin = valueNumber < minOutput.value;
|
|
}
|
|
} else {
|
|
const valueDate = ref.valueAsDate || new Date(inputValue);
|
|
const convertTimeToDate = (time) => /* @__PURE__ */ new Date((/* @__PURE__ */ new Date()).toDateString() + " " + time);
|
|
const isTime = ref.type == "time";
|
|
const isWeek = ref.type == "week";
|
|
if (isString(maxOutput.value) && inputValue) {
|
|
exceedMax = isTime ? convertTimeToDate(inputValue) > convertTimeToDate(maxOutput.value) : isWeek ? inputValue > maxOutput.value : valueDate > new Date(maxOutput.value);
|
|
}
|
|
if (isString(minOutput.value) && inputValue) {
|
|
exceedMin = isTime ? convertTimeToDate(inputValue) < convertTimeToDate(minOutput.value) : isWeek ? inputValue < minOutput.value : valueDate < new Date(minOutput.value);
|
|
}
|
|
}
|
|
if (exceedMax || exceedMin) {
|
|
getMinMaxMessage(!!exceedMax, maxOutput.message, minOutput.message, INPUT_VALIDATION_RULES.max, INPUT_VALIDATION_RULES.min);
|
|
if (!validateAllFieldCriteria) {
|
|
setCustomValidity(error[name].message);
|
|
return error;
|
|
}
|
|
}
|
|
}
|
|
if ((maxLength || minLength) && !isEmpty && (isString(inputValue) || isFieldArray && Array.isArray(inputValue))) {
|
|
const maxLengthOutput = getValueAndMessage(maxLength);
|
|
const minLengthOutput = getValueAndMessage(minLength);
|
|
const exceedMax = !isNullOrUndefined(maxLengthOutput.value) && inputValue.length > +maxLengthOutput.value;
|
|
const exceedMin = !isNullOrUndefined(minLengthOutput.value) && inputValue.length < +minLengthOutput.value;
|
|
if (exceedMax || exceedMin) {
|
|
getMinMaxMessage(exceedMax, maxLengthOutput.message, minLengthOutput.message);
|
|
if (!validateAllFieldCriteria) {
|
|
setCustomValidity(error[name].message);
|
|
return error;
|
|
}
|
|
}
|
|
}
|
|
if (pattern && !isEmpty && isString(inputValue)) {
|
|
const { value: patternValue, message } = getValueAndMessage(pattern);
|
|
if (isRegex(patternValue) && !inputValue.match(patternValue)) {
|
|
error[name] = {
|
|
type: INPUT_VALIDATION_RULES.pattern,
|
|
message,
|
|
ref,
|
|
...appendErrorsCurry(INPUT_VALIDATION_RULES.pattern, message)
|
|
};
|
|
if (!validateAllFieldCriteria) {
|
|
setCustomValidity(message);
|
|
return error;
|
|
}
|
|
}
|
|
}
|
|
if (validate) {
|
|
if (isFunction(validate)) {
|
|
const result = await validate(inputValue, formValues);
|
|
const validateError = getValidateError(result, inputRef);
|
|
if (validateError) {
|
|
error[name] = {
|
|
...validateError,
|
|
...appendErrorsCurry(INPUT_VALIDATION_RULES.validate, validateError.message)
|
|
};
|
|
if (!validateAllFieldCriteria) {
|
|
setCustomValidity(validateError.message);
|
|
return error;
|
|
}
|
|
}
|
|
} else if (isObject(validate)) {
|
|
let validationResult = {};
|
|
for (const key in validate) {
|
|
if (!isEmptyObject(validationResult) && !validateAllFieldCriteria) {
|
|
break;
|
|
}
|
|
const validateError = getValidateError(await validate[key](inputValue, formValues), inputRef, key);
|
|
if (validateError) {
|
|
validationResult = {
|
|
...validateError,
|
|
...appendErrorsCurry(key, validateError.message)
|
|
};
|
|
setCustomValidity(validateError.message);
|
|
if (validateAllFieldCriteria) {
|
|
error[name] = validationResult;
|
|
}
|
|
}
|
|
}
|
|
if (!isEmptyObject(validationResult)) {
|
|
error[name] = {
|
|
ref: inputRef,
|
|
...validationResult
|
|
};
|
|
if (!validateAllFieldCriteria) {
|
|
return error;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
setCustomValidity(true);
|
|
return error;
|
|
};
|
|
var defaultOptions = {
|
|
mode: VALIDATION_MODE.onSubmit,
|
|
reValidateMode: VALIDATION_MODE.onChange,
|
|
shouldFocusError: true
|
|
};
|
|
function createFormControl(props = {}) {
|
|
let _options = {
|
|
...defaultOptions,
|
|
...props
|
|
};
|
|
let _formState = {
|
|
submitCount: 0,
|
|
isDirty: false,
|
|
isReady: false,
|
|
isLoading: isFunction(_options.defaultValues),
|
|
isValidating: false,
|
|
isSubmitted: false,
|
|
isSubmitting: false,
|
|
isSubmitSuccessful: false,
|
|
isValid: false,
|
|
touchedFields: {},
|
|
dirtyFields: {},
|
|
validatingFields: {},
|
|
errors: _options.errors || {},
|
|
disabled: _options.disabled || false
|
|
};
|
|
let _fields = {};
|
|
let _defaultValues = isObject(_options.defaultValues) || isObject(_options.values) ? cloneObject(_options.defaultValues || _options.values) || {} : {};
|
|
let _formValues = _options.shouldUnregister ? {} : cloneObject(_defaultValues);
|
|
let _state = {
|
|
action: false,
|
|
mount: false,
|
|
watch: false
|
|
};
|
|
let _names = {
|
|
mount: /* @__PURE__ */ new Set(),
|
|
disabled: /* @__PURE__ */ new Set(),
|
|
unMount: /* @__PURE__ */ new Set(),
|
|
array: /* @__PURE__ */ new Set(),
|
|
watch: /* @__PURE__ */ new Set()
|
|
};
|
|
let delayErrorCallback;
|
|
let timer = 0;
|
|
const _proxyFormState = {
|
|
isDirty: false,
|
|
dirtyFields: false,
|
|
validatingFields: false,
|
|
touchedFields: false,
|
|
isValidating: false,
|
|
isValid: false,
|
|
errors: false
|
|
};
|
|
let _proxySubscribeFormState = {
|
|
..._proxyFormState
|
|
};
|
|
const _subjects = {
|
|
array: createSubject(),
|
|
state: createSubject()
|
|
};
|
|
const shouldDisplayAllAssociatedErrors = _options.criteriaMode === VALIDATION_MODE.all;
|
|
const debounce = (callback) => (wait) => {
|
|
clearTimeout(timer);
|
|
timer = setTimeout(callback, wait);
|
|
};
|
|
const _setValid = async (shouldUpdateValid) => {
|
|
if (!_options.disabled && (_proxyFormState.isValid || _proxySubscribeFormState.isValid || shouldUpdateValid)) {
|
|
const isValid = _options.resolver ? isEmptyObject((await _runSchema()).errors) : await executeBuiltInValidation(_fields, true);
|
|
if (isValid !== _formState.isValid) {
|
|
_subjects.state.next({
|
|
isValid
|
|
});
|
|
}
|
|
}
|
|
};
|
|
const _updateIsValidating = (names, isValidating) => {
|
|
if (!_options.disabled && (_proxyFormState.isValidating || _proxyFormState.validatingFields || _proxySubscribeFormState.isValidating || _proxySubscribeFormState.validatingFields)) {
|
|
(names || Array.from(_names.mount)).forEach((name) => {
|
|
if (name) {
|
|
isValidating ? set(_formState.validatingFields, name, isValidating) : unset(_formState.validatingFields, name);
|
|
}
|
|
});
|
|
_subjects.state.next({
|
|
validatingFields: _formState.validatingFields,
|
|
isValidating: !isEmptyObject(_formState.validatingFields)
|
|
});
|
|
}
|
|
};
|
|
const _setFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
|
|
if (args && method && !_options.disabled) {
|
|
_state.action = true;
|
|
if (shouldUpdateFieldsAndState && Array.isArray(get(_fields, name))) {
|
|
const fieldValues = method(get(_fields, name), args.argA, args.argB);
|
|
shouldSetValues && set(_fields, name, fieldValues);
|
|
}
|
|
if (shouldUpdateFieldsAndState && Array.isArray(get(_formState.errors, name))) {
|
|
const errors = method(get(_formState.errors, name), args.argA, args.argB);
|
|
shouldSetValues && set(_formState.errors, name, errors);
|
|
unsetEmptyArray(_formState.errors, name);
|
|
}
|
|
if ((_proxyFormState.touchedFields || _proxySubscribeFormState.touchedFields) && shouldUpdateFieldsAndState && Array.isArray(get(_formState.touchedFields, name))) {
|
|
const touchedFields = method(get(_formState.touchedFields, name), args.argA, args.argB);
|
|
shouldSetValues && set(_formState.touchedFields, name, touchedFields);
|
|
}
|
|
if (_proxyFormState.dirtyFields || _proxySubscribeFormState.dirtyFields) {
|
|
_formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
|
|
}
|
|
_subjects.state.next({
|
|
name,
|
|
isDirty: _getDirty(name, values),
|
|
dirtyFields: _formState.dirtyFields,
|
|
errors: _formState.errors,
|
|
isValid: _formState.isValid
|
|
});
|
|
} else {
|
|
set(_formValues, name, values);
|
|
}
|
|
};
|
|
const updateErrors = (name, error) => {
|
|
set(_formState.errors, name, error);
|
|
_subjects.state.next({
|
|
errors: _formState.errors
|
|
});
|
|
};
|
|
const _setErrors = (errors) => {
|
|
_formState.errors = errors;
|
|
_subjects.state.next({
|
|
errors: _formState.errors,
|
|
isValid: false
|
|
});
|
|
};
|
|
const updateValidAndValue = (name, shouldSkipSetValueAs, value, ref) => {
|
|
const field = get(_fields, name);
|
|
if (field) {
|
|
const defaultValue = get(_formValues, name, isUndefined(value) ? get(_defaultValues, name) : value);
|
|
isUndefined(defaultValue) || ref && ref.defaultChecked || shouldSkipSetValueAs ? set(_formValues, name, shouldSkipSetValueAs ? defaultValue : getFieldValue(field._f)) : setFieldValue(name, defaultValue);
|
|
_state.mount && _setValid();
|
|
}
|
|
};
|
|
const updateTouchAndDirty = (name, fieldValue, isBlurEvent, shouldDirty, shouldRender) => {
|
|
let shouldUpdateField = false;
|
|
let isPreviousDirty = false;
|
|
const output = {
|
|
name
|
|
};
|
|
if (!_options.disabled) {
|
|
if (!isBlurEvent || shouldDirty) {
|
|
if (_proxyFormState.isDirty || _proxySubscribeFormState.isDirty) {
|
|
isPreviousDirty = _formState.isDirty;
|
|
_formState.isDirty = output.isDirty = _getDirty();
|
|
shouldUpdateField = isPreviousDirty !== output.isDirty;
|
|
}
|
|
const isCurrentFieldPristine = deepEqual(get(_defaultValues, name), fieldValue);
|
|
isPreviousDirty = !!get(_formState.dirtyFields, name);
|
|
isCurrentFieldPristine ? unset(_formState.dirtyFields, name) : set(_formState.dirtyFields, name, true);
|
|
output.dirtyFields = _formState.dirtyFields;
|
|
shouldUpdateField = shouldUpdateField || (_proxyFormState.dirtyFields || _proxySubscribeFormState.dirtyFields) && isPreviousDirty !== !isCurrentFieldPristine;
|
|
}
|
|
if (isBlurEvent) {
|
|
const isPreviousFieldTouched = get(_formState.touchedFields, name);
|
|
if (!isPreviousFieldTouched) {
|
|
set(_formState.touchedFields, name, isBlurEvent);
|
|
output.touchedFields = _formState.touchedFields;
|
|
shouldUpdateField = shouldUpdateField || (_proxyFormState.touchedFields || _proxySubscribeFormState.touchedFields) && isPreviousFieldTouched !== isBlurEvent;
|
|
}
|
|
}
|
|
shouldUpdateField && shouldRender && _subjects.state.next(output);
|
|
}
|
|
return shouldUpdateField ? output : {};
|
|
};
|
|
const shouldRenderByError = (name, isValid, error, fieldState) => {
|
|
const previousFieldError = get(_formState.errors, name);
|
|
const shouldUpdateValid = (_proxyFormState.isValid || _proxySubscribeFormState.isValid) && isBoolean(isValid) && _formState.isValid !== isValid;
|
|
if (_options.delayError && error) {
|
|
delayErrorCallback = debounce(() => updateErrors(name, error));
|
|
delayErrorCallback(_options.delayError);
|
|
} else {
|
|
clearTimeout(timer);
|
|
delayErrorCallback = null;
|
|
error ? set(_formState.errors, name, error) : unset(_formState.errors, name);
|
|
}
|
|
if ((error ? !deepEqual(previousFieldError, error) : previousFieldError) || !isEmptyObject(fieldState) || shouldUpdateValid) {
|
|
const updatedFormState = {
|
|
...fieldState,
|
|
...shouldUpdateValid && isBoolean(isValid) ? { isValid } : {},
|
|
errors: _formState.errors,
|
|
name
|
|
};
|
|
_formState = {
|
|
..._formState,
|
|
...updatedFormState
|
|
};
|
|
_subjects.state.next(updatedFormState);
|
|
}
|
|
};
|
|
const _runSchema = async (name) => {
|
|
_updateIsValidating(name, true);
|
|
const result = await _options.resolver(_formValues, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation));
|
|
_updateIsValidating(name);
|
|
return result;
|
|
};
|
|
const executeSchemaAndUpdateState = async (names) => {
|
|
const { errors } = await _runSchema(names);
|
|
if (names) {
|
|
for (const name of names) {
|
|
const error = get(errors, name);
|
|
error ? set(_formState.errors, name, error) : unset(_formState.errors, name);
|
|
}
|
|
} else {
|
|
_formState.errors = errors;
|
|
}
|
|
return errors;
|
|
};
|
|
const executeBuiltInValidation = async (fields, shouldOnlyCheckValid, context = {
|
|
valid: true
|
|
}) => {
|
|
for (const name in fields) {
|
|
const field = fields[name];
|
|
if (field) {
|
|
const { _f, ...fieldValue } = field;
|
|
if (_f) {
|
|
const isFieldArrayRoot = _names.array.has(_f.name);
|
|
const isPromiseFunction = field._f && hasPromiseValidation(field._f);
|
|
if (isPromiseFunction && _proxyFormState.validatingFields) {
|
|
_updateIsValidating([name], true);
|
|
}
|
|
const fieldError = await validateField(field, _names.disabled, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation && !shouldOnlyCheckValid, isFieldArrayRoot);
|
|
if (isPromiseFunction && _proxyFormState.validatingFields) {
|
|
_updateIsValidating([name]);
|
|
}
|
|
if (fieldError[_f.name]) {
|
|
context.valid = false;
|
|
if (shouldOnlyCheckValid) {
|
|
break;
|
|
}
|
|
}
|
|
!shouldOnlyCheckValid && (get(fieldError, _f.name) ? isFieldArrayRoot ? updateFieldArrayRootError(_formState.errors, fieldError, _f.name) : set(_formState.errors, _f.name, fieldError[_f.name]) : unset(_formState.errors, _f.name));
|
|
}
|
|
!isEmptyObject(fieldValue) && await executeBuiltInValidation(fieldValue, shouldOnlyCheckValid, context);
|
|
}
|
|
}
|
|
return context.valid;
|
|
};
|
|
const _removeUnmounted = () => {
|
|
for (const name of _names.unMount) {
|
|
const field = get(_fields, name);
|
|
field && (field._f.refs ? field._f.refs.every((ref) => !live(ref)) : !live(field._f.ref)) && unregister(name);
|
|
}
|
|
_names.unMount = /* @__PURE__ */ new Set();
|
|
};
|
|
const _getDirty = (name, data) => !_options.disabled && (name && data && set(_formValues, name, data), !deepEqual(getValues(), _defaultValues));
|
|
const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
|
|
..._state.mount ? _formValues : isUndefined(defaultValue) ? _defaultValues : isString(names) ? { [names]: defaultValue } : defaultValue
|
|
}, isGlobal, defaultValue);
|
|
const _getFieldArray = (name) => compact(get(_state.mount ? _formValues : _defaultValues, name, _options.shouldUnregister ? get(_defaultValues, name, []) : []));
|
|
const setFieldValue = (name, value, options = {}) => {
|
|
const field = get(_fields, name);
|
|
let fieldValue = value;
|
|
if (field) {
|
|
const fieldReference = field._f;
|
|
if (fieldReference) {
|
|
!fieldReference.disabled && set(_formValues, name, getFieldValueAs(value, fieldReference));
|
|
fieldValue = isHTMLElement(fieldReference.ref) && isNullOrUndefined(value) ? "" : value;
|
|
if (isMultipleSelect(fieldReference.ref)) {
|
|
[...fieldReference.ref.options].forEach((optionRef) => optionRef.selected = fieldValue.includes(optionRef.value));
|
|
} else if (fieldReference.refs) {
|
|
if (isCheckBoxInput(fieldReference.ref)) {
|
|
fieldReference.refs.forEach((checkboxRef) => {
|
|
if (!checkboxRef.defaultChecked || !checkboxRef.disabled) {
|
|
if (Array.isArray(fieldValue)) {
|
|
checkboxRef.checked = !!fieldValue.find((data) => data === checkboxRef.value);
|
|
} else {
|
|
checkboxRef.checked = fieldValue === checkboxRef.value || !!fieldValue;
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
fieldReference.refs.forEach((radioRef) => radioRef.checked = radioRef.value === fieldValue);
|
|
}
|
|
} else if (isFileInput(fieldReference.ref)) {
|
|
fieldReference.ref.value = "";
|
|
} else {
|
|
fieldReference.ref.value = fieldValue;
|
|
if (!fieldReference.ref.type) {
|
|
_subjects.state.next({
|
|
name,
|
|
values: cloneObject(_formValues)
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
(options.shouldDirty || options.shouldTouch) && updateTouchAndDirty(name, fieldValue, options.shouldTouch, options.shouldDirty, true);
|
|
options.shouldValidate && trigger(name);
|
|
};
|
|
const setValues = (name, value, options) => {
|
|
for (const fieldKey in value) {
|
|
if (!value.hasOwnProperty(fieldKey)) {
|
|
return;
|
|
}
|
|
const fieldValue = value[fieldKey];
|
|
const fieldName = name + "." + fieldKey;
|
|
const field = get(_fields, fieldName);
|
|
(_names.array.has(name) || isObject(fieldValue) || field && !field._f) && !isDateObject(fieldValue) ? setValues(fieldName, fieldValue, options) : setFieldValue(fieldName, fieldValue, options);
|
|
}
|
|
};
|
|
const setValue = (name, value, options = {}) => {
|
|
const field = get(_fields, name);
|
|
const isFieldArray = _names.array.has(name);
|
|
const cloneValue = cloneObject(value);
|
|
set(_formValues, name, cloneValue);
|
|
if (isFieldArray) {
|
|
_subjects.array.next({
|
|
name,
|
|
values: cloneObject(_formValues)
|
|
});
|
|
if ((_proxyFormState.isDirty || _proxyFormState.dirtyFields || _proxySubscribeFormState.isDirty || _proxySubscribeFormState.dirtyFields) && options.shouldDirty) {
|
|
_subjects.state.next({
|
|
name,
|
|
dirtyFields: getDirtyFields(_defaultValues, _formValues),
|
|
isDirty: _getDirty(name, cloneValue)
|
|
});
|
|
}
|
|
} else {
|
|
field && !field._f && !isNullOrUndefined(cloneValue) ? setValues(name, cloneValue, options) : setFieldValue(name, cloneValue, options);
|
|
}
|
|
isWatched(name, _names) && _subjects.state.next({ ..._formState });
|
|
_subjects.state.next({
|
|
name: _state.mount ? name : void 0,
|
|
values: cloneObject(_formValues)
|
|
});
|
|
};
|
|
const onChange = async (event) => {
|
|
_state.mount = true;
|
|
const target = event.target;
|
|
let name = target.name;
|
|
let isFieldValueUpdated = true;
|
|
const field = get(_fields, name);
|
|
const _updateIsFieldValueUpdated = (fieldValue) => {
|
|
isFieldValueUpdated = Number.isNaN(fieldValue) || isDateObject(fieldValue) && isNaN(fieldValue.getTime()) || deepEqual(fieldValue, get(_formValues, name, fieldValue));
|
|
};
|
|
const validationModeBeforeSubmit = getValidationModes(_options.mode);
|
|
const validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
|
|
if (field) {
|
|
let error;
|
|
let isValid;
|
|
const fieldValue = target.type ? getFieldValue(field._f) : getEventValue(event);
|
|
const isBlurEvent = event.type === EVENTS.BLUR || event.type === EVENTS.FOCUS_OUT;
|
|
const shouldSkipValidation = !hasValidation(field._f) && !_options.resolver && !get(_formState.errors, name) && !field._f.deps || skipValidation(isBlurEvent, get(_formState.touchedFields, name), _formState.isSubmitted, validationModeAfterSubmit, validationModeBeforeSubmit);
|
|
const watched = isWatched(name, _names, isBlurEvent);
|
|
set(_formValues, name, fieldValue);
|
|
if (isBlurEvent) {
|
|
field._f.onBlur && field._f.onBlur(event);
|
|
delayErrorCallback && delayErrorCallback(0);
|
|
} else if (field._f.onChange) {
|
|
field._f.onChange(event);
|
|
}
|
|
const fieldState = updateTouchAndDirty(name, fieldValue, isBlurEvent);
|
|
const shouldRender = !isEmptyObject(fieldState) || watched;
|
|
!isBlurEvent && _subjects.state.next({
|
|
name,
|
|
type: event.type,
|
|
values: cloneObject(_formValues)
|
|
});
|
|
if (shouldSkipValidation) {
|
|
if (_proxyFormState.isValid || _proxySubscribeFormState.isValid) {
|
|
if (_options.mode === "onBlur") {
|
|
if (isBlurEvent) {
|
|
_setValid();
|
|
}
|
|
} else if (!isBlurEvent) {
|
|
_setValid();
|
|
}
|
|
}
|
|
return shouldRender && _subjects.state.next({ name, ...watched ? {} : fieldState });
|
|
}
|
|
!isBlurEvent && watched && _subjects.state.next({ ..._formState });
|
|
if (_options.resolver) {
|
|
const { errors } = await _runSchema([name]);
|
|
_updateIsFieldValueUpdated(fieldValue);
|
|
if (isFieldValueUpdated) {
|
|
const previousErrorLookupResult = schemaErrorLookup(_formState.errors, _fields, name);
|
|
const errorLookupResult = schemaErrorLookup(errors, _fields, previousErrorLookupResult.name || name);
|
|
error = errorLookupResult.error;
|
|
name = errorLookupResult.name;
|
|
isValid = isEmptyObject(errors);
|
|
}
|
|
} else {
|
|
_updateIsValidating([name], true);
|
|
error = (await validateField(field, _names.disabled, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
|
|
_updateIsValidating([name]);
|
|
_updateIsFieldValueUpdated(fieldValue);
|
|
if (isFieldValueUpdated) {
|
|
if (error) {
|
|
isValid = false;
|
|
} else if (_proxyFormState.isValid || _proxySubscribeFormState.isValid) {
|
|
isValid = await executeBuiltInValidation(_fields, true);
|
|
}
|
|
}
|
|
}
|
|
if (isFieldValueUpdated) {
|
|
field._f.deps && trigger(field._f.deps);
|
|
shouldRenderByError(name, isValid, error, fieldState);
|
|
}
|
|
}
|
|
};
|
|
const _focusInput = (ref, key) => {
|
|
if (get(_formState.errors, key) && ref.focus) {
|
|
ref.focus();
|
|
return 1;
|
|
}
|
|
return;
|
|
};
|
|
const trigger = async (name, options = {}) => {
|
|
let isValid;
|
|
let validationResult;
|
|
const fieldNames = convertToArrayPayload(name);
|
|
if (_options.resolver) {
|
|
const errors = await executeSchemaAndUpdateState(isUndefined(name) ? name : fieldNames);
|
|
isValid = isEmptyObject(errors);
|
|
validationResult = name ? !fieldNames.some((name2) => get(errors, name2)) : isValid;
|
|
} else if (name) {
|
|
validationResult = (await Promise.all(fieldNames.map(async (fieldName) => {
|
|
const field = get(_fields, fieldName);
|
|
return await executeBuiltInValidation(field && field._f ? { [fieldName]: field } : field);
|
|
}))).every(Boolean);
|
|
!(!validationResult && !_formState.isValid) && _setValid();
|
|
} else {
|
|
validationResult = isValid = await executeBuiltInValidation(_fields);
|
|
}
|
|
_subjects.state.next({
|
|
...!isString(name) || (_proxyFormState.isValid || _proxySubscribeFormState.isValid) && isValid !== _formState.isValid ? {} : { name },
|
|
..._options.resolver || !name ? { isValid } : {},
|
|
errors: _formState.errors
|
|
});
|
|
options.shouldFocus && !validationResult && iterateFieldsByAction(_fields, _focusInput, name ? fieldNames : _names.mount);
|
|
return validationResult;
|
|
};
|
|
const getValues = (fieldNames) => {
|
|
const values = {
|
|
..._state.mount ? _formValues : _defaultValues
|
|
};
|
|
return isUndefined(fieldNames) ? values : isString(fieldNames) ? get(values, fieldNames) : fieldNames.map((name) => get(values, name));
|
|
};
|
|
const getFieldState = (name, formState) => ({
|
|
invalid: !!get((formState || _formState).errors, name),
|
|
isDirty: !!get((formState || _formState).dirtyFields, name),
|
|
error: get((formState || _formState).errors, name),
|
|
isValidating: !!get(_formState.validatingFields, name),
|
|
isTouched: !!get((formState || _formState).touchedFields, name)
|
|
});
|
|
const clearErrors = (name) => {
|
|
name && convertToArrayPayload(name).forEach((inputName) => unset(_formState.errors, inputName));
|
|
_subjects.state.next({
|
|
errors: name ? _formState.errors : {}
|
|
});
|
|
};
|
|
const setError = (name, error, options) => {
|
|
const ref = (get(_fields, name, { _f: {} })._f || {}).ref;
|
|
const currentError = get(_formState.errors, name) || {};
|
|
const { ref: currentRef, message, type, ...restOfErrorTree } = currentError;
|
|
set(_formState.errors, name, {
|
|
...restOfErrorTree,
|
|
...error,
|
|
ref
|
|
});
|
|
_subjects.state.next({
|
|
name,
|
|
errors: _formState.errors,
|
|
isValid: false
|
|
});
|
|
options && options.shouldFocus && ref && ref.focus && ref.focus();
|
|
};
|
|
const watch = (name, defaultValue) => isFunction(name) ? _subjects.state.subscribe({
|
|
next: (payload) => name(_getWatch(void 0, defaultValue), payload)
|
|
}) : _getWatch(name, defaultValue, true);
|
|
const _subscribe = (props2) => _subjects.state.subscribe({
|
|
next: (formState) => {
|
|
if (shouldSubscribeByName(props2.name, formState.name, props2.exact) && shouldRenderFormState(formState, props2.formState || _proxyFormState, _setFormState, props2.reRenderRoot)) {
|
|
props2.callback({
|
|
values: { ..._formValues },
|
|
..._formState,
|
|
...formState
|
|
});
|
|
}
|
|
}
|
|
}).unsubscribe;
|
|
const subscribe = (props2) => {
|
|
_state.mount = true;
|
|
_proxySubscribeFormState = {
|
|
..._proxySubscribeFormState,
|
|
...props2.formState
|
|
};
|
|
return _subscribe({
|
|
...props2,
|
|
formState: _proxySubscribeFormState
|
|
});
|
|
};
|
|
const unregister = (name, options = {}) => {
|
|
for (const fieldName of name ? convertToArrayPayload(name) : _names.mount) {
|
|
_names.mount.delete(fieldName);
|
|
_names.array.delete(fieldName);
|
|
if (!options.keepValue) {
|
|
unset(_fields, fieldName);
|
|
unset(_formValues, fieldName);
|
|
}
|
|
!options.keepError && unset(_formState.errors, fieldName);
|
|
!options.keepDirty && unset(_formState.dirtyFields, fieldName);
|
|
!options.keepTouched && unset(_formState.touchedFields, fieldName);
|
|
!options.keepIsValidating && unset(_formState.validatingFields, fieldName);
|
|
!_options.shouldUnregister && !options.keepDefaultValue && unset(_defaultValues, fieldName);
|
|
}
|
|
_subjects.state.next({
|
|
values: cloneObject(_formValues)
|
|
});
|
|
_subjects.state.next({
|
|
..._formState,
|
|
...!options.keepDirty ? {} : { isDirty: _getDirty() }
|
|
});
|
|
!options.keepIsValid && _setValid();
|
|
};
|
|
const _setDisabledField = ({ disabled, name }) => {
|
|
if (isBoolean(disabled) && _state.mount || !!disabled || _names.disabled.has(name)) {
|
|
disabled ? _names.disabled.add(name) : _names.disabled.delete(name);
|
|
}
|
|
};
|
|
const register = (name, options = {}) => {
|
|
let field = get(_fields, name);
|
|
const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
|
|
set(_fields, name, {
|
|
...field || {},
|
|
_f: {
|
|
...field && field._f ? field._f : { ref: { name } },
|
|
name,
|
|
mount: true,
|
|
...options
|
|
}
|
|
});
|
|
_names.mount.add(name);
|
|
if (field) {
|
|
_setDisabledField({
|
|
disabled: isBoolean(options.disabled) ? options.disabled : _options.disabled,
|
|
name
|
|
});
|
|
} else {
|
|
updateValidAndValue(name, true, options.value);
|
|
}
|
|
return {
|
|
...disabledIsDefined ? { disabled: options.disabled || _options.disabled } : {},
|
|
..._options.progressive ? {
|
|
required: !!options.required,
|
|
min: getRuleValue(options.min),
|
|
max: getRuleValue(options.max),
|
|
minLength: getRuleValue(options.minLength),
|
|
maxLength: getRuleValue(options.maxLength),
|
|
pattern: getRuleValue(options.pattern)
|
|
} : {},
|
|
name,
|
|
onChange,
|
|
onBlur: onChange,
|
|
ref: (ref) => {
|
|
if (ref) {
|
|
register(name, options);
|
|
field = get(_fields, name);
|
|
const fieldRef = isUndefined(ref.value) ? ref.querySelectorAll ? ref.querySelectorAll("input,select,textarea")[0] || ref : ref : ref;
|
|
const radioOrCheckbox = isRadioOrCheckbox(fieldRef);
|
|
const refs = field._f.refs || [];
|
|
if (radioOrCheckbox ? refs.find((option) => option === fieldRef) : fieldRef === field._f.ref) {
|
|
return;
|
|
}
|
|
set(_fields, name, {
|
|
_f: {
|
|
...field._f,
|
|
...radioOrCheckbox ? {
|
|
refs: [
|
|
...refs.filter(live),
|
|
fieldRef,
|
|
...Array.isArray(get(_defaultValues, name)) ? [{}] : []
|
|
],
|
|
ref: { type: fieldRef.type, name }
|
|
} : { ref: fieldRef }
|
|
}
|
|
});
|
|
updateValidAndValue(name, false, void 0, fieldRef);
|
|
} else {
|
|
field = get(_fields, name, {});
|
|
if (field._f) {
|
|
field._f.mount = false;
|
|
}
|
|
(_options.shouldUnregister || options.shouldUnregister) && !(isNameInFieldArray(_names.array, name) && _state.action) && _names.unMount.add(name);
|
|
}
|
|
}
|
|
};
|
|
};
|
|
const _focusError = () => _options.shouldFocusError && iterateFieldsByAction(_fields, _focusInput, _names.mount);
|
|
const _disableForm = (disabled) => {
|
|
if (isBoolean(disabled)) {
|
|
_subjects.state.next({ disabled });
|
|
iterateFieldsByAction(_fields, (ref, name) => {
|
|
const currentField = get(_fields, name);
|
|
if (currentField) {
|
|
ref.disabled = currentField._f.disabled || disabled;
|
|
if (Array.isArray(currentField._f.refs)) {
|
|
currentField._f.refs.forEach((inputRef) => {
|
|
inputRef.disabled = currentField._f.disabled || disabled;
|
|
});
|
|
}
|
|
}
|
|
}, 0, false);
|
|
}
|
|
};
|
|
const handleSubmit = (onValid, onInvalid) => async (e) => {
|
|
let onValidError = void 0;
|
|
if (e) {
|
|
e.preventDefault && e.preventDefault();
|
|
e.persist && e.persist();
|
|
}
|
|
let fieldValues = cloneObject(_formValues);
|
|
_subjects.state.next({
|
|
isSubmitting: true
|
|
});
|
|
if (_options.resolver) {
|
|
const { errors, values } = await _runSchema();
|
|
_formState.errors = errors;
|
|
fieldValues = cloneObject(values);
|
|
} else {
|
|
await executeBuiltInValidation(_fields);
|
|
}
|
|
if (_names.disabled.size) {
|
|
for (const name of _names.disabled) {
|
|
unset(fieldValues, name);
|
|
}
|
|
}
|
|
unset(_formState.errors, "root");
|
|
if (isEmptyObject(_formState.errors)) {
|
|
_subjects.state.next({
|
|
errors: {}
|
|
});
|
|
try {
|
|
await onValid(fieldValues, e);
|
|
} catch (error) {
|
|
onValidError = error;
|
|
}
|
|
} else {
|
|
if (onInvalid) {
|
|
await onInvalid({ ..._formState.errors }, e);
|
|
}
|
|
_focusError();
|
|
setTimeout(_focusError);
|
|
}
|
|
_subjects.state.next({
|
|
isSubmitted: true,
|
|
isSubmitting: false,
|
|
isSubmitSuccessful: isEmptyObject(_formState.errors) && !onValidError,
|
|
submitCount: _formState.submitCount + 1,
|
|
errors: _formState.errors
|
|
});
|
|
if (onValidError) {
|
|
throw onValidError;
|
|
}
|
|
};
|
|
const resetField = (name, options = {}) => {
|
|
if (get(_fields, name)) {
|
|
if (isUndefined(options.defaultValue)) {
|
|
setValue(name, cloneObject(get(_defaultValues, name)));
|
|
} else {
|
|
setValue(name, options.defaultValue);
|
|
set(_defaultValues, name, cloneObject(options.defaultValue));
|
|
}
|
|
if (!options.keepTouched) {
|
|
unset(_formState.touchedFields, name);
|
|
}
|
|
if (!options.keepDirty) {
|
|
unset(_formState.dirtyFields, name);
|
|
_formState.isDirty = options.defaultValue ? _getDirty(name, cloneObject(get(_defaultValues, name))) : _getDirty();
|
|
}
|
|
if (!options.keepError) {
|
|
unset(_formState.errors, name);
|
|
_proxyFormState.isValid && _setValid();
|
|
}
|
|
_subjects.state.next({ ..._formState });
|
|
}
|
|
};
|
|
const _reset = (formValues, keepStateOptions = {}) => {
|
|
const updatedValues = formValues ? cloneObject(formValues) : _defaultValues;
|
|
const cloneUpdatedValues = cloneObject(updatedValues);
|
|
const isEmptyResetValues = isEmptyObject(formValues);
|
|
const values = isEmptyResetValues ? _defaultValues : cloneUpdatedValues;
|
|
if (!keepStateOptions.keepDefaultValues) {
|
|
_defaultValues = updatedValues;
|
|
}
|
|
if (!keepStateOptions.keepValues) {
|
|
if (keepStateOptions.keepDirtyValues) {
|
|
const fieldsToCheck = /* @__PURE__ */ new Set([
|
|
..._names.mount,
|
|
...Object.keys(getDirtyFields(_defaultValues, _formValues))
|
|
]);
|
|
for (const fieldName of Array.from(fieldsToCheck)) {
|
|
get(_formState.dirtyFields, fieldName) ? set(values, fieldName, get(_formValues, fieldName)) : setValue(fieldName, get(values, fieldName));
|
|
}
|
|
} else {
|
|
if (isWeb && isUndefined(formValues)) {
|
|
for (const name of _names.mount) {
|
|
const field = get(_fields, name);
|
|
if (field && field._f) {
|
|
const fieldReference = Array.isArray(field._f.refs) ? field._f.refs[0] : field._f.ref;
|
|
if (isHTMLElement(fieldReference)) {
|
|
const form = fieldReference.closest("form");
|
|
if (form) {
|
|
form.reset();
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (keepStateOptions.keepFieldsRef) {
|
|
for (const fieldName of _names.mount) {
|
|
setValue(fieldName, get(values, fieldName));
|
|
}
|
|
} else {
|
|
_fields = {};
|
|
}
|
|
}
|
|
_formValues = _options.shouldUnregister ? keepStateOptions.keepDefaultValues ? cloneObject(_defaultValues) : {} : cloneObject(values);
|
|
_subjects.array.next({
|
|
values: { ...values }
|
|
});
|
|
_subjects.state.next({
|
|
values: { ...values }
|
|
});
|
|
}
|
|
_names = {
|
|
mount: keepStateOptions.keepDirtyValues ? _names.mount : /* @__PURE__ */ new Set(),
|
|
unMount: /* @__PURE__ */ new Set(),
|
|
array: /* @__PURE__ */ new Set(),
|
|
disabled: /* @__PURE__ */ new Set(),
|
|
watch: /* @__PURE__ */ new Set(),
|
|
watchAll: false,
|
|
focus: ""
|
|
};
|
|
_state.mount = !_proxyFormState.isValid || !!keepStateOptions.keepIsValid || !!keepStateOptions.keepDirtyValues;
|
|
_state.watch = !!_options.shouldUnregister;
|
|
_subjects.state.next({
|
|
submitCount: keepStateOptions.keepSubmitCount ? _formState.submitCount : 0,
|
|
isDirty: isEmptyResetValues ? false : keepStateOptions.keepDirty ? _formState.isDirty : !!(keepStateOptions.keepDefaultValues && !deepEqual(formValues, _defaultValues)),
|
|
isSubmitted: keepStateOptions.keepIsSubmitted ? _formState.isSubmitted : false,
|
|
dirtyFields: isEmptyResetValues ? {} : keepStateOptions.keepDirtyValues ? keepStateOptions.keepDefaultValues && _formValues ? getDirtyFields(_defaultValues, _formValues) : _formState.dirtyFields : keepStateOptions.keepDefaultValues && formValues ? getDirtyFields(_defaultValues, formValues) : keepStateOptions.keepDirty ? _formState.dirtyFields : {},
|
|
touchedFields: keepStateOptions.keepTouched ? _formState.touchedFields : {},
|
|
errors: keepStateOptions.keepErrors ? _formState.errors : {},
|
|
isSubmitSuccessful: keepStateOptions.keepIsSubmitSuccessful ? _formState.isSubmitSuccessful : false,
|
|
isSubmitting: false
|
|
});
|
|
};
|
|
const reset = (formValues, keepStateOptions) => _reset(isFunction(formValues) ? formValues(_formValues) : formValues, keepStateOptions);
|
|
const setFocus = (name, options = {}) => {
|
|
const field = get(_fields, name);
|
|
const fieldReference = field && field._f;
|
|
if (fieldReference) {
|
|
const fieldRef = fieldReference.refs ? fieldReference.refs[0] : fieldReference.ref;
|
|
if (fieldRef.focus) {
|
|
fieldRef.focus();
|
|
options.shouldSelect && isFunction(fieldRef.select) && fieldRef.select();
|
|
}
|
|
}
|
|
};
|
|
const _setFormState = (updatedFormState) => {
|
|
_formState = {
|
|
..._formState,
|
|
...updatedFormState
|
|
};
|
|
};
|
|
const _resetDefaultValues = () => isFunction(_options.defaultValues) && _options.defaultValues().then((values) => {
|
|
reset(values, _options.resetOptions);
|
|
_subjects.state.next({
|
|
isLoading: false
|
|
});
|
|
});
|
|
const methods = {
|
|
control: {
|
|
register,
|
|
unregister,
|
|
getFieldState,
|
|
handleSubmit,
|
|
setError,
|
|
_subscribe,
|
|
_runSchema,
|
|
_focusError,
|
|
_getWatch,
|
|
_getDirty,
|
|
_setValid,
|
|
_setFieldArray,
|
|
_setDisabledField,
|
|
_setErrors,
|
|
_getFieldArray,
|
|
_reset,
|
|
_resetDefaultValues,
|
|
_removeUnmounted,
|
|
_disableForm,
|
|
_subjects,
|
|
_proxyFormState,
|
|
get _fields() {
|
|
return _fields;
|
|
},
|
|
get _formValues() {
|
|
return _formValues;
|
|
},
|
|
get _state() {
|
|
return _state;
|
|
},
|
|
set _state(value) {
|
|
_state = value;
|
|
},
|
|
get _defaultValues() {
|
|
return _defaultValues;
|
|
},
|
|
get _names() {
|
|
return _names;
|
|
},
|
|
set _names(value) {
|
|
_names = value;
|
|
},
|
|
get _formState() {
|
|
return _formState;
|
|
},
|
|
get _options() {
|
|
return _options;
|
|
},
|
|
set _options(value) {
|
|
_options = {
|
|
..._options,
|
|
...value
|
|
};
|
|
}
|
|
},
|
|
subscribe,
|
|
trigger,
|
|
register,
|
|
handleSubmit,
|
|
watch,
|
|
setValue,
|
|
getValues,
|
|
reset,
|
|
resetField,
|
|
clearErrors,
|
|
unregister,
|
|
setError,
|
|
setFocus,
|
|
getFieldState
|
|
};
|
|
return {
|
|
...methods,
|
|
formControl: methods
|
|
};
|
|
}
|
|
var generateId = () => {
|
|
if (typeof crypto !== "undefined" && crypto.randomUUID) {
|
|
return crypto.randomUUID();
|
|
}
|
|
const d = typeof performance === "undefined" ? Date.now() : performance.now() * 1e3;
|
|
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
|
|
const r = (Math.random() * 16 + d) % 16 | 0;
|
|
return (c == "x" ? r : r & 3 | 8).toString(16);
|
|
});
|
|
};
|
|
var getFocusFieldName = (name, index, options = {}) => options.shouldFocus || isUndefined(options.shouldFocus) ? options.focusName || `${name}.${isUndefined(options.focusIndex) ? index : options.focusIndex}.` : "";
|
|
var appendAt = (data, value) => [
|
|
...data,
|
|
...convertToArrayPayload(value)
|
|
];
|
|
var fillEmptyArray = (value) => Array.isArray(value) ? value.map(() => void 0) : void 0;
|
|
function insert(data, index, value) {
|
|
return [
|
|
...data.slice(0, index),
|
|
...convertToArrayPayload(value),
|
|
...data.slice(index)
|
|
];
|
|
}
|
|
var moveArrayAt = (data, from, to) => {
|
|
if (!Array.isArray(data)) {
|
|
return [];
|
|
}
|
|
if (isUndefined(data[to])) {
|
|
data[to] = void 0;
|
|
}
|
|
data.splice(to, 0, data.splice(from, 1)[0]);
|
|
return data;
|
|
};
|
|
var prependAt = (data, value) => [
|
|
...convertToArrayPayload(value),
|
|
...convertToArrayPayload(data)
|
|
];
|
|
function removeAtIndexes(data, indexes) {
|
|
let i = 0;
|
|
const temp = [...data];
|
|
for (const index of indexes) {
|
|
temp.splice(index - i, 1);
|
|
i++;
|
|
}
|
|
return compact(temp).length ? temp : [];
|
|
}
|
|
var removeArrayAt = (data, index) => isUndefined(index) ? [] : removeAtIndexes(data, convertToArrayPayload(index).sort((a, b) => a - b));
|
|
var swapArrayAt = (data, indexA, indexB) => {
|
|
[data[indexA], data[indexB]] = [data[indexB], data[indexA]];
|
|
};
|
|
var updateAt = (fieldValues, index, value) => {
|
|
fieldValues[index] = value;
|
|
return fieldValues;
|
|
};
|
|
function useFieldArray(props) {
|
|
const methods = useFormContext();
|
|
const { control = methods.control, name, keyName = "id", shouldUnregister, rules } = props;
|
|
const [fields, setFields] = import_react.default.useState(control._getFieldArray(name));
|
|
const ids = import_react.default.useRef(control._getFieldArray(name).map(generateId));
|
|
const _fieldIds = import_react.default.useRef(fields);
|
|
const _name = import_react.default.useRef(name);
|
|
const _actioned = import_react.default.useRef(false);
|
|
_name.current = name;
|
|
_fieldIds.current = fields;
|
|
control._names.array.add(name);
|
|
rules && control.register(name, rules);
|
|
useIsomorphicLayoutEffect(() => control._subjects.array.subscribe({
|
|
next: ({ values, name: fieldArrayName }) => {
|
|
if (fieldArrayName === _name.current || !fieldArrayName) {
|
|
const fieldValues = get(values, _name.current);
|
|
if (Array.isArray(fieldValues)) {
|
|
setFields(fieldValues);
|
|
ids.current = fieldValues.map(generateId);
|
|
}
|
|
}
|
|
}
|
|
}).unsubscribe, [control]);
|
|
const updateValues = import_react.default.useCallback((updatedFieldArrayValues) => {
|
|
_actioned.current = true;
|
|
control._setFieldArray(name, updatedFieldArrayValues);
|
|
}, [control, name]);
|
|
const append = (value, options) => {
|
|
const appendValue = convertToArrayPayload(cloneObject(value));
|
|
const updatedFieldArrayValues = appendAt(control._getFieldArray(name), appendValue);
|
|
control._names.focus = getFocusFieldName(name, updatedFieldArrayValues.length - 1, options);
|
|
ids.current = appendAt(ids.current, appendValue.map(generateId));
|
|
updateValues(updatedFieldArrayValues);
|
|
setFields(updatedFieldArrayValues);
|
|
control._setFieldArray(name, updatedFieldArrayValues, appendAt, {
|
|
argA: fillEmptyArray(value)
|
|
});
|
|
};
|
|
const prepend = (value, options) => {
|
|
const prependValue = convertToArrayPayload(cloneObject(value));
|
|
const updatedFieldArrayValues = prependAt(control._getFieldArray(name), prependValue);
|
|
control._names.focus = getFocusFieldName(name, 0, options);
|
|
ids.current = prependAt(ids.current, prependValue.map(generateId));
|
|
updateValues(updatedFieldArrayValues);
|
|
setFields(updatedFieldArrayValues);
|
|
control._setFieldArray(name, updatedFieldArrayValues, prependAt, {
|
|
argA: fillEmptyArray(value)
|
|
});
|
|
};
|
|
const remove = (index) => {
|
|
const updatedFieldArrayValues = removeArrayAt(control._getFieldArray(name), index);
|
|
ids.current = removeArrayAt(ids.current, index);
|
|
updateValues(updatedFieldArrayValues);
|
|
setFields(updatedFieldArrayValues);
|
|
!Array.isArray(get(control._fields, name)) && set(control._fields, name, void 0);
|
|
control._setFieldArray(name, updatedFieldArrayValues, removeArrayAt, {
|
|
argA: index
|
|
});
|
|
};
|
|
const insert$1 = (index, value, options) => {
|
|
const insertValue = convertToArrayPayload(cloneObject(value));
|
|
const updatedFieldArrayValues = insert(control._getFieldArray(name), index, insertValue);
|
|
control._names.focus = getFocusFieldName(name, index, options);
|
|
ids.current = insert(ids.current, index, insertValue.map(generateId));
|
|
updateValues(updatedFieldArrayValues);
|
|
setFields(updatedFieldArrayValues);
|
|
control._setFieldArray(name, updatedFieldArrayValues, insert, {
|
|
argA: index,
|
|
argB: fillEmptyArray(value)
|
|
});
|
|
};
|
|
const swap = (indexA, indexB) => {
|
|
const updatedFieldArrayValues = control._getFieldArray(name);
|
|
swapArrayAt(updatedFieldArrayValues, indexA, indexB);
|
|
swapArrayAt(ids.current, indexA, indexB);
|
|
updateValues(updatedFieldArrayValues);
|
|
setFields(updatedFieldArrayValues);
|
|
control._setFieldArray(name, updatedFieldArrayValues, swapArrayAt, {
|
|
argA: indexA,
|
|
argB: indexB
|
|
}, false);
|
|
};
|
|
const move = (from, to) => {
|
|
const updatedFieldArrayValues = control._getFieldArray(name);
|
|
moveArrayAt(updatedFieldArrayValues, from, to);
|
|
moveArrayAt(ids.current, from, to);
|
|
updateValues(updatedFieldArrayValues);
|
|
setFields(updatedFieldArrayValues);
|
|
control._setFieldArray(name, updatedFieldArrayValues, moveArrayAt, {
|
|
argA: from,
|
|
argB: to
|
|
}, false);
|
|
};
|
|
const update = (index, value) => {
|
|
const updateValue = cloneObject(value);
|
|
const updatedFieldArrayValues = updateAt(control._getFieldArray(name), index, updateValue);
|
|
ids.current = [...updatedFieldArrayValues].map((item, i) => !item || i === index ? generateId() : ids.current[i]);
|
|
updateValues(updatedFieldArrayValues);
|
|
setFields([...updatedFieldArrayValues]);
|
|
control._setFieldArray(name, updatedFieldArrayValues, updateAt, {
|
|
argA: index,
|
|
argB: updateValue
|
|
}, true, false);
|
|
};
|
|
const replace = (value) => {
|
|
const updatedFieldArrayValues = convertToArrayPayload(cloneObject(value));
|
|
ids.current = updatedFieldArrayValues.map(generateId);
|
|
updateValues([...updatedFieldArrayValues]);
|
|
setFields([...updatedFieldArrayValues]);
|
|
control._setFieldArray(name, [...updatedFieldArrayValues], (data) => data, {}, true, false);
|
|
};
|
|
import_react.default.useEffect(() => {
|
|
control._state.action = false;
|
|
isWatched(name, control._names) && control._subjects.state.next({
|
|
...control._formState
|
|
});
|
|
if (_actioned.current && (!getValidationModes(control._options.mode).isOnSubmit || control._formState.isSubmitted) && !getValidationModes(control._options.reValidateMode).isOnSubmit) {
|
|
if (control._options.resolver) {
|
|
control._runSchema([name]).then((result) => {
|
|
const error = get(result.errors, name);
|
|
const existingError = get(control._formState.errors, name);
|
|
if (existingError ? !error && existingError.type || error && (existingError.type !== error.type || existingError.message !== error.message) : error && error.type) {
|
|
error ? set(control._formState.errors, name, error) : unset(control._formState.errors, name);
|
|
control._subjects.state.next({
|
|
errors: control._formState.errors
|
|
});
|
|
}
|
|
});
|
|
} else {
|
|
const field = get(control._fields, name);
|
|
if (field && field._f && !(getValidationModes(control._options.reValidateMode).isOnSubmit && getValidationModes(control._options.mode).isOnSubmit)) {
|
|
validateField(field, control._names.disabled, control._formValues, control._options.criteriaMode === VALIDATION_MODE.all, control._options.shouldUseNativeValidation, true).then((error) => !isEmptyObject(error) && control._subjects.state.next({
|
|
errors: updateFieldArrayRootError(control._formState.errors, error, name)
|
|
}));
|
|
}
|
|
}
|
|
}
|
|
control._subjects.state.next({
|
|
name,
|
|
values: cloneObject(control._formValues)
|
|
});
|
|
control._names.focus && iterateFieldsByAction(control._fields, (ref, key) => {
|
|
if (control._names.focus && key.startsWith(control._names.focus) && ref.focus) {
|
|
ref.focus();
|
|
return 1;
|
|
}
|
|
return;
|
|
});
|
|
control._names.focus = "";
|
|
control._setValid();
|
|
_actioned.current = false;
|
|
}, [fields, name, control]);
|
|
import_react.default.useEffect(() => {
|
|
!get(control._formValues, name) && control._setFieldArray(name);
|
|
return () => {
|
|
const updateMounted = (name2, value) => {
|
|
const field = get(control._fields, name2);
|
|
if (field && field._f) {
|
|
field._f.mount = value;
|
|
}
|
|
};
|
|
control._options.shouldUnregister || shouldUnregister ? control.unregister(name) : updateMounted(name, false);
|
|
};
|
|
}, [name, control, keyName, shouldUnregister]);
|
|
return {
|
|
swap: import_react.default.useCallback(swap, [updateValues, name, control]),
|
|
move: import_react.default.useCallback(move, [updateValues, name, control]),
|
|
prepend: import_react.default.useCallback(prepend, [updateValues, name, control]),
|
|
append: import_react.default.useCallback(append, [updateValues, name, control]),
|
|
remove: import_react.default.useCallback(remove, [updateValues, name, control]),
|
|
insert: import_react.default.useCallback(insert$1, [updateValues, name, control]),
|
|
update: import_react.default.useCallback(update, [updateValues, name, control]),
|
|
replace: import_react.default.useCallback(replace, [updateValues, name, control]),
|
|
fields: import_react.default.useMemo(() => fields.map((field, index) => ({
|
|
...field,
|
|
[keyName]: ids.current[index] || generateId()
|
|
})), [fields, keyName])
|
|
};
|
|
}
|
|
function useForm(props = {}) {
|
|
const _formControl = import_react.default.useRef(void 0);
|
|
const _values = import_react.default.useRef(void 0);
|
|
const [formState, updateFormState] = import_react.default.useState({
|
|
isDirty: false,
|
|
isValidating: false,
|
|
isLoading: isFunction(props.defaultValues),
|
|
isSubmitted: false,
|
|
isSubmitting: false,
|
|
isSubmitSuccessful: false,
|
|
isValid: false,
|
|
submitCount: 0,
|
|
dirtyFields: {},
|
|
touchedFields: {},
|
|
validatingFields: {},
|
|
errors: props.errors || {},
|
|
disabled: props.disabled || false,
|
|
isReady: false,
|
|
defaultValues: isFunction(props.defaultValues) ? void 0 : props.defaultValues
|
|
});
|
|
if (!_formControl.current) {
|
|
if (props.formControl) {
|
|
_formControl.current = {
|
|
...props.formControl,
|
|
formState
|
|
};
|
|
if (props.defaultValues && !isFunction(props.defaultValues)) {
|
|
props.formControl.reset(props.defaultValues, props.resetOptions);
|
|
}
|
|
} else {
|
|
const { formControl, ...rest } = createFormControl(props);
|
|
_formControl.current = {
|
|
...rest,
|
|
formState
|
|
};
|
|
}
|
|
}
|
|
const control = _formControl.current.control;
|
|
control._options = props;
|
|
useIsomorphicLayoutEffect(() => {
|
|
const sub = control._subscribe({
|
|
formState: control._proxyFormState,
|
|
callback: () => updateFormState({ ...control._formState }),
|
|
reRenderRoot: true
|
|
});
|
|
updateFormState((data) => ({
|
|
...data,
|
|
isReady: true
|
|
}));
|
|
control._formState.isReady = true;
|
|
return sub;
|
|
}, [control]);
|
|
import_react.default.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
|
|
import_react.default.useEffect(() => {
|
|
if (props.mode) {
|
|
control._options.mode = props.mode;
|
|
}
|
|
if (props.reValidateMode) {
|
|
control._options.reValidateMode = props.reValidateMode;
|
|
}
|
|
}, [control, props.mode, props.reValidateMode]);
|
|
import_react.default.useEffect(() => {
|
|
if (props.errors) {
|
|
control._setErrors(props.errors);
|
|
control._focusError();
|
|
}
|
|
}, [control, props.errors]);
|
|
import_react.default.useEffect(() => {
|
|
props.shouldUnregister && control._subjects.state.next({
|
|
values: control._getWatch()
|
|
});
|
|
}, [control, props.shouldUnregister]);
|
|
import_react.default.useEffect(() => {
|
|
if (control._proxyFormState.isDirty) {
|
|
const isDirty = control._getDirty();
|
|
if (isDirty !== formState.isDirty) {
|
|
control._subjects.state.next({
|
|
isDirty
|
|
});
|
|
}
|
|
}
|
|
}, [control, formState.isDirty]);
|
|
import_react.default.useEffect(() => {
|
|
if (props.values && !deepEqual(props.values, _values.current)) {
|
|
control._reset(props.values, {
|
|
keepFieldsRef: true,
|
|
...control._options.resetOptions
|
|
});
|
|
_values.current = props.values;
|
|
updateFormState((state) => ({ ...state }));
|
|
} else {
|
|
control._resetDefaultValues();
|
|
}
|
|
}, [control, props.values]);
|
|
import_react.default.useEffect(() => {
|
|
if (!control._state.mount) {
|
|
control._setValid();
|
|
control._state.mount = true;
|
|
}
|
|
if (control._state.watch) {
|
|
control._state.watch = false;
|
|
control._subjects.state.next({ ...control._formState });
|
|
}
|
|
control._removeUnmounted();
|
|
});
|
|
_formControl.current.formState = getProxyFormState(formState, control);
|
|
return _formControl.current;
|
|
}
|
|
|
|
export {
|
|
get,
|
|
set,
|
|
useFormContext,
|
|
FormProvider,
|
|
useFormState,
|
|
useWatch,
|
|
useController,
|
|
Controller,
|
|
Form,
|
|
appendErrors,
|
|
createFormControl,
|
|
useFieldArray,
|
|
useForm
|
|
};
|
|
//# sourceMappingURL=chunk-PDF5LE6H.js.map
|