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

package/dist/index.d.ts

@@ -1,135 +1,9 @@
-import * as React from "react";
-
-// Generic types for top-level Form provider
-export interface FormProps<TValues = Record<string, any>> {
-  children?: React.ReactNode;
-  formName?: string;
-  initialValues?: Partial<TValues>;
-  onFinish?: (
-    values: Partial<TValues>,
-    allValues?: TValues,
-  ) => void | Promise<void>;
-  onReject?: (errors: any) => void | Promise<void>;
-  onFinally?: (payload: {
-    errorsField: any;
-    values: Partial<TValues>;
-    withUnRegisteredValues: TValues;
-  }) => void | Promise<void>;
-  FormElement?: React.ComponentType<any>;
-  [key: string]: any;
-}
-
-declare function Form<TValues = Record<string, any>>(
-  props: FormProps<TValues>,
-): JSX.Element;
-
-// Standalone generic hooks (also attached to Form as static properties at runtime)
-export function useForm<TValues = Record<string, any>>(
-  formNameOrFormInstance?: any,
-): [any];
-
-export function useWatch<
-  TValues = Record<string, any>,
-  K extends keyof TValues = string & keyof TValues,
->(
-  name: K,
-  formNameOrFormInstance?: any,
-): K extends keyof TValues ? TValues[K] : any;
-
-export function useSubmitDataWatch<TValues = any>(opts: {
-  formNameOrFormInstance?: any;
-  triggerWhenChange?: boolean;
-  mapFn?: (v: any, prev: any) => any;
-}): any;
-
-export function useFormStateWatch<TValues = any>(
-  formNameOrFormInstance?: any,
-): any;
-
-declare namespace Form {
-  // expose same hook names on the Form object
-  export { useForm, useWatch, useSubmitDataWatch, useFormStateWatch };
-}
-
+import Form, { useForm, useWatch, useSubmitDataWatch, useFormStateWatch } from "./providers/Form";
+import FormItem from "./components/Form/FormItem";
+import FormList from "./components/Form/FormList";
+import Input from "./components/Input";
+import InputWrapper from "./components/Form/InputWrapper";
+import useFormItemControl from "./hooks/useFormItemControl";
+import useFormListControl from "./hooks/useFormListControl";
+export { Form, FormItem, FormList, Input, InputWrapper, useFormItemControl, useFormListControl, useForm, useWatch, useSubmitDataWatch, useFormStateWatch, };
 export default Form;
-export { Form };
-
-// FormItem (generic for the field value type)
-export interface FormItemProps<T = any> {
-  children: React.ReactElement;
-  name: string;
-  formName?: string;
-  initialValue?: T;
-  formItemId?: string;
-  rules?: any[];
-  valuePropName?: string;
-  getValueFromEvent?: (e: any) => T;
-  [key: string]: any;
-}
-
-export function FormItem<T = any>(props: FormItemProps<T>): JSX.Element;
-
-// FormList (generic for item shape)
-export interface FormListProps<TItem = any> {
-  name: string;
-  initialValues?: TItem[];
-  form?: any;
-  formName?: string;
-  children: (listFields: any[], actions: any) => React.ReactNode;
-}
-
-export function FormList<TItem = any>(props: FormListProps<TItem>): JSX.Element;
-
-// Input components
-export interface BasicInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  onChange?: (value: any, ...args: any[]) => void;
-  isValidating?: boolean;
-  [key: string]: any;
-}
-
-// InputWrapper
-export interface InputWrapperProps {
-  children: React.ReactElement;
-  errors?: Array<{ ruleName?: string; message?: string }>;
-  isDirty?: boolean;
-  formState?: any;
-  name?: string;
-  formItemId?: string;
-  [key: string]: any;
-}
-
-export function InputWrapper(props: InputWrapperProps): JSX.Element;
-
-// Cleanup component (internal)
-export function FormCleanUp(): JSX.Element;
-
-// Hooks in src/hooks
-export function useFormItemControl<T = any>(opts: {
-  formName?: string;
-  form?: any;
-  name: string;
-  initialValue?: T;
-  formItemId?: string;
-  rules?: any[];
-  elementRef?: React.RefObject<any>;
-}): {
-  value: T | undefined;
-  onChange: (value: any, options?: any) => void;
-  state: any;
-  errors: any;
-  onFocus: () => void;
-  isDirty?: boolean;
-  onReset?: (value?: any) => void;
-};
-
-export function useFormListControl<TItem = any>(opts: {
-  name: string;
-  form?: any;
-  initialValues?: TItem[];
-  formName?: string;
-}): {
-  listFields: Array<{ name: string; key: string }>;
-  add: (index?: number) => void;
-  remove: (opts: { index?: number; key?: string }) => void;
-  move: (opts: { from?: number; fromKey?: string; to: number }) => void;
-};

