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

package/src/components/Form/FormItem.tsx

@@ -1,10 +1,11 @@
-import type { ReactElement } from "react";
-import { cloneElement, Fragment, useRef, useState } from "react";
+import { isNil } from "lodash";
+import type { ComponentProps, FC, ReactElement } from "react";
+import { cloneElement, Fragment, useEffect, useRef, useState } from "react";
 import { v4 } from "uuid";
 import useFormItemControl from "../../hooks/useFormItemControl";
 import type { ValidationRule } from "../../types/public";
 
-export interface FormItemProps {
+export type BaseFormItemProps = {
   children: ReactElement<any>;
   name: string;
   formName?: string;
@@ -15,10 +16,130 @@ export interface FormItemProps {
   getValueFromEvent?: (...args: any[]) => any;
   controlAfterInit?: boolean;
   hidden?: boolean;
+  collectOnHidden?: boolean;
+};
+
+export type FormItemProps<TCustomWrapper extends FC<any> | undefined> =
+  BaseFormItemProps &
+    (
+      | {
+          Component?: undefined;
+        }
+      | ({
+          Component: TCustomWrapper;
+        } & Omit<ComponentProps<TCustomWrapper>, keyof BaseFormItemProps>)
+    );
+
+function BaseFormItem({
+  children,
+
+  name,
+  elementRef: elRef,
+
+  valuePropName,
+  getValueFromEvent,
+  onChange,
+  value,
+  isDirty,
+  errors,
+  onFocus,
+  state,
+  submitState,
+  isTouched,
+}: any) {
+  useEffect(() => {
+    console.log("Base Form Item: ", { name, value });
+  }, [value]);
+  return cloneElement(children, {
+    name,
+    ref: elRef,
+    [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,
+    submitState,
+    isTouched: isTouched,
+  } as any);
+}
+
+function FormItemWithWrapper<TComponent extends FC<any>>({
+  children,
+
+  name,
+  elementRef: elRef,
+
+  valuePropName,
+  getValueFromEvent,
+  onChange,
+  value,
+  isDirty,
+  errors,
+  onFocus,
+  state,
+  submitState,
+  isTouched,
+  Component,
+  ...props
+}: any) {
+  return (
+    <Component {...props}>
+      {cloneElement(children, {
+        name,
+        ref: elRef,
+        [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,
+        submitState,
+        isTouched: isTouched,
+      } as any)}
+    </Component>
+  );
 }
 
-export default function FormItem({
+export default function FormItem<TCustomWrapper extends FC<any> | undefined>({
   children,
+  Component,
   name,
   formName,
   initialValue,
@@ -28,10 +149,13 @@ export default function FormItem({
   getValueFromEvent,
   controlAfterInit = false,
   hidden,
-}: FormItemProps) {
+  collectOnHidden,
+  ...props
+}: FormItemProps<TCustomWrapper>) {
+  const [formItemId] = useState(externalFormItemId ?? v4());
+
   const elRef = useRef<any>(null);
 
-  const [formItemId] = useState(externalFormItemId ?? v4());
   const {
     value,
     onChange,
@@ -49,62 +173,55 @@ export default function FormItem({
     formItemId,
     rules,
     elementRef: elRef,
+    hidden,
+    collectOnHidden,
   });
-  // console.log("re-render", formName, name);
-
-  // useEffect(() => {
-  //   console.log({ value });
-  // }, [value]);
-
-  // useEffect(() => {
-  //   console.log("isInitied changed: ", {
-  //     isInitied,
-  //     name,
-  //     value,
-  //     controlAfterInit,
-  //   });
-  // }, [isInitied]);
 
   return (
     <Fragment
-      key={`control-after-init-${Boolean(controlAfterInit && isInitied) ? "1" : "0"}-${formItemId}`}
+      key={`control-after-init-${Boolean(controlAfterInit && isInitied) ? "1" : "0"}-${externalFormItemId}`}
     >
-      {!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)
-        : null}
+      {!hidden && children ? (
+        isNil(Component) ? (
+          <BaseFormItem
+            elementRef={elRef}
+            name={name}
+            valuePropName={valuePropName}
+            getValueFromEvent={getValueFromEvent}
+            value={value}
+            onChange={onChange}
+            errors={errors}
+            state={state}
+            onFocus={onFocus}
+            isDirty={isDirty}
+            submitState={submitState}
+            isTouched={isTouched}
+            formItemId={formItemId}
+          >
+            {children}
+          </BaseFormItem>
+        ) : (
+          <FormItemWithWrapper
+            elementRef={elRef}
+            name={name}
+            valuePropName={valuePropName}
+            getValueFromEvent={getValueFromEvent}
+            value={value}
+            onChange={onChange}
+            errors={errors}
+            state={state}
+            onFocus={onFocus}
+            isDirty={isDirty}
+            submitState={submitState}
+            isTouched={isTouched}
+            formItemId={formItemId}
+            Component={Component}
+            {...props}
+          >
+            {children}
+          </FormItemWithWrapper>
+        )
+      ) : 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/constants/form.ts

@@ -5,4 +5,4 @@ export const SUBMIT_STATE = {
   REJECTED: "rejected",
 } as const;
 
-export type SubmitState = typeof SUBMIT_STATE[keyof typeof SUBMIT_STATE];
+export type SubmitState = (typeof SUBMIT_STATE)[keyof typeof SUBMIT_STATE];

package/src/hooks/useFormItemControl.ts

@@ -1,6 +1,6 @@
-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 { useEffect, useLayoutEffect, useMemo, type RefObject } from "react";
 import { useShallow } from "zustand/react/shallow"; // Import useShallow
 import {
   IS_ALPHABET_STRING_AND_NUMBER_REGEX,
@@ -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 {
@@ -41,11 +37,18 @@ interface UseFormItemControlProps {
   formItemId?: string;
   rules?: ValidationRule[];
   elementRef?: RefObject<any> | null;
+  hidden?: boolean;
+  collectOnHidden?: boolean;
+}
+
+export interface OnChangeOptions {
+  notTriggerDirty?: boolean;
+  initiedData?: boolean;
 }
 
 export interface UseFormItemControlReturn {
   value: any;
-  onChange: (value: any, options?: AnyObject) => void;
+  onChange: (value: any, options?: OnChangeOptions) => void;
   state: any;
   errors: FormFieldError[];
   onFocus: () => void;
@@ -65,6 +68,8 @@ export default function useFormItemControl<T = any>({
   formItemId,
   rules,
   elementRef,
+  hidden,
+  collectOnHidden,
 }: UseFormItemControlProps): UseFormItemControlReturn {
   const contextForm = useFormContext();
   const {
@@ -72,9 +77,12 @@ export default function useFormItemControl<T = any>({
     setData,
     getCacheData,
     getFormValues,
-    getFormState,
+    // getFormState,
     isStateInitied,
     submitState,
+    getListener,
+    revokeListener,
+    clearObjKeyItem,
   } = useFormStore(
     useShallow((state) => {
       return {
@@ -85,7 +93,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
@@ -94,11 +102,14 @@ export default function useFormItemControl<T = any>({
           state.formStates?.[
             formName || form?.formName || contextForm?.formName
           ]?.submitState,
+        getListener: state.getListener,
+        revokeListener: state.revokeListener,
+        clearObjKeyItem: state.clearObjKeyItem,
       };
     }),
   );
 
-  const { setCleanUpStack } = useFormCleanUp(
+  const { setCleanUpStack } = useFormStore(
     useShallow((state) => ({
       setCleanUpStack: state.setCleanUpStack,
     })),
@@ -130,7 +141,7 @@ export default function useFormItemControl<T = any>({
     }),
   );
 
-  const { listener, setListener } = useFormListeners(
+  const { listener, setListener } = useFormStore(
     useShallow((state) => {
       // console.log(
       //   "Get listener from store: ",
@@ -205,6 +216,7 @@ export default function useFormItemControl<T = any>({
       formItemId,
       isDirty: false,
       isTouched: false,
+      isInitied: false,
     });
     onChange(
       isNil(value)
@@ -219,8 +231,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(
@@ -513,7 +534,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);
     },
@@ -537,40 +560,66 @@ export default function useFormItemControl<T = any>({
 
       if (isNil(value)) {
         if (isNil(internalInitValue)) {
-          if (!isNil(initialValue)) {
-            onInitData(initialValue);
-          }
+          onInitData(initialValue);
         } else {
           onChange(internalInitValue, {
             notTriggerDirty: true,
             initiedData: true,
           });
         }
+      } else {
+        onChange(value, {
+          notTriggerDirty: true,
+          initiedData: true,
+        });
       }
       return;
     }
   }, [isStateInitied]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
+    console.log("Component mount: ", name, formItemId, listener);
     if (!listener) {
       setListener({
         onChange,
         emitFocus,
         isTouched: false,
         isDirty: false,
+        isInitied: false,
         name,
         formName: formName || form?.formName || contextForm?.formName,
         formItemId,
         onReset,
+        hidden,
+        collectOnHidden,
       });
     }
 
+    return () => {
+      revokeListener(formItemId, (listener, same) => {
+        if (!same.length) {
+          console.log("Trigger after revoke: ", listener, same);
+          clearObjKeyItem(listener.formName, listener.name);
+        }
+      });
+    };
+
     // return () => {
     //   console.log("Revoke listener", listener);
 
     // };
   }, []);
 
+  useEffect(() => {
+    if (listener) {
+      setListener({
+        formItemId,
+        hidden,
+        collectOnHidden,
+      });
+    }
+  }, [hidden, collectOnHidden]);
+
   useEffect(() => {
     if (listener) {
       setListener({
@@ -590,28 +639,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,