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

package/src/test/testSetValue/TestCase2_PlainObjectToFormList.tsx

@@ -0,0 +1,114 @@
+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 2: Plain Object → Array Listener (FormList) → Primitives
+ *
+ * Cấu trúc:
+ * - user.name (string)
+ * - user.items (array - FormList)
+ *   - user.items.0.id (number)
+ *   - user.items.0.title (string)
+ *
+ * Test: setFieldValue("user", {name: "John", items: [{id: 1, title: "Item 1"}]}, {deepTrigger: true})
+ * Kỳ vọng:
+ * - Trigger "user" listener
+ * - Trigger "user.name" listener
+ * - Trigger "user.items" onArrayChange
+ * - Trigger "user.items.0" listener
+ * - Trigger "user.items.0.id" listener
+ * - Trigger "user.items.0.title" listener
+ */
+function TestCase2_PlainObjectToFormList({}: Props) {
+  const [form] = Form.useForm("testCase2");
+
+  const handleTestDeepTrigger = () => {
+    form?.setFieldValue(
+      "user",
+      {
+        name: "John Doe",
+        items: [
+          { id: 1, title: "Item 1" },
+          { id: 2, title: "Item 2" },
+        ],
+      },
+      { deepTrigger: true },
+    );
+    console.log("✅ Called setFieldValue with deepTrigger=true");
+  };
+
+  const handleTestNormalSet = () => {
+    form?.setFieldValue("user", {
+      name: "Jane Doe",
+      items: [{ id: 3, title: "Item 3" }],
+    });
+    console.log("✅ Called setFieldValue without deepTrigger");
+  };
+
+  return (
+    <Box sx={{ p: 2 }}>
+      <Typography.Title level={4}>
+        Test Case 2: Plain Object → FormList → Primitives
+      </Typography.Title>
+      <Typography.Paragraph>
+        Test setFieldValue("user", {"{name, items: [...]}"}) với nested FormList
+      </Typography.Paragraph>
+
+      <Form formName="testCase2">
+        {/* User name */}
+        <Form.Item name="user.name" label="User Name">
+          <Input placeholder="Enter user name" />
+        </Form.Item>
+
+        {/* Items FormList */}
+        <FormList name="user.items">
+          {(fields, { add, remove }) => (
+            <Box>
+              {fields.map((field, index) => (
+                <Box
+                  key={field.key}
+                  sx={{
+                    border: "1px solid #d9d9d9",
+                    p: 2,
+                    mb: 2,
+                    borderRadius: 1,
+                  }}
+                >
+                  <Typography.Text strong>Item {index + 1}</Typography.Text>
+
+                  <Form.Item name={`user.items.${index}.id`} label="ID">
+                    <Input placeholder="Item ID" />
+                  </Form.Item>
+
+                  <Form.Item name={`user.items.${index}.title`} label="Title">
+                    <Input placeholder="Item title" />
+                  </Form.Item>
+
+                  <Button danger onClick={() => remove({ key: field.key })}>
+                    Remove
+                  </Button>
+                </Box>
+              ))}
+              <Button type="dashed" onClick={() => add()}>
+                Add Item
+              </Button>
+            </Box>
+          )}
+        </FormList>
+
+        <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 TestCase2_PlainObjectToFormList;

package/src/test/testSetValue/TestCase3_ArrayNonListenerToPrimitives.tsx

@@ -0,0 +1,99 @@
+import { Box } from "@mui/material";
+import { Button, Input, Typography } from "antd";
+import Form from "../../providers/Form";
+
+type Props = {};
+
+/**
+ * Test Case 3: Array Non-Listener → Primitives
+ *
+ * Cấu trúc:
+ * - data (array - KHÔNG phải FormList, chỉ là field bình thường)
+ *   - data.0.name (string)
+ *   - data.0.value (number)
+ *
+ * Test: setFieldValue("data", [{name: "A", value: 1}, {name: "B", value: 2}], {deepTrigger: true})
+ * Kỳ vọng:
+ * - Set data array vào store
+ * - Trigger "data.0" listener (nếu có)
+ * - Trigger "data.0.name" listener
+ * - Trigger "data.0.value" listener
+ * - Trigger "data.1" listener (nếu có)
+ * - Trigger "data.1.name" listener
+ * - Trigger "data.1.value" listener
+ */
+function TestCase3_ArrayNonListenerToPrimitives({}: Props) {
+  const [form] = Form.useForm("testCase3");
+
+  const handleTestDeepTrigger = () => {
+    form?.setFieldValue(
+      "data",
+      [
+        { name: "Item A", value: 100 },
+        { name: "Item B", value: 200 },
+      ],
+      { deepTrigger: true },
+    );
+    console.log("✅ Called setFieldValue with deepTrigger=true");
+  };
+
+  const handleTestRemoveItems = () => {
+    // Test cleanup: remove last item
+    form?.setFieldValue("data", [{ name: "Item A", value: 100 }], {
+      deepTrigger: true,
+    });
+    console.log("✅ Called setFieldValue with fewer items (cleanup test)");
+  };
+
+  const handleTestNormalSet = () => {
+    form?.setFieldValue("data", [{ name: "Item C", value: 300 }]);
+    console.log("✅ Called setFieldValue without deepTrigger");
+  };
+
+  return (
+    <Box sx={{ p: 2 }}>
+      <Typography.Title level={4}>
+        Test Case 3: Array Non-Listener → Primitives
+      </Typography.Title>
+      <Typography.Paragraph>
+        Test setFieldValue("data", {"[{name, value}, ...]"}) với array không
+        phải FormList
+      </Typography.Paragraph>
+
+      <Form formName="testCase3">
+        {/* Array items - manually defined (not FormList) */}
+        <Box sx={{ border: "1px solid #d9d9d9", p: 2, mb: 2, borderRadius: 1 }}>
+          <Typography.Text strong>Item 0</Typography.Text>
+          <Form.Item name="data.0.name" label="Name">
+            <Input placeholder="Item 0 name" />
+          </Form.Item>
+          <Form.Item name="data.0.value" label="Value">
+            <Input type="number" placeholder="Item 0 value" />
+          </Form.Item>
+        </Box>
+
+        <Box sx={{ border: "1px solid #d9d9d9", p: 2, mb: 2, borderRadius: 1 }}>
+          <Typography.Text strong>Item 1</Typography.Text>
+          <Form.Item name="data.1.name" label="Name">
+            <Input placeholder="Item 1 name" />
+          </Form.Item>
+          <Form.Item name="data.1.value" label="Value">
+            <Input type="number" placeholder="Item 1 value" />
+          </Form.Item>
+        </Box>
+
+        <Box sx={{ mt: 2, display: "flex", gap: 2 }}>
+          <Button type="primary" onClick={handleTestDeepTrigger}>
+            Test Deep Trigger (2 items)
+          </Button>
+          <Button onClick={handleTestRemoveItems}>
+            Test Remove Items (1 item)
+          </Button>
+          <Button onClick={handleTestNormalSet}>Test Normal Set</Button>
+        </Box>
+      </Form>
+    </Box>
+  );
+}
+
+export default TestCase3_ArrayNonListenerToPrimitives;

package/src/test/testSetValue/TestCase4_PlainObjectRemovedFields.tsx

@@ -0,0 +1,112 @@
+import { Box } from "@mui/material";
+import { Button, Input, Typography } from "antd";
+import Form from "../../providers/Form";
+
+type Props = {};
+
+/**
+ * Test Case 4: Plain Object with Removed Fields (Edge Case)
+ *
+ * Cấu trúc ban đầu:
+ * - profile.name (string)
+ * - profile.city (string)
+ * - profile.country (string)
+ *
+ * Test:
+ * 1. Set initial: {name: "John", city: "NY", country: "USA"}
+ * 2. Set removed: {name: "John"} (city và country bị xóa)
+ *
+ * Kỳ vọng:
+ * - Trigger "profile.name" với "John"
+ * - Trigger "profile.city" với undefined (cleanup)
+ * - Trigger "profile.country" với undefined (cleanup)
+ */
+function TestCase4_PlainObjectRemovedFields({}: Props) {
+  const [form] = Form.useForm("testCase4");
+
+  const handleSetInitial = () => {
+    form?.setFieldValue(
+      "profile",
+      {
+        name: "John Doe",
+        city: "New York",
+        country: "USA",
+      },
+      { deepTrigger: true },
+    );
+    console.log("✅ Set initial profile with all fields");
+  };
+
+  const handleRemoveFields = () => {
+    form?.setFieldValue(
+      "profile",
+      {
+        name: "John Doe",
+        // city and country removed!
+      },
+      { deepTrigger: true },
+    );
+    console.log(
+      "✅ Set profile with removed fields (city, country should trigger undefined)",
+    );
+  };
+
+  const handleRestoreFields = () => {
+    form?.setFieldValue(
+      "profile",
+      {
+        name: "Jane Doe",
+        city: "Los Angeles",
+        country: "USA",
+      },
+      { deepTrigger: true },
+    );
+    console.log("✅ Restored all fields");
+  };
+
+  return (
+    <Box sx={{ p: 2 }}>
+      <Typography.Title level={4}>
+        Test Case 4: Plain Object - Removed Fields
+      </Typography.Title>
+      <Typography.Paragraph>
+        Test edge case: khi object fields bị xóa, listener phải được trigger với
+        undefined
+      </Typography.Paragraph>
+
+      <Form formName="testCase4">
+        <Form.Item name="profile.name" label="Name">
+          <Input placeholder="Enter name" />
+        </Form.Item>
+
+        <Form.Item name="profile.city" label="City">
+          <Input placeholder="Enter city" />
+        </Form.Item>
+
+        <Form.Item name="profile.country" label="Country">
+          <Input placeholder="Enter country" />
+        </Form.Item>
+
+        <Box sx={{ mt: 2, display: "flex", gap: 2, flexDirection: "column" }}>
+          <Button type="primary" onClick={handleSetInitial}>
+            1. Set Initial (All Fields)
+          </Button>
+          <Button danger onClick={handleRemoveFields}>
+            2. Remove Fields (city, country)
+          </Button>
+          <Button onClick={handleRestoreFields}>3. Restore Fields</Button>
+        </Box>
+
+        <Box sx={{ mt: 2, p: 2, bgcolor: "#f0f0f0", borderRadius: 1 }}>
+          <Typography.Text strong>Expected Behavior:</Typography.Text>
+          <Typography.Paragraph>
+            Khi click "Remove Fields", city và country listeners phải nhận
+            undefined
+          </Typography.Paragraph>
+        </Box>
+      </Form>
+    </Box>
+  );
+}
+
+export default TestCase4_PlainObjectRemovedFields;

package/src/test/testSetValue/TestCase5_FormListRemovedItems.tsx

@@ -0,0 +1,119 @@
+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 5: Array Listener (FormList) with Removed Items
+ *
+ * Cấu trúc:
+ * - items (FormList)
+ *   - items.0.name (string)
+ *   - items.1.name (string)
+ *   - items.2.name (string)
+ *
+ * Test:
+ * 1. Set initial: [{name: "A"}, {name: "B"}, {name: "C"}]
+ * 2. Set removed: [{name: "A"}] (items 1 và 2 bị xóa)
+ *
+ * Kỳ vọng:
+ * - onArrayChange được gọi với array mới
+ * - Trigger "items.0.name" với "A"
+ * - Trigger "items.1" với undefined (cleanup)
+ * - Trigger "items.2" với undefined (cleanup)
+ */
+function TestCase5_FormListRemovedItems({}: Props) {
+  const [form] = Form.useForm("testCase5");
+
+  const handleSetInitial = () => {
+    form?.setFieldValue(
+      "items",
+      [{ name: "Item A" }, { name: "Item B" }, { name: "Item C" }],
+      { deepTrigger: true },
+    );
+    console.log("✅ Set initial FormList with 3 items");
+  };
+
+  const handleRemoveItems = () => {
+    form?.setFieldValue("items", [{ name: "Item A" }], { deepTrigger: true });
+    console.log(
+      "✅ Set FormList with 1 item (2 items removed, should trigger undefined)",
+    );
+  };
+
+  const handleRestoreItems = () => {
+    form?.setFieldValue("items", [{ name: "Item A" }, { name: "Item B" }], {
+      deepTrigger: true,
+    });
+    console.log("✅ Restored FormList with 2 items");
+  };
+
+  return (
+    <Box sx={{ p: 2 }}>
+      <Typography.Title level={4}>
+        Test Case 5: FormList - Removed Items
+      </Typography.Title>
+      <Typography.Paragraph>
+        Test edge case: khi FormList items bị xóa, listeners phải được trigger
+        với undefined
+      </Typography.Paragraph>
+
+      <Form formName="testCase5">
+        <FormList name="items">
+          {(fields, { add, remove }) => (
+            <Box>
+              {fields.map((field, index) => (
+                <Box
+                  key={field.key}
+                  sx={{
+                    border: "1px solid #d9d9d9",
+                    p: 2,
+                    mb: 2,
+                    borderRadius: 1,
+                  }}
+                >
+                  <Typography.Text strong>Item {index + 1}</Typography.Text>
+
+                  <Form.Item name={`items.${index}.name`} label="Name">
+                    <Input placeholder={`Item ${index + 1} name`} />
+                  </Form.Item>
+
+                  <Button danger onClick={() => remove({ key: field.key })}>
+                    Remove
+                  </Button>
+                </Box>
+              ))}
+              <Button type="dashed" onClick={() => add()}>
+                Add Item
+              </Button>
+            </Box>
+          )}
+        </FormList>
+
+        <Box sx={{ mt: 2, display: "flex", gap: 2, flexDirection: "column" }}>
+          <Button type="primary" onClick={handleSetInitial}>
+            1. Set Initial (3 Items)
+          </Button>
+          <Button danger onClick={handleRemoveItems}>
+            2. Remove Items (Keep 1)
+          </Button>
+          <Button onClick={handleRestoreItems}>
+            3. Restore Items (2 Items)
+          </Button>
+        </Box>
+
+        <Box sx={{ mt: 2, p: 2, bgcolor: "#f0f0f0", borderRadius: 1 }}>
+          <Typography.Text strong>Expected Behavior:</Typography.Text>
+          <Typography.Paragraph>
+            Khi click "Remove Items", items.1 và items.2 listeners phải nhận
+            undefined
+          </Typography.Paragraph>
+        </Box>
+      </Form>
+    </Box>
+  );
+}
+
+export default TestCase5_FormListRemovedItems;

package/src/test/testSetValue/TestCase6_NestedFormListRemoved.tsx

@@ -0,0 +1,185 @@
+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 6: Array Non-Listener → Nested FormList Removed (Complex Edge Case)
+ *
+ * Cấu trúc:
+ * - data (array - NON-LISTENER)
+ *   - data.0.name (string)
+ *   - data.0.tags (FormList)
+ *     - data.0.tags.0 (string)
+ *     - data.0.tags.1 (string)
+ *   - data.1.name (string)
+ *   - data.1.tags (FormList)
+ *
+ * Test:
+ * 1. Set initial: [
+ *      {name: "A", tags: ["tag1", "tag2"]},
+ *      {name: "B", tags: ["tag3"]}
+ *    ]
+ * 2. Set removed: [{name: "A", tags: ["tag1"]}] (data.1 bị xóa hoàn toàn)
+ *
+ * Kỳ vọng:
+ * - Trigger "data.0.tags" onArrayChange
+ * - Trigger "data.1" với undefined
+ * - Trigger "data.1.tags" với undefined (nested FormList cleanup!)
+ * - Trigger "data.1.tags.0" với undefined
+ */
+function TestCase6_NestedFormListRemoved({}: Props) {
+  const [form] = Form.useForm("testCase6");
+
+  const handleSetInitial = () => {
+    form?.setFieldValue(
+      "data",
+      [
+        { name: "Group A", tags: ["tag1", "tag2"] },
+        { name: "Group B", tags: ["tag3", "tag4"] },
+      ],
+      { deepTrigger: true },
+    );
+    console.log("✅ Set initial nested structure with 2 groups");
+  };
+
+  const handleRemoveNestedArray = () => {
+    form?.setFieldValue("data", [{ name: "Group A", tags: ["tag1"] }], {
+      deepTrigger: true,
+    });
+    console.log(
+      "✅ Removed data.1 (including nested FormList - should trigger undefined recursively)",
+    );
+  };
+
+  const handleRestoreNested = () => {
+    form?.setFieldValue(
+      "data",
+      [
+        { name: "Group A", tags: ["tag1", "tag2"] },
+        { name: "Group B", tags: ["tag3"] },
+      ],
+      { deepTrigger: true },
+    );
+    console.log("✅ Restored nested structure");
+  };
+
+  return (
+    <Box sx={{ p: 2 }}>
+      <Typography.Title level={4}>
+        Test Case 6: Nested FormList - Removed Items
+      </Typography.Title>
+      <Typography.Paragraph>
+        Test complex edge case: array non-listener với nested FormList bị xóa
+      </Typography.Paragraph>
+
+      <Form formName="testCase6">
+        {/* Group 0 */}
+        <Box sx={{ border: "2px solid #1890ff", p: 2, mb: 2, borderRadius: 1 }}>
+          <Typography.Text strong style={{ fontSize: 16 }}>
+            Group 0
+          </Typography.Text>
+
+          <Form.Item name="data.0.name" label="Group Name">
+            <Input placeholder="Group 0 name" />
+          </Form.Item>
+
+          <Typography.Text>Tags (FormList):</Typography.Text>
+          <FormList name="data.0.tags">
+            {(fields, { add, remove }) => (
+              <Box>
+                {fields.map((field, index) => (
+                  <Box key={field.key} sx={{ display: "flex", gap: 1, mb: 1 }}>
+                    <Form.Item name={`data.0.tags.${index}`}>
+                      <Input placeholder={`Tag ${index + 1}`} />
+                    </Form.Item>
+                    <Button
+                      danger
+                      size="small"
+                      onClick={() => remove({ key: field.key })}
+                    >
+                      Remove
+                    </Button>
+                  </Box>
+                ))}
+                <Button type="dashed" size="small" onClick={() => add()}>
+                  Add Tag
+                </Button>
+              </Box>
+            )}
+          </FormList>
+        </Box>
+
+        {/* Group 1 */}
+        <Box sx={{ border: "2px solid #52c41a", p: 2, mb: 2, borderRadius: 1 }}>
+          <Typography.Text strong style={{ fontSize: 16 }}>
+            Group 1
+          </Typography.Text>
+
+          <Form.Item name="data.1.name" label="Group Name">
+            <Input placeholder="Group 1 name" />
+          </Form.Item>
+
+          <Typography.Text>Tags (FormList):</Typography.Text>
+          <FormList name="data.1.tags">
+            {(fields, { add, remove }) => (
+              <Box>
+                {fields.map((field, index) => (
+                  <Box key={field.key} sx={{ display: "flex", gap: 1, mb: 1 }}>
+                    <Form.Item name={`data.1.tags.${index}`}>
+                      <Input placeholder={`Tag ${index + 1}`} />
+                    </Form.Item>
+                    <Button
+                      danger
+                      size="small"
+                      onClick={() => remove({ key: field.key })}
+                    >
+                      Remove
+                    </Button>
+                  </Box>
+                ))}
+                <Button type="dashed" size="small" onClick={() => add()}>
+                  Add Tag
+                </Button>
+              </Box>
+            )}
+          </FormList>
+        </Box>
+
+        <Box sx={{ mt: 2, display: "flex", gap: 2, flexDirection: "column" }}>
+          <Button type="primary" onClick={handleSetInitial}>
+            1. Set Initial (2 Groups with Tags)
+          </Button>
+          <Button danger onClick={handleRemoveNestedArray}>
+            2. Remove Group 1 (Nested FormList)
+          </Button>
+          <Button onClick={handleRestoreNested}>
+            3. Restore Nested Structure
+          </Button>
+        </Box>
+
+        <Box
+          sx={{
+            mt: 2,
+            p: 2,
+            bgcolor: "#fff7e6",
+            border: "1px solid #ffa940",
+            borderRadius: 1,
+          }}
+        >
+          <Typography.Text strong>Expected Behavior:</Typography.Text>
+          <Typography.Paragraph>
+            Khi click "Remove Group 1":
+            <br />- data.1 → undefined
+            <br />- data.1.tags (FormList) → undefined
+            <br />- data.1.tags.0, data.1.tags.1, ... → undefined
+          </Typography.Paragraph>
+        </Box>
+      </Form>
+    </Box>
+  );
+}
+
+export default TestCase6_NestedFormListRemoved;