react-form-manage 1.0.8-beta.22 → 1.0.8-beta.24

package/src/App.tsx

@@ -1,12 +1,9 @@
-import { Checkbox } from "@mui/material";
-import { Button, Input } from "antd";
+import { Input } from "antd";
 import { motion } from "framer-motion";
-import { useEffect } from "react";
-import FormItem from "./components/Form/FormItem";
-import FormList from "./components/Form/FormList";
-import InputWrapper from "./components/Form/InputWrapper";
-import Form, { useForm } from "./providers/Form";
-import TestDialog from "./test/TestDialog";
+import Form from "./providers/Form";
+import CommonTest from "./test/CommonTest";
+import TestListener from "./test/TestListener";
+import TestWrapperFormItem from "./test/TestWrapperFormItem";
 
 import { Form as AntdForm } from "antd";
 
@@ -17,17 +14,6 @@ function TestFormWatch() {
 }
 
 const App = () => {
-  const [form] = useForm("form1");
-
-  const watchCheckBox = Form.useWatch("checkControlledAfterInit", "form1");
-
-  useEffect(() => {
-    if (form) {
-      // setTimeout(() => {
-      //   form.setFieldValue("TestData", "HelloWorld");
-      // }, 500);
-    }
-  }, [form]);
   return (
     <div>
       <AntdForm>
@@ -44,164 +30,13 @@ const App = () => {
       </AntdForm>
 
       {/* Hidden Test */}
-      <Form
-        initialValues={{
-          TestData: "",
-          numericCode: "",
-          // arr: [{ el: "Item 1" }, { el: "Item 2" }],
-        }}
-        onFinish={(values) => {
-          console.log(values);
-        }}
-        formName={"form1"}
-        // hidden
-      >
-        <FormItem
-          name={"username"}
-          rules={[
-            {
-              required: true,
-              message: "Test",
-            },
-          ]}
-          initialValue={"283746"}
-          // hidden
-        >
-          <InputWrapper>
-            <Input />
-          </InputWrapper>
-        </FormItem>
-
-        {/* Numberic test */}
-        <FormItem
-          name={"numericCode"}
-          rules={[
-            { required: true, message: "Vui lòng nhập mã" },
-            {
-              pattern: /^\d+$/,
-              message: "Chỉ cho phép chuỗi số",
-            },
-          ]}
-        >
-          <InputWrapper>
-            <Input placeholder="Mã chỉ gồm số" style={{ width: 200 }} />
-          </InputWrapper>
-        </FormItem>
+      <CommonTest />
+      {/* <Form formName="TestDialog" >
+       <TestDialog />
+     </Form> */}
 
-        {/* Motion Test */}
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          transition={{ duration: 1 }}
-        >
-          <FormItem name="motionTest" controlAfterInit initialValue={"1234134"}>
-            <InputWrapper>
-              <Input placeholder="Motion Test" style={{ width: 200 }} />
-            </InputWrapper>
-          </FormItem>
-        </motion.div>
-        <FormList
-          initialValues={[
-            {
-              el: "sdfsdf",
-              d: { child: "Test Child" },
-            },
-          ]}
-          name="arr"
-        >
-          {(fields, { add, remove, move }) => (
-            <div>
-              {fields.map((field, index) => (
-                <div key={field.key} style={{ marginBottom: 8 }}>
-                  <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>
-                  </FormItem>
-                  <Button
-                    onClick={() => remove({ index })}
-                    style={{ marginLeft: 8 }}
-                  >
-                    Remove
-                  </Button>
-                  {index > 0 && (
-                    <Button
-                      onClick={() => move({ from: index, to: index - 1 })}
-                      style={{ marginLeft: 8 }}
-                    >
-                      Move Up
-                    </Button>
-                  )}
-                  {index < fields.length - 1 && (
-                    <Button
-                      onClick={() => move({ from: index, to: index + 1 })}
-                      style={{ marginLeft: 8 }}
-                    >
-                      Move Down
-                    </Button>
-                  )}
-                </div>
-              ))}
-              <Button onClick={() => add(fields.length)}>Add Item</Button>
-            </div>
-          )}
-        </FormList>
-        <TestDialog />
-        <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 }}
-          exit={{ opacity: 0 }}
-          transition={{ duration: 1.5 }}
-        >
-          <FormItem
-            valuePropName="checked"
-            getValueFromEvent={(_, checked) => checked}
-            name="checkControlledAfterInit"
-            controlAfterInit={true}
-            initialValue={true}
-          >
-            <Checkbox />
-          </FormItem>
-        </motion.div>
-        <TestFormWatch />
-        <Button
-          onClick={() => {
-            const current = form?.getFieldValue("checkControlledAfterInit");
-            console.log("Toggle controlled after init: ", current);
-            form?.setFieldValue("checkControlledAfterInit", !current);
-          }}
-        >
-          Toggle
-        </Button>
-        <Button htmlType="submit">Submit</Button>
-        <Button
-          onClick={() => {
-            form?.resetFields?.();
-          }}
-        >
-          Reset
-        </Button>
-      </Form>
+      <TestListener />
+      <TestWrapperFormItem />
     </div>
   );
 };

