@mantine/form/cjs/use-field.cjs

Mantine form management library

"use client";
require("./_virtual/_rolldown/runtime.cjs");
const require_get_input_on_change = require("./get-input-on-change/get-input-on-change.cjs");
const require_should_validate_on_change = require("./validate/should-validate-on-change.cjs");
let react = require("react");
//#region packages/@mantine/form/src/use-field.ts
function useField({ mode = "controlled", clearErrorOnChange = true, initialValue, initialError = null, initialTouched = false, onValueChange, validateOnChange = false, validateOnBlur = false, validate, resolveValidationError, type = "input" }) {
	const [valueState, setValueState] = (0, react.useState)(initialValue);
	const valueRef = (0, react.useRef)(valueState);
	const [key, setKey] = (0, react.useState)(0);
	const [error, setError] = (0, react.useState)(initialError || null);
	const touchedRef = (0, react.useRef)(initialTouched || false);
	const [, setTouchedState] = (0, react.useState)(touchedRef.current);
	const [isValidating, setIsValidating] = (0, react.useState)(false);
	const errorResolver = (0, react.useMemo)(() => resolveValidationError || ((err) => err), [resolveValidationError]);
	const setTouched = (0, react.useCallback)((val, { updateState = mode === "controlled" } = {}) => {
		touchedRef.current = val;
		updateState && setTouchedState(val);
	}, []);
	const setValue = (0, react.useCallback)((value, { updateKey = mode === "uncontrolled", updateState = mode === "controlled" } = {}) => {
		if (valueRef.current === value) return;
		valueRef.current = value;
		onValueChange?.(value);
		if (clearErrorOnChange && error !== null) setError(null);
		if (updateState) setValueState(value);
		if (updateKey) setKey((currentKey) => currentKey + 1);
		if (validateOnChange) _validate();
	}, [
		error,
		clearErrorOnChange,
		onValueChange
	]);
	const reset = (0, react.useCallback)(() => {
		setValue(initialValue);
		setError(null);
		setTouched(false);
	}, [initialValue]);
	const getValue = (0, react.useCallback)(() => valueRef.current, []);
	const isTouched = (0, react.useCallback)(() => touchedRef.current, []);
	const isDirty = (0, react.useCallback)(() => valueRef.current !== initialValue, [initialValue]);
	const _validate = (0, react.useCallback)(async () => {
		const validationResult = validate?.(valueRef.current);
		if (validationResult instanceof Promise) {
			setIsValidating(true);
			try {
				const result = await validationResult;
				setIsValidating(false);
				setError(result);
			} catch (err) {
				setIsValidating(false);
				const resolvedError = errorResolver(err);
				setError(resolvedError);
				return resolvedError;
			}
		} else {
			setError(validationResult);
			return validationResult;
		}
	}, []);
	const getInputProps = ({ withError = true, withFocus = true, ...otherOptions } = {}) => {
		const payload = { onChange: require_get_input_on_change.getInputOnChange((val) => setValue(val, { updateKey: false })) };
		if (withError) payload.error = error;
		if (type === "checkbox") payload[mode === "controlled" ? "checked" : "defaultChecked"] = valueRef.current;
		else if (type === "radio") {
			payload[mode === "controlled" ? "checked" : "defaultChecked"] = valueRef.current === otherOptions.value;
			payload.value = otherOptions.value;
		} else payload[mode === "controlled" ? "value" : "defaultValue"] = valueRef.current;
		if (withFocus) {
			payload.onFocus = () => {
				setTouched(true);
			};
			payload.onBlur = () => {
				if (require_should_validate_on_change.shouldValidateOnChange("", !!validateOnBlur)) _validate();
			};
		}
		return payload;
	};
	return {
		key,
		getValue,
		setValue,
		reset,
		getInputProps,
		isValidating,
		validate: _validate,
		error,
		setError,
		isTouched,
		isDirty,
		resetTouched: (0, react.useCallback)(() => setTouched(false), [])
	};
}
//#endregion
exports.useField = useField;

//# sourceMappingURL=use-field.cjs.map