refactor: Form and Icon (#167)

* perf: update Icon for tree-shaking * feat: refactor Form with hooks * fix: test * fix: lose of state when close Modal * test: update snapshots * test: update case
orzyyyy · Aug 16, 2019 · 96608fb · 96608fb
1 parent efc3da8
commit 96608fb
Show file tree

Hide file tree

Showing 10 changed files with 5,060 additions and 2,582 deletions.
diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
     ]
   },
   "dependencies": {
-    "antd": "^3.20.7",
+    "antd": "^4.0.0-alpha.2",
     "core-js": "^3.1.4",
     "koa": "^2.7.0",
     "mini-xmind": "^1.3.0",
@@ -56,6 +56,8 @@
     "typescript": "^3.5.3"
   },
   "devDependencies": {
+    "@ant-design/icons": "^4.0.0-alpha.2",
+    "@ant-design/icons-svg": "^4.0.0-alpha.0",
     "@types/blueimp-md5": "^2.7.0",
     "@types/fs-extra": "^8.0.0",
     "@types/koa-bodyparser": "^4.3.0",

diff --git a/src/assets/mapping.json b/src/assets/mapping.json
@@ -211,7 +211,7 @@
   },
   {
     "createTime": 1565223099856,
-    "modifyTime": 1565767324423,
+    "modifyTime": 1565917439234,
     "url": "./assets/markdown/7a9a2d738fa682b6c2b1abc0471616b2.json",
     "id": "7a9a2d738fa682b6c2b1abc0471616b2",
     "title": "常用解题思路",

diff --git a/src/controller/MainPageDataController.tsx b/src/controller/MainPageDataController.tsx
@@ -110,9 +110,12 @@ export default class MainPageDataController extends Component<
   };
 
   handleSubmit = async (item: FormProps, dataItem?: any) => {
+    if (!item && !dataItem) {
+      return;
+    }
     this.setState({ formLoading: true });
-    let id;
-    if (dataItem) {
+    let id: string;
+    if (dataItem && dataItem.id) {
       id = dataItem.id;
       await fetch('document/update', {
         body: JSON.stringify(Object.assign({}, dataItem, item)),

diff --git a/src/pages/EditForm.tsx b/src/pages/EditForm.tsx
@@ -1,6 +1,5 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import { Form, Input, Modal, Select, Button } from 'antd';
-import { FormComponentProps } from 'antd/lib/form';
 import { SiderProps } from '../controller/MainPageDataController';
 import { SelectValue } from 'antd/lib/select';
 const { Option } = Select;
@@ -11,11 +10,11 @@ export interface FormProps {
   type: string;
   subType: string;
 }
-export interface EditFormProps extends FormComponentProps {
+export interface EditFormProps {
   form: any;
   visible: boolean;
   selectData: SiderProps[];
-  onSubmit: (form: FormProps, id?: string | undefined) => void;
+  onSubmit: (form?: FormProps, dataItem?: any) => void;
   onCancel: () => void;
   loading: boolean;
   dataItem: any;
@@ -26,166 +25,181 @@ export interface EditFormState {
   extraSubTypeSelectItem: string;
 }
 
-class EditForm extends Component<EditFormProps, EditFormState> {
-  state = {
-    currentType: '',
-    extraTypeSelectItem: '',
-    extraSubTypeSelectItem: '',
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 4 },
+    sm: { span: 4 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 20 },
+  },
+};
+
+let isInit = true;
+
+const EditForm = ({
+  visible,
+  loading,
+  selectData,
+  onCancel,
+  onSubmit,
+  dataItem = { type: '', subType: '', category: '', title: '' },
+}: EditFormProps) => {
+  const [form] = Form.useForm();
+  const [currentTypeSelectItem, setCurrentTypeSelectItem] = useState(
+    dataItem.type,
+  );
+
+  const onFinish = ({ type, subType, title, category }: FormProps) => {
+    onSubmit({ title, category, type, subType }, dataItem);
   };
 
-  handleSubmit = (e: { preventDefault: () => void }) => {
-    e.preventDefault();
-    const { form, onSubmit, dataItem } = this.props;
-    form.validateFields(
-      (err: any, { type, subType, title, category }: FormProps) => {
-        if (!err) {
-          onSubmit({ title, category, type, subType }, dataItem);
-        }
-      },
-    );
+  const onFinishFailed = ({ errorFields }: any) => {
+    form.scrollToField(errorFields[0].name);
+    onSubmit();
   };
 
-  handleReset = () => {
-    this.props.form.resetFields();
+  const handleCancel = () => {
+    isInit = true;
+    setCurrentTypeSelectItem(null);
+    onCancel();
   };
 
-  handleOnCancel = () => {
-    this.props.onCancel();
-    this.handleReset();
+  const setTypeValue = (type: any) => {
+    form.setFieldsValue({ type });
+    setCurrentTypeSelectItem(type);
   };
 
-  render() {
-    const {
-      form,
-      visible,
-      loading,
-      selectData,
-      dataItem = { type: '', subType: '', category: '', title: '' },
-    } = this.props;
-    const { getFieldDecorator } = form;
-    const {
-      currentType,
-      extraTypeSelectItem,
-      extraSubTypeSelectItem,
-    } = this.state;
-    const formItemLayout = {
-      labelCol: {
-        xs: { span: 4 },
-        sm: { span: 4 },
-      },
-      wrapperCol: {
-        xs: { span: 24 },
-        sm: { span: 20 },
-      },
-    };
-    return (
-      <Modal
-        visible={visible}
-        title="新建文档"
-        footer={null}
-        onCancel={this.handleOnCancel}
+  const formValues = form.getFieldsValue();
+  if (!dataItem.id) {
+    if (isInit) {
+      form.resetFields();
+    } else {
+      form.setFieldsValue(Object.assign({}, dataItem, formValues));
+    }
+  } else {
+    if (isInit) {
+      form.setFieldsValue(Object.assign({}, formValues, dataItem));
+    } else {
+      form.setFieldsValue(Object.assign({}, dataItem, formValues));
+    }
+  }
+
+  return (
+    <Modal
+      visible={visible}
+      title="新建文档"
+      footer={null}
+      onCancel={handleCancel}
+    >
+      <Form
+        {...formItemLayout}
+        name="edit-form"
+        form={form}
+        onFinish={onFinish as any}
+        onFinishFailed={onFinishFailed}
+        onValuesChange={() => (isInit = false)}
       >
-        <Form {...formItemLayout} onSubmit={this.handleSubmit}>
-          <Form.Item label="名称">
-            {getFieldDecorator('title', {
-              rules: [
-                {
-                  required: true,
-                  message: '名称不能为空',
-                },
-              ],
-              initialValue: dataItem.title,
-            })(<Input />)}
-          </Form.Item>
-          <Form.Item label="显示类别">
-            {getFieldDecorator('category', {
-              rules: [
-                {
-                  required: true,
-                  message: '显示类别不能为空',
-                },
-              ],
-              initialValue: dataItem.category,
-            })(
-              <Select>
-                <Option value="markdown">markdown</Option>
-                <Option value="mapping">mapping</Option>
-              </Select>,
-            )}
-          </Form.Item>
-          <Form.Item label="文档类别">
-            {getFieldDecorator('type', {
-              rules: [
-                {
-                  required: true,
-                  message: '文档类别不能为空',
-                },
-              ],
-              initialValue: dataItem.type,
-            })(
-              <Select
-                showSearch
-                onSearch={value =>
-                  this.setState({ extraTypeSelectItem: value })
-                }
-                onChange={value => this.setState({ currentType: value })}
-              >
-                {selectData.map(item => (
-                  <Option value={item.key} key={`type-${item.key}`}>
-                    {item.title}
+        <Form.Item
+          label="标题"
+          name="title"
+          required
+          rules={[
+            {
+              required: true,
+              message: '标题不能为空',
+            },
+          ]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          label="显示类别"
+          name="category"
+          required
+          rules={[
+            {
+              required: true,
+              message: '显示类别不能为空',
+            },
+          ]}
+        >
+          <Select>
+            <Option value="markdown">markdown</Option>
+            <Option value="mapping">mapping</Option>
+          </Select>
+        </Form.Item>
+        <Form.Item
+          label="文档类别"
+          name="type"
+          required
+          rules={[
+            {
+              required: true,
+              message: '文档类别不能为空',
+            },
+          ]}
+        >
+          <Select showSearch onSearch={setTypeValue} onChange={setTypeValue}>
+            {selectData.map(item => (
+              <Option value={item.key} key={`type-${item.key}`}>
+                {item.title}
+              </Option>
+            ))}
+          </Select>
+        </Form.Item>
+        <Form.Item
+          label="文档子类"
+          name="subType"
+          required
+          rules={[
+            {
+              required: true,
+              message: '文档子类不能为空',
+            },
+          ]}
+        >
+          <Select
+            showSearch
+            onSearch={subType => {
+              form.setFieldsValue({ subType });
+            }}
+          >
+            {selectData
+              .filter(
+                item => item.key === (currentTypeSelectItem || dataItem.type),
+              )
+              .map(({ children = [] }) =>
+                children.map(jtem => (
+                  <Option value={jtem.key} key={jtem.key}>
+                    {jtem.value}
                   </Option>
-                ))}
-                <Option value={extraTypeSelectItem}>
-                  {extraTypeSelectItem}
-                </Option>
-              </Select>,
-            )}
-          </Form.Item>
-          <Form.Item label="文档子类">
-            {getFieldDecorator('subType', {
-              rules: [
-                {
-                  required: true,
-                  message: '文档子类不能为空',
-                },
-              ],
-              initialValue: dataItem.subType,
-            })(
-              <Select
-                showSearch
-                onSearch={value =>
-                  this.setState({ extraSubTypeSelectItem: value })
-                }
-              >
-                {selectData
-                  .filter(item =>
-                    currentType ? item.key === currentType : true,
-                  )
-                  .map(({ children = [] }) =>
-                    children.map(jtem => (
-                      <Option value={jtem.key} key={jtem.key}>
-                        {jtem.value}
-                      </Option>
-                    )),
-                  )}
-                <Option value={extraSubTypeSelectItem}>
-                  {extraSubTypeSelectItem}
-                </Option>
-              </Select>,
-            )}
-          </Form.Item>
-          <Form.Item wrapperCol={{ span: 24, offset: 16 }}>
-            <Button style={{ marginRight: 16 }} onClick={this.handleReset}>
-              重置
+                )),
+              )}
+          </Select>
+        </Form.Item>
+        <Form.Item wrapperCol={{ span: 24, offset: 16 }}>
+          <>
+            <Button
+              type="danger"
+              style={{ marginRight: 16 }}
+              onClick={() => form.resetFields()}
+            >
+              清空
             </Button>
-            <Button type="primary" htmlType="submit" loading={loading}>
+            <Button
+              type="primary"
+              onClick={() => form.submit()}
+              loading={loading}
+            >
               确定
             </Button>
-          </Form.Item>
-        </Form>
-      </Modal>
-    );
-  }
-}
+          </>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
 
-export default Form.create<EditFormProps>()(EditForm);
+export default EditForm;