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

package/src/providers/Form.tsx

@@ -1,5 +1,6 @@
 import {
   cloneDeep,
+  filter,
   get,
   isEqual,
   isNil,
@@ -14,8 +15,9 @@ import { createContext, useContext, useEffect, 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 { ListenerItem, useFormStore } from "../stores/formStore";
+import { ListenerItem, SubmitProps, useFormStore } from "../stores/formStore";
 import type {
   PublicFormInstance,
   UseFormItemStateWatchReturn,
@@ -34,6 +36,7 @@ export interface FormProps<T = any> extends Omit<
   FormHTMLAttributes<HTMLFormElement>,
   "onSubmit"
 > {
+  collectHiddenFields?: boolean;
   children: ReactNode;
   formName: string;
   initialValues?: T;
@@ -55,6 +58,7 @@ export default function Form<T = any>({
   onReject,
   onFinally,
   FormElement,
+  collectHiddenFields: formCollectHiddenFields = true,
   ...props
 }: FormProps<T>) {
   const {
@@ -236,16 +240,36 @@ 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;
-        uniqBy(listeners, (l: any) => l.name).forEach((l) => {
+        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));
         });
 
@@ -443,6 +467,8 @@ export default function Form<T = any>({
         formName,
       }}
     >
+      <FormCleanUp />
+
       {FormElement ? (
         <FormElement
           onSubmit={(e) => {
@@ -468,7 +494,6 @@ export default function Form<T = any>({
           {children}
         </form>
       )}
-      <FormCleanUp />
     </FormContext.Provider>
   );
 }
@@ -581,6 +606,7 @@ export const useFormItemStateWatch = <T = any,>(
 };
 
 Form.useForm = useForm;
+Form.Item = FormItem;
 Form.useWatch = useWatch;
 Form.useSubmitDataWatch = useSubmitDataWatch;
 Form.useFormStateWatch = useFormStateWatch;

package/src/stores/formStore.ts

@@ -4,10 +4,25 @@ import { v4 } from "uuid";
 import { create } from "zustand";
 import { getAllNoneObjStringPath } from "../utils/obj.util";
 type ListenerFormItemType = "normal" | "array";
-export interface FormInstance {
+
+export interface SubmitProps<T = any> {
+  externalFinishCallback?: (values: T, allValues?: any) => void | Promise<void>;
+  externalRejectCallback?: (errorFields: any[]) => void | Promise<void>;
+  externalFinallyCallback?: (result: {
+    errorsField: any[];
+    values: T;
+    withUnRegisteredValues: any;
+  }) => void | Promise<void>;
+  callBothFinish?: boolean;
+  callBothReject?: boolean;
+  callBothFinally?: boolean;
+  collectHiddenFields?: boolean;
+}
+
+export interface FormInstance<T = any> {
   formName: string;
   resetFields: (values?: any) => void;
-  submit: (values?: any) => void;
+  submit: (props?: SubmitProps<T>) => void;
   submitAsync: (values?: any) => Promise<any>;
   setFieldValue: (name: string, value: any, options?: any) => void;
   setFieldValues: (values: Record<string, any>, options?: any) => void;
@@ -31,6 +46,8 @@ export interface ListenerItem {
   emitFocus?: any;
   isInitied?: boolean;
   type?: ListenerFormItemType;
+  hidden?: boolean;
+  collectOnHidden?: boolean;
 }
 
 export interface CleanUpItem {
@@ -362,7 +379,7 @@ const createFormStoreSlice = (storeSet: any, storeGet: any, api: any) => ({
 
 // Listeners Slice
 const createListenersSlice = (storeSet: any, storeGet: any, api: any) => ({
-  listeners: [],
+  listeners: [] as ListenerItem[],
   getListener(formItemId) {
     return storeGet().listeners.find((l) => l.formItemId === formItemId);
   },
@@ -383,6 +400,8 @@ const createListenersSlice = (storeSet: any, storeGet: any, api: any) => ({
     isInitied,
     type,
     onArrayChange,
+    hidden,
+    collectOnHidden,
   }: Partial<ListenerItem> & { formItemId: string }) {
     return storeSet(
       produce<any>((state: any) => {
@@ -428,6 +447,14 @@ const createListenersSlice = (storeSet: any, storeGet: any, api: any) => ({
             storeListeners[findListenerIndex].onArrayChange = onArrayChange;
           }
 
+          if (!isNil(hidden)) {
+            storeListeners[findListenerIndex].hidden = hidden;
+          }
+
+          if (!isNil(collectOnHidden)) {
+            storeListeners[findListenerIndex].collectOnHidden = collectOnHidden;
+          }
+
           return;
         }
         storeListeners.push({
@@ -442,6 +469,10 @@ const createListenersSlice = (storeSet: any, storeGet: any, api: any) => ({
           isInitied: Boolean(isInitied),
           type: type || "normal",
           onArrayChange,
+          onFocus,
+          emitFocus,
+          hidden: Boolean(hidden),
+          collectOnHidden,
         });
       }),
     );

package/src/test/CommonTest.tsx

@@ -0,0 +1,177 @@
+import { Button, Checkbox, Input } from "antd";
+import { motion } from "framer-motion";
+import FormItem from "../components/Form/FormItem";
+import FormList from "../components/Form/FormList";
+import InputWrapper from "../components/Form/InputWrapper";
+import Form from "../providers/Form";
+
+type Props = {};
+
+function CommonTest({}: Props) {
+  const [form] = Form.useForm("form1");
+
+  const watchCheckBox = Form.useWatch("checkControlledAfterInit", "form1");
+
+  return (
+    <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>
+
+      {/* 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>
+      <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 }}
+      >
+        <Form.Item
+          valuePropName="checked"
+          getValueFromEvent={(_, checked) => checked}
+          name="checkControlledAfterInit"
+          controlAfterInit={true}
+          initialValue={true}
+          hidden
+        >
+          <Checkbox />
+        </Form.Item>
+      </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>
+  );
+}
+
+export default CommonTest;

package/src/test/TestWrapperFormItem.tsx

@@ -0,0 +1,34 @@
+import { Button, Col, Input, Row } from "antd";
+import { useToggle } from "minh-custom-hooks-release";
+import Form from "../providers/Form";
+
+type Props = {};
+
+function TestWrapperFormItem({}: Props) {
+  const { state, toggle } = useToggle(false);
+  return (
+    <Form
+      onFinish={(values, all) => {
+        console.log(values, all);
+      }}
+      formName="testWrapper"
+    >
+      <Row>
+        <Form.Item
+          hidden={!state}
+          name="test"
+          collectOnHidden={false}
+          initialValue={"test"}
+          Component={Col}
+          xs={12}
+        >
+          <Input />
+        </Form.Item>
+      </Row>
+      <Button htmlType="submit">Submit</Button>
+      <Button onClick={toggle}>{state ? "Off" : "On"}</Button>
+    </Form>
+  );
+}
+
+export default TestWrapperFormItem;