react-form-manage 1.0.6-beta.0 → 1.0.6-beta.1

package/dist/providers/Form.js

@@ -0,0 +1,322 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneDeep, get, isEqual, last, set, uniq } from "lodash";
+import { useTask } from "minh-custom-hooks-release";
+import { createContext, useContext, useEffect, useState } from "react";
+import { flushSync } from "react-dom";
+import { useShallow } from "zustand/react/shallow"; // Import useShallow
+import FormCleanUp from "../components/Form/FormCleanUp";
+import { useFormListeners, useFormStore } from "../stores/formStore";
+import { getAllNoneObjStringPath } from "../utils/obj.util";
+export const FormContext = createContext(null);
+export default function Form({ children, formName, initialValues, onFinish, onReject, onFinally, FormElement, ...props }) {
+    const { getFormItemValue, setInitData, setData, getFormValues, setFormState, setFormInstance, revokeFormInstance, setSubmitHistory, clearFormValues, clearFormInitialValues, clearFormState, } = useFormStore(useShallow((state) => ({
+        setInitData: state.setFormInitData,
+        getFormValues: state.getFormValues,
+        setFormState: state.setFormState,
+        setFormInstance: state.setFormInstance,
+        revokeFormInstance: state.revokeFormInstance,
+        setData: state.setData,
+        setSubmitHistory: state.setSubmitHistory,
+        getFormItemValue: state.getFormItemValue,
+        clearFormValues: state.clearFormValues,
+        clearFormInitialValues: state.clearFormInitialValues,
+        clearFormState: state.clearFormState,
+        // Test, nhớ xóa sau khi xong
+        formStates: state.formStates?.[formName],
+    })));
+    const { getListeners } = useFormListeners(useShallow((state) => {
+        return {
+            getListeners: state.getListeners,
+        };
+    }));
+    const setFieldValue = (name, value, options) => {
+        const listener = getListeners().find((l) => l.name === name && l.formName === formName);
+        if (listener) {
+            listener.onChange(value, options);
+        }
+        else {
+            setData(formName, name, value);
+        }
+    };
+    const setFieldValues = (values, options = { notTriggerDirty: false }) => {
+        const allStringPath = getAllNoneObjStringPath(values);
+        allStringPath.forEach((p) => {
+            const listener = getListeners().find((l) => l.name === p && l.formName === formName);
+            if (listener) {
+                listener.onChange(get(values, listener.name), options);
+            }
+            else {
+                setData(formName, p, get(values, p));
+            }
+        });
+    };
+    const getFieldValue = (name) => {
+        return getFormItemValue(formName, name);
+    };
+    const getFieldValues = (names = []) => {
+        return names.map((name) => ({
+            name,
+            value: getFormItemValue(formName, name),
+        }));
+    };
+    const setFieldFocus = (name) => {
+        const listener = getListeners().find((l) => l.name === name && l.formName === formName);
+        if (listener && typeof listener.emitFocus === "function") {
+            listener.emitFocus();
+        }
+    };
+    const getFieldErrors = (names) => {
+        const listeners = getListeners().filter((l) => names.includes(l.name) && l.formName === formName);
+        return listeners.map((l) => ({
+            name: l.name,
+            errors: l.internalErrors || [],
+        }));
+    };
+    const getAllFieldErrors = () => {
+        return getListeners()
+            ?.filter((l) => {
+            return l.internalErrors?.length && l.formName === formName;
+        })
+            .map((l) => ({
+            name: l.name,
+            formName: l.formName,
+            formItemId: l.formItemId,
+            errors: l.internalErrors,
+        }));
+    };
+    // Submit data
+    const { run: runSubmit, runAsync: runSubmitAsync, state: _, reset, } = useTask({
+        async task(props) {
+            try {
+                flushSync(setFormState({ formName, submitState: "submitting" }));
+                const errorFields = getAllFieldErrors();
+                const listeners = getListeners().filter((l) => l.formName === formName);
+                const formValues = getFormValues(formName);
+                const resultValues = cloneDeep(formValues);
+                const cleanValues = {};
+                uniq(listeners, (l) => l.name).forEach((l) => {
+                    set(cleanValues, l.name, get(resultValues, l.name));
+                });
+                const handleIsolateCase = async () => {
+                    if (!errorFields?.length) {
+                        if (typeof props?.externalFinishCallback !== "function") {
+                            onFinish && (await onFinish(cleanValues, resultValues));
+                        }
+                        else {
+                            if (props?.callBothFinish) {
+                                onFinish && (await onFinish(cleanValues, resultValues));
+                                await props?.externalFinishCallback(cleanValues, resultValues);
+                            }
+                            else {
+                                await props?.externalFinishCallback(cleanValues, resultValues);
+                            }
+                        }
+                        // if (!isEqual(cleanValues, last(getSubmitHistory(formName)))) {
+                        //   setSubmitHistory(formName, cleanValues);
+                        // }
+                        setSubmitHistory(formName, cleanValues);
+                        // if (
+                        //   !isEqual(
+                        //     resultValues,
+                        //     last(submitHistoryWithUnRegisteredValues.current)
+                        //   )
+                        // ) {
+                        //   submitHistoryWithUnRegisteredValues.current = [
+                        //     ...submitHistoryWithUnRegisteredValues.current,
+                        //     resultValues,
+                        //   ].slice(-10, 10);
+                        // }
+                        // resultWatchQueue.current.forEach((l) => {
+                        //   l.emitSubmitTrigger(cleanValues);
+                        //   l.emitDataChange(cleanValues);
+                        //   l.emitDataWithUnRegisteredValuesChange(resultValues);
+                        //   l.emitSubmitTriggerWithUnRegisteredValues(resultValues);
+                        // });
+                    }
+                    else {
+                        if (typeof props?.externalRejectCallback !== "function") {
+                            onReject && (await onReject(errorFields));
+                        }
+                        else {
+                            if (props?.callBothReject) {
+                                onReject && (await onReject(errorFields));
+                                await props?.externalRejectCallback(errorFields);
+                            }
+                            else {
+                                await props?.externalRejectCallback(errorFields);
+                            }
+                        }
+                    }
+                };
+                const handleFinallyCase = async () => {
+                    if (typeof props?.externalFinallyCallback !== "function") {
+                        onFinally &&
+                            (await onFinally({
+                                errorsField: errorFields,
+                                values: cleanValues,
+                                withUnRegisteredValues: resultValues,
+                            }));
+                    }
+                    else {
+                        if (props?.callBothFinally) {
+                            onFinally &&
+                                (await onFinally({
+                                    errorsField: errorFields,
+                                    values: cleanValues,
+                                    withUnRegisteredValues: resultValues,
+                                }));
+                            await props?.externalFinallyCallback({
+                                errorsField: errorFields,
+                                values: cleanValues,
+                                withUnRegisteredValues: resultValues,
+                            });
+                        }
+                        else {
+                            await props?.externalFinallyCallback({
+                                errorsField: errorFields,
+                                values: cleanValues,
+                                withUnRegisteredValues: resultValues,
+                            });
+                        }
+                    }
+                };
+                await Promise.allSettled([handleIsolateCase(), handleFinallyCase()]);
+                if (errorFields?.length) {
+                    setFormState({ formName, submitState: "rejected" });
+                }
+                else {
+                    setFormState({ formName, submitState: "submitted" });
+                }
+            }
+            catch (error) {
+                console.error("Error in form submit: ", error);
+                setFormState({ formName, submitState: "rejected" });
+            }
+        },
+    });
+    const resetFields = (resetOptions) => {
+        reset();
+        flushSync(setFormState({
+            formName,
+            isInitied: false,
+        }));
+        const totalListenerFields = getListeners();
+        if (Array.isArray(resetOptions)) {
+            totalListenerFields.forEach((l) => {
+                const findListenerByName = resetOptions.find((o) => o.name === l.name);
+                if (findListenerByName) {
+                    l.onReset(findListenerByName?.value);
+                }
+            });
+            totalListenerFields
+                .filter((l) => resetOptions.find((o) => o.name !== l.name))
+                .forEach((l) => {
+                l?.onReset?.();
+            });
+        }
+        else if (typeof resetOptions === "object") {
+            const allStringPath = getAllNoneObjStringPath(resetOptions);
+            allStringPath.forEach((p) => {
+                const listener = totalListenerFields.find((l) => l.name === p && l.formName === formName);
+                if (listener) {
+                    listener.onChange(get(resetOptions, listener.name));
+                }
+                else {
+                    setData(formName, p, get(resetOptions, p));
+                }
+            });
+        }
+        else {
+            totalListenerFields.forEach((l) => {
+                l?.onReset?.();
+            });
+        }
+        setFormState({
+            formName,
+            isInitied: true,
+        });
+    };
+    useEffect(() => {
+        setInitData(formName, initialValues);
+        setFormState({
+            formName,
+            isInitied: true,
+            submitState: "idle",
+        });
+        setFormInstance({
+            formName,
+            resetFields,
+            submit: runSubmit,
+            submitAsync: runSubmitAsync,
+            setFieldValue,
+            setFieldValues,
+            getFieldValue,
+            getFieldValues,
+            setFieldFocus,
+            getFieldErrors,
+        });
+        return () => {
+            revokeFormInstance({ formName });
+            clearFormInitialValues(formName);
+            clearFormValues(formName);
+            clearFormState(formName);
+        };
+    }, []);
+    return (_jsxs(FormContext.Provider, { value: {
+            formName,
+        }, children: [FormElement ? (_jsx(FormElement, { onSubmit: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    runSubmit(undefined);
+                }, ...props, children: children })) : (_jsx("form", { onSubmit: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    runSubmit(undefined);
+                }, ...props, children: children })), _jsx(FormCleanUp, {})] }));
+}
+export function useFormContext() {
+    const c = useContext(FormContext);
+    if (!c)
+        throw new Error("Must be use inside FormProvider");
+    return c;
+}
+export function useForm(formNameOrFormInstance) {
+    const targetFormName = typeof formNameOrFormInstance === "object" && formNameOrFormInstance !== null
+        ? formNameOrFormInstance.formName
+        : formNameOrFormInstance;
+    const formInstance = useFormStore((state) => {
+        return state.formInstances.find((i) => i.formName === targetFormName);
+    });
+    return [formInstance];
+}
+export function useWatch(name, formNameOrFormInstance) {
+    const [formInstance] = useForm(formNameOrFormInstance);
+    const value = useFormStore((state) => {
+        return state.getFormItemValue(formInstance?.formName ?? formNameOrFormInstance, name);
+    });
+    return value;
+}
+export function useSubmitDataWatch({ formNameOrFormInstance, triggerWhenChange = false, mapFn, }) {
+    const [formInstance] = useForm(formNameOrFormInstance);
+    const value = useFormStore((state) => {
+        return last(get(state.submitHistory, formInstance?.formName));
+    });
+    const [submitData, setSubmitData] = useState(mapFn ? mapFn(value, null) : value);
+    useEffect(() => {
+        if (!triggerWhenChange || !isEqual(submitData, value)) {
+            setSubmitData(mapFn ? mapFn(value, submitData) : value);
+        }
+    }, [value, triggerWhenChange]);
+    return submitData;
+}
+export const useFormStateWatch = (formNameOrFormInstance) => {
+    const [formInstance] = useForm(formNameOrFormInstance);
+    const formState = useFormStore((state) => {
+        return state.formStates?.[formInstance?.formName];
+    });
+    return formState;
+};
+Form.useForm = useForm;
+Form.useWatch = useWatch;
+Form.useSubmitDataWatch = useSubmitDataWatch;
+Form.useFormStateWatch = useFormStateWatch;

