From 8524885cfb03b119700e118cf26caf291d3641d9 Mon Sep 17 00:00:00 2001
From: pointhalo <point.halo@outlook.com>
Date: Thu, 20 Jun 2024 11:50:16 +0800
Subject: [PATCH] test: add test case of form

---
 .../form/_story/ArrayField/remountInit.jsx    | 55 +++++++++++++++++++
 packages/semi-ui/form/_story/form.stories.jsx |  1 +
 2 files changed, 56 insertions(+)
 create mode 100644 packages/semi-ui/form/_story/ArrayField/remountInit.jsx

diff --git a/packages/semi-ui/form/_story/ArrayField/remountInit.jsx b/packages/semi-ui/form/_story/ArrayField/remountInit.jsx
new file mode 100644
index 0000000000..838d5887aa
--- /dev/null
+++ b/packages/semi-ui/form/_story/ArrayField/remountInit.jsx
@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { ArrayField, TextArea, Form, Button, useFormState } from '@douyinfe/semi-ui';
+import { IconPlusCircle, IconMinusCircle } from '@douyinfe/semi-icons';
+
+// toggle form input visible 
+// visible -> invisible -> visible
+// initValue will not use in final round now
+// The behavior in ArrayField is inconsistent with that in non-ArrayField, which is undefined behavior. Clearer guidance is needed.
+
+const RemountInit = () => {
+    const [data, setData] = useState([
+        { name: 'arrayfield defualtValue' },
+    ]);
+    const [visible, setVisible] = useState(true);
+    const ComponentUsingFormState = () => {
+        const formState = useFormState();
+        return (
+            <TextArea style={{ marginTop: 10 }} value={JSON.stringify(formState)} />
+        );
+    };
+    return (
+        <Form style={{ width: 800 }} labelPosition='left' labelWidth='100px' allowEmpty>
+            <Button onClick={() => { setVisible(!visible); }}>toggle</Button>
+            <ArrayField field='rules' initValue={data}>
+                {({ add, arrayFields }) => (
+                    <React.Fragment> 
+                        <Button onClick={add} icon={<IconPlusCircle />} theme='light'>Add new line</Button>
+                        {
+                            arrayFields.map(({ field, key, remove }, i) => (
+                                <div key={key} style={{ width: 1000, display: 'flex' }}>
+                                    {visible && <Form.Input
+                                        field={`${field}[name]`}
+                                        label={`${field}.name`}
+                                        style={{ width: 200, marginRight: 16 }}
+                                        initValue={'field init value'}
+                                    >
+                                    </Form.Input>}
+                                    <Button
+                                        type='danger'
+                                        theme='borderless'
+                                        icon={<IconMinusCircle />}
+                                        onClick={remove}
+                                        style={{ margin: 12 }}
+                                    />
+                                </div>
+                            ))
+                        }
+                    </React.Fragment>
+                )}
+            </ArrayField>
+            <ComponentUsingFormState />
+        </Form>
+    );
+};
+export default RemountInit;
\ No newline at end of file
diff --git a/packages/semi-ui/form/_story/form.stories.jsx b/packages/semi-ui/form/_story/form.stories.jsx
index b4ad58d248..f5fecd3525 100644
--- a/packages/semi-ui/form/_story/form.stories.jsx
+++ b/packages/semi-ui/form/_story/form.stories.jsx
@@ -74,6 +74,7 @@ import ChildDidMount from './Debug/childDidMount';
 
 export { default as FormSubmit } from './FormSubmit';
 export { default as TabelForm } from './TableDemo';
+export { default as RemountInit } from './ArrayField/remountInit'
 
 const {
   Input,