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

package/src/App.tsx

@@ -1,179 +1,54 @@
-import { Checkbox } from "@mui/material";
-import { Button, 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 { Input } from "antd";
+import Form from "./providers/Form";
+import TestDialog from "./test/TestDialog";
+import TestListener from "./test/TestListener";
+import TestWrapperFormItem from "./test/TestWrapperFormItem";
 
 import { Form as AntdForm } from "antd";
+import TestWatchNormalize from "./test/TestWatchNormalize";
+import TestSetValueIndex from "./test/testSetValue";
 
-const App = () => {
-  const [form] = useForm("form1");
+function TestFormWatch() {
+  const watchValue = Form.useWatch("numericCode");
+
+  return <div>TestFormWatch</div>;
+}
 
-  const watchCheckBox = Form.useWatch("checkControlledAfterInit", "form1");
+const App = () => {
+  const [antdForm] = AntdForm.useForm();
 
-  useEffect(() => {
-    if (form) {
-      // setTimeout(() => {
-      //   form.setFieldValue("TestData", "HelloWorld");
-      // }, 500);
-    }
-  }, [form]);
   return (
     <div>
-      <AntdForm>
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          transition={{ duration: 1 }}
+      {/* <AntdForm form={antdForm}>
+        <AntdForm.Item
+          name={"test.testt"}
+          initialValue={"số 1"}
+          label="Antd Input"
         >
-          <AntdForm.Item name={"234"} initialValue={"23432"} label="Antd Input">
-            <Input />
-          </AntdForm.Item>
-        </motion.div>
-      </AntdForm>
+          <Input />
+        </AntdForm.Item>
 
-      {/* 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
+        <AntdForm.Item
+          name={"test.testt2"}
+          initialValue={"số 2"}
+          label="Antd Input"
         >
-          <InputWrapper>
-            <Input />
-          </InputWrapper>
-        </FormItem>
+          <Input />
+        </AntdForm.Item>
+      </AntdForm> */}
 
-        {/* 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>
+      {/* Hidden Test */}
+      {/* <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: "",
-            },
-          ]}
-          name="arr"
-        >
-          {(fields, { add, remove, move }) => (
-            <div>
-              {fields.map((field, index) => (
-                <div key={field.key} style={{ marginBottom: 8 }}>
-                  <FormItem name={`${field.name}.el`}>
-                    <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>
-        <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>
+      {/* <TestWatchNormalize />
 
-        <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 /> */}
+
+      <TestSetValueIndex />
     </div>
   );
 };