fix: 消除modal-form告警

Author: jaykou25

docs/case/modal-form-demo/modal-form-initial-value-control-class/index.tsx

@@ -0,0 +1,48 @@
+import { Component } from 'react';
+import { Button, ModalForm } from 'react-admin-kit';
+
+export default class ModalFormInitialValueCase extends Component<any, any> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      open: false,
+      formData: {},
+    };
+  }
+
+  render() {
+    return (
+      <div>
+        <Button
+          onClick={() =>
+            this.setState({
+              open: true,
+              formData: { name: 'Jack2', phone: 123 },
+            })
+          }
+        >
+          打开
+        </Button>
+        <ModalForm
+          onCancel={() => this.setState({ open: false })}
+          open={this.state.open}
+          formProps={{
+            initialValues: this.state.formData,
+          }}
+          columns={[
+            {
+              title: 'name',
+              dataIndex: 'name',
+              initialValue: 'Hello',
+            },
+            {
+              title: 'phone',
+              dataIndex: 'phone',
+            },
+          ]}
+        />
+      </div>
+    );
+  }
+}

docs/case/modal-form-demo/modal-form-initial-value-control/index.tsx

@@ -0,0 +1,37 @@
+import { useRef, useState } from 'react';
+import { Button, ModalForm } from 'react-admin-kit';
+
+export default function () {
+  const [open, setOpen] = useState(false);
+  const formDataRef = useRef<any>({});
+  return (
+    <div>
+      <Button
+        onClick={() => {
+          formDataRef.current = { name: 'Jack2', phone: 123 };
+          setOpen(true);
+        }}
+      >
+        打开
+      </Button>
+      <ModalForm
+        open={open}
+        onCancel={() => setOpen(false)}
+        formProps={{
+          initialValues: formDataRef.current,
+        }}
+        columns={[
+          {
+            title: 'name',
+            dataIndex: 'name',
+            initialValue: 'Hello',
+          },
+          {
+            title: 'phone',
+            dataIndex: 'phone',
+          },
+        ]}
+      />
+    </div>
+  );
+}

docs/case/modal-form.md

@@ -29,4 +29,12 @@ columns 上有 initialValue. Form 上也有 initialValues. 这两者会合并处
 
 期望1: `{name: 'Jack2', phone: 123}`
 
-<code src="./modal-form-demo/modal-form-initial-value" ></code>
+<code src="./modal-form-demo/modal-form-initial-value" ></code>
+
+案例2. 采用 open 受控模式, 并且用于 Class 组件.
+
+<code src="./modal-form-demo/modal-form-initial-value-control-class" ></code>
+
+案例3. 采用 open 受控模式, 用于 Function 组件.
+
+<code src="./modal-form-demo/modal-form-initial-value-control" ></code>

src/ModalForm/index.tsx

@@ -206,6 +206,10 @@ class ModalForm extends Component<
     const { formData } = this.state;
     const { open } = this.props;
 
+    // 合并初始值. openModal 所携带的初始值优先级更大.
+    const propsInitialValues = this.props.formProps?.initialValues || {};
+    const initialValues = { ...propsInitialValues, ...formData };
+
     const $cols = normalizeTree(
       this.props.columns,
       (item) => {
@@ -215,9 +219,8 @@ class ModalForm extends Component<
         // columns 上和 SchemaForm 组件的 initialValues 上不能有相同的字段, 否则会有告警.
         // Form already set 'initialValues' with path 'name'. Field can not overwrite it
         if (
-          !open &&
           typeof item.dataIndex === 'string' &&
-          formData.hasOwnProperty(item.dataIndex)
+          initialValues.hasOwnProperty(item.dataIndex)
         ) {
           return rest;
         } else {