🔀 Merging: use antd version (#201)

* 升级 antd * Form basic form (#160) * feat: update to antd@4 * feat: update to antd@4 * Form advanced form (#161) * feat: update to antd@4 * feat: update to antd@4 * feat: update to antd@4 * chore: remove css * fix: false deletion * 升级Editor相关区块的Form到v4 (#163) * Migrate Account Center to antd@4 * Migrate AccountSettings Center to antd@4 * Migrate DashboardAnalysis to antd@4 * feat: 升级ListCardList到v4 * feat: 升级ListSearchApplications升级到v4 * feat: 升级ListBasicList到v4 * feat: 升级ListSearchArticle到v4 * feat: 升级ListSearchProjects到v4 * feat: 升级ListTableList到v4 * fix: 去掉LegacyIcon * fix: 编辑器相关区块使用v4的Form 1. EditorFlow 2. EditorKoni 3. EditorMind Co-authored-by: 陈帅 <[email protected]> * Feature AccountSettings migrate antd@4 (#162) * feat: Feature AccountSettings migrate antd@4 * chore: remove @ant-design/compatible * FormStepForm Feature migrate antd@4 (#159) * Migrate FormStepForm to antd@4 * review: optimization and adjustment * refactor: change the writing method to hooks * ListBasicList and ListSearchApplications Feature migrate antd@4 (#166) * feat: ListBasicList Feature migrate antd@4 * feat: ListSearchApplications Feature migrate antd@4 * Midou antd4 (#169) * feat: midou * feat: songxue antd4 ListTableList * Feature UserRegister migrate antd@4 (#164) * feat: 纯函数实现 * fix: Popover不更新 * feat: 清理log注释 * feat: 清理log * fix: 抖动问题 * fix: 字符串为空显示提示 * style: 空行 * feat：refactoring with antd (#167) * chore: remove ant-design/compatible * up @ant-design/pro-table version close #ant-design/ant-design-pro#5940 * 修复依赖冲突 * fix lint warning * feat: List Search Projects (#179) * feat: List Search Projects * style: fix lint * style: change eslint rule * chore: fix lint * chore: update @umijs/fabric * List search articles (#176) * feat: List Search Articles * chore: style * chore: reset list search projects * style: code style * bugfix: fix login style error * upgrade @antv/data-set * ➖ dependency: remove antd@4 * 🔥 clean: fix lint error * 👷 CI: lint add pretter script Co-authored-by: 陈小聪 <[email protected]> Co-authored-by: damon.chen <[email protected]> Co-authored-by: wangxingkang <[email protected]> Co-authored-by: Qhan W <[email protected]> Co-authored-by: LWX <[email protected]> Co-authored-by: 鬼厉 <[email protected]> Co-authored-by: xiaohuoni <[email protected]>
ant-design · Mar 10, 2020 · 9995def · 9995def
1 parent d8aec3a
commit 9995def
Show file tree

Hide file tree

Showing 55 changed files with 2,537 additions and 2,951 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -27,7 +27,7 @@ jobs:
         run: cd ant-design-pro && npm run fetch:blocks --js
 
       - name: lint:fix
-        run: cd ant-design-pro && npm run lint:fix
+        run: cd ant-design-pro && npm run lint:fix && yarn run prettier
 
       - name: lint
         run: cd ant-design-pro && npm run lint
diff --git a/AccountSettings/package.json b/AccountSettings/package.json
@@ -12,7 +12,6 @@
     "dev": "umi dev"
   },
   "dependencies": {
-    "@ant-design/compatible": "^0.0.1-rc.0",
     "@ant-design/icons": "^4.0.0-alpha.19",
     "dva": "^2.4.0",
     "redux": "^4.0.1",

diff --git a/AccountSettings/src/components/GeographicView.tsx b/AccountSettings/src/components/GeographicView.tsx
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { Select, Spin } from 'antd';
+import { LabeledValue } from 'antd/es/select';
 
 import { Dispatch } from 'redux';
 import { connect } from 'dva';
@@ -8,12 +9,9 @@ import styles from './GeographicView.less';
 
 const { Option } = Select;
 
-interface SelectItem {
-  label: string;
-  key: string;
-}
-const nullSelectItem: SelectItem = {
+const nullSelectItem: LabeledValue = {
   label: '',
+  value: '',
   key: '',
 };
 
@@ -22,11 +20,11 @@ interface GeographicViewProps {
   province?: GeographicItemType[];
   city?: GeographicItemType[];
   value?: {
-    province: SelectItem;
-    city: SelectItem;
+    province: LabeledValue;
+    city: LabeledValue;
   };
   loading?: boolean;
-  onChange?: (value: { province: SelectItem; city: SelectItem }) => void;
+  onChange?: (value: { province: LabeledValue; city: LabeledValue }) => void;
 }
 
 class GeographicView extends Component<GeographicViewProps> {
@@ -83,7 +81,7 @@ class GeographicView extends Component<GeographicViewProps> {
     ));
   };
 
-  selectProvinceItem = (item: SelectItem) => {
+  selectProvinceItem = (item: LabeledValue) => {
     const { dispatch, onChange } = this.props;
 
     if (dispatch) {
@@ -100,7 +98,7 @@ class GeographicView extends Component<GeographicViewProps> {
     }
   };
 
-  selectCityItem = (item: SelectItem) => {
+  selectCityItem = (item: LabeledValue) => {
     const { value, onChange } = this.props;
     if (value && onChange) {
       onChange({
@@ -128,6 +126,7 @@ class GeographicView extends Component<GeographicViewProps> {
   render() {
     const { province, city } = this.conversionObject();
     const { loading } = this.props;
+
     return (
       <Spin spinning={loading} wrapperClassName={styles.row}>
         <Select

diff --git a/AccountSettings/src/components/base.tsx b/AccountSettings/src/components/base.tsx
@@ -1,23 +1,19 @@
 import { UploadOutlined } from '@ant-design/icons';
-import { Form } from '@ant-design/compatible';
-import '@ant-design/compatible/assets/index.css';
-import { Button, Input, Select, Upload, message } from 'antd';
+import { Button, Input, Select, Upload, Form, message } from 'antd';
 import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 
-import { FormComponentProps } from '@ant-design/compatible/es/form';
 import { connect } from 'dva';
 import { CurrentUser } from '../data.d';
 import GeographicView from './GeographicView';
 import PhoneView from './PhoneView';
 import styles from './BaseView.less';
 
-const FormItem = Form.Item;
 const { Option } = Select;
 
 // 头像组件 方便以后独立，增加裁剪之类的功能
 const AvatarView = ({ avatar }: { avatar: string }) => (
-  <Fragment>
+  <>
     <div className={styles.avatar_title}>
       <FormattedMessage id="BLOCK_NAME.basic.avatar" defaultMessage="Avatar" />
     </div>
@@ -32,7 +28,7 @@ const AvatarView = ({ avatar }: { avatar: string }) => (
         </Button>
       </div>
     </Upload>
-  </Fragment>
+  </>
 );
 interface SelectItem {
   label: string;
@@ -68,28 +64,13 @@ const validatorPhone = (rule: any, value: string, callback: (message?: string) =
   callback();
 };
 
-interface BaseViewProps extends FormComponentProps {
+interface BaseViewProps {
   currentUser?: CurrentUser;
 }
 
 class BaseView extends Component<BaseViewProps> {
   view: HTMLDivElement | undefined = undefined;
 
-  componentDidMount() {
-    this.setBaseInfo();
-  }
-
-  setBaseInfo = () => {
-    const { currentUser, form } = this.props;
-    if (currentUser) {
-      Object.keys(form.getFieldsValue()).forEach(key => {
-        const obj = {};
-        obj[key] = currentUser[key] || null;
-        form.setFieldsValue(obj);
-      });
-    }
-  };
-
   getAvatarURL() {
     const { currentUser } = this.props;
     if (currentUser) {
@@ -106,110 +87,123 @@ class BaseView extends Component<BaseViewProps> {
     this.view = ref;
   };
 
-  handlerSubmit = (event: React.MouseEvent) => {
-    event.preventDefault();
-    const { form } = this.props;
-    form.validateFields(err => {
-      if (!err) {
-        message.success(formatMessage({ id: 'BLOCK_NAME.basic.update.success' }));
-      }
-    });
+  handleFinish = () => {
+    message.success(formatMessage({ id: 'BLOCK_NAME.basic.update.success' }));
   };
 
   render() {
-    const {
-      form: { getFieldDecorator },
-    } = this.props;
+    const { currentUser } = this.props;
+
     return (
       <div className={styles.baseView} ref={this.getViewDom}>
         <div className={styles.left}>
-          <Form layout="vertical" hideRequiredMark>
-            <FormItem label={formatMessage({ id: 'BLOCK_NAME.basic.email' })}>
-              {getFieldDecorator('email', {
-                rules: [
-                  {
-                    required: true,
-                    message: formatMessage({ id: 'BLOCK_NAME.basic.email-message' }, {}),
-                  },
-                ],
-              })(<Input />)}
-            </FormItem>
-            <FormItem label={formatMessage({ id: 'BLOCK_NAME.basic.nickname' })}>
-              {getFieldDecorator('name', {
-                rules: [
-                  {
-                    required: true,
-                    message: formatMessage({ id: 'BLOCK_NAME.basic.nickname-message' }, {}),
-                  },
-                ],
-              })(<Input />)}
-            </FormItem>
-            <FormItem label={formatMessage({ id: 'BLOCK_NAME.basic.profile' })}>
-              {getFieldDecorator('profile', {
-                rules: [
-                  {
-                    required: true,
-                    message: formatMessage({ id: 'BLOCK_NAME.basic.profile-message' }, {}),
-                  },
-                ],
-              })(
-                <Input.TextArea
-                  placeholder={formatMessage({ id: 'BLOCK_NAME.basic.profile-placeholder' })}
-                  rows={4}
-                />,
-              )}
-            </FormItem>
-            <FormItem label={formatMessage({ id: 'BLOCK_NAME.basic.country' })}>
-              {getFieldDecorator('country', {
-                rules: [
-                  {
-                    required: true,
-                    message: formatMessage({ id: 'BLOCK_NAME.basic.country-message' }, {}),
-                  },
-                ],
-              })(
-                <Select style={{ maxWidth: 220 }}>
-                  <Option value="China">中国</Option>
-                </Select>,
-              )}
-            </FormItem>
-            <FormItem label={formatMessage({ id: 'BLOCK_NAME.basic.geographic' })}>
-              {getFieldDecorator('geographic', {
-                rules: [
-                  {
-                    required: true,
-                    message: formatMessage({ id: 'BLOCK_NAME.basic.geographic-message' }, {}),
-                  },
-                  {
-                    validator: validatorGeographic,
-                  },
-                ],
-              })(<GeographicView />)}
-            </FormItem>
-            <FormItem label={formatMessage({ id: 'BLOCK_NAME.basic.address' })}>
-              {getFieldDecorator('address', {
-                rules: [
-                  {
-                    required: true,
-                    message: formatMessage({ id: 'BLOCK_NAME.basic.address-message' }, {}),
-                  },
-                ],
-              })(<Input />)}
-            </FormItem>
-            <FormItem label={formatMessage({ id: 'BLOCK_NAME.basic.phone' })}>
-              {getFieldDecorator('phone', {
-                rules: [
-                  {
-                    required: true,
-                    message: formatMessage({ id: 'BLOCK_NAME.basic.phone-message' }, {}),
-                  },
-                  { validator: validatorPhone },
-                ],
-              })(<PhoneView />)}
-            </FormItem>
-            <Button type="primary" onClick={this.handlerSubmit}>
-              <FormattedMessage id="BLOCK_NAME.basic.update" defaultMessage="Update Information" />
-            </Button>
+          <Form
+            layout="vertical"
+            onFinish={this.handleFinish}
+            initialValues={currentUser}
+            hideRequiredMark
+          >
+            <Form.Item
+              name="email"
+              label={formatMessage({ id: 'BLOCK_NAME.basic.email' })}
+              rules={[
+                {
+                  required: true,
+                  message: formatMessage({ id: 'BLOCK_NAME.basic.email-message' }, {}),
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              name="name"
+              label={formatMessage({ id: 'BLOCK_NAME.basic.nickname' })}
+              rules={[
+                {
+                  required: true,
+                  message: formatMessage({ id: 'BLOCK_NAME.basic.nickname-message' }, {}),
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              name="profile"
+              label={formatMessage({ id: 'BLOCK_NAME.basic.profile' })}
+              rules={[
+                {
+                  required: true,
+                  message: formatMessage({ id: 'BLOCK_NAME.basic.profile-message' }, {}),
+                },
+              ]}
+            >
+              <Input.TextArea
+                placeholder={formatMessage({ id: 'BLOCK_NAME.basic.profile-placeholder' })}
+                rows={4}
+              />
+            </Form.Item>
+            <Form.Item
+              name="country"
+              label={formatMessage({ id: 'BLOCK_NAME.basic.country' })}
+              rules={[
+                {
+                  required: true,
+                  message: formatMessage({ id: 'BLOCK_NAME.basic.country-message' }, {}),
+                },
+              ]}
+            >
+              <Select style={{ maxWidth: 220 }}>
+                <Option value="China">中国</Option>
+              </Select>
+            </Form.Item>
+            <Form.Item
+              name="geographic"
+              label={formatMessage({ id: 'BLOCK_NAME.basic.geographic' })}
+              rules={[
+                {
+                  required: true,
+                  message: formatMessage({ id: 'BLOCK_NAME.basic.geographic-message' }, {}),
+                },
+                {
+                  validator: validatorGeographic,
+                },
+              ]}
+            >
+              <GeographicView />
+            </Form.Item>
+            <Form.Item
+              name="address"
+              label={formatMessage({ id: 'BLOCK_NAME.basic.address' })}
+              rules={[
+                {
+                  required: true,
+                  message: formatMessage({ id: 'BLOCK_NAME.basic.address-message' }, {}),
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              name="phone"
+              label={formatMessage({ id: 'BLOCK_NAME.basic.phone' })}
+              rules={[
+                {
+                  required: true,
+                  message: formatMessage({ id: 'BLOCK_NAME.basic.phone-message' }, {}),
+                },
+                { validator: validatorPhone },
+              ]}
+            >
+              <PhoneView />
+            </Form.Item>
+            <Form.Item>
+              <Button htmlType="submit" type="primary">
+                <FormattedMessage
+                  id="BLOCK_NAME.basic.update"
+                  defaultMessage="Update Information"
+                />
+              </Button>
+            </Form.Item>
           </Form>
         </div>
         <div className={styles.right}>
@@ -224,4 +218,4 @@ export default connect(
   ({ BLOCK_NAME_CAMEL_CASE }: { BLOCK_NAME_CAMEL_CASE: { currentUser: CurrentUser } }) => ({
     currentUser: BLOCK_NAME_CAMEL_CASE.currentUser,
   }),
-)(Form.create<BaseViewProps>()(BaseView));
+)(BaseView);