react-form-manage 1.0.8-beta.7 → 1.0.8

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,21 +29,34 @@ 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(
+  const [listFormInitValues, setListFormInitValues] = useState<
+    any[] | undefined
+  >(undefined);
+  const {
+    clearCacheData,
+    setCacheData,
+    setListener,
+    getListener,
+    clearArrItems,
+  } = useFormStore(
     useShallow((state) => ({
+      // Cache
       cacheData: state.cacheData,
       clearCacheData: state.clearCacheData,
       setCacheData: state.setCacheData,
+
+      // Listener
+      setListener: state.setListener,
+      getListener: state.getListener,
+
+      // Clear Arr Items
+      clearArrItems: state.clearArrItems,
     })),
   );
-  const { setCleanUpStack } = useFormCleanUp(
-    useShallow((state) => ({
-      setCleanUpStack: state.setCleanUpStack,
-    })),
-  );
+
   const { initValue: internalInitValue, formState } = useFormStore(
     useShallow((state) => {
       // console.log(
@@ -92,9 +105,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,26 +131,25 @@ 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) => {
-          return getNewValueCache.length + index;
-        })
-        .forEach((index) => {
-          // console.log("Data for cleanup arr element: ", {
-          //   formName: formName || form?.formName || contextForm?.formName,
-          //   name: `${name}.${index}`,
-          //   type: "array",
-          // });
-          setCleanUpStack({
-            formName: formName || form?.formName || contextForm?.formName,
-            name: `${name}.${index}`,
-            type: "array",
-          });
-        });
+      const clearItems = Array.from(Array(startRemoveIndex)).map((_, index) => {
+        const clearIndex = getNewValueCache.length + index;
+
+        return {
+          formName: formName || form?.formName || contextForm?.formName,
+          name: `${name}.${clearIndex}`,
+        };
+      });
+      clearArrItems(clearItems);
     }
 
+    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 +158,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 +173,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 +239,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 +258,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 +316,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();
@@ -304,7 +334,12 @@ export default function useFormListControl<T = any>({
           name,
           listFormInitValues,
         );
-
+        if (getListener(formItemId)) {
+          setListener({
+            formItemId,
+            isInitied: true,
+          });
+        }
         return;
       }
 
@@ -322,7 +357,12 @@ export default function useFormListControl<T = any>({
 
         setListFields(result);
         setListFormInitValues(internalInitValue as any);
-
+        if (getListener(formItemId)) {
+          setListener({
+            formItemId,
+            isInitied: true,
+          });
+        }
         return;
       }
 
@@ -350,7 +390,12 @@ export default function useFormListControl<T = any>({
 
         setListFields(result);
         setListFormInitValues(initialValues as any);
-
+        if (getListener(formItemId)) {
+          setListener({
+            formItemId,
+            isInitied: true,
+          });
+        }
         // console.log("Get form init values: ", internalInitValue, result);
 
         return;
@@ -374,5 +419,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 };
 }

package/src/index.ts

@@ -1,23 +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,
@@ -25,21 +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,
   type UseFormItemStateWatchReturn,
-  SUBMIT_STATE,
+  type ValidationRule,
 };
 
 export default Form;

package/src/main.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App";
 import "./index.css";
@@ -7,4 +8,8 @@ if (!container) {
   throw new Error("Root container missing");
 }
 
-createRoot(container).render(<App />);
+createRoot(container).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);