daily-toolset/dist/form/formProvider.js

A lightweight, versatile collection of TypeScript utility functions for everyday development needs. Simplify and streamline your Node.js, React, and Next.js projects with a powerful suite of well-organized helpers for strings, arrays, dates, objects, and

"use strict";
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormProvider = FormProvider;
exports.useForm = useForm;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const functionUtils_1 = require("../functionUtils");
const formValidation_1 = require("./formValidation");
const FormContext = (0, react_1.createContext)(null);
function FormProvider({ children }) {
    const [formValues, setFormValues] = (0, react_1.useState)({});
    const [formErrors, setFormErrors] = (0, react_1.useState)({});
    const [schema, setSchema] = (0, react_1.useState)(undefined);
    const [mode, setMode] = (0, react_1.useState)("controlled");
    const updateValue = (0, react_1.useCallback)((0, functionUtils_1.debounce)((name, value) => {
        if (mode === "uncontrolled" || !name)
            return;
        setFormValues((prev) => ({
            ...prev,
            [name]: value,
        }));
    }, 300), [mode]);
    const validateField = (0, react_1.useCallback)(async (name, inputValue) => {
        var _a;
        if (!name || !schema || mode === "uncontrolled")
            return;
        const formData = new FormData();
        formData.append(name, (_a = inputValue === null || inputValue === void 0 ? void 0 : inputValue.toString()) !== null && _a !== void 0 ? _a : "");
        const result = await (0, formValidation_1.formValidation)(schema, formData);
        if (result.status !== "success") {
            setFormErrors((prev) => {
                var _a;
                return ({
                    ...prev,
                    [name]: (_a = result.errorData) === null || _a === void 0 ? void 0 : _a.errors[name],
                });
            });
        }
        else {
            setFormErrors((prev) => ({ ...prev, [name]: undefined }));
        }
    }, [schema, mode]);
    const contextValues = (0, react_1.useMemo)(() => ({
        formValues,
        formErrors,
        schema,
        setFormValues,
        setFormErrors,
        setSchema,
        updateValue,
        validateField,
        setMode,
    }), [formValues, formErrors, schema]);
    return ((0, jsx_runtime_1.jsx)(FormContext.Provider, { value: contextValues, children: children }));
}
function useForm(props = {}) {
    const { schema, defaultValues = {}, errors = {}, mode = "controlled", } = props;
    const context = (0, react_1.useContext)(FormContext);
    (0, react_1.useEffect)(() => {
        if (schema && context) {
            context.setSchema(schema);
        }
    }, [schema, context]);
    (0, react_1.useEffect)(() => {
        if (context) {
            context.setMode(mode);
        }
    }, [mode, context]);
    // const setDefaultValues = useMemo(() => {
    //   if (context && Object.keys(defaultValues as object).length > 0) {
    //     const valuesEqual =
    //       JSON.stringify(context.formValues) === JSON.stringify(defaultValues);
    //     if (!valuesEqual) {
    //       context.setFormValues(defaultValues);
    //     }
    //   }
    // }, [defaultValues]);
    (0, react_1.useEffect)(() => {
        if (context && Object.keys(defaultValues).length > 0) {
            const valuesEqual = JSON.stringify(context.formValues) === JSON.stringify(defaultValues);
            if (!valuesEqual) {
                context.setFormValues(defaultValues);
            }
        }
    }, [defaultValues]);
    (0, react_1.useEffect)(() => {
        if (context &&
            Object.keys(errors).length > 0 &&
            JSON.stringify(context.formErrors) !== JSON.stringify(errors)) {
            context.setFormErrors(errors);
        }
    }, [errors, context]);
    if (!context) {
        // console.warn(
        //   "FormContext is not initialized. Wrap your component in a FormProvider."
        // );
        return {
            formValues: defaultValues,
            formErrors: errors,
            updateValue: () => { },
            validateField: async () => { },
        };
    }
    const formValues = (context.formValues && Object.keys(context.formValues).length > 0
        ? context.formValues
        : {});
    return {
        formValues,
        formErrors: context.formErrors,
        updateValue: context.updateValue,
        validateField: context.validateField,
    };
}