package/dist/stores/formStore.js

@@ -0,0 +1,304 @@
+import { produce } from "immer";
+import { cloneDeep, get, isNil, isNumber, last, set, unset } from "lodash";
+import { v4 } from "uuid";
+import { create } from "zustand";
+import { getAllNoneObjStringPath } from "../utils/obj.util";
+export const useFormStore = create((storeSet, storeGet) => ({
+    forms: {},
+    initialValues: {},
+    formStates: {},
+    cacheData: {},
+    formInstances: [],
+    submitHistory: {},
+    setData(formName, name, value) {
+        return storeSet(produce((state) => {
+            const oldValues = state.forms;
+            set(oldValues, `${formName}.${name}`, value);
+        }));
+    },
+    getCacheData(formName) {
+        return get(storeGet(), `cacheData.${formName}`);
+    },
+    setCacheData(formName, name, value) {
+        return storeSet(produce((state) => {
+            const oldValues = state.cacheData;
+            set(oldValues, `${formName}.${name}`, value);
+        }));
+    },
+    clearCacheData(formName) {
+        return storeSet(produce((state) => {
+            const oldValues = state.cacheData;
+            if (formName) {
+                set(oldValues, formName, {});
+            }
+            else {
+                set(oldValues, "", {});
+            }
+        }));
+    },
+    getFormItemValue(formName, name) {
+        return get(storeGet().forms?.[formName], name);
+    },
+    getFormValues(formName) {
+        return storeGet().forms?.[formName];
+    },
+    clearFormValues(formName) {
+        return storeSet(produce((state) => {
+            const oldValues = state.forms;
+            // console.log("Clear form values", formName);
+            unset(oldValues, formName);
+            // console.log(JSON.parse(JSON.stringify(oldValues)));
+        }));
+    },
+    clearFormInitialValues(formName) {
+        return storeSet(produce((state) => {
+            const oldValues = state.initialValues;
+            // console.log("Clear form initial values", formName);
+            unset(oldValues, formName);
+            // console.log(JSON.parse(JSON.stringify(oldValues)));
+        }));
+    },
+    clearObjKeyItem(formName, name) {
+        return storeSet(produce((state) => {
+            const oldValues = state.forms;
+            // console.log("Clear item value", formName, name);
+            unset(oldValues, `${formName}.${name}`);
+            // console.log(JSON.parse(JSON.stringify(oldValues)));
+        }));
+    },
+    clearArrItem(formName, name) {
+        return storeSet(produce((state) => {
+            const oldValues = state.forms;
+            console.log("Clear item array value", formName, name);
+            const arrPath = name.split(".").slice(0, -1).join(".");
+            const elPath = Number(name.split(".").slice(-1).join(""));
+            const getArrItem = get(oldValues, `${formName}.${arrPath}`);
+            if (isNumber(elPath)) {
+                getArrItem.splice(elPath, 1);
+            }
+            // console.log(JSON.parse(JSON.stringify(oldValues)));
+        }));
+    },
+    setFormState({ formName, isInitied, submitState }) {
+        return storeSet(produce((state) => {
+            const oldValues = state.formStates;
+            const getFormState = get(storeGet().formStates, formName);
+            if (isNil(getFormState)) {
+                set(oldValues, formName, { isInitied, submitState });
+            }
+            else {
+                if (!isNil(isInitied)) {
+                    set(oldValues, `${formName}.isInitied`, isInitied);
+                }
+                if (!isNil(submitState)) {
+                    set(oldValues, `${formName}.submitState`, submitState);
+                }
+            }
+        }));
+    },
+    clearFormState(formName) {
+        return storeSet(produce((state) => {
+            const oldValues = state.formStates;
+            // console.log("Clear form state", formName);
+            unset(oldValues, formName);
+            // console.log(JSON.parse(JSON.stringify(oldValues)));
+        }));
+    },
+    getFormState(formName) {
+        return get(storeGet(), `formStates.${formName}`);
+    },
+    setFormInitData(formName, initValues) {
+        return storeSet(produce((state) => {
+            const oldValues = state.initialValues;
+            const listInitPath = getAllNoneObjStringPath(initValues);
+            // console.log({ listInitPath, initValues });
+            listInitPath.forEach((k) => {
+                if (get(initValues, k)) {
+                    // console.log("init form data values: ", k, get(initValues, k));
+                    set(oldValues, `${formName}.${k}`, get(initValues, k));
+                }
+            });
+        }));
+    },
+    getInitData(formName, name) {
+        return get(storeGet().initialValues, `${formName}.${name}`);
+    },
+    setInitData(formName, name, value) {
+        return storeSet(produce((state) => {
+            const oldValues = state.initialValues;
+            // console.log("Inner init: ", `${formName}.${name}`, value);
+            set(oldValues, `${formName}.${name}`, value);
+        }));
+    },
+    setFormInstance({ formName, resetFields, submit, submitAsync, setFieldValue, setFieldValues, getFieldValue, getFieldValues, getFieldErrors, setFieldFocus, }) {
+        return storeSet(produce((state) => {
+            const storeListeners = state.formInstances;
+            const findListenerIndex = storeListeners.findIndex((l) => l.formName === formName);
+            if (findListenerIndex > -1) {
+                if (!isNil(resetFields)) {
+                    storeListeners[findListenerIndex].resetFields = resetFields;
+                }
+                if (!isNil(submit)) {
+                    storeListeners[findListenerIndex].submit = submit;
+                }
+                if (!isNil(setFieldFocus)) {
+                    storeListeners[findListenerIndex].setFieldFocus = setFieldFocus;
+                }
+                if (!isNil(submitAsync)) {
+                    storeListeners[findListenerIndex].submitAsync = submitAsync;
+                }
+                if (!isNil(setFieldValue)) {
+                    storeListeners[findListenerIndex].setFieldValue = setFieldValue;
+                }
+                if (!isNil(setFieldValues)) {
+                    storeListeners[findListenerIndex].setFieldValues = setFieldValues;
+                }
+                if (!isNil(getFieldValue)) {
+                    storeListeners[findListenerIndex].getFieldValue = getFieldValue;
+                }
+                if (!isNil(getFieldValues)) {
+                    storeListeners[findListenerIndex].getFieldValues = getFieldValues;
+                }
+                if (!isNil(getFieldErrors)) {
+                    storeListeners[findListenerIndex].getFieldErrors = getFieldErrors;
+                }
+                return;
+            }
+            storeListeners.push({
+                formName,
+                resetFields,
+                submit,
+                submitAsync,
+                setFieldValue,
+                setFieldValues,
+                getFieldValue,
+                getFieldValues,
+                getFieldErrors,
+                setFieldFocus,
+            });
+        }));
+    },
+    revokeFormInstance({ formName }) {
+        return storeSet(produce((state) => {
+            const instances = state.formInstances;
+            const findInstanceIndex = instances.findIndex((l) => l.formName == formName);
+            // console.log("Find item for revoke: ", findListenerIndex, formItemId);
+            if (findInstanceIndex > -1) {
+                // const listenersInfo = cloneDeep(instances[findInstanceIndex]);
+                instances.splice(findInstanceIndex, 1);
+                // onAfterRevoke(
+                //   listenersInfo,
+                //   instances.filter(
+                //     (l) =>
+                //       l.name === listenersInfo.name &&
+                //       l.formName === listenersInfo.formName &&
+                //       l.formItemId !== listenersInfo.formItemId
+                //   )
+                // );
+            }
+        }));
+    },
+    getCurrentSubmit(formName) {
+        return last(get(storeGet().submitHistory, formName)) || null;
+    },
+    getSubmitHistory(formName) {
+        return get(storeGet().submitHistory, formName);
+    },
+    setSubmitHistory(formName, submitData) {
+        return storeSet(produce((state) => {
+            const oldValues = get(state.submitHistory, formName);
+            if (oldValues) {
+                oldValues.push(submitData);
+                oldValues.splice(0, oldValues.length - 3);
+            }
+            else {
+                set(state.submitHistory, formName, [submitData]);
+            }
+            console.log("Submit history: ", formName);
+        }));
+    },
+}));
+export const useFormListeners = create((storeSet, storeGet) => ({
+    listeners: [],
+    getListener(formItemId) {
+        return storeGet().listeners.find((l) => l.formItemId === formItemId);
+    },
+    getListeners() {
+        return storeGet().listeners;
+    },
+    setListener({ formName, name, onChange, onReset, isTouched, isDirty, formItemId, internalErrors, onFocus, emitFocus, }) {
+        return storeSet(produce((state) => {
+            const storeListeners = state.listeners;
+            const findListenerIndex = state.listeners.findIndex((l) => l.formItemId === formItemId);
+            if (findListenerIndex > -1) {
+                if (!isNil(formName)) {
+                    storeListeners[findListenerIndex].formName = formName;
+                }
+                if (!isNil(name)) {
+                    storeListeners[findListenerIndex].name = name;
+                }
+                if (!isNil(onChange)) {
+                    storeListeners[findListenerIndex].onChange = onChange;
+                }
+                if (!isNil(onReset)) {
+                    storeListeners[findListenerIndex].onReset = onReset;
+                }
+                if (!isNil(isTouched)) {
+                    storeListeners[findListenerIndex].isTouched = isTouched;
+                }
+                if (!isNil(isDirty)) {
+                    storeListeners[findListenerIndex].isDirty = isDirty;
+                }
+                if (!isNil(internalErrors)) {
+                    storeListeners[findListenerIndex].internalErrors = internalErrors;
+                }
+                if (!isNil(onFocus)) {
+                    storeListeners[findListenerIndex].onFocus = onFocus;
+                }
+                if (!isNil(emitFocus)) {
+                    storeListeners[findListenerIndex].emitFocus = emitFocus;
+                }
+                return;
+            }
+            storeListeners.push({
+                name,
+                formName,
+                isTouched,
+                isDirty,
+                formItemId,
+                internalErrors,
+                onChange,
+                onReset,
+            });
+        }));
+    },
+    revokeListener(formItemId, onAfterRevoke) {
+        return storeSet(produce((state) => {
+            const storeListeners = state.listeners;
+            const findListenerIndex = storeListeners.findIndex((l) => l.formItemId == formItemId);
+            // console.log("Find item for revoke: ", findListenerIndex, formItemId);
+            if (findListenerIndex > -1) {
+                const listenersInfo = cloneDeep(storeListeners[findListenerIndex]);
+                storeListeners.splice(findListenerIndex, 1);
+                onAfterRevoke(listenersInfo, storeListeners.filter((l) => l.name === listenersInfo.name &&
+                    l.formName === listenersInfo.formName &&
+                    l.formItemId !== listenersInfo.formItemId));
+            }
+        }));
+    },
+}));
+export const useFormCleanUp = create((storeSet) => ({
+    cleanUpStack: [],
+    setCleanUpStack({ name, type, itemKey, formName }) {
+        return storeSet(produce((state) => {
+            const oldValues = state.cleanUpStack;
+            const cleanUpKey = v4();
+            oldValues.push({ name, type, key: cleanUpKey, itemKey, formName });
+        }));
+    },
+    clearCleanUpStack() {
+        return storeSet(produce((state) => {
+            state.cleanUpStack = [];
+        }));
+    },
+}));

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from './public';

