react-form-manage 1.0.8-beta.16 → 1.0.8-beta.17

package/dist/components/Form/FormList.d.ts

@@ -8,7 +8,7 @@ export interface FormListProps<T = any> {
         name: string;
         key: string;
     }>, operations: {
-        add: (index: number) => void;
+        add: (index?: number) => void;
         remove: (opts: {
             index?: number;
             key?: string;

package/dist/hooks/useFormItemControl.js

@@ -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 } from "react";
 import { useShallow } from "zustand/react/shallow";
@@ -319,10 +319,13 @@ function useFormItemControl({ formName, form, name, initialValue, formItemId, ru
     const cacheData = getCacheData(formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName));
     if (cacheData) {
       const getNewDataFromCache = get(cacheData, name);
-      if (!getNewDataFromCache) {
-        onChange(initialValue);
+      const isIncludeDirectoryInCache = has(cacheData, name);
+      if (!isIncludeDirectoryInCache && isNil(getNewDataFromCache)) {
+        onChange(initialValue, {
+          notTriggerDirty: true
+        });
       } else
-        onChange(getNewDataFromCache);
+        onChange(getNewDataFromCache, { notTriggerDirty: true });
     }
   }, [name, formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName)]);
   useEffect(() => {

package/dist/hooks/useFormListControl.d.ts

@@ -2,6 +2,7 @@ import type { FormInstance } from "../stores/formStore";
 type ListField = {
     name: string;
     key: string;
+    value?: any;
 };
 interface UseFormListControlProps {
     name?: string;

package/dist/hooks/useFormListControl.js

@@ -5,13 +5,18 @@ import { useShallow } from "zustand/react/shallow";
 import { useFormContext } from "../providers/Form";
 import { useFormStore } from "../stores/formStore";
 function useFormListControl({ name, form, initialValues, formName }) {
+  const [formItemId] = useState(v4());
   const contextForm = useFormContext();
   const getFormValues = useFormStore((state) => state.getFormValues);
   const [listFormInitValues, setListFormInitValues] = useState(void 0);
-  const { clearCacheData, setCacheData } = useFormStore(useShallow((state) => ({
+  const { clearCacheData, setCacheData, setListener, getListener } = useFormStore(useShallow((state) => ({
+    // Cache
     cacheData: state.cacheData,
     clearCacheData: state.clearCacheData,
-    setCacheData: state.setCacheData
+    setCacheData: state.setCacheData,
+    // Listener
+    setListener: state.setListener,
+    getListener: state.getListener
   })));
   const { setCleanUpStack } = useFormStore(useShallow((state) => ({
     setCleanUpStack: state.setCleanUpStack
@@ -37,7 +42,16 @@ function useFormListControl({ name, form, initialValues, formName }) {
         value: d
       };
     }).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;
+    });
     const getNewValueCache = mapCurWithKey.filter(Boolean).map((c) => c.value);
     const startRemoveIndex = formDataBeforeChange.length - getNewValueCache.length;
     if (startRemoveIndex > 0) {
@@ -218,6 +232,42 @@ function useFormListControl({ name, form, initialValues, formName }) {
       clearCacheData();
     };
   }, [listFields]);
+  useEffect(() => {
+    if (!getListener(formItemId)) {
+      setListener({
+        formName: formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName),
+        name: name || "",
+        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 () => {
+      if (getListener(formItemId)) {
+        setListener({
+          formName: formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName),
+          name: name || "",
+          formItemId,
+          onArrayChange: void 0
+        });
+      }
+    };
+  }, []);
   return { listFields, move, add, remove };
 }
 export {

package/dist/providers/Form.js

@@ -47,9 +47,36 @@ function Form({ children, formName, initialValues, onFinish, onReject, onFinally
   const setFieldValue = (name, value, options) => {
     const listener = getListeners().find((l) => l.name === name && l.formName === formName);
     if (listener) {
-      listener.onChange(value, options);
+      if (listener.type === "array") {
+        if (!isEqual(getFormItemValue(formName, name), value)) {
+          listener.onArrayChange(value, options);
+          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);
+      if (typeof value === "object" && !isNil(value)) {
+        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);
+      }
     }
   };
   const setFieldValues = (values, options = { notTriggerDirty: false }) => {
@@ -57,9 +84,39 @@ function Form({ children, formName, initialValues, onFinish, onReject, onFinally
     allStringPath.forEach((p) => {
       const listener = getListeners().find((l) => l.name === p && l.formName === formName);
       if (listener) {
-        listener.onChange(get(values, listener.name), options);
+        if (listener.type === "array") {
+          if (!isEqual(getFormItemValue(formName, p), get(values, p))) {
+            listener.onArrayChange(get(values, listener.name), options);
+            const nestedAllStringPath = 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));
+        if (typeof get(values, p) === "object" && !isNil(get(values, p))) {
+          const nestedAllStringPath = 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
+          setData(formName, p, get(values, p));
       }
     });
   };

package/dist/stores/formStore.d.ts

@@ -1,3 +1,4 @@
+type ListenerFormItemType = "normal" | "array";
 export interface FormInstance {
     formName: string;
     resetFields: (values?: any) => void;
@@ -20,11 +21,13 @@ export interface ListenerItem {
     isDirty?: boolean;
     formItemId?: string;
     internalErrors?: any;
+    onArrayChange?: any;
     onChange?: any;
     onReset?: any;
     onFocus?: any;
     emitFocus?: any;
     isInitied?: boolean;
+    type?: ListenerFormItemType;
 }
 export interface CleanUpItem {
     name?: string;

package/dist/stores/formStore.js

@@ -200,7 +200,7 @@ const createListenersSlice = (storeSet, storeGet, api) => ({
   getListeners() {
     return storeGet().listeners;
   },
-  setListener({ formName, name, onChange, onReset, isTouched, isDirty, formItemId, internalErrors, onFocus, emitFocus, isInitied }) {
+  setListener({ formName, name, onChange, onReset, isTouched, isDirty, formItemId, internalErrors, onFocus, emitFocus, isInitied, type, onArrayChange }) {
     return storeSet(produce((state) => {
       const storeListeners = state.listeners;
       const findListenerIndex = state.listeners.findIndex((l) => l.formItemId === formItemId);
@@ -235,6 +235,9 @@ const createListenersSlice = (storeSet, storeGet, api) => ({
         if (!isNil(isInitied)) {
           storeListeners[findListenerIndex].isInitied = isInitied;
         }
+        if (!isNil(onArrayChange)) {
+          storeListeners[findListenerIndex].onArrayChange = onArrayChange;
+        }
         return;
       }
       if (name && formName) {
@@ -247,7 +250,9 @@ const createListenersSlice = (storeSet, storeGet, api) => ({
           internalErrors,
           onChange,
           onReset,
-          isInitied: Boolean(isInitied)
+          isInitied: Boolean(isInitied),
+          type: type || "normal",
+          onArrayChange
         });
       }
     }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-form-manage",
-  "version": "1.0.8-beta.16",
+  "version": "1.0.8-beta.17",
   "description": "Lightweight React form management with list and listener support.",
   "license": "MIT",
   "type": "module",

package/src/App.tsx

@@ -47,7 +47,7 @@ const App = () => {
         initialValues={{
           TestData: "",
           numericCode: "",
-          arr: [{ el: "Item 1" }, { el: "Item 2" }],
+          // arr: [{ el: "Item 1" }, { el: "Item 2" }],
         }}
         onFinish={(values) => {
           console.log(values);
@@ -103,7 +103,8 @@ const App = () => {
         <FormList
           initialValues={[
             {
-              el: "",
+              el: "sdfsdf",
+              d: { child: "Test Child" },
             },
           ]}
           name="arr"
@@ -112,7 +113,15 @@ const App = () => {
             <div>
               {fields.map((field, index) => (
                 <div key={field.key} style={{ marginBottom: 8 }}>
-                  <FormItem name={`${field.name}.el`}>
+                  <FormItem name={`${field.name}.el`} initialValue={"Chém gió"}>
+                    <InputWrapper>
+                      <Input placeholder="Item value" style={{ width: 200 }} />
+                    </InputWrapper>
+                  </FormItem>
+                  <FormItem
+                    name={`${field.name}.d.child`}
+                    initialValue={"Con của item"}
+                  >
                     <InputWrapper>
                       <Input placeholder="Item value" style={{ width: 200 }} />
                     </InputWrapper>
@@ -145,6 +154,17 @@ const App = () => {
             </div>
           )}
         </FormList>
+        <Button
+          onClick={() => {
+            form?.setFieldValue("arr", [
+              { el: "Set Item 1" },
+              { el: "Set Item 2" },
+              { el: "Set Item 3" },
+            ]);
+          }}
+        >
+          Test set array list value
+        </Button>
         <motion.div
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}

package/src/components/Form/FormList.tsx

@@ -9,7 +9,7 @@ export interface FormListProps<T = any> {
   children: (
     fields: Array<{ name: string; key: string }>,
     operations: {
-      add: (index: number) => void;
+      add: (index?: number) => void;
       remove: (opts: { index?: number; key?: string }) => void;
       move: (opts: { from?: number; fromKey?: string; to: number }) => void;
     },

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
@@ -595,13 +595,17 @@ 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,
+        });
+      } else onChange(getNewDataFromCache, { notTriggerDirty: true });
     }
   }, [name, formName || form?.formName || contextForm?.formName]);
 

package/src/hooks/useFormListControl.ts

@@ -7,7 +7,7 @@ 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;
@@ -29,18 +29,25 @@ 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 { 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,
@@ -94,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);
 
@@ -109,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) => {
@@ -129,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,
@@ -228,7 +252,7 @@ export default function useFormListControl<T = any>({
     to: number;
   }) => {
     setListFields((prev) => {
-      console.log("move list item: ", { from, to });
+      // console.log("move list item: ", { from, to });
       if (
         from >= listFields.length ||
         from < 0 ||
@@ -237,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);
@@ -383,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 };
 }

package/src/providers/Form.tsx

@@ -6,7 +6,7 @@ import { flushSync } from "react-dom";
 import { useShallow } from "zustand/react/shallow"; // Import useShallow
 import FormCleanUp from "../components/Form/FormCleanUp";
 import { SUBMIT_STATE } from "../constants/form";
-import { useFormStore } from "../stores/formStore";
+import { ListenerItem, useFormStore } from "../stores/formStore";
 import type {
   PublicFormInstance,
   UseFormItemStateWatchReturn,
@@ -90,13 +90,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 (typeof value === "object" && !isNil(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);
+      }
     }
   };
 
@@ -108,9 +146,46 @@ 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 = 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));
+        // Kiểm tra nếu là object và có listener con thì gọi onChange của listener con
+        if (typeof get(values, p) === "object" && !isNil(get(values, p))) {
+          const nestedAllStringPath = 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 setData(formName, p, get(values, p));
       }
     });
   };

package/src/stores/formStore.ts

@@ -3,7 +3,7 @@ import { cloneDeep, get, isNil, isNumber, last, set, unset } from "lodash";
 import { v4 } from "uuid";
 import { create } from "zustand";
 import { getAllNoneObjStringPath } from "../utils/obj.util";
-
+type ListenerFormItemType = "normal" | "array";
 export interface FormInstance {
   formName: string;
   resetFields: (values?: any) => void;
@@ -24,11 +24,13 @@ export interface ListenerItem {
   isDirty?: boolean;
   formItemId?: string;
   internalErrors?: any;
+  onArrayChange?: any;
   onChange?: any;
   onReset?: any;
   onFocus?: any;
   emitFocus?: any;
   isInitied?: boolean;
+  type?: ListenerFormItemType;
 }
 
 export interface CleanUpItem {
@@ -379,7 +381,9 @@ const createListenersSlice = (storeSet: any, storeGet: any, api: any) => ({
     onFocus,
     emitFocus,
     isInitied,
-  }) {
+    type,
+    onArrayChange,
+  }: Partial<ListenerItem> & { formItemId: string }) {
     return storeSet(
       produce<any>((state: any) => {
         const storeListeners = state.listeners;
@@ -420,6 +424,10 @@ const createListenersSlice = (storeSet: any, storeGet: any, api: any) => ({
             storeListeners[findListenerIndex].isInitied = isInitied;
           }
 
+          if (!isNil(onArrayChange)) {
+            storeListeners[findListenerIndex].onArrayChange = onArrayChange;
+          }
+
           return;
         }
         if (name && formName) {
@@ -433,6 +441,8 @@ const createListenersSlice = (storeSet: any, storeGet: any, api: any) => ({
             onChange,
             onReset,
             isInitied: Boolean(isInitied),
+            type: type || "normal",
+            onArrayChange,
           });
         }
       }),