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

package/src/test/testSetValue/TestCase7_SetFieldValues_MixedStructure.tsx

@@ -0,0 +1,110 @@
+import { Box } from "@mui/material";
+import { Button, Input, Typography } from "antd";
+import Form from "../../providers/Form";
+
+type Props = {};
+
+/**
+ * Test Case 7: setFieldValues với Mixed Structure
+ *
+ * Cấu trúc:
+ * - name (string) - primitive
+ * - age (number) - primitive
+ * - tags (array) - sẽ trigger deepTrigger
+ *
+ * Test: setFieldValues({name: "John", age: 30, tags: ["tag1", "tag2"]})
+ * Kỳ vọng:
+ * - "name" listener.onChange("John")
+ * - "age" listener.onChange(30)
+ * - "tags" → handleDeepTriggerSet(["tag1", "tag2"])
+ */
+function TestCase7_SetFieldValues_MixedStructure({}: Props) {
+  const [form] = Form.useForm("testCase7");
+
+  const handleTestSetFieldValues = () => {
+    form?.setFieldValues({
+      name: "John Doe",
+      age: 30,
+      tags: ["javascript", "typescript", "react"],
+    });
+    console.log("✅ Called setFieldValues with mixed structure");
+  };
+
+  const handleTestWithOptions = () => {
+    form?.setFieldValues(
+      {
+        name: "Jane Doe",
+        age: 25,
+        tags: ["vue", "angular"],
+      },
+      { notTriggerDirty: true },
+    );
+    console.log("✅ Called setFieldValues with notTriggerDirty option");
+  };
+
+  const handleClear = () => {
+    form?.setFieldValues({
+      name: "",
+      age: undefined,
+      tags: [],
+    });
+    console.log("✅ Cleared all fields");
+  };
+
+  return (
+    <Box sx={{ p: 2 }}>
+      <Typography.Title level={4}>
+        Test Case 7: setFieldValues - Mixed Structure
+      </Typography.Title>
+      <Typography.Paragraph>
+        Test setFieldValues với primitives + array (array sẽ dùng deepTrigger)
+      </Typography.Paragraph>
+
+      <Form formName="testCase7">
+        {/* Primitive fields */}
+        <Form.Item name="name" label="Name">
+          <Input placeholder="Enter name" />
+        </Form.Item>
+
+        <Form.Item name="age" label="Age">
+          <Input type="number" placeholder="Enter age" />
+        </Form.Item>
+
+        {/* Array field - will use deepTrigger */}
+        <Box sx={{ border: "1px solid #d9d9d9", p: 2, mb: 2, borderRadius: 1 }}>
+          <Typography.Text strong>Tags (Array - Deep Trigger)</Typography.Text>
+          <Form.Item name="tags.0">
+            <Input placeholder="Tag 1" />
+          </Form.Item>
+          <Form.Item name="tags.1">
+            <Input placeholder="Tag 2" />
+          </Form.Item>
+          <Form.Item name="tags.2">
+            <Input placeholder="Tag 3" />
+          </Form.Item>
+        </Box>
+
+        <Box sx={{ mt: 2, display: "flex", gap: 2 }}>
+          <Button type="primary" onClick={handleTestSetFieldValues}>
+            Test setFieldValues
+          </Button>
+          <Button onClick={handleTestWithOptions}>Test with Options</Button>
+          <Button danger onClick={handleClear}>
+            Clear All
+          </Button>
+        </Box>
+
+        <Box sx={{ mt: 2, p: 2, bgcolor: "#f0f0f0", borderRadius: 1 }}>
+          <Typography.Text strong>Expected Behavior:</Typography.Text>
+          <Typography.Paragraph>
+            - name, age: trigger onChange trực tiếp
+            <br />- tags: gọi handleDeepTriggerSet (đệ quy trigger tất cả tags
+            items)
+          </Typography.Paragraph>
+        </Box>
+      </Form>
+    </Box>
+  );
+}
+
+export default TestCase7_SetFieldValues_MixedStructure;

