remix-validated-form/browser/unreleased/formStateHooks.js

Form component and utils for easy form validation in remix

import { useMemo } from "react";
import { useInternalFormContext, useClearError, useSetTouched, useDefaultValuesForForm, useFieldErrorsForForm, useInternalIsSubmitting, useInternalHasBeenSubmitted, useTouchedFields, useInternalIsValid, useFieldErrors, useValidateField, useValidate, useSetFieldErrors, useResetFormElement, useSyncedDefaultValues, useFormActionProp, useFormSubactionProp, useSubmitForm, useFormValues, } from "../internal/hooks";
/**
 * Returns information about the form.
 *
 * @param formId the id of the form. Only necessary if being used outside a ValidatedForm.
 */
export const useFormState = (formId) => {
    const formContext = useInternalFormContext(formId, "useFormState");
    const isSubmitting = useInternalIsSubmitting(formContext.formId);
    const hasBeenSubmitted = useInternalHasBeenSubmitted(formContext.formId);
    const touchedFields = useTouchedFields(formContext.formId);
    const isValid = useInternalIsValid(formContext.formId);
    const action = useFormActionProp(formContext.formId);
    const subaction = useFormSubactionProp(formContext.formId);
    const syncedDefaultValues = useSyncedDefaultValues(formContext.formId);
    const defaultValuesToUse = useDefaultValuesForForm(formContext);
    const hydratedDefaultValues = defaultValuesToUse.hydrateTo(syncedDefaultValues);
    const fieldErrorsFromState = useFieldErrors(formContext.formId);
    const fieldErrorsToUse = useFieldErrorsForForm(formContext);
    const hydratedFieldErrors = fieldErrorsToUse.hydrateTo(fieldErrorsFromState);
    return useMemo(() => ({
        action,
        subaction,
        defaultValues: hydratedDefaultValues,
        fieldErrors: hydratedFieldErrors !== null && hydratedFieldErrors !== void 0 ? hydratedFieldErrors : {},
        hasBeenSubmitted,
        isSubmitting,
        touchedFields,
        isValid,
    }), [
        action,
        hasBeenSubmitted,
        hydratedDefaultValues,
        hydratedFieldErrors,
        isSubmitting,
        isValid,
        subaction,
        touchedFields,
    ]);
};
/**
 * Returns helpers that can be used to update the form state.
 *
 * @param formId the id of the form. Only necessary if being used outside a ValidatedForm.
 */
export const useFormHelpers = (formId) => {
    const formContext = useInternalFormContext(formId, "useFormHelpers");
    const setTouched = useSetTouched(formContext);
    const validateField = useValidateField(formContext.formId);
    const validate = useValidate(formContext.formId);
    const clearError = useClearError(formContext);
    const setFieldErrors = useSetFieldErrors(formContext.formId);
    const reset = useResetFormElement(formContext.formId);
    const submit = useSubmitForm(formContext.formId);
    const getValues = useFormValues(formContext.formId);
    return useMemo(() => ({
        setTouched,
        validateField,
        clearError,
        validate,
        clearAllErrors: () => setFieldErrors({}),
        reset,
        submit,
        getValues,
    }), [
        clearError,
        reset,
        setFieldErrors,
        setTouched,
        submit,
        validate,
        validateField,
        getValues,
    ]);
};