⚡️ performance: use profrom (#7442)

* ⚡️ performance: use profrom

* up version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ant-design-pro",
-  "version": "4.2.1",
+  "version": "4.2.2",
   "private": true,
   "description": "An out-of-box UI solution for enterprise applications",
   "scripts": {
@@ -55,6 +55,7 @@
   "dependencies": {
     "@ant-design/icons": "^4.0.0",
     "@ant-design/pro-descriptions": "^1.0.19",
+    "@ant-design/pro-form": "^1.0.1",
     "@ant-design/pro-layout": "^6.4.19",
     "@ant-design/pro-table": "^2.8.1",
     "@umijs/route-utils": "^1.0.33",

src/pages/ListTableList/components/UpdateForm.tsx

@@ -1,5 +1,13 @@
 import React, { useState } from 'react';
-import { Form, Button, DatePicker, Input, Modal, Radio, Select, Steps } from 'antd';
+import { Modal } from 'antd';
+import {
+  ProFormSelect,
+  ProFormText,
+  ProFormTextArea,
+  StepsForm,
+  ProFormRadio,
+  ProFormDateTimePicker,
+} from '@ant-design/pro-form';
 
 import { TableListItem } from '../data.d';
 
@@ -13,28 +21,18 @@ export interface FormValueType extends Partial<TableListItem> {
 
 export interface UpdateFormProps {
   onCancel: (flag?: boolean, formVals?: FormValueType) => void;
-  onSubmit: (values: FormValueType) => void;
+  onSubmit: (values: FormValueType) => Promise<void>;
   updateModalVisible: boolean;
   values: Partial<TableListItem>;
 }
-const FormItem = Form.Item;
-const { Step } = Steps;
-const { TextArea } = Input;
-const { Option } = Select;
-const RadioGroup = Radio.Group;
 
 export interface UpdateFormState {
   formVals: FormValueType;
   currentStep: number;
 }
 
-const formLayout = {
-  labelCol: { span: 7 },
-  wrapperCol: { span: 13 },
-};
-
 const UpdateForm: React.FC<UpdateFormProps> = (props) => {
-  const [formVals, setFormVals] = useState<FormValueType>({
+  const [formValues] = useState<FormValueType>({
     name: props.values.name,
     desc: props.values.desc,
     key: props.values.key,
@@ -45,169 +43,110 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
     frequency: 'month',
   });
 
-  const [currentStep, setCurrentStep] = useState<number>(0);
-
-  const [form] = Form.useForm();
-
-  const {
-    onSubmit: handleUpdate,
-    onCancel: handleUpdateModalVisible,
-    updateModalVisible,
-    values,
-  } = props;
-
-  const forward = () => setCurrentStep(currentStep + 1);
-
-  const backward = () => setCurrentStep(currentStep - 1);
+  const { onCancel: handleUpdateModalVisible, updateModalVisible } = props;
 
-  const handleNext = async () => {
-    const fieldsValue = await form.validateFields();
-
-    setFormVals({ ...formVals, ...fieldsValue });
-
-    if (currentStep < 2) {
-      forward();
-    } else {
-      handleUpdate({ ...formVals, ...fieldsValue });
-    }
-  };
-
-  const renderContent = () => {
-    if (currentStep === 1) {
-      return (
-        <>
-          <FormItem name="target" label="监控对象">
-            <Select style={{ width: '100%' }}>
-              <Option value="0">表一</Option>
-              <Option value="1">表二</Option>
-            </Select>
-          </FormItem>
-          <FormItem name="template" label="规则模板">
-            <Select style={{ width: '100%' }}>
-              <Option value="0">规则模板一</Option>
-              <Option value="1">规则模板二</Option>
-            </Select>
-          </FormItem>
-          <FormItem name="type" label="规则类型">
-            <RadioGroup>
-              <Radio value="0">强</Radio>
-              <Radio value="1">弱</Radio>
-            </RadioGroup>
-          </FormItem>
-        </>
-      );
-    }
-    if (currentStep === 2) {
-      return (
-        <>
-          <FormItem
-            name="time"
-            label="开始时间"
-            rules={[{ required: true, message: '请选择开始时间！' }]}
+  return (
+    <StepsForm
+      stepsProps={{
+        size: 'small',
+      }}
+      stepsFormRender={(dom, submitter) => {
+        return (
+          <Modal
+            width={640}
+            bodyStyle={{ padding: '32px 40px 48px' }}
+            destroyOnClose
+            title="规则配置"
+            visible={updateModalVisible}
+            footer={submitter}
+            onCancel={() => handleUpdateModalVisible()}
           >
-            <DatePicker
-              style={{ width: '100%' }}
-              showTime
-              format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择开始时间"
-            />
-          </FormItem>
-          <FormItem name="frequency" label="调度周期">
-            <Select style={{ width: '100%' }}>
-              <Option value="month">月</Option>
-              <Option value="week">周</Option>
-            </Select>
-          </FormItem>
-        </>
-      );
-    }
-    return (
-      <>
-        <FormItem
+            {dom}
+          </Modal>
+        );
+      }}
+      onFinish={props.onSubmit}
+    >
+      <StepsForm.StepFrom
+        initialValues={{
+          name: formValues.name,
+          desc: formValues.desc,
+        }}
+        title="基本信息"
+      >
+        <ProFormText
           name="name"
           label="规则名称"
           rules={[{ required: true, message: '请输入规则名称！' }]}
-        >
-          <Input placeholder="请输入" />
-        </FormItem>
-        <FormItem
+        />
+        <ProFormTextArea
           name="desc"
           label="规则描述"
+          placeholder="请输入至少五个字符"
           rules={[{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }]}
-        >
-          <TextArea rows={4} placeholder="请输入至少五个字符" />
-        </FormItem>
-      </>
-    );
-  };
-
-  const renderFooter = () => {
-    if (currentStep === 1) {
-      return (
-        <>
-          <Button style={{ float: 'left' }} onClick={backward}>
-            上一步
-          </Button>
-          <Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
-          <Button type="primary" onClick={() => handleNext()}>
-            下一步
-          </Button>
-        </>
-      );
-    }
-    if (currentStep === 2) {
-      return (
-        <>
-          <Button style={{ float: 'left' }} onClick={backward}>
-            上一步
-          </Button>
-          <Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
-          <Button type="primary" onClick={() => handleNext()}>
-            完成
-          </Button>
-        </>
-      );
-    }
-    return (
-      <>
-        <Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
-        <Button type="primary" onClick={() => handleNext()}>
-          下一步
-        </Button>
-      </>
-    );
-  };
-
-  return (
-    <Modal
-      width={640}
-      bodyStyle={{ padding: '32px 40px 48px' }}
-      destroyOnClose
-      title="规则配置"
-      visible={updateModalVisible}
-      footer={renderFooter()}
-      onCancel={() => handleUpdateModalVisible()}
-    >
-      <Steps style={{ marginBottom: 28 }} size="small" current={currentStep}>
-        <Step title="基本信息" />
-        <Step title="配置规则属性" />
-        <Step title="设定调度周期" />
-      </Steps>
-      <Form
-        {...formLayout}
-        form={form}
+        />
+      </StepsForm.StepFrom>
+      <StepsForm.StepFrom
+        initialValues={{
+          target: formValues.target,
+          template: formValues.template,
+        }}
+        title="配置规则属性"
+      >
+        <ProFormSelect
+          name="target"
+          label="监控对象"
+          valueEnum={{
+            0: '表一',
+            1: '表二',
+          }}
+        />
+        <ProFormSelect
+          name="template"
+          label="规则模板"
+          valueEnum={{
+            0: '规则模板一',
+            1: '规则模板二',
+          }}
+        />
+        <ProFormRadio.Group
+          name="type"
+          label="规则类型"
+          options={[
+            {
+              value: '0',
+              label: '强',
+            },
+            {
+              value: '1',
+              label: '弱',
+            },
+          ]}
+        />
+      </StepsForm.StepFrom>
+      <StepsForm.StepFrom
         initialValues={{
-          target: formVals.target,
-          template: formVals.template,
-          type: formVals.type,
-          frequency: formVals.frequency,
-          name: formVals.name,
-          desc: formVals.desc,
+          type: formValues.type,
+          frequency: formValues.frequency,
         }}
+        title="设定调度周期"
       >
-        {renderContent()}
-      </Form>
-    </Modal>
+        <ProFormDateTimePicker
+          name="time"
+          label="开始时间"
+          rules={[{ required: true, message: '请选择开始时间！' }]}
+        />
+        <ProFormSelect
+          name="frequency"
+          label="监控对象"
+          width="xs"
+          valueEnum={{
+            month: '月',
+            week: '周',
+          }}
+        />
+      </StepsForm.StepFrom>
+    </StepsForm>
   );
 };