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

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/TestDialog.tsx

@@ -0,0 +1,52 @@
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  TextField,
+} from "@mui/material";
+import { Box } from "@mui/system";
+import { useToggle } from "minh-custom-hooks-release";
+import FormItem from "../components/Form/FormItem";
+import TestSelect from "./TestSelect";
+
+type Props = {};
+
+function TestDialog({}: Props) {
+  const { state: open, toggle } = useToggle();
+  return (
+    <Box>
+      <Dialog open={open} onClose={toggle}>
+        <DialogTitle>Test Dialog</DialogTitle>
+        <DialogContent>
+          <DialogContentText>This is a test dialog.</DialogContentText>
+          <FormItem
+            rules={[
+              {
+                handler(value) {
+                  console.log("Validating in dialog: ", value);
+                  return Boolean(value);
+                },
+                message: "Testt",
+              },
+            ]}
+            controlAfterInit
+            initialValue={null}
+            name="testSelectInsideDialog"
+          >
+            <TestSelect />
+          </FormItem>
+          <FormItem controlAfterInit initialValue={""} name="anotherField">
+            <TextField />
+          </FormItem>
+        </DialogContent>
+      </Dialog>
+      <Button variant="contained" onClick={toggle}>
+        Open Test Dialog
+      </Button>
+    </Box>
+  );
+}
+
+export default TestDialog;

package/src/test/TestListener.tsx

@@ -0,0 +1,21 @@
+import { cloneDeep } from "lodash";
+import { useEffect } from "react";
+import { useShallow } from "zustand/react/shallow";
+import { useFormStore } from "../stores/formStore";
+
+type Props = {};
+
+function TestListener({}: Props) {
+  const { listeners } = useFormStore(
+    useShallow((state) => ({
+      listeners: state.listeners,
+    })),
+  );
+
+  useEffect(() => {
+    console.log("Listeners updated: ", cloneDeep(listeners));
+  }, [listeners]);
+  return <div>TestListener</div>;
+}
+
+export default TestListener;

package/src/test/TestNotFormWrapper.tsx

@@ -0,0 +1,43 @@
+import { Button, Input } from "antd";
+
+type Props = {};
+
+function TestNotFormWrapper({}: Props) {
+  return (
+    <div
+      onSubmit={(e) => {
+        e.preventDefault();
+        console.log("Div Submit");
+      }}
+    >
+      <form
+        id="not-form"
+        onSubmit={(e) => {
+          e.preventDefault();
+          console.log("Form Submit");
+        }}
+      >
+        <div
+          id="child-form"
+          onSubmit={(e) => {
+            e.preventDefault();
+
+            console.log("Child Form Submit");
+          }}
+        >
+          <Input />
+          <Button htmlType="submit" form="child-form">
+            Child Form Submit
+          </Button>
+        </div>
+        <Input />
+
+        <Button htmlType="submit" form="not-form">
+          Submit
+        </Button>
+      </form>
+    </div>
+  );
+}
+
+export default TestNotFormWrapper;

package/src/test/TestSelect.tsx

@@ -0,0 +1,38 @@
+import { Autocomplete, TextField } from "@mui/material";
+
+type Props = {
+  value?: any;
+  onChange?: (value: any) => void;
+};
+
+function TestSelect({ value = null, onChange }: Props) {
+  return (
+    <Autocomplete
+      value={value}
+      onChange={(_, newValue) => {
+        onChange?.(newValue);
+      }}
+      renderInput={(params) => <TextField {...params} />}
+      options={[
+        {
+          value: "option1",
+          label: "Option 1",
+        },
+        {
+          value: "option2",
+          label: "Option 2",
+        },
+      ]}
+      getOptionKey={(o) => {
+        // console.log("Option get key: ", o);
+        return o?.value;
+      }}
+      getOptionLabel={(o) => {
+        // console.log("Option get label: ", o);
+        return o?.label;
+      }}
+    />
+  );
+}
+
+export default TestSelect;

package/src/test/TestWatchNormalize.tsx

@@ -0,0 +1,32 @@
+import { Input } from "antd";
+import React from "react";
+import Form from "../providers/Form";
+
+type Props = {};
+
+function TestWatchNormalize({}: Props) {
+  const normalizeData = Form.useWatchNormalized({
+    name: "normalizeItem",
+    formNameOrFormInstance: "testNormalize",
+    normalizeFn: (value) => {
+      if (typeof value === "string") {
+        return value.toUpperCase();
+      }
+      return value;
+    },
+  });
+
+  React.useEffect(() => {
+    console.log("Normalized Data: ", normalizeData);
+  }, [normalizeData]);
+  return (
+    <Form formName="testNormalize">
+      Test Watch Normalize
+      <Form.Item name="normalizeItem">
+        <Input />
+      </Form.Item>
+    </Form>
+  );
+}
+
+export default TestWatchNormalize;

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;