package/src/test/testSetValue/TestCase8_SetFieldValues_NestedObject.tsx

@@ -0,0 +1,162 @@
+import { Box } from "@mui/material";
+import { Button, Input, Typography } from "antd";
+import Form from "../../providers/Form";
+
+type Props = {};
+
+/**
+ * Test Case 8: setFieldValues với Nested Object + Array
+ *
+ * Cấu trúc:
+ * - user.name (string)
+ * - user.email (string)
+ * - user.preferences.theme (string)
+ * - user.preferences.language (string)
+ * - user.hobbies (array) - sẽ trigger deepTrigger
+ *
+ * Test: setFieldValues({
+ *   user: {
+ *     name: "John",
+ *     email: "john@example.com",
+ *     preferences: { theme: "dark", language: "en" },
+ *     hobbies: ["reading", "coding"]
+ *   }
+ * })
+ *
+ * Kỳ vọng:
+ * - getAllPathsStopAtArray sẽ dừng tại array "user.hobbies"
+ * - Tất cả primitive paths được trigger onChange
+ * - "user.hobbies" được gọi handleDeepTriggerSet
+ */
+function TestCase8_SetFieldValues_NestedObject({}: Props) {
+  const [form] = Form.useForm("testCase8");
+
+  const handleTestSetFieldValues = () => {
+    form?.setFieldValues({
+      user: {
+        name: "John Doe",
+        email: "john@example.com",
+        preferences: {
+          theme: "dark",
+          language: "en",
+        },
+        hobbies: ["reading", "coding", "gaming"],
+      },
+    });
+    console.log("✅ Called setFieldValues with nested structure");
+  };
+
+  const handleTestPartialUpdate = () => {
+    form?.setFieldValues({
+      user: {
+        name: "Jane Doe",
+        email: "jane@example.com",
+        preferences: {
+          theme: "light",
+          language: "vi",
+        },
+        hobbies: ["painting"],
+      },
+    });
+    console.log("✅ Partial update with fewer hobbies");
+  };
+
+  const handleClear = () => {
+    form?.setFieldValues({
+      user: {
+        name: "",
+        email: "",
+        preferences: {
+          theme: "",
+          language: "",
+        },
+        hobbies: [],
+      },
+    });
+    console.log("✅ Cleared all fields");
+  };
+
+  return (
+    <Box sx={{ p: 2 }}>
+      <Typography.Title level={4}>
+        Test Case 8: setFieldValues - Nested Object + Array
+      </Typography.Title>
+      <Typography.Paragraph>
+        Test setFieldValues với deep nested object và array
+      </Typography.Paragraph>
+
+      <Form formName="testCase8">
+        {/* User basic info */}
+        <Box sx={{ border: "1px solid #1890ff", p: 2, mb: 2, borderRadius: 1 }}>
+          <Typography.Text strong>User Info</Typography.Text>
+          <Form.Item name="user.name" label="Name">
+            <Input placeholder="Enter name" />
+          </Form.Item>
+          <Form.Item name="user.email" label="Email">
+            <Input placeholder="Enter email" />
+          </Form.Item>
+        </Box>
+
+        {/* User preferences */}
+        <Box sx={{ border: "1px solid #52c41a", p: 2, mb: 2, borderRadius: 1 }}>
+          <Typography.Text strong>Preferences</Typography.Text>
+          <Form.Item name="user.preferences.theme" label="Theme">
+            <Input placeholder="Enter theme" />
+          </Form.Item>
+          <Form.Item name="user.preferences.language" label="Language">
+            <Input placeholder="Enter language" />
+          </Form.Item>
+        </Box>
+
+        {/* User hobbies (array - will use deepTrigger) */}
+        <Box sx={{ border: "1px solid #faad14", p: 2, mb: 2, borderRadius: 1 }}>
+          <Typography.Text strong>
+            Hobbies (Array - Deep Trigger)
+          </Typography.Text>
+          <Form.Item name="user.hobbies.0">
+            <Input placeholder="Hobby 1" />
+          </Form.Item>
+          <Form.Item name="user.hobbies.1">
+            <Input placeholder="Hobby 2" />
+          </Form.Item>
+          <Form.Item name="user.hobbies.2">
+            <Input placeholder="Hobby 3" />
+          </Form.Item>
+        </Box>
+
+        <Box sx={{ mt: 2, display: "flex", gap: 2, flexDirection: "column" }}>
+          <Button type="primary" onClick={handleTestSetFieldValues}>
+            1. Set Full Structure (3 hobbies)
+          </Button>
+          <Button onClick={handleTestPartialUpdate}>
+            2. Partial Update (1 hobby - cleanup test)
+          </Button>
+          <Button danger onClick={handleClear}>
+            3. Clear All
+          </Button>
+        </Box>
+
+        <Box
+          sx={{
+            mt: 2,
+            p: 2,
+            bgcolor: "#e6f7ff",
+            border: "1px solid #1890ff",
+            borderRadius: 1,
+          }}
+        >
+          <Typography.Text strong>Expected Behavior:</Typography.Text>
+          <Typography.Paragraph>
+            - Primitives (name, email, theme, language): trigger onChange
+            <br />
+            - user.hobbies: gọi handleDeepTriggerSet
+            <br />- Khi update với 1 hobby, hobbies.1 và hobbies.2 nhận
+            undefined
+          </Typography.Paragraph>
+        </Box>
+      </Form>
+    </Box>
+  );
+}
+
+export default TestCase8_SetFieldValues_NestedObject;