package/dist/index.js

@@ -0,0 +1,9 @@
+import Form, { useForm, useWatch, useSubmitDataWatch, useFormStateWatch, } from "./providers/Form";
+import FormItem from "./components/Form/FormItem";
+import FormList from "./components/Form/FormList";
+import Input from "./components/Input";
+import InputWrapper from "./components/Form/InputWrapper";
+import useFormItemControl from "./hooks/useFormItemControl";
+import useFormListControl from "./hooks/useFormListControl";
+export { Form, FormItem, FormList, Input, InputWrapper, useFormItemControl, useFormListControl, useForm, useWatch, useSubmitDataWatch, useFormStateWatch, };
+export default Form;

package/dist/providers/Form.d.ts

@@ -0,0 +1,28 @@
+import type { PublicFormInstance } from "../types/public";
+export declare const FormContext: import("react").Context<any>;
+declare function Form({ children, formName, initialValues, onFinish, onReject, onFinally, FormElement, ...props }: {
+    [x: string]: any;
+    children: any;
+    formName: any;
+    initialValues: any;
+    onFinish: any;
+    onReject: any;
+    onFinally: any;
+    FormElement: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace Form {
+    var useForm: typeof import("./Form").useForm;
+    var useWatch: typeof import("./Form").useWatch;
+    var useSubmitDataWatch: typeof import("./Form").useSubmitDataWatch;
+    var useFormStateWatch: <T = any>(formNameOrFormInstance?: string | PublicFormInstance<T>) => any;
+}
+export default Form;
+export declare function useFormContext(): any;
+export declare function useForm<T = any>(formNameOrFormInstance?: string | PublicFormInstance<T>): PublicFormInstance<T>[];
+export declare function useWatch<T = any>(name: keyof T & string, formNameOrFormInstance?: string | PublicFormInstance<T>): T[keyof T] | undefined;
+export declare function useSubmitDataWatch<T = any>({ formNameOrFormInstance, triggerWhenChange, mapFn, }: {
+    formNameOrFormInstance?: string | PublicFormInstance<T>;
+    triggerWhenChange?: boolean;
+    mapFn?: (v: any, prev: any) => any;
+}): T | undefined;
+export declare const useFormStateWatch: <T = any>(formNameOrFormInstance?: string | PublicFormInstance<T>) => any;

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.d.ts

@@ -0,0 +1,25 @@
+export interface FormInstance {
+    formName: string;
+    resetFields?: any;
+    submit?: any;
+    submitAsync?: any;
+    setFieldValue?: any;
+    setFieldValues?: any;
+    getFieldValue?: any;
+    getFieldValues?: any;
+    getFieldErrors?: any;
+    setFieldFocus?: any;
+}
+interface FormStoreState {
+    forms: Record<string, any>;
+    initialValues: Record<string, any>;
+    formStates: Record<string, any>;
+    cacheData: Record<string, any>;
+    formInstances: FormInstance[];
+    submitHistory: Record<string, any[]>;
+    [key: string]: any;
+}
+export declare const useFormStore: import("zustand").UseBoundStore<import("zustand").StoreApi<FormStoreState>>;
+export declare const useFormListeners: import("zustand").UseBoundStore<import("zustand").StoreApi<any>>;
+export declare const useFormCleanUp: import("zustand").UseBoundStore<import("zustand").StoreApi<any>>;
+export {};