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

package/src/components/Form/FormCleanUp.tsx

@@ -1,20 +1,16 @@
 import { useEffect } from "react";
 import { useShallow } from "zustand/react/shallow";
-import {
-  useFormCleanUp,
-  useFormListeners,
-  useFormStore,
-} from "../../stores/formStore";
+import { useFormStore } from "../../stores/formStore";
 
 const FormCleanUp = () => {
-  const { cleanUpStack, clearCleanUpStack } = useFormCleanUp(
+  const { cleanUpStack, clearCleanUpStack } = useFormStore(
     useShallow((state) => ({
       cleanUpStack: state.cleanUpStack,
       clearCleanUpStack: state.clearCleanUpStack,
     })),
   );
 
-  const { revokeListener } = useFormListeners(
+  const { revokeListener } = useFormStore(
     useShallow((state) => ({
       revokeListener: state.revokeListener,
     })),

package/src/components/Form/FormItem.tsx

@@ -1,11 +1,11 @@
 import type { ReactElement } from "react";
-import { cloneElement, useRef, useState } from "react";
+import { cloneElement, Fragment, useRef, useState } from "react";
 import { v4 } from "uuid";
 import useFormItemControl from "../../hooks/useFormItemControl";
 import type { ValidationRule } from "../../types/public";
 
 export interface FormItemProps {
-  children: ReactElement;
+  children: ReactElement<any>;
   name: string;
   formName?: string;
   initialValue?: any;
@@ -13,6 +13,8 @@ export interface FormItemProps {
   rules?: ValidationRule[];
   valuePropName?: string;
   getValueFromEvent?: (...args: any[]) => any;
+  controlAfterInit?: boolean;
+  hidden?: boolean;
 }
 
 export default function FormItem({
@@ -24,6 +26,8 @@ export default function FormItem({
   rules,
   valuePropName = "value",
   getValueFromEvent,
+  controlAfterInit = false,
+  hidden,
 }: FormItemProps) {
   const elRef = useRef<any>(null);
 
@@ -37,6 +41,7 @@ export default function FormItem({
     isDirty,
     submitState,
     isTouched,
+    isInitied,
   } = useFormItemControl({
     formName,
     name,
@@ -51,34 +56,54 @@ export default function FormItem({
   //   console.log({ value });
   // }, [value]);
 
-  return cloneElement(children, {
-    // ref: inputRef,
-    [valuePropName]: value,
-    onChange: (...args: any[]) => {
-      let val = args[0];
-      if (getValueFromEvent && typeof getValueFromEvent === "function") {
-        val = getValueFromEvent(...args);
-      } else {
-        const e = args[0];
-        if (e && e.target) {
-          val = e.target.value;
-        }
-      }
-      onChange(val);
-    },
-    // onFocus: () => {
-    //   setIsTouched(true);
-    // },
-    // isTouched: isTouched,
-    isDirty: isDirty,
-    // errors: errors,
-    // formState,
+  // useEffect(() => {
+  //   console.log("isInitied changed: ", {
+  //     isInitied,
+  //     name,
+  //     value,
+  //     controlAfterInit,
+  //   });
+  // }, [isInitied]);
+  return (
+    <Fragment
+      key={`control-after-init-${Boolean(controlAfterInit && isInitied) ? "1" : "0"}-${formItemId}`}
+    >
+      {!hidden && children
+        ? cloneElement(children, {
+            name,
+            // ref: inputRef,
+            [valuePropName]: value,
+            onChange: (...args: any[]) => {
+              let val = args[0];
+              if (
+                getValueFromEvent &&
+                typeof getValueFromEvent === "function"
+              ) {
+                val = getValueFromEvent(...args);
+              } else {
+                const e = args[0];
+                if (e && e.target) {
+                  val = e.target.value;
+                }
+              }
+              onChange(val);
+            },
+            // onFocus: () => {
+            //   setIsTouched(true);
+            // },
+            // isTouched: isTouched,
+            isDirty: isDirty,
+            // errors: errors,
+            // formState,
 
-    errors,
-    onFocus,
-    validateState: state,
-    ref: elRef,
-    submitState,
-    isTouched: isTouched,
-  } as any);
+            errors,
+            onFocus,
+            validateState: state,
+            ref: elRef,
+            submitState,
+            isTouched: isTouched,
+          } as any)
+        : null}
+    </Fragment>
+  );
 }

package/src/components/Form/FormList.tsx

@@ -1,4 +1,4 @@
-import useTestRrenderListControl from "../../hooks/useFormListControl";
+import useFormListControl from "../../hooks/useFormListControl";
 import type { FormInstance } from "../../stores/formStore";
 
 export interface FormListProps<T = any> {
@@ -6,11 +6,24 @@ export interface FormListProps<T = any> {
   initialValues?: T[];
   form?: FormInstance;
   formName?: string;
-  children: (fields: Array<{ name: string; key: string }>, operations: { add: (index: number) => void; remove: (opts: { index?: number; key?: string }) => void; move: (opts: { from?: number; fromKey?: string; to: number }) => void }) => React.ReactNode;
+  children: (
+    fields: Array<{ name: string; key: string }>,
+    operations: {
+      add: (index?: number) => void;
+      remove: (opts: { index?: number; key?: string }) => void;
+      move: (opts: { from?: number; fromKey?: string; to: number }) => void;
+    },
+  ) => React.ReactNode;
 }
 
-const FormList = <T = any>({ name, initialValues, form, formName, children }: FormListProps<T>) => {
-  const { listFields, ...actions } = useTestRrenderListControl({
+const FormList = <T = any,>({
+  name,
+  initialValues,
+  form,
+  formName,
+  children,
+}: FormListProps<T>) => {
+  const { listFields, ...actions } = useFormListControl({
     name,
     initialValues,
     form,

package/src/components/Form/InputWrapper.tsx

@@ -13,6 +13,11 @@ const InputWrapper = ({
   errors = [],
   ...props
 }: InputWrapperProps) => {
+  // useEffect(() => {
+  //   console.log("InputWrapper submitState changed: ", {
+  //     submitState: props.submitState,
+  //   });
+  // }, [props.submitState]);
   return (
     <div>
       {cloneElement(children, props)}

package/src/hooks/useFormItemControl.ts

@@ -1,4 +1,4 @@
-import { get, isNil } from "lodash";
+import { get, has, isNil } from "lodash";
 import { useTaskEffect } from "minh-custom-hooks-release";
 import { useEffect, useMemo, type RefObject } from "react";
 import { useShallow } from "zustand/react/shallow"; // Import useShallow
@@ -18,11 +18,7 @@ import {
   IS_VIETNAMESE_PHONE_NUMBER_REGEX,
 } from "../constants/validation";
 import { useFormContext } from "../providers/Form";
-import {
-  useFormCleanUp,
-  useFormListeners,
-  useFormStore,
-} from "../stores/formStore";
+import { useFormStore } from "../stores/formStore";
 
 import type { FormInstance } from "../stores/formStore";
 import type {
@@ -52,6 +48,7 @@ export interface UseFormItemControlReturn {
   isDirty?: boolean;
   isTouched?: boolean;
   submitState?: SubmitState;
+  isInitied?: boolean;
 }
 
 const VALID_PREMITIVE_TYPE = ["string", "number", "undefined"];
@@ -71,7 +68,7 @@ export default function useFormItemControl<T = any>({
     setData,
     getCacheData,
     getFormValues,
-    getFormState,
+    // getFormState,
     isStateInitied,
     submitState,
   } = useFormStore(
@@ -84,7 +81,7 @@ export default function useFormItemControl<T = any>({
         setData: state.setData,
         getCacheData: state.getCacheData,
         getFormValues: state.getFormValues,
-        getFormState: state.getFormState,
+        // getFormState: state.getFormState,
         isStateInitied:
           state.formStates?.[
             formName || form?.formName || contextForm?.formName
@@ -97,7 +94,7 @@ export default function useFormItemControl<T = any>({
     }),
   );
 
-  const { setCleanUpStack } = useFormCleanUp(
+  const { setCleanUpStack } = useFormStore(
     useShallow((state) => ({
       setCleanUpStack: state.setCleanUpStack,
     })),
@@ -129,7 +126,7 @@ export default function useFormItemControl<T = any>({
     }),
   );
 
-  const { listener, setListener } = useFormListeners(
+  const { listener, setListener } = useFormStore(
     useShallow((state) => {
       // console.log(
       //   "Get listener from store: ",
@@ -154,7 +151,7 @@ export default function useFormItemControl<T = any>({
       name,
       value,
     );
-    onChange(value, { notTriggerDirty: true });
+    onChange(value, { notTriggerDirty: true, initiedData: true });
   };
 
   const onFocus = () => {
@@ -171,7 +168,13 @@ export default function useFormItemControl<T = any>({
     }
   };
 
-  const onChange = (value: T, options?: any) => {
+  const onChange = (
+    value: T,
+    options?: {
+      notTriggerDirty?: boolean;
+      initiedData?: boolean;
+    },
+  ) => {
     if (options?.notTriggerDirty !== true) {
       setListener({
         formItemId,
@@ -179,6 +182,12 @@ export default function useFormItemControl<T = any>({
         isTouched: listener?.isTouched,
       });
     }
+    if (options?.initiedData === true) {
+      setListener({
+        formItemId,
+        isInitied: true,
+      });
+    }
     setData(formName || form?.formName || contextForm?.formName, name, value);
   };
 
@@ -188,10 +197,16 @@ export default function useFormItemControl<T = any>({
       value,
       getInitData(formName || form?.formName || contextForm?.formName, name),
     );
+    setListener({
+      formItemId,
+      isDirty: false,
+      isTouched: false,
+    });
     onChange(
       isNil(value)
         ? getInitData(formName || form?.formName || contextForm?.formName, name)
         : value,
+      { notTriggerDirty: true, initiedData: true },
     );
   };
 
@@ -200,8 +215,17 @@ export default function useFormItemControl<T = any>({
     return rules || [];
   }, [rules]);
 
+  useEffect(() => {
+    console.log("Rules changed: ", { name, listener });
+  }, [value, listener]);
+
   const { data: errors, state } = useTaskEffect({
     async task() {
+      console.log("Trigger validate for form item: ", {
+        formName: formName || form?.formName || contextForm?.formName,
+        name,
+        value,
+      });
       const listErrors = [];
 
       const formValues = getFormValues(
@@ -494,7 +518,9 @@ export default function useFormItemControl<T = any>({
 
       return listErrors;
     },
-    deps: [internalRules, value],
+    deps: [internalRules, value, listener?.isInitied],
+    enabled: Boolean(listener?.isInitied),
+
     onError(err) {
       console.log(err);
     },
@@ -522,8 +548,16 @@ export default function useFormItemControl<T = any>({
             onInitData(initialValue);
           }
         } else {
-          onChange(internalInitValue, { notTriggerDirty: true });
+          onChange(internalInitValue, {
+            notTriggerDirty: true,
+            initiedData: true,
+          });
         }
+      } else {
+        onChange(value, {
+          notTriggerDirty: true,
+          initiedData: true,
+        });
       }
       return;
     }
@@ -543,6 +577,15 @@ export default function useFormItemControl<T = any>({
       });
     }
 
+    return () => {
+      if (listener) {
+        setCleanUpStack({
+          name: listener.name,
+          itemKey: listener.formItemId,
+        });
+      }
+    };
+
     // return () => {
     //   console.log("Revoke listener", listener);
 
@@ -568,28 +611,25 @@ export default function useFormItemControl<T = any>({
     // console.log("Get cache Data after list change: ", cacheData);
 
     if (cacheData) {
+      console.log("Cache data found when form item change: ", name, cacheData);
       const getNewDataFromCache = get(cacheData, name);
+      const isIncludeDirectoryInCache = has(cacheData, name);
 
       // console.log("Init data when change form ite: ", name, cacheData);
 
-      if (!getNewDataFromCache) {
-        onChange(initialValue);
-      } else onChange(getNewDataFromCache);
+      if (!isIncludeDirectoryInCache && isNil(getNewDataFromCache)) {
+        onChange(initialValue, {
+          notTriggerDirty: true,
+          initiedData: true,
+        });
+      } else
+        onChange(getNewDataFromCache, {
+          notTriggerDirty: true,
+          initiedData: true,
+        });
     }
   }, [name, formName || form?.formName || contextForm?.formName]);
 
-  useEffect(() => {
-    return () => {
-      setCleanUpStack({
-        itemKey: formItemId,
-      });
-    };
-  }, []);
-
-  useEffect(() => {
-    console.log("Submit state changed in useFormItemControl: ", submitState);
-  }, [submitState]);
-
   return {
     value: value as T,
     onChange,
@@ -599,5 +639,6 @@ export default function useFormItemControl<T = any>({
     isDirty: listener?.isDirty,
     isTouched: listener?.isTouched,
     submitState,
+    isInitied: listener?.isInitied,
   };
 }

package/src/hooks/useFormListControl.ts

@@ -3,11 +3,11 @@ import { useEffect, useState } from "react";
 import { v4 } from "uuid";
 import { useShallow } from "zustand/react/shallow";
 import { useFormContext } from "../providers/Form";
-import { useFormCleanUp, useFormStore } from "../stores/formStore";
+import { useFormStore } from "../stores/formStore";
 
 import type { FormInstance } from "../stores/formStore";
 
-type ListField = { name: string; key: string };
+type ListField = { name: string; key: string; value?: any };
 
 interface UseFormListControlProps {
   name?: string;
@@ -19,7 +19,7 @@ interface UseFormListControlProps {
 interface UseFormListControlReturn {
   listFields: ListField[];
   move: (opts: { from?: number; fromKey?: string; to: number }) => void;
-  add: (index: number) => void;
+  add: (index?: number) => void;
   remove: (opts: { index?: number; key?: string }) => void;
 }
 
@@ -29,17 +29,26 @@ export default function useFormListControl<T = any>({
   initialValues,
   formName,
 }: UseFormListControlProps): UseFormListControlReturn {
+  const [formItemId] = useState<string>(v4());
   const contextForm = useFormContext();
   const getFormValues = useFormStore((state) => state.getFormValues);
-  const [listFormInitValues, setListFormInitValues] = useState<any[] | undefined>(undefined);
-  const { clearCacheData, setCacheData } = useFormStore(
-    useShallow((state) => ({
-      cacheData: state.cacheData,
-      clearCacheData: state.clearCacheData,
-      setCacheData: state.setCacheData,
-    })),
-  );
-  const { setCleanUpStack } = useFormCleanUp(
+  const [listFormInitValues, setListFormInitValues] = useState<
+    any[] | undefined
+  >(undefined);
+  const { clearCacheData, setCacheData, setListener, getListener } =
+    useFormStore(
+      useShallow((state) => ({
+        // Cache
+        cacheData: state.cacheData,
+        clearCacheData: state.clearCacheData,
+        setCacheData: state.setCacheData,
+
+        // Listener
+        setListener: state.setListener,
+        getListener: state.getListener,
+      })),
+    );
+  const { setCleanUpStack } = useFormStore(
     useShallow((state) => ({
       setCleanUpStack: state.setCleanUpStack,
     })),
@@ -92,9 +101,20 @@ export default function useFormListControl<T = any>({
       })
       .filter(Boolean);
 
-    const mapCurWithKey = cur.map(
-      (c) => mapPrevWithKey.find((m) => m.key === c.key) || c,
-    );
+    const mapCurWithKey = cur.map((c) => {
+      const find = mapPrevWithKey.find((m) => m.key === c.key);
+
+      if (find) {
+        return {
+          key: find.key,
+          value: isNil(c.value) ? find.value : c.value,
+        };
+      }
+
+      return c;
+    });
+
+    console.log("compare prev cur", { prev, cur });
 
     const getNewValueCache = mapCurWithKey.filter(Boolean).map((c) => c.value);
 
@@ -107,7 +127,7 @@ export default function useFormListControl<T = any>({
     // console.log("Mapping Cur value with prev fields: ", mapCurWithKey);
     // console.log("After change arr value: ", getNewValueCache);
 
-    // Nếu số phần tử trước khi thay đổi mảng lớn hơn thì đẩy 2 phần tử còn lại vào clean up stack để clear
+    // Nếu số phần tử trước khi thay đổi mảng lớn hơn thì đẩy các phần tử còn lại vào clean up stack để clear
     if (startRemoveIndex > 0) {
       Array.from(Array(startRemoveIndex))
         .map((_, index) => {
@@ -127,6 +147,12 @@ export default function useFormListControl<T = any>({
         });
     }
 
+    console.log("Set cache data for form list: ", {
+      formName: formName || form?.formName || contextForm?.formName,
+      name,
+      getNewValueCache,
+    });
+
     // console.log({ getNewValueCache });
     setCacheData(
       formName || form?.formName || contextForm?.formName,
@@ -135,13 +161,9 @@ export default function useFormListControl<T = any>({
     );
   };
 
-  const add = (index: number) => {
+  const add = (index?: number) => {
     setListFields((prev) => {
-      if (index > prev.length) return prev;
-
-      if (index < 0) return prev;
-
-      if (index === prev.length) {
+      if (isNil(index) || index === prev.length) {
         const newName = `${name}.${prev.length}`;
         const newKey = v4();
         const result = [
@@ -154,6 +176,9 @@ export default function useFormListControl<T = any>({
 
         return result;
       }
+      if (index > prev.length) return prev;
+
+      if (index < 0) return prev;
 
       const clonePrev = [...prev];
 
@@ -217,9 +242,17 @@ export default function useFormListControl<T = any>({
     });
   };
 
-  const move = ({ from, fromKey, to }: { from?: number; fromKey?: string; to: number }) => {
+  const move = ({
+    from,
+    fromKey,
+    to,
+  }: {
+    from?: number;
+    fromKey?: string;
+    to: number;
+  }) => {
     setListFields((prev) => {
-      console.log("move list item: ", { from, to });
+      // console.log("move list item: ", { from, to });
       if (
         from >= listFields.length ||
         from < 0 ||
@@ -228,7 +261,7 @@ export default function useFormListControl<T = any>({
         from === to
       )
         return prev;
-      console.log("Trigger move item: ");
+      // console.log("Trigger move item: ");
 
       if (!isNil(fromKey)) {
         const findItemIndex = prev.findIndex((p) => p.key === fromKey);
@@ -286,7 +319,7 @@ export default function useFormListControl<T = any>({
   useEffect(() => {
     console.log("Trigger init", formState?.isInitied, internalInitValue);
     if (formState?.isInitied) {
-        if (Array.isArray(listFormInitValues)) {
+      if (Array.isArray(listFormInitValues)) {
         const result = listFormInitValues?.map((_, i) => {
           const itemName = `${name}.${i}`;
           const key = v4();
@@ -374,5 +407,50 @@ export default function useFormListControl<T = any>({
     };
   }, [listFields]);
 
+  useEffect(() => {
+    if (!getListener(formItemId)) {
+      setListener({
+        formName: formName || form?.formName || contextForm?.formName,
+        name: name || "",
+        formItemId: formItemId,
+        type: "array",
+        onArrayChange: (newArr) => {
+          setListFields((prev) => {
+            const result = newArr.map((_, i) => {
+              const itemName = `${name}.${i}`;
+              const existingItem = prev[i];
+              return {
+                key: existingItem ? existingItem.key : v4(),
+                name: itemName,
+              };
+            });
+
+            handleCacheListField(
+              prev,
+              result.map((r, i) => {
+                return { ...r, value: newArr[i] };
+              }),
+            );
+            return result;
+          });
+        },
+      });
+    }
+    return () => {
+      // Remove listener on unmount
+      if (getListener(formItemId)) {
+        console.log("Remove listener for form list: ", {
+          formItemId,
+        });
+        setListener({
+          formName: formName || form?.formName || contextForm?.formName,
+          name: name || "",
+          formItemId: formItemId,
+          onArrayChange: undefined,
+        });
+      }
+    };
+  }, []);
+
   return { listFields, move, add, remove };
 }