package/src/test/testSetValue/TestCase9_SetFieldValues_MultipleArrays.tsx

@@ -0,0 +1,169 @@
+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 9: setFieldValues với Multiple Arrays
+ *
+ * Cấu trúc:
+ * - title (string)
+ * - tags (array) - deepTrigger
+ * - items (FormList array) - deepTrigger
+ * - categories (array) - deepTrigger
+ *
+ * Test: setFieldValues({
+ *   title: "My Post",
+ *   tags: ["js", "react"],
+ *   items: [{name: "Item 1"}],
+ *   categories: ["tech", "web"]
+ * })
+ *
+ * Kỳ vọng:
+ * - "title" trigger onChange
+ * - "tags" gọi handleDeepTriggerSet
+ * - "items" gọi handleDeepTriggerSet (FormList)
+ * - "categories" gọi handleDeepTriggerSet
+ */
+function TestCase9_SetFieldValues_MultipleArrays({}: Props) {
+  const [form] = Form.useForm("testCase9");
+
+  const handleTestSetFieldValues = () => {
+    form?.setFieldValues({
+      title: "My Blog Post",
+      tags: ["javascript", "react"],
+      items: [
+        { name: "Item 1", value: 100 },
+        { name: "Item 2", value: 200 },
+      ],
+      categories: ["technology", "web development"],
+    });
+    console.log("✅ Called setFieldValues with multiple arrays");
+  };
+
+  const handleTestReduceArrays = () => {
+    form?.setFieldValues({
+      title: "Updated Post",
+      tags: ["vue"],
+      items: [{ name: "Item 1", value: 150 }],
+      categories: ["tech"],
+    });
+    console.log("✅ Reduced arrays (cleanup test)");
+  };
+
+  const handleClear = () => {
+    form?.setFieldValues({
+      title: "",
+      tags: [],
+      items: [],
+      categories: [],
+    });
+    console.log("✅ Cleared all fields");
+  };
+
+  return (
+    <Box sx={{ p: 2 }}>
+      <Typography.Title level={4}>
+        Test Case 9: setFieldValues - Multiple Arrays
+      </Typography.Title>
+      <Typography.Paragraph>
+        Test setFieldValues với nhiều arrays khác nhau (FormList và
+        non-FormList)
+      </Typography.Paragraph>
+
+      <Form formName="testCase9">
+        {/* Title - primitive */}
+        <Form.Item name="title" label="Title">
+          <Input placeholder="Enter title" />
+        </Form.Item>
+
+        {/* Tags - simple array */}
+        <Box sx={{ border: "1px solid #1890ff", p: 2, mb: 2, borderRadius: 1 }}>
+          <Typography.Text strong>Tags (Simple Array)</Typography.Text>
+          <Form.Item name="tags.0">
+            <Input placeholder="Tag 1" />
+          </Form.Item>
+          <Form.Item name="tags.1">
+            <Input placeholder="Tag 2" />
+          </Form.Item>
+        </Box>
+
+        {/* Items - FormList */}
+        <Box sx={{ border: "1px solid #52c41a", p: 2, mb: 2, borderRadius: 1 }}>
+          <Typography.Text strong>Items (FormList)</Typography.Text>
+          <FormList name="items">
+            {(fields, { add, remove }) => (
+              <Box>
+                {fields.map((field, index) => (
+                  <Box key={field.key} sx={{ display: "flex", gap: 1, mb: 1 }}>
+                    <Form.Item name={`items.${index}.name`}>
+                      <Input placeholder="Name" />
+                    </Form.Item>
+                    <Form.Item name={`items.${index}.value`}>
+                      <Input type="number" placeholder="Value" />
+                    </Form.Item>
+                    <Button
+                      danger
+                      size="small"
+                      onClick={() => remove({ key: field.key })}
+                    >
+                      Remove
+                    </Button>
+                  </Box>
+                ))}
+                <Button type="dashed" size="small" onClick={() => add()}>
+                  Add Item
+                </Button>
+              </Box>
+            )}
+          </FormList>
+        </Box>
+
+        {/* Categories - simple array */}
+        <Box sx={{ border: "1px solid #faad14", p: 2, mb: 2, borderRadius: 1 }}>
+          <Typography.Text strong>Categories (Simple Array)</Typography.Text>
+          <Form.Item name="categories.0">
+            <Input placeholder="Category 1" />
+          </Form.Item>
+          <Form.Item name="categories.1">
+            <Input placeholder="Category 2" />
+          </Form.Item>
+        </Box>
+
+        <Box sx={{ mt: 2, display: "flex", gap: 2, flexDirection: "column" }}>
+          <Button type="primary" onClick={handleTestSetFieldValues}>
+            1. Set All Arrays (2 items each)
+          </Button>
+          <Button onClick={handleTestReduceArrays}>
+            2. Reduce Arrays (1 item each)
+          </Button>
+          <Button danger onClick={handleClear}>
+            3. Clear All
+          </Button>
+        </Box>
+
+        <Box
+          sx={{
+            mt: 2,
+            p: 2,
+            bgcolor: "#fffbe6",
+            border: "1px solid #faad14",
+            borderRadius: 1,
+          }}
+        >
+          <Typography.Text strong>Expected Behavior:</Typography.Text>
+          <Typography.Paragraph>
+            - title: trigger onChange
+            <br />
+            - tags, items, categories: tất cả gọi handleDeepTriggerSet
+            <br />- Khi reduce arrays: items bị xóa nhận undefined (cleanup)
+          </Typography.Paragraph>
+        </Box>
+      </Form>
+    </Box>
+  );
+}
+
+export default TestCase9_SetFieldValues_MultipleArrays;

