remix-validated-form
Version:
Form component and utils for easy form validation in remix
37 lines (36 loc) • 2.02 kB
JavaScript
import { useCallback, useEffect } from "react";
import { useFieldDefaultValue } from "../hooks";
import { useFormStore } from "./storeHooks";
export const useControlledFieldValue = (context, field) => {
const value = useFormStore(context.formId, (state) => state.controlledFields.getValue(field));
const isFormHydrated = useFormStore(context.formId, (state) => state.isHydrated);
const defaultValue = useFieldDefaultValue(field, context);
return isFormHydrated ? value : defaultValue;
};
export const useRegisterControlledField = (context, field) => {
const resolveUpdate = useFormStore(context.formId, (state) => state.controlledFields.valueUpdateResolvers[field]);
useEffect(() => {
resolveUpdate === null || resolveUpdate === void 0 ? void 0 : resolveUpdate();
}, [resolveUpdate]);
const register = useFormStore(context.formId, (state) => state.controlledFields.register);
const unregister = useFormStore(context.formId, (state) => state.controlledFields.unregister);
useEffect(() => {
register(field);
return () => unregister(field);
}, [context.formId, field, register, unregister]);
};
export const useControllableValue = (context, field) => {
useRegisterControlledField(context, field);
const setControlledFieldValue = useFormStore(context.formId, (state) => state.controlledFields.setValue);
const setValue = useCallback((value) => setControlledFieldValue(field, value), [field, setControlledFieldValue]);
const value = useControlledFieldValue(context, field);
return [value, setValue];
};
export const useUpdateControllableValue = (formId) => {
const setValue = useFormStore(formId, (state) => state.controlledFields.setValue);
return useCallback((field, value) => setValue(field, value), [setValue]);
};
export const useAwaitValue = (formId) => {
const awaitValue = useFormStore(formId, (state) => state.controlledFields.awaitValueUpdate);
return useCallback((field) => awaitValue(field), [awaitValue]);
};