@wener/console/lib/react-hook-form/ReactHookForm.js

Base console UI toolkit

import React, { createContext, useContext, useId, useRef, useState } from "react";
import { FormProvider, useForm, useFormContext } from "react-hook-form";
import { Errors } from "@wener/utils";
import { DevOnly } from "../components/DevOnly.js";
import { FunctionButton } from "../components/FunctionButton.js";
import { showErrorToast } from "../toast/index.js";
import { cn } from "../tw/index.js";
import { getDirtyFields } from "./getDirtyFields.js";
import { getFieldErrors } from "./getFieldErrors.js";
const Context = /*#__PURE__*/ createContext(undefined);
(function (ReactHookForm) {
    ReactHookForm.handleInvalid = _handleInvalid;
    ReactHookForm.Root = (props) => {
        return null;
    };
    function Provider({ children, onSubmit, ...props }) {
        const id = useId();
        const controller = useForm({
            mode: "onBlur",
            ...props
        });
        const ref = useRef({});
        ref.current.onValid = onSubmit;
        const [ctx] = useState(() => {
            return {
                id,
                onValid: (data) => {
                    ref.current.onValid?.(data);
                },
                onInvalid: (errors) => {
                    (ref.current.onInvalid || ReactHookForm.handleInvalid)(errors);
                }
            };
        });
        return /*#__PURE__*/ React.createElement(FormProvider, controller, /*#__PURE__*/ React.createElement(Context.Provider, {
            value: ctx
        }, children));
    }
    ReactHookForm.Provider = Provider;
    ReactHookForm.Form = ({ asChild, children, ...props }) => {
        const { handleSubmit } = useFormContext();
        const { onValid, onInvalid } = Errors.BadRequest.require(useContext(Context), "ReactHookForm: context not exists");
        return /*#__PURE__*/ React.createElement("form", {
            ...props,
            onSubmit: handleSubmit(onValid, onInvalid || _handleInvalid),
            autoComplete: "off",
            "aria-autocomplete": "none"
        }, children);
    };
    ReactHookForm.SubmitButton = ({ className, dirty = true, children, ...props }) => {
        const { formState } = useFormContext();
        const { isSubmitting, isDirty, disabled } = formState;
        let invalid = disabled || isSubmitting;
        if (dirty) {
            invalid = invalid || !isDirty; // require dirty
        }
        return /*#__PURE__*/ React.createElement(FunctionButton.Submit, {
            className: cn("btn-primary", className),
            disabled: invalid,
            loading: isSubmitting,
            ...props
        }, children);
    };
    const _DebugButton = (props) => {
        const { log } = useFormDebug();
        return /*#__PURE__*/ React.createElement(FunctionButton.Button, {
            onClick: log,
            ...props
        }, "DEBUG");
    };
    ReactHookForm.DebugButton = (props) => {
        return /*#__PURE__*/ React.createElement(DevOnly, null, /*#__PURE__*/ React.createElement(_DebugButton, props));
    };
})(ReactHookForm || (ReactHookForm = {}));
function _handleInvalid(errors) {
    console.error(`[FormInvalid]`, errors);
    const msg = getFieldErrors(errors).map((v) => `${v.path}: ${v.error.message}`).join("; ");
    showErrorToast(`表单验证失败: ${msg}`);
}
function useFormDebug() {
    const context = useFormContext();
    const { formState, getValues, control } = context;
    return {
        log: () => {
            const { defaultValues, // name,
            dirtyFields, disabled, errors, isDirty, isLoading, isSubmitSuccessful, isSubmitted, isSubmitting, isValid, isValidating, submitCount, touchedFields, validatingFields } = formState;
            console.log(`[FormDebug]`, "dirty", getDirtyFields(context), "value", getValues(), "formState", {
                defaultValues,
                dirtyFields,
                disabled,
                errors,
                isDirty,
                isLoading,
                isSubmitSuccessful,
                isSubmitted,
                isSubmitting,
                isValid,
                isValidating,
                submitCount,
                touchedFields,
                validatingFields
            }, "props", control._options);
        }
    };
}
export var ReactHookForm;
//# sourceMappingURL=ReactHookForm.js.map