package/dist/types/index.js

@@ -0,0 +1 @@
+export * from './public';

package/dist/types/public.d.ts

@@ -0,0 +1,51 @@
+export type FormValues<T = any> = T;
+export interface PublicFormInstance<T = any> {
+    formName: string;
+    resetFields?: (values?: Partial<T>) => void;
+    submit?: (values?: T) => void;
+    submitAsync?: (values?: T) => Promise<any>;
+    setFieldValue?: (name: keyof T & string, value: any) => void;
+    setFieldValues?: (values: Partial<T>) => void;
+    getFieldValue?: (name: keyof T & string) => any;
+    getFieldValues?: () => T;
+    getFieldErrors?: () => Record<string, any>;
+}
+export interface UseFormItemProps<T = any> {
+    formName?: string;
+    form?: PublicFormInstance<T>;
+    name?: keyof T & string;
+    initialValue?: any;
+    formItemId?: string;
+    rules?: any[];
+}
+export interface UseFormItemReturn<T = any> {
+    value: T | undefined;
+    onChange: (value: T, options?: any) => void;
+    state: any;
+    errors: any;
+    onFocus: () => void;
+    isDirty?: boolean;
+}
+export interface UseFormListProps<T = any> {
+    name?: string;
+    form?: PublicFormInstance<T>;
+    initialValues?: T[];
+    formName?: string;
+}
+export interface ListField {
+    name: string;
+    key: string;
+}
+export interface UseFormListReturn {
+    listFields: ListField[];
+    move: (opts: {
+        from?: number;
+        fromKey?: string;
+        to: number;
+    }) => void;
+    add: (index: number) => void;
+    remove: (opts: {
+        index?: number;
+        key?: string;
+    }) => void;
+}