react-form-manage 1.0.8-beta.2 → 1.0.8-beta.21

package/src/index.ts

@@ -1,22 +1,31 @@
+import { SUBMIT_STATE } from "./constants/form";
 import Form, {
   useForm,
-  useWatch,
-  useSubmitDataWatch,
   useFormStateWatch,
-  type FormProps,
-  type ValidationRule,
+  useSubmitDataWatch,
+  useWatch,
   type FormFieldError,
+  type FormProps,
   type SubmitState,
+  type UseFormItemStateWatchReturn,
+  type ValidationRule,
 } from "./providers/Form";
-import { SUBMIT_STATE } from "./constants/form";
 
 import FormItem, { type FormItemProps } from "./components/Form/FormItem";
 import FormList, { type FormListProps } from "./components/Form/FormList";
+import InputWrapper, {
+  type InputWrapperProps,
+} from "./components/Form/InputWrapper";
 import Input from "./components/Input";
-import InputWrapper, { type InputWrapperProps } from "./components/Form/InputWrapper";
 
 import useFormItemControl from "./hooks/useFormItemControl";
 import useFormListControl from "./hooks/useFormListControl";
+import {
+  useFormStore,
+  type CleanUpItem,
+  type FormInstance,
+  type ListenerItem,
+} from "./stores/formStore";
 
 export {
   Form,
@@ -24,20 +33,25 @@ export {
   FormList,
   Input,
   InputWrapper,
+  SUBMIT_STATE,
+  useForm,
   useFormItemControl,
   useFormListControl,
-  useForm,
-  useWatch,
-  useSubmitDataWatch,
   useFormStateWatch,
-  type FormProps,
+  useFormStore,
+  useSubmitDataWatch,
+  useWatch,
+  type CleanUpItem,
+  type FormFieldError,
+  type FormInstance,
   type FormItemProps,
   type FormListProps,
+  type FormProps,
   type InputWrapperProps,
-  type ValidationRule,
-  type FormFieldError,
+  type ListenerItem,
   type SubmitState,
-  SUBMIT_STATE,
+  type UseFormItemStateWatchReturn,
+  type ValidationRule,
 };
 
 export default Form;

package/src/providers/Form.tsx

@@ -1,14 +1,32 @@
-import { cloneDeep, get, isEqual, last, set, uniq } from "lodash";
+import {
+  cloneDeep,
+  get,
+  isEqual,
+  isNil,
+  isPlainObject,
+  last,
+  set,
+  uniqBy,
+} from "lodash";
 import { useTask } from "minh-custom-hooks-release";
 import type { ComponentType, FormHTMLAttributes, ReactNode } from "react";
 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 type { PublicFormInstance } from "../types/public";
+import { SUBMIT_STATE } from "../constants/form";
+import { ListenerItem, useFormStore } from "../stores/formStore";
+import type {
+  PublicFormInstance,
+  UseFormItemStateWatchReturn,
+} from "../types/public";
 import { getAllNoneObjStringPath } from "../utils/obj.util";
-export type { ValidationRule, FormFieldError, SubmitState } from "../types/public";
+export type {
+  FormFieldError,
+  SubmitState,
+  UseFormItemStateWatchReturn,
+  ValidationRule,
+} from "../types/public";
 
 export const FormContext = createContext(null);
 
@@ -40,7 +58,7 @@ export default function Form<T = any>({
   ...props
 }: FormProps<T>) {
   const {
-    appInitValue,
+    // appInitValue,
     getFormItemValue,
     setInitData,
     setData,
@@ -54,7 +72,7 @@ export default function Form<T = any>({
     clearFormState,
   } = useFormStore(
     useShallow((state) => ({
-      appInitValue: state.initialValues,
+      // appInitValue: state.initialValues,
       setInitData: state.setInitData,
       getFormValues: state.getFormValues,
       setFormState: state.setFormState,
@@ -68,11 +86,11 @@ export default function Form<T = any>({
       clearFormState: state.clearFormState,
 
       // Test, nhớ xóa sau khi xong
-      formStates: state.formStates?.[formName],
+      // formStates: state.formStates?.[formName],
     })),
   );
 
-  const { getListeners } = useFormListeners(
+  const { getListeners } = useFormStore(
     useShallow((state) => {
       return {
         getListeners: state.getListeners,
@@ -81,13 +99,51 @@ export default function Form<T = any>({
   );
 
   const setFieldValue = (name, value, options) => {
-    const listener = getListeners().find(
+    const listener: ListenerItem | null = getListeners().find(
       (l) => l.name === name && l.formName === formName,
     );
     if (listener) {
-      listener.onChange(value, options);
+      // Nếu loại listener là array thì gọi onArrayChange
+      if (listener.type === "array") {
+        // Do nothing if the value is the same for array item to prevent unnecessary re-renders
+        if (!isEqual(getFormItemValue(formName, name), value)) {
+          listener.onArrayChange(value, options);
+
+          // Kiểm tra từng path con của array item xem có listener nào không, nếu có thì gọi onChange của listener đó
+          const allStringPath = getAllNoneObjStringPath(value);
+          allStringPath.forEach((p) => {
+            const findListener = getListeners().find(
+              (l) => l.name === `${name}.${p}` && l.formName === formName,
+            );
+            if (findListener) {
+              findListener.onChange(get(value, p), options);
+            } else {
+              setData(formName, `${name}.${p}`, get(value, p));
+            }
+          });
+        }
+      } else {
+        listener.onChange(value, options);
+      }
     } else {
-      setData(formName, name, value);
+      // set data for non-listener field
+      if (isPlainObject(value) || Array.isArray(value)) {
+        // Nếu là object hoặc array thì set từng path con
+        const allStringPath = getAllNoneObjStringPath(value);
+
+        allStringPath.forEach((p) => {
+          const findListener = getListeners().find(
+            (l) => l.name === `${name}.${p}` && l.formName === formName,
+          );
+          if (findListener) {
+            findListener.onChange(get(value, p), options);
+          } else {
+            setData(formName, `${name}.${p}`, get(value, p));
+          }
+        });
+      } else {
+        setData(formName, name, value);
+      }
     }
   };
 
@@ -99,7 +155,31 @@ export default function Form<T = any>({
         (l) => l.name === p && l.formName === formName,
       );
       if (listener) {
-        listener.onChange(get(values, listener.name), options);
+        if (listener.type === "array") {
+          // Do nothing if the value is the same for array item to prevent unnecessary re-renders
+          if (!isEqual(getFormItemValue(formName, p), get(values, p))) {
+            listener.onArrayChange(get(values, listener.name), options);
+
+            // Kiểm tra từng path con của array item xem có listener nào không, nếu có thì gọi onChange của listener đó
+            const nestedAllStringPath: string[] = getAllNoneObjStringPath(
+              get(values, p),
+            );
+            nestedAllStringPath.forEach((np) => {
+              {
+                const findListener = getListeners().find(
+                  (l) => l.name === `${p}.${np}` && l.formName === formName,
+                );
+                if (findListener) {
+                  findListener.onChange(get(values, `${p}.${np}`), options);
+                } else {
+                  setData(formName, `${p}.${np}`, get(values, `${p}.${np}`));
+                }
+              }
+            });
+          }
+        } else {
+          listener.onChange(get(values, listener.name), options);
+        }
       } else {
         setData(formName, p, get(values, p));
       }
@@ -165,8 +245,8 @@ export default function Form<T = any>({
 
         const resultValues = cloneDeep(formValues);
         const cleanValues = {} as T;
-        uniq(listeners, (l) => l.name).forEach((l) => {
-          set(cleanValues, l.name, get(resultValues, l.name));
+        uniqBy(listeners, (l: any) => l.name).forEach((l) => {
+          set(cleanValues as any, l.name, get(resultValues, l.name));
         });
 
         const handleIsolateCase = async () => {
@@ -271,6 +351,7 @@ export default function Form<T = any>({
       setFormState({
         formName,
         isInitied: false,
+        submitState: SUBMIT_STATE.IDLE,
       }),
     );
     const totalListenerFields = getListeners();
@@ -403,9 +484,11 @@ export function useFormContext() {
 export function useForm<T = any>(
   formNameOrFormInstance?: string | PublicFormInstance<T>,
 ) {
-  const targetFormName =
-    typeof formNameOrFormInstance === "object" &&
-    formNameOrFormInstance !== null
+  const formContext = useContext(FormContext);
+  const targetFormName = isNil(formNameOrFormInstance)
+    ? formContext?.formName
+    : typeof formNameOrFormInstance === "object" &&
+        formNameOrFormInstance !== null
       ? (formNameOrFormInstance as PublicFormInstance<T>).formName
       : (formNameOrFormInstance as string | undefined);
 
@@ -472,7 +555,33 @@ export const useFormStateWatch = <T = any,>(
   return formState as any;
 };
 
+// Get Form Item State Using name (make sure no same name listener before using this) or formItemId, formNameOrFormInstance
+// reutrn formItem state like isTouched, isDirty, errors
+export const useFormItemStateWatch = <T = any,>(
+  nameOrFormItemId: string,
+  formNameOrFormInstance?: string | PublicFormInstance<T>,
+): UseFormItemStateWatchReturn => {
+  const [formInstance] = useForm<T>(formNameOrFormInstance as any);
+
+  const listener = useFormStore((state) => {
+    return state
+      .getListeners()
+      .find(
+        (l) =>
+          l.formName === formInstance?.formName &&
+          (l.name === nameOrFormItemId || l.formItemId === nameOrFormItemId),
+      );
+  });
+
+  return {
+    isTouched: listener?.isTouched,
+    isDirty: listener?.isDirty,
+    errors: listener?.internalErrors || [],
+  };
+};
+
 Form.useForm = useForm;
 Form.useWatch = useWatch;
 Form.useSubmitDataWatch = useSubmitDataWatch;
 Form.useFormStateWatch = useFormStateWatch;
+Form.useFormItemStateWatch = useFormItemStateWatch;