package/src/test/testSetValue/TestCase10_SetFieldValues_ComplexNested.tsx

@@ -0,0 +1,203 @@
+import { Box } from "@mui/material";
+import { Button, Input, Typography } from "antd";
+import FormList from "../../components/Form/FormList";
+import Form from "../../providers/Form";
+
+type Props = {};
+
+/**
+ * Test Case 10: setFieldValues với Complex Nested Structure
+ *
+ * Cấu trúc phức tạp:
+ * - config.appName (string)
+ * - config.version (string)
+ * - config.features (array) - deepTrigger
+ * - users (FormList array) - deepTrigger
+ *   - users.0.name (string)
+ *   - users.0.roles (array) - nested array trong FormList
+ *
+ * Test: setFieldValues với structure phức tạp nhiều cấp
+ *
+ * Kỳ vọng:
+ * - Primitives trigger onChange
+ * - Arrays ở mọi level đều gọi handleDeepTriggerSet
+ * - Nested arrays trong FormList được xử lý đúng
+ */
+function TestCase10_SetFieldValues_ComplexNested({}: Props) {
+  const [form] = Form.useForm("testCase10");
+
+  const handleTestSetFieldValues = () => {
+    form?.setFieldValues({
+      config: {
+        appName: "My App",
+        version: "1.0.0",
+        features: ["auth", "api", "ui"],
+      },
+      users: [
+        { name: "John", roles: ["admin", "editor"] },
+        { name: "Jane", roles: ["viewer"] },
+      ],
+    });
+    console.log("✅ Called setFieldValues with complex nested structure");
+  };
+
+  const handleTestUpdateStructure = () => {
+    form?.setFieldValues({
+      config: {
+        appName: "Updated App",
+        version: "2.0.0",
+        features: ["auth", "api"], // removed "ui"
+      },
+      users: [
+        { name: "John", roles: ["admin"] }, // removed editor role + removed Jane user
+      ],
+    });
+    console.log("✅ Updated structure (cleanup nested arrays)");
+  };
+
+  const handleClear = () => {
+    form?.setFieldValues({
+      config: {
+        appName: "",
+        version: "",
+        features: [],
+      },
+      users: [],
+    });
+    console.log("✅ Cleared all fields");
+  };
+
+  return (
+    <Box sx={{ p: 2 }}>
+      <Typography.Title level={4}>
+        Test Case 10: setFieldValues - Complex Nested
+      </Typography.Title>
+      <Typography.Paragraph>
+        Test setFieldValues với structure phức tạp: nested objects + arrays +
+        FormList
+      </Typography.Paragraph>
+
+      <Form formName="testCase10">
+        {/* Config section */}
+        <Box sx={{ border: "2px solid #1890ff", p: 2, mb: 2, borderRadius: 1 }}>
+          <Typography.Text strong style={{ fontSize: 16 }}>
+            Config
+          </Typography.Text>
+
+          <Form.Item name="config.appName" label="App Name">
+            <Input placeholder="Enter app name" />
+          </Form.Item>
+
+          <Form.Item name="config.version" label="Version">
+            <Input placeholder="Enter version" />
+          </Form.Item>
+
+          <Box sx={{ mt: 1 }}>
+            <Typography.Text>Features (Array):</Typography.Text>
+            <Form.Item name="config.features.0">
+              <Input placeholder="Feature 1" />
+            </Form.Item>
+            <Form.Item name="config.features.1">
+              <Input placeholder="Feature 2" />
+            </Form.Item>
+            <Form.Item name="config.features.2">
+              <Input placeholder="Feature 3" />
+            </Form.Item>
+          </Box>
+        </Box>
+
+        {/* Users FormList with nested roles array */}
+        <Box sx={{ border: "2px solid #52c41a", p: 2, mb: 2, borderRadius: 1 }}>
+          <Typography.Text strong style={{ fontSize: 16 }}>
+            Users (FormList)
+          </Typography.Text>
+
+          <FormList name="users">
+            {(fields, { add, remove }) => (
+              <Box>
+                {fields.map((field, index) => (
+                  <Box
+                    key={field.key}
+                    sx={{
+                      border: "1px dashed #52c41a",
+                      p: 1,
+                      mb: 1,
+                      borderRadius: 1,
+                    }}
+                  >
+                    <Typography.Text>User {index + 1}</Typography.Text>
+
+                    <Form.Item name={`users.${index}.name`} label="Name">
+                      <Input placeholder="User name" />
+                    </Form.Item>
+
+                    <Box
+                      sx={{ ml: 2, bgcolor: "#f6ffed", p: 1, borderRadius: 1 }}
+                    >
+                      <Typography.Text>Roles (Nested Array):</Typography.Text>
+                      <Form.Item name={`users.${index}.roles.0`}>
+                        <Input placeholder="Role 1" />
+                      </Form.Item>
+                      <Form.Item name={`users.${index}.roles.1`}>
+                        <Input placeholder="Role 2" />
+                      </Form.Item>
+                    </Box>
+
+                    <Button
+                      danger
+                      size="small"
+                      onClick={() => remove({ key: field.key })}
+                    >
+                      Remove User
+                    </Button>
+                  </Box>
+                ))}
+                <Button type="dashed" onClick={() => add()}>
+                  Add User
+                </Button>
+              </Box>
+            )}
+          </FormList>
+        </Box>
+
+        <Box sx={{ mt: 2, display: "flex", gap: 2, flexDirection: "column" }}>
+          <Button type="primary" onClick={handleTestSetFieldValues}>
+            1. Set Complex Structure
+          </Button>
+          <Button onClick={handleTestUpdateStructure}>
+            2. Update with Cleanup
+          </Button>
+          <Button danger onClick={handleClear}>
+            3. Clear All
+          </Button>
+        </Box>
+
+        <Box
+          sx={{
+            mt: 2,
+            p: 2,
+            bgcolor: "#e6fffb",
+            border: "1px solid #13c2c2",
+            borderRadius: 1,
+          }}
+        >
+          <Typography.Text strong>Expected Behavior:</Typography.Text>
+          <Typography.Paragraph>
+            <strong>setFieldValues logic:</strong>
+            <br />- Traverse object, dừng tại mỗi array
+            <br />- Primitives: trigger onChange
+            <br />- Arrays: gọi handleDeepTriggerSet
+            <br />
+            <br />
+            <strong>Update with Cleanup:</strong>
+            <br />- config.features.2 → undefined (removed)
+            <br />- users.1 → undefined (Jane removed)
+            <br />- users.0.roles.1 → undefined (editor removed)
+          </Typography.Paragraph>
+        </Box>
+      </Form>
+    </Box>
+  );
+}
+
+export default TestCase10_SetFieldValues_ComplexNested;

