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

package/src/providers/Form.tsx

@@ -1,30 +1,51 @@
-import { cloneDeep, get, isEqual, last, set, uniq } from "lodash";
+import {
+  cloneDeep,
+  filter,
+  get,
+  isArray,
+  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 { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { flushSync } from "react-dom";
 import { useShallow } from "zustand/react/shallow"; // Import useShallow
-import FormCleanUp from "../components/Form/FormCleanUp";
+import FormItem from "../components/Form/FormItem";
 import { SUBMIT_STATE } from "../constants/form";
-import { useFormListeners, useFormStore } from "../stores/formStore";
+import { OnChangeOptions } from "../hooks/useFormItemControl";
+import { ListenerItem, SubmitProps, useFormStore } from "../stores/formStore";
 import type {
   PublicFormInstance,
   UseFormItemStateWatchReturn,
 } from "../types/public";
-import { getAllNoneObjStringPath } from "../utils/obj.util";
+import {
+  getAllNoneObjStringPath,
+  getAllPathsIncludingContainers,
+  getAllPathsStopAtArray,
+} from "../utils/obj.util";
 export type {
   FormFieldError,
   SubmitState,
   UseFormItemStateWatchReturn,
-  ValidationRule,
+  ValidationRule
 } from "../types/public";
 
 export const FormContext = createContext(null);
 
+export interface SetFieldValueOptions extends OnChangeOptions {
+  deepTrigger?: boolean;
+}
+
 export interface FormProps<T = any> extends Omit<
   FormHTMLAttributes<HTMLFormElement>,
   "onSubmit"
 > {
+  collectHiddenFields?: boolean;
   children: ReactNode;
   formName: string;
   initialValues?: T;
@@ -46,10 +67,11 @@ export default function Form<T = any>({
   onReject,
   onFinally,
   FormElement,
+  collectHiddenFields: formCollectHiddenFields = true,
   ...props
 }: FormProps<T>) {
   const {
-    appInitValue,
+    // appInitValue,
     getFormItemValue,
     setInitData,
     setData,
@@ -63,7 +85,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,
@@ -77,11 +99,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,
@@ -89,10 +111,68 @@ export default function Form<T = any>({
     }),
   );
 
-  const setFieldValue = (name, value, options) => {
+  /**
+   * Deep Trigger thực thi set value đệ quy theo các quy tắc sau:
+   *
+   * (Quy tắc 1) Với các value có giá trị nguyên thủy (string, number, boolean, null, undefined):
+   *   - Tìm listener trên chính field đó
+   *   - Nếu có listener: gọi onChange
+   *   - Nếu không: setData
+   *   - KHÔNG đệ quy tiếp
+   *
+   * (Quy tắc 2) Với các value là Plain Object (object thuần):
+   *   - TRƯỚC TIÊN trigger listener trên chính field đó (nếu có)
+   *   - SAU ĐÓ đệ quy vào từng path con bằng cách gọi deepTriggerSetCore
+   *   - Ví dụ: setFieldValue("user", {name: "John", age: 30})
+   *     → Trigger "user" listener (nếu có)
+   *     → Gọi deepTriggerSetCore("user.name", "John")
+   *     → Gọi deepTriggerSetCore("user.age", 30)
+   *
+   * (Quy tắc 2.2) Class Instance (non-plain object):
+   *   - Xử lý như primitive value (không đệ quy)
+   *
+   * (Quy tắc 3) Với các value là Array:
+   *   - Kiểm tra kích thước mảng mới và mảng cũ (lấy từ getFieldValue)
+   *   - Nếu kích thước >= mảng cũ: đệ quy cho TẤT CẢ phần tử
+   *   - Nếu kích thước < mảng cũ: chỉ đệ quy cho phần tử trong khoảng kích thước mới
+   *
+   * (Quy tắc 4) Với các field có listener:
+   *   (Quy tắc 4.1) Nếu là array listener:
+   *     - Gọi onArrayChange(value)
+   *     - SAU ĐÓ với TỪNG phần tử tại index i:
+   *       → TRƯỚC TIÊN trigger listener trên "name[i]" (nếu có)
+   *       → SAU ĐÓ đệ quy vào property con bằng deepTriggerSetCore("name[i].property", value)
+   *   (Quy tắc 4.2) Nếu là non-array listener với plain object value:
+   *     - TRƯỚC TIÊN trigger onChange trên listener
+   *     - SAU ĐÓ đệ quy vào từng path con
+   *
+   * (Quy tắc 5) Với các field không có listener:
+   *   (Quy tắc 5.1) Primitive value + Class instance: setData
+   *   (Quy tắc 5.2) Plain object hoặc array:
+   *     - Với array: với TỪNG phần tử tại index i:
+   *       → TRƯỚC TIÊN trigger listener trên "name[i]" (nếu có)
+   *       → SAU ĐÓ đệ quy vào property con
+   *     - Với plain object: đệ quy vào từng path con
+   *
+   * LƯU Ý QUAN TRỌNG - THỨ TỰ TRIGGER:
+   *   1. Trigger listener trên chính field này (nếu có)
+   *   2. Trigger listener trên mỗi item/index level (nếu có)
+   *   3. Rồi mới đệ quy vào property con
+   *   → Đảm bảo TOÀN BỘ listener được trigger theo đúng thứ tự hierarchical
+   */
+
+  /**
+   * Quy tắc 1: Xử lý primitive value
+   */
+  const handlePrimitiveValue = (
+    name: string,
+    value: any,
+    options?: SetFieldValueOptions,
+  ) => {
     const listener = getListeners().find(
       (l) => l.name === name && l.formName === formName,
     );
+
     if (listener) {
       listener.onChange(value, options);
     } else {
@@ -100,24 +180,325 @@ export default function Form<T = any>({
     }
   };
 
+  /**
+   * Quy tắc 4.1: Xử lý array listener - gọi onArrayChange, trigger item[index] listener, rồi đệ quy con
+   *
+   * Xử lý 2 trường hợp:
+   * 1. Phần tử thay đổi: trigger item level + nested listeners
+   * 2. Phần tử bị xóa (previousValues.length > value.length): xóa dữ liệu + cleanup
+   */
+  const handleArrayListener = (
+    name: string,
+    value: any[],
+    options?: SetFieldValueOptions,
+    coreRecursive?: (n: string, v: any, o?: SetFieldValueOptions) => void,
+  ) => {
+    const listener = getListeners().find(
+      (l) => l.name === name && l.formName === formName,
+    );
+
+    if (!listener) return;
+
+    const currentValue = getFormItemValue(formName, name);
+    if (!isEqual(currentValue, value)) {
+      // TRƯỚC TIÊN: Gọi onArrayChange trên listener
+      listener.onArrayChange(value, options);
+
+      // SAU ĐÓ: Với TỪNG phần tử, trigger listener trên item level, rồi đệ quy vào con
+      value.forEach((item, index) => {
+        const itemName = `${name}.${index}`;
+
+        // TRƯỚC TIÊN trigger listener trên item level (nếu có)
+        const itemListener = getListeners().find(
+          (l) => l.name === itemName && l.formName === formName,
+        );
+        if (itemListener) {
+          itemListener.onChange(item, options);
+        }
+
+        // SAU ĐÓ lấy tất cả paths bao gồm containers + leaf nodes để trigger nested listeners
+        const nestedPaths = getAllPathsIncludingContainers(item);
+        nestedPaths.forEach((p) => {
+          if (coreRecursive) {
+            coreRecursive(`${itemName}.${p}`, get(item, p), options);
+          }
+        });
+      });
+
+      // Xử lý phần tử bị xóa (currentValue dài hơn value)
+      // QUAN TRỌNG: Phải trigger listener đệ quy với undefined
+      // Nếu có nested array listener (FormList), chúng cũng được trigger với undefined
+      if (isArray(currentValue) && currentValue.length > value.length) {
+        for (let index = value.length; index < currentValue.length; index++) {
+          const itemName = `${name}.${index}`;
+
+          // Trigger listener đệ quy với undefined
+          // Điều này sẽ trigger tất cả listener (bao gồm nested array listener)
+          if (coreRecursive) {
+            coreRecursive(itemName, undefined, options);
+          }
+        }
+      }
+    }
+  };
+
+  /**
+   * Quy tắc 4.2 & 5.2: Xử lý plain object - trigger listener trên field này, rồi đệ quy vào con
+   * Xử lý thêm: detect fields bị xóa và trigger undefined
+   */
+  const handlePlainObject = (
+    name: string,
+    value: any,
+    options?: SetFieldValueOptions,
+    coreRecursive?: (n: string, v: any, o?: SetFieldValueOptions) => void,
+  ) => {
+    // TRƯỚC TIÊN: Trigger listener trên chính field này (nếu có)
+    const listener = getListeners().find(
+      (l) => l.name === name && l.formName === formName,
+    );
+    if (listener && listener.type !== "array") {
+      listener.onChange(value, options);
+    }
+
+    // SAU ĐÓ: Lấy tất cả paths bao gồm containers + leaf nodes
+    // Này sẽ trigger listener trên: "user", "user.profile", "user.profile.name" etc.
+    const allPaths = getAllPathsIncludingContainers(value);
+    allPaths.forEach((p) => {
+      if (coreRecursive) {
+        const fullPath = `${name}.${p}`;
+        coreRecursive(fullPath, get(value, p), options);
+      }
+    });
+
+    // EDGE CASE: Xử lý fields bị xóa (có trong previousValue nhưng không có trong value)
+    const previousValue = getFieldValue(name);
+    if (isPlainObject(previousValue)) {
+      const previousKeys = Object.keys(previousValue);
+      const newKeys = Object.keys(value);
+      const removedKeys = previousKeys.filter((k) => !newKeys.includes(k));
+
+      // Trigger undefined cho từng field bị xóa
+      removedKeys.forEach((key) => {
+        if (coreRecursive) {
+          coreRecursive(`${name}.${key}`, undefined, options);
+        }
+      });
+    }
+  };
+
+  /**
+   * Quy tắc 5.2: Xử lý array non-listener - trigger item[index] listener, rồi đệ quy con
+   *
+   * Xử lý 2 trường hợp:
+   * 1. Phần tử thay đổi: trigger item level + nested listeners
+   * 2. Phần tử bị xóa (previousValues.length > value.length):
+   *    - Set lại mảng về đúng kích thước mới (watcher phải thấy mảng bị cắt)
+   *    - Trigger undefined cho các item bị xóa (nếu có listener con)
+   */
+  const handleNonListenerArray = (
+    name: string,
+    value: any[],
+    options?: SetFieldValueOptions,
+    coreRecursive?: (n: string, v: any, o?: SetFieldValueOptions) => void,
+  ) => {
+    const previousValues = getFieldValue(name);
+    if (isArray(previousValues)) {
+      // QUAN TRỌNG: Set lại mảng về đúng kích thước mới TRƯỚC
+      // Đảm bảo watcher nhìn thấy mảng bị cắt: [1,2,3] → [1]
+      if (
+        previousValues.length !== value.length ||
+        !isEqual(previousValues, value)
+      ) {
+        setData(formName, name, value);
+      }
+
+      // Trường hợp 1: Xử lý phần tử thay đổi
+      value.forEach((item, index) => {
+        if (!isEqual(previousValues[index], item)) {
+          const itemName = `${name}.${index}`;
+
+          // TRƯỚC TIÊN trigger listener trên item level (nếu có)
+          const itemListener = getListeners().find(
+            (l) => l.name === itemName && l.formName === formName,
+          );
+          if (itemListener) {
+            itemListener.onChange(item, options);
+          }
+
+          // SAU ĐÓ lấy tất cả paths bao gồm containers + leaf nodes
+          const nestedPaths = getAllPathsIncludingContainers(item);
+          nestedPaths.forEach((p) => {
+            if (coreRecursive) {
+              coreRecursive(`${itemName}.${p}`, get(item, p), options);
+            }
+          });
+        }
+      });
+
+      // Trường hợp 2: Trigger undefined cho phần tử bị xóa
+      // QUAN TRỌNG: Phải đệ quy vào nested paths của previousValue
+      // Để trigger tất cả nested listeners (bao gồm nested FormList)
+      if (previousValues.length > value.length) {
+        for (let index = value.length; index < previousValues.length; index++) {
+          const itemName = `${name}.${index}`;
+          const removedItem = previousValues[index];
+
+          // Lấy tất cả nested paths từ item BỊ XÓA
+          const nestedPaths = getAllPathsIncludingContainers(removedItem);
+
+          // Trigger undefined cho TỪNG nested path
+          // VD: data[1].tags (FormList), data[1].tags[0], data[1].tags[1], ...
+          nestedPaths.forEach((p) => {
+            if (coreRecursive) {
+              coreRecursive(`${itemName}.${p}`, undefined, options);
+            }
+          });
+
+          // Cuối cùng trigger cho chính item level
+          if (coreRecursive) {
+            coreRecursive(itemName, undefined, options);
+          }
+        }
+      }
+    }
+  };
+
+  /**
+   * Hàm lõi đệ quy: Phân loại value và xử lý theo quy tắc tương ứng
+   * Thứ tự trigger: Field level → Item/Index level → Property level
+   */
+  const deepTriggerSetCore = (
+    name: string,
+    value: any,
+    options?: SetFieldValueOptions,
+  ): void => {
+    // Quy tắc 1: Primitive values (string, number, boolean, null, undefined)
+    if (
+      typeof value === "string" ||
+      typeof value === "number" ||
+      typeof value === "boolean" ||
+      value === null ||
+      value === undefined
+    ) {
+      handlePrimitiveValue(name, value, options);
+      return;
+    }
+
+    // Quy tắc 2 & 3: Object hoặc Array
+    if (isPlainObject(value)) {
+      const listener = getListeners().find(
+        (l) => l.name === name && l.formName === formName,
+      );
+
+      // Quy tắc 4.2 & 5.2: Plain object - trigger field level, rồi đệ quy con
+      handlePlainObject(name, value, options, deepTriggerSetCore);
+      return;
+    }
+
+    if (Array.isArray(value)) {
+      const listener = getListeners().find(
+        (l) => l.name === name && l.formName === formName,
+      );
+
+      // Quy tắc 4.1: Array listener - trigger onArrayChange + item level + con
+      if (listener && listener.type === "array") {
+        handleArrayListener(name, value, options, deepTriggerSetCore);
+      } else if (!listener) {
+        // Quy tắc 5.2: Array non-listener - trigger item level + con
+        handleNonListenerArray(name, value, options, deepTriggerSetCore);
+      } else {
+        // Listener không phải array type nhưng value là array
+        // Xử lý như plain object
+        handlePlainObject(name, value, options, deepTriggerSetCore);
+      }
+      return;
+    }
+
+    // Quy tắc 2.2 & 5.1: Class Instance (non-plain object)
+    handlePrimitiveValue(name, value, options);
+  };
+
+  /**
+   * Hàm công khai: Entry point cho Deep Trigger Set Value
+   */
+  const handleDeepTriggerSet = (
+    name: string,
+    value: any,
+    options?: SetFieldValueOptions,
+  ) => {
+    deepTriggerSetCore(name, value, options);
+  };
+
+  const setFieldValue = (name, value, options?: SetFieldValueOptions) => {
+    // Nếu options.deepTrigger = true, gọi handleDeepTriggerSet
+    if (options?.deepTrigger) {
+      handleDeepTriggerSet(name, value, options);
+      return;
+    }
+
+    // Default behavior: set field value trực tiếp không quan tâm trigger listener
+    const listener: ListenerItem | null = getListeners().find(
+      (l) => l.name === name && l.formName === formName,
+    );
+
+    if (listener) {
+      // 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 {
+      // set data for non-listener field
+      setData(formName, name, value);
+    }
+  };
+
   const setFieldValues = (values, options = { notTriggerDirty: false }) => {
-    const allStringPath = getAllNoneObjStringPath(values);
+    // Lấy tất cả paths, dừng khi gặp array
+    const allPaths = getAllPathsStopAtArray(values);
+
+    allPaths.forEach((path) => {
+      const pathValue = get(values, path);
+
+      // Nếu value là array => gọi deepTrigger
+      if (Array.isArray(pathValue)) {
+        handleDeepTriggerSet(path, pathValue, options);
+        return;
+      }
 
-    allStringPath.forEach((p) => {
+      // Điều kiện dừng bình thường: primitive hoặc class instance
       const listener = getListeners().find(
-        (l) => l.name === p && l.formName === formName,
+        (l) => l.name === path && l.formName === formName,
       );
+
       if (listener) {
-        listener.onChange(get(values, listener.name), options);
+        listener.onChange(pathValue, options);
       } else {
-        setData(formName, p, get(values, p));
+        setData(formName, path, pathValue);
       }
     });
   };
 
-  const getFieldValue = (name) => {
+  function getFieldValue(name) {
     return getFormItemValue(formName, name);
-  };
+  }
 
   const getFieldValues = (names = []) => {
     return names.map((name) => ({
@@ -165,17 +546,37 @@ export default function Form<T = any>({
     state: _,
     reset,
   } = useTask({
-    async task(props) {
+    async task(props?: SubmitProps<T>) {
       try {
         flushSync(setFormState({ formName, submitState: "submitting" }));
         const errorFields = getAllFieldErrors();
-        const listeners = getListeners().filter((l) => l.formName === formName);
+        const listeners: ListenerItem[] = 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));
+        uniqBy(
+          filter(listeners, (l: ListenerItem) => {
+            // console.log("Check collect field hidden: ", {
+            //   name: l.name,
+            //   hidden: l.hidden,
+            //   collectOnHidden: l.collectOnHidden,
+            //   collectHiddenFields,
+            // });
+            if (!l.hidden) return true;
+            if (isNil(props?.collectHiddenFields)) {
+              if (isNil(l.collectOnHidden)) {
+                return formCollectHiddenFields;
+              }
+              return Boolean(l.collectOnHidden);
+            }
+            return props.collectHiddenFields;
+          }),
+          (l) => l.name,
+        ).forEach((l) => {
+          set(cleanValues as any, l.name, get(resultValues, l.name));
         });
 
         const handleIsolateCase = async () => {
@@ -397,7 +798,6 @@ export default function Form<T = any>({
           {children}
         </form>
       )}
-      <FormCleanUp />
     </FormContext.Provider>
   );
 }
@@ -413,9 +813,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);
 
@@ -442,6 +844,30 @@ export function useWatch<T = any>(
   return value as T[keyof T] | undefined;
 }
 
+export function useWatchNormalized<T, TFn extends (v: any) => any>({
+  name,
+  normalizeFn,
+  formNameOrFormInstance,
+}: {
+  name: keyof T & string;
+  normalizeFn: TFn;
+  formNameOrFormInstance?: string | PublicFormInstance<T>;
+}) {
+  const [formInstance] = useForm<T>(formNameOrFormInstance as any);
+  const rawValue = useFormStore((state) => {
+    return state.getFormItemValue(
+      formInstance?.formName ?? (formNameOrFormInstance as any),
+      name as string,
+    );
+  });
+
+  const normalizedValue = useMemo(() => {
+    return normalizeFn(rawValue);
+  }, [rawValue, normalizeFn]);
+
+  return normalizedValue as ReturnType<TFn>;
+}
+
 export function useSubmitDataWatch<T = any>({
   formNameOrFormInstance,
   triggerWhenChange = false,
@@ -508,7 +934,9 @@ export const useFormItemStateWatch = <T = any,>(
 };
 
 Form.useForm = useForm;
+Form.Item = FormItem;
 Form.useWatch = useWatch;
+Form.useWatchNormalized = useWatchNormalized;
 Form.useSubmitDataWatch = useSubmitDataWatch;
 Form.useFormStateWatch = useFormStateWatch;
 Form.useFormItemStateWatch = useFormItemStateWatch;