package/src/components/Form/FormCleanUp.tsx

@@ -38,7 +38,7 @@ const FormCleanUp = () => {
           });
         } else {
           if (c.type === "array") {
-            console.log(c);
+            // console.log(c);
             clearArrItem(c.formName, c.name);
           } else {
           }

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);
 }
 
-export default function FormItem({
+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<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,61 +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/hooks/useFormItemControl.ts

@@ -1,6 +1,6 @@
 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,
@@ -37,6 +37,8 @@ interface UseFormItemControlProps {
   formItemId?: string;
   rules?: ValidationRule[];
   elementRef?: RefObject<any> | null;
+  hidden?: boolean;
+  collectOnHidden?: boolean;
 }
 
 export interface UseFormItemControlReturn {
@@ -61,6 +63,8 @@ export default function useFormItemControl<T = any>({
   formItemId,
   rules,
   elementRef,
+  hidden,
+  collectOnHidden,
 }: UseFormItemControlProps): UseFormItemControlReturn {
   const contextForm = useFormContext();
   const {
@@ -71,6 +75,9 @@ export default function useFormItemControl<T = any>({
     // getFormState,
     isStateInitied,
     submitState,
+    getListener,
+    revokeListener,
+    clearObjKeyItem,
   } = useFormStore(
     useShallow((state) => {
       return {
@@ -90,6 +97,9 @@ export default function useFormItemControl<T = any>({
           state.formStates?.[
             formName || form?.formName || contextForm?.formName
           ]?.submitState,
+        getListener: state.getListener,
+        revokeListener: state.revokeListener,
+        clearObjKeyItem: state.clearObjKeyItem,
       };
     }),
   );
@@ -216,9 +226,9 @@ export default function useFormItemControl<T = any>({
     return rules || [];
   }, [rules]);
 
-  useEffect(() => {
-    console.log("Rules changed: ", { name, listener });
-  }, [value, listener]);
+  // useEffect(() => {
+  //   console.log("Rules changed: ", { name, listener });
+  // }, [value, listener]);
 
   const { data: errors, state } = useTaskEffect({
     async task() {
@@ -562,28 +572,31 @@ export default function useFormItemControl<T = any>({
     }
   }, [isStateInitied]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
+    console.log("Component mount: ", name, formItemId, listener);
     if (!listener) {
       setListener({
         onChange,
         emitFocus,
         isTouched: false,
         isDirty: false,
-        isInitied: true,
+        isInitied: false,
         name,
         formName: formName || form?.formName || contextForm?.formName,
         formItemId,
         onReset,
+        hidden,
+        collectOnHidden,
       });
     }
 
     return () => {
-      if (listener) {
-        setCleanUpStack({
-          name: listener.name,
-          itemKey: listener.formItemId,
-        });
-      }
+      revokeListener(formItemId, (listener, same) => {
+        if (!same.length) {
+          console.log("Trigger after revoke: ", listener, same);
+          clearObjKeyItem(listener.formName, listener.name);
+        }
+      });
     };
 
     // return () => {
@@ -592,6 +605,16 @@ export default function useFormItemControl<T = any>({
     // };
   }, []);
 
+  useEffect(() => {
+    if (listener) {
+      setListener({
+        formItemId,
+        hidden,
+        collectOnHidden,
+      });
+    }
+  }, [hidden, collectOnHidden]);
+
   useEffect(() => {
     if (listener) {
       setListener({

package/src/hooks/useFormListControl.ts

@@ -337,7 +337,12 @@ export default function useFormListControl<T = any>({
           name,
           listFormInitValues,
         );
-
+        if (getListener(formItemId)) {
+          setListener({
+            formItemId,
+            isInitied: true,
+          });
+        }
         return;
       }
 
@@ -355,7 +360,12 @@ export default function useFormListControl<T = any>({
 
         setListFields(result);
         setListFormInitValues(internalInitValue as any);
-
+        if (getListener(formItemId)) {
+          setListener({
+            formItemId,
+            isInitied: true,
+          });
+        }
         return;
       }
 
@@ -383,7 +393,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;