package/src/test/testSetValue/TestCase1_PlainObjectToPrimitives.tsx

@@ -0,0 +1,72 @@
+import { Box } from "@mui/material";
+import { Button, Input, Typography } from "antd";
+import Form from "../../providers/Form";
+
+type Props = {};
+
+/**
+ * Test Case 1: Plain Object → Primitive Listeners
+ *
+ * Cấu trúc:
+ * - user.name (string)
+ * - user.age (number)
+ *
+ * Test: setFieldValue("user", {name: "John", age: 30}, {deepTrigger: true})
+ * Kỳ vọng:
+ * - Trigger "user" listener (nếu có)
+ * - Trigger "user.name" listener
+ * - Trigger "user.age" listener
+ */
+function TestCase1_PlainObjectToPrimitives({}: Props) {
+  const [form] = Form.useForm("testCase1");
+
+  const handleTestDeepTrigger = () => {
+    form?.setFieldValue(
+      "user",
+      { name: "John Doe", age: 30 },
+      { deepTrigger: true },
+    );
+    console.log("✅ Called setFieldValue with deepTrigger=true");
+  };
+
+  const handleTestNormalSet = () => {
+    form?.setFieldValue("user", { name: "Jane Doe", age: 25 });
+    console.log("✅ Called setFieldValue without deepTrigger");
+  };
+
+  return (
+    <Box sx={{ p: 2 }}>
+      <Typography.Title level={4}>
+        Test Case 1: Plain Object → Primitive Listeners
+      </Typography.Title>
+      <Typography.Paragraph>
+        Test setFieldValue("user", {"{name, age}"}) với deepTrigger=true
+      </Typography.Paragraph>
+
+      <Form formName="testCase1">
+        {/* User object listener - should be triggered */}
+        <Form.Item name="user">
+          <Input placeholder="User Object (JSON)" disabled />
+        </Form.Item>
+
+        {/* Nested primitive listeners */}
+        <Form.Item name="user.name" label="Name">
+          <Input placeholder="Enter name" />
+        </Form.Item>
+
+        <Form.Item name="user.age" label="Age">
+          <Input type="number" placeholder="Enter age" />
+        </Form.Item>
+
+        <Box sx={{ mt: 2, display: "flex", gap: 2 }}>
+          <Button type="primary" onClick={handleTestDeepTrigger}>
+            Test Deep Trigger
+          </Button>
+          <Button onClick={handleTestNormalSet}>Test Normal Set</Button>
+        </Box>
+      </Form>
+    </Box>
+  );
+}
+
+export default TestCase1_PlainObjectToPrimitives;