fix: arrayField allowEmpty=false, condiction show arrayField, add nee…

…d to call twice
DouyinFE · Nov 8, 2024 · 833f838 · 833f838
1 parent b5c7766
commit 833f838
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 2 deletions.
diff --git a/packages/semi-ui/form/_story/ArrayField/mountAndAdd.jsx b/packages/semi-ui/form/_story/ArrayField/mountAndAdd.jsx
@@ -0,0 +1,56 @@
+import { ArrayField, TextArea, Form, Button, useFormState } from '@douyinfe/semi-ui';
+import React, { useRef, useState } from 'react';
+
+const Demo = () => {
+    const formRef = useRef();
+    const [flag, setFlag] = useState(false);
+    return (
+        <Form ref={formRef} onValueChange={values => console.log(values)} style={{ width: 250 }}>
+            <Button type="primary" onClick={() => setFlag(!flag)} className="btn-margin-right">
+                {!flag ? '开启' : '关闭'}
+            </Button>
+
+            {flag && (
+                <ArrayField field="rules">
+                    {({ add, arrayFields, addWithInitValue }) => (
+                        <React.Fragment>
+                            <Button onClick={add} theme="light">
+                                Add new line
+                            </Button>
+                            <Button
+                                onClick={() => {
+                                    addWithInitValue({ name: 'Semi DSM', type: 'Designer' });
+                                }}
+                                style={{ marginLeft: 8 }}
+                            >
+                                Add new line with init value
+                            </Button>
+                            {arrayFields.map(({ field, key, remove }, i) => (
+                                <div key={key} style={{ width: 1000, display: 'flex' }}>
+                                    <Form.Input
+                                        field={`${field}[name]`}
+                                        label={`${field}.name`}
+                                        style={{ width: 200, marginRight: 16 }}
+                                    />
+                                    <Form.Select
+                                        field={`${field}[role]`}
+                                        label={`${field}.role`}
+                                        style={{ width: 120 }}
+                                        optionList={[
+                                            { label: 'Engineer', value: 'Engineer' },
+                                            { label: 'Designer', value: 'Designer' },
+                                        ]}
+                                    />
+                                    <Button type="danger" theme="borderless" onClick={remove} style={{ margin: 12 }} />
+                                </div>
+                            ))}
+                        </React.Fragment>
+                    )}
+                </ArrayField>
+            )}
+        </Form>
+    );
+};
+
+
+export default Demo;
diff --git a/packages/semi-ui/form/_story/Performance/performanceDemo.jsx b/packages/semi-ui/form/_story/Performance/performanceDemo.jsx
@@ -17,7 +17,6 @@ import { Button, Modal, TreeSelect, Row, Col, Avatar, Toast, Select as BasicSele
 
 import { cloneDeepWith, cloneDeep } from 'lodash';
 
-
 import { ComponentUsingFormState } from '../Hook/hookDemo';
 const { Input, Select, DatePicker, Switch, Slider, CheckboxGroup, Checkbox, RadioGroup, Radio, TimePicker, InputNumber, InputGroup } = Form;
 

diff --git a/packages/semi-ui/form/_story/form.stories.jsx b/packages/semi-ui/form/_story/form.stories.jsx
@@ -76,6 +76,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'
+export { default as MountAndAddLine} from './ArrayField/mountAndAdd';
 
 export const ScrollToError = () => <ScrollToErrorDemo></ScrollToErrorDemo>
 // export { default as ScrollToError } from './FormApi/scrollToError'

diff --git a/packages/semi-ui/form/arrayField.tsx b/packages/semi-ui/form/arrayField.tsx
@@ -72,7 +72,7 @@ class ArrayFieldComponent extends Component<ArrayFieldProps, ArrayFieldState> {
 
     cacheFieldValues: any[];
     shouldUseInitValue: boolean;
-    cacheUpdateKey: string;
+    cacheUpdateKey: string | number;
     context: FormUpdaterContextType;
 
     constructor(props: ArrayFieldProps, context: FormUpdaterContextType) {
@@ -133,9 +133,14 @@ class ArrayFieldComponent extends Component<ArrayFieldProps, ArrayFieldState> {
 
     add() {
         const { keys } = this.state;
+        const { field } = this.props;
+        const updater = this.context;
         keys.push(getUuidv4());
         this.shouldUseInitValue = true;
         this.setState({ keys });
+        let updateKey = new Date().valueOf();
+        updater.updateArrayField(field, { updateKey });
+        this.cacheUpdateKey = updateKey;
     }
 
     addWithInitValue(rowVal: Record<string, any> | string) {