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

package/src/providers/Form.tsx

@@ -0,0 +1,440 @@
+import { cloneDeep, get, isEqual, last, set, uniq } from "lodash";
+import { useTask } from "minh-custom-hooks-release";
+import { createContext, useContext, useEffect, useState } from "react";
+import type { ReactNode, ComponentType, FormHTMLAttributes } 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 type { PublicFormInstance } from "../types/public";
+import { getAllNoneObjStringPath } from "../utils/obj.util";
+
+export const FormContext = createContext(null);
+
+export interface FormProps<T = any> extends Omit<FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {
+  children: ReactNode;
+  formName: string;
+  initialValues?: T;
+  onFinish?: (values: T, allValues?: any) => void | Promise<void>;
+  onReject?: (errorFields: any[]) => void | Promise<void>;
+  onFinally?: (result: { errorsField: any[]; values: T; withUnRegisteredValues: any }) => void | Promise<void>;
+  FormElement?: ComponentType<any>;
+}
+
+export default function Form<T = any>({
+  children,
+  formName,
+  initialValues,
+  onFinish,
+  onReject,
+  onFinally,
+  FormElement,
+  ...props
+}: FormProps<T>) {
+  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 = {} as T;
+        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 (
+    <FormContext.Provider
+      value={{
+        formName,
+      }}
+    >
+      {FormElement ? (
+        <FormElement
+          onSubmit={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            runSubmit(undefined as any);
+          }}
+          {...props}
+        >
+          {children}
+        </FormElement>
+      ) : (
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            runSubmit(undefined as any);
+          }}
+          {...props}
+        >
+          {children}
+        </form>
+      )}
+      <FormCleanUp />
+    </FormContext.Provider>
+  );
+}
+
+export function useFormContext() {
+  const c = useContext(FormContext);
+
+  if (!c) throw new Error("Must be use inside FormProvider");
+
+  return c;
+}
+
+export function useForm<T = any>(formNameOrFormInstance?: string | PublicFormInstance<T>) {
+  const targetFormName =
+    typeof formNameOrFormInstance === "object" && formNameOrFormInstance !== null
+      ? (formNameOrFormInstance as PublicFormInstance<T>).formName
+      : (formNameOrFormInstance as string | undefined);
+
+  const formInstance = useFormStore((state) => {
+    return state.formInstances.find((i) => i.formName === targetFormName);
+  }) as PublicFormInstance<T> | undefined;
+
+  return [formInstance];
+}
+
+export function useWatch<T = any>(name: keyof T & string, formNameOrFormInstance?: string | PublicFormInstance<T>) {
+  const [formInstance] = useForm<T>(formNameOrFormInstance as any);
+
+  const value = useFormStore((state) => {
+    return state.getFormItemValue(
+      formInstance?.formName ?? (formNameOrFormInstance as any),
+      name as string,
+    );
+  });
+
+  return value as T[keyof T] | undefined;
+}
+
+export function useSubmitDataWatch<T = any>({
+  formNameOrFormInstance,
+  triggerWhenChange = false,
+  mapFn,
+}: { formNameOrFormInstance?: string | PublicFormInstance<T>; triggerWhenChange?: boolean; mapFn?: (v: any, prev: any) => any } ) {
+  const [formInstance] = useForm<T>(formNameOrFormInstance as any);
+
+  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 as T | undefined;
+}
+
+export const useFormStateWatch = <T = any>(formNameOrFormInstance?: string | PublicFormInstance<T>) => {
+  const [formInstance] = useForm<T>(formNameOrFormInstance as any);
+
+  const formState = useFormStore((state) => {
+    return state.formStates?.[formInstance?.formName];
+  });
+
+  return formState as any;
+};
+
+Form.useForm = useForm;
+Form.useWatch = useWatch;
+Form.useSubmitDataWatch = useSubmitDataWatch;
+Form.useFormStateWatch = useFormStateWatch;