package/src/test/testSetValue/index.tsx

@@ -0,0 +1,100 @@
+import { Box, Tab, Tabs } from "@mui/material";
+import React, { useState } from "react";
+import TestCase10_SetFieldValues_ComplexNested from "./TestCase10_SetFieldValues_ComplexNested";
+import TestCase1_PlainObjectToPrimitives from "./TestCase1_PlainObjectToPrimitives";
+import TestCase2_PlainObjectToFormList from "./TestCase2_PlainObjectToFormList";
+import TestCase3_ArrayNonListenerToPrimitives from "./TestCase3_ArrayNonListenerToPrimitives";
+import TestCase4_PlainObjectRemovedFields from "./TestCase4_PlainObjectRemovedFields";
+import TestCase5_FormListRemovedItems from "./TestCase5_FormListRemovedItems";
+import TestCase6_NestedFormListRemoved from "./TestCase6_NestedFormListRemoved";
+import TestCase7_SetFieldValues_MixedStructure from "./TestCase7_SetFieldValues_MixedStructure";
+import TestCase8_SetFieldValues_NestedObject from "./TestCase8_SetFieldValues_NestedObject";
+import TestCase9_SetFieldValues_MultipleArrays from "./TestCase9_SetFieldValues_MultipleArrays";
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`test-tabpanel-${index}`}
+      aria-labelledby={`test-tab-${index}`}
+      {...other}
+    >
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+    </div>
+  );
+}
+
+function TestSetValueIndex() {
+  const [value, setValue] = useState(0);
+
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
+
+  return (
+    <Box sx={{ width: "100%" }}>
+      <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+        <Tabs
+          value={value}
+          onChange={handleChange}
+          aria-label="test cases tabs"
+          variant="scrollable"
+          scrollButtons="auto"
+        >
+          <Tab label="Case 1: Plain Object" />
+          <Tab label="Case 2: FormList Nested" />
+          <Tab label="Case 3: Array Non-Listener" />
+          <Tab label="Case 4: Removed Fields" />
+          <Tab label="Case 5: FormList Removed" />
+          <Tab label="Case 6: Nested Removed" />
+          <Tab label="Case 7: setFieldValues Mixed" />
+          <Tab label="Case 8: setFieldValues Nested" />
+          <Tab label="Case 9: setFieldValues Arrays" />
+          <Tab label="Case 10: setFieldValues Complex" />
+        </Tabs>
+      </Box>
+
+      <TabPanel value={value} index={0}>
+        <TestCase1_PlainObjectToPrimitives />
+      </TabPanel>
+      <TabPanel value={value} index={1}>
+        <TestCase2_PlainObjectToFormList />
+      </TabPanel>
+      <TabPanel value={value} index={2}>
+        <TestCase3_ArrayNonListenerToPrimitives />
+      </TabPanel>
+      <TabPanel value={value} index={3}>
+        <TestCase4_PlainObjectRemovedFields />
+      </TabPanel>
+      <TabPanel value={value} index={4}>
+        <TestCase5_FormListRemovedItems />
+      </TabPanel>
+      <TabPanel value={value} index={5}>
+        <TestCase6_NestedFormListRemoved />
+      </TabPanel>
+      <TabPanel value={value} index={6}>
+        <TestCase7_SetFieldValues_MixedStructure />
+      </TabPanel>
+      <TabPanel value={value} index={7}>
+        <TestCase8_SetFieldValues_NestedObject />
+      </TabPanel>
+      <TabPanel value={value} index={8}>
+        <TestCase9_SetFieldValues_MultipleArrays />
+      </TabPanel>
+      <TabPanel value={value} index={9}>
+        <TestCase10_SetFieldValues_ComplexNested />
+      </TabPanel>
+    </Box>
+  );
+}
+
+export default TestSetValueIndex;

package/src/types/index.ts

@@ -1 +1 @@
-export * from './public';
+export * from "./public";

package/src/types/public.ts

@@ -1,5 +1,5 @@
-import type { GetConstantType } from "./util";
 import type { SUBMIT_STATE } from "../constants/form";
+import type { GetConstantType } from "./util";
 
 export type FormValues<T = any> = T;