upgrade eslint-config-airbnb

.eslintrc

@@ -24,6 +24,8 @@
     "no-use-before-define": [0],
     "jsx-a11y/no-static-element-interactions": [0],
     "jsx-a11y/no-noninteractive-element-interactions": [0],
+    "jsx-a11y/click-events-have-key-events": [0],
+    "jsx-a11y/anchor-is-valid": [0],
     "no-nested-ternary": [0],
     "arrow-body-style": [0],
     "import/extensions": [0],
@@ -37,6 +39,9 @@
       "exports": "always-multiline",
       "functions": "ignore"
     }],
+    "object-curly-newline": [0],
+    "function-paren-newline": [0],
+    "no-restricted-globals": [0],
     "require-yield": [1]
   },
   "parserOptions": {

mock/api.js

@@ -73,7 +73,7 @@ export function fakeList(count) {
 export function getFakeList(req, res, u) {
   let url = u;
   if (!url || Object.prototype.toString.call(url) !== '[object String]') {
-    url = req.url;
+    url = req.url; // eslint-disable-line
   }
 
   const params = getUrlParams(url);

mock/rule.js

@@ -22,7 +22,7 @@ for (let i = 0; i < 46; i += 1) {
 export function getRule(req, res, u) {
   let url = u;
   if (!url || Object.prototype.toString.call(url) !== '[object String]') {
-    url = req.url;
+    url = req.url; // eslint-disable-line
   }
 
   const params = getUrlParams(url);
@@ -74,20 +74,18 @@ export function getRule(req, res, u) {
 export function postRule(req, res, u, b) {
   let url = u;
   if (!url || Object.prototype.toString.call(url) !== '[object String]') {
-    url = req.url;
+    url = req.url; // eslint-disable-line
   }
 
   const body = (b && b.body) || req.body;
-  const method = body.method;
+  const { method, no, description } = body;
 
   switch (method) {
     /* eslint no-case-declarations:0 */
     case 'delete':
-      const no = body.no;
       tableListDataSource = tableListDataSource.filter(item => no.indexOf(item.no) === -1);
       break;
     case 'post':
-      const description = body.description;
       const i = Math.ceil(Math.random() * 10000);
       tableListDataSource.unshift({
         key: i,

mock/utils.js

@@ -12,7 +12,7 @@ export function getUrlParams(url) {
   let queryString = url ? url.split('?')[1] : window.location.search.slice(1);
   const obj = {};
   if (queryString) {
-    queryString = queryString.split('#')[0];
+    queryString = queryString.split('#')[0]; // eslint-disable-line
     const arr = queryString.split('&');
     for (let i = 0; i < arr.length; i += 1) {
       const a = arr[i].split('=');

package.json

@@ -9,6 +9,7 @@
     "site": "roadhog-api-doc static",
     "lint:style": "stylelint \"src/**/*.less\" --syntax less",
     "lint": "eslint --ext .js src mock tests && npm run lint:style",
+    "lint:fix": "eslint --fix --ext .js src mock tests && npm run lint:style",
     "test": "jest",
     "test:all": "node ./tests/run-tests.js"
   },
@@ -36,11 +37,11 @@
     "babel-runtime": "^6.9.2",
     "cross-port-killer": "^1.0.1",
     "enzyme": "^2.9.1",
-    "eslint": "^3.0.0",
-    "eslint-config-airbnb": "^15.0.0",
+    "eslint": "^4.0.0",
+    "eslint-config-airbnb": "^16.0.0",
     "eslint-plugin-babel": "^4.0.0",
     "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^5.0.1",
+    "eslint-plugin-jsx-a11y": "^6.0.0",
     "eslint-plugin-markdown": "^1.0.0-beta.6",
     "eslint-plugin-react": "^7.0.1",
     "gh-pages": "^1.0.0",

src/common/nav.js

@@ -34,7 +34,7 @@ import RegisterResult from '../routes/User/RegisterResult';
 
 const data = [{
   component: BasicLayout,
-  name: '首页',  // for breadcrumb
+  name: '首页', // for breadcrumb
   path: '',
   children: [{
     name: 'Dashboard',

src/components/Charts/Bar/index.js

@@ -34,7 +34,7 @@ class Bar extends PureComponent {
     // clean
     this.node.innerHTML = '';
 
-    const Frame = G2.Frame;
+    const { Frame } = G2;
     const frame = new Frame(data);
 
     const chart = new G2.Chart({

src/components/Charts/ChartCard/index.js

@@ -23,9 +23,11 @@ const ChartCard = ({ contentHeight, title, action, total, footer, children, ...r
         </div>
       </div>
       {
-        footer && <div className={styles.footer}>
-          {footer}
-        </div>
+        footer && (
+          <div className={styles.footer}>
+            {footer}
+          </div>
+        )
       }
     </div>
   </Card>

src/components/Charts/Gauge/index.js

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import G2 from 'g2';
 import equal from '../equal';
 
-const Shape = G2.Shape;
+const { Shape } = G2;
 
 /* eslint no-underscore-dangle: 0 */
 class Gauge extends PureComponent {
@@ -75,7 +75,7 @@ class Gauge extends PureComponent {
           },
         });
 
-        const origin = cfg.origin;
+        const { origin } = cfg;
         group.addShape('text', {
           attrs: {
             x: center.x,

src/components/Charts/MiniBar/index.js

@@ -34,7 +34,7 @@ class MiniBar extends PureComponent {
     // clean
     this.node.innerHTML = '';
 
-    const Frame = G2.Frame;
+    const { Frame } = G2;
     const frame = new Frame(data);
 
     const chart = new G2.Chart({

src/components/Charts/NumberInfo/index.js

@@ -20,12 +20,12 @@ export default ({ theme, title, subTitle, total, subTotal, status, ...rest }) =>
     <div>
       <span>{total}</span>
       {
-        (status || subTotal) && <span className={styles.subTotal}>
-          {
-            status && <Icon type={`caret-${status}`} />
-          }
-          {subTotal}
-        </span>
+        (status || subTotal) && (
+          <span className={styles.subTotal}>
+            {status && <Icon type={`caret-${status}`} />}
+            {subTotal}
+          </span>
+        )
       }
     </div>
   </div>

src/components/Charts/Pie/index.js

@@ -38,7 +38,7 @@ class Pie extends Component {
     const newItem = item;
     newItem.checked = !newItem.checked;
 
-    const legendData = this.state.legendData;
+    const { legendData } = this.state;
     legendData[i] = newItem;
 
     if (this.chart) {
@@ -59,7 +59,7 @@ class Pie extends Component {
       margin, percent, color,
       inner = 0.75,
       animate = true,
-      } = this.props;
+    } = this.props;
 
     let selected = this.props.selected || true;
     let tooltip = this.props.tooltips || true;
@@ -109,7 +109,7 @@ class Pie extends Component {
     // clean
     this.node.innerHTML = '';
 
-    const Stat = G2.Stat;
+    const { Stat } = G2;
 
     const chart = new G2.Chart({
       container: this.node,
@@ -189,39 +189,43 @@ class Pie extends Component {
           <div className={styles.content}>
             <div ref={this.handleRef} />
             {
-              (subTitle || total) && <div
-                className={styles.total}
-                ref={this.handleTotalRef}
-                style={{ marginLeft: left, opacity: left ? 1 : 0 }}
-              >
-                {
-                  subTitle && <h4>{subTitle}</h4>
-                }
-                {
-                  // eslint-disable-next-line
-                  total && <p dangerouslySetInnerHTML={{ __html: total }} />
-                }
-              </div>
+              (subTitle || total) && (
+                <div
+                  className={styles.total}
+                  ref={this.handleTotalRef}
+                  style={{ marginLeft: left, opacity: left ? 1 : 0 }}
+                >
+                  {
+                    subTitle && <h4>{subTitle}</h4>
+                  }
+                  {
+                    // eslint-disable-next-line
+                    total && <p dangerouslySetInnerHTML={{ __html: total }} />
+                  }
+                </div>
+              )
             }
             {
-              hasLegend && <ul className={styles.legend} style={{ marginTop: mt }}>
-                {
-                  legendData.map((item, i) => (
-                    <li key={item.x} onClick={() => this.handleLegendClick(item, i)}>
-                      <span className={styles.dot} style={{ backgroundColor: !item.checked ? '#aaa' : item.color }} />
-                      <span className={styles.legendTitle}>{item.x}</span>
-                      <span className={styles.line} />
-                      <span className={styles.percent}>{`${(item['..percent'] * 100).toFixed(2)}%`}</span>
-                      <span
-                        className={styles.value}
-                        dangerouslySetInnerHTML={{
-                          __html: valueFormat ? valueFormat(item.y) : item.y,
-                        }}
-                      />
-                    </li>
-                  ))
-                }
-              </ul>
+              hasLegend && (
+                <ul className={styles.legend} style={{ marginTop: mt }}>
+                  {
+                    legendData.map((item, i) => (
+                      <li key={item.x} onClick={() => this.handleLegendClick(item, i)}>
+                        <span className={styles.dot} style={{ backgroundColor: !item.checked ? '#aaa' : item.color }} />
+                        <span className={styles.legendTitle}>{item.x}</span>
+                        <span className={styles.line} />
+                        <span className={styles.percent}>{`${(item['..percent'] * 100).toFixed(2)}%`}</span>
+                        <span
+                          className={styles.value}
+                          dangerouslySetInnerHTML={{
+                            __html: valueFormat ? valueFormat(item.y) : item.y,
+                          }}
+                        />
+                      </li>
+                    ))
+                  }
+                </ul>
+              )
             }
           </div>
         </div>

src/components/Charts/Radar/index.js

@@ -34,7 +34,7 @@ class Radar extends PureComponent {
     const newItem = item;
     newItem.checked = !newItem.checked;
 
-    const legendData = this.state.legendData;
+    const { legendData } = this.state;
     legendData[i] = newItem;
 
     if (this.chart) {
@@ -130,28 +130,30 @@ class Radar extends PureComponent {
           { title && <h4>{title}</h4>}
           <div ref={this.handleRef} />
           {
-            hasLegend && <Row className={styles.legend}>
-              {
-                legendData.map((item, i) => (
-                  <Col
-                    span={(24 / legendData.length)}
-                    key={item.name}
-                    onClick={() => this.handleLegendClick(item, i)}
-                  >
-                    <div className={styles.legendItem}>
-                      <p>
-                        <span className={styles.dot} style={{ backgroundColor: !item.checked ? '#aaa' : item.color }} />
-                        <span>{item.name}</span>
-                      </p>
-                      <h6>{item.value}</h6>
-                      {
-                        i !== (legendData.length - 1) && <div className={styles.split} />
-                      }
-                    </div>
-                  </Col>
-                ))
-              }
-            </Row>
+            hasLegend && (
+              <Row className={styles.legend}>
+                {
+                  legendData.map((item, i) => (
+                    <Col
+                      span={(24 / legendData.length)}
+                      key={item.name}
+                      onClick={() => this.handleLegendClick(item, i)}
+                    >
+                      <div className={styles.legendItem}>
+                        <p>
+                          <span className={styles.dot} style={{ backgroundColor: !item.checked ? '#aaa' : item.color }} />
+                          <span>{item.name}</span>
+                        </p>
+                        <h6>{item.value}</h6>
+                        {
+                          i !== (legendData.length - 1) && <div className={styles.split} />
+                        }
+                      </div>
+                    </Col>
+                  ))
+                }
+              </Row>
+            )
           }
         </div>
       </div>

src/components/Countdown/index.js

@@ -8,10 +8,9 @@ class Countdown extends Component {
   constructor(props) {
     super(props);
 
-    const { targetTime, lastTime } = this.initTime(props);
+    const { lastTime } = this.initTime(props);
 
     this.state = {
-      targetTime,
       lastTime,
     };
   }
@@ -22,10 +21,9 @@ class Countdown extends Component {
 
   componentWillReceiveProps(nextProps) {
     if (this.props.target !== nextProps.target) {
-      const { targetTime, lastTime } = this.initTime(nextProps);
+      const { lastTime } = this.initTime(nextProps);
       this.setState({
         lastTime,
-        targetTime,
       });
     }
   }
@@ -53,7 +51,6 @@ class Countdown extends Component {
 
     return {
       lastTime,
-      targetTime,
     };
   }
   // defaultFormat = time => (

src/components/EditableItem/index.js

@@ -8,7 +8,7 @@ export default class EditableItem extends PureComponent {
     editable: false,
   };
   handleChange = (e) => {
-    const value = e.target.value;
+    const { value } = e.target;
     this.setState({ value });
   }
   check = () => {

src/components/HeaderSearch/index.js

@@ -17,7 +17,7 @@ export default class HeaderSearch extends PureComponent {
   onKeyDown = (e) => {
     if (e.key === 'Enter') {
       this.timeout = setTimeout(() => {
-        this.props.onPressEnter(this.state.value);  // Fix duplicate onPressEnter
+        this.props.onPressEnter(this.state.value); // Fix duplicate onPressEnter
       }, 0);
     }
   }

src/components/PageHeader/index.js

@@ -5,7 +5,7 @@ import { Link } from 'dva/router';
 import classNames from 'classnames';
 import styles from './index.less';
 
-const TabPane = Tabs.TabPane;
+const { TabPane } = Tabs;
 
 function itemRender(route, params, routes, paths) {
   const last = routes.indexOf(route) === routes.length - 1;

src/components/RadioText/index.js

@@ -3,8 +3,8 @@ import { Radio } from 'antd';
 
 import styles from './index.less';
 
-const RadioButton = Radio.Button;
-
-export default props => (<div className={styles.radioText}>
-  <RadioButton {...props} />
-</div>);
+export default props => (
+  <div className={styles.radioText}>
+    <Radio.Button {...props} />
+  </div>
+);

src/components/Result/demo/classic.md

@@ -9,7 +9,7 @@ title: Classic
 import Result from 'ant-design-pro/lib/Result';
 import { Button, Row, Col, Icon, Steps } from 'antd';
 
-const Step = Steps.Step;
+const { Step } = Steps;
 
 const desc1 = (
   <div style={{ fontSize: 14 }}>

src/components/StandardFormRow/index.js

@@ -12,9 +12,11 @@ export default ({ title, children, last, block, grid, ...rest }) => {
   return (
     <div className={cls} {...rest}>
       {
-        title && <div className={styles.label}>
-          <span>{title}</span>
-        </div>
+        title && (
+          <div className={styles.label}>
+            <span>{title}</span>
+          </div>
+        )
       }
       <div className={styles.content}>
         {children}

src/components/StandardTable/index.js

@@ -6,16 +6,13 @@ import styles from './index.less';
 class StandardTable extends PureComponent {
   state = {
     selectedRowKeys: [],
-    selectedRows: [],
     totalCallNo: 0,
-    loading: false,
   };
 
   componentWillReceiveProps(nextProps) {
     // clean state
     if (nextProps.selectedRows.length === 0) {
       this.setState({
-        selectedRows: [],
         selectedRowKeys: [],
         totalCallNo: 0,
       });
@@ -31,7 +28,7 @@ class StandardTable extends PureComponent {
       this.props.onSelectRow(selectedRows);
     }
 
-    this.setState({ selectedRowKeys, selectedRows, totalCallNo });
+    this.setState({ selectedRowKeys, totalCallNo });
   }
 
   handleTableChange = (pagination, filters, sorter) => {

src/components/TagCloud/index.js

@@ -19,8 +19,7 @@ class TagCloud extends PureComponent {
   }
 
   initTagCloud = () => {
-    const Util = G2.Util;
-    const Shape = G2.Shape;
+    const { Util, Shape } = G2;
 
     function getTextAttrs(cfg) {
       const textAttrs = Util.mix(true, {}, {
@@ -131,4 +130,3 @@ class TagCloud extends PureComponent {
 }
 
 export default TagCloud;
-

src/components/TagSelect/index.js

@@ -4,7 +4,7 @@ import { Tag, Icon } from 'antd';
 
 import styles from './index.less';
 
-const CheckableTag = Tag.CheckableTag;
+const { CheckableTag } = Tag;
 
 const TagSelectOption = ({ children, checked, onChange, value }) => (
   <CheckableTag
@@ -40,18 +40,18 @@ class TagSelect extends PureComponent {
   onSelectAll = (checked) => {
     const { onChange } = this.props;
     let checkedTags = [];
-    let expand = this.state.expand;
+    let expanded = this.state.expand;
 
     if (checked) {
       const tags = this.getAllTags();
       checkedTags = tags.list;
-      expand = tags.expand;
+      expanded = tags.expand;
     }
 
     this.setState({
       checkedAll: checked,
       checkedTags,
-      expand,
+      expand: expanded,
     });
 
     if (onChange) {
@@ -60,7 +60,7 @@ class TagSelect extends PureComponent {
   }
 
   getAllTags() {
-    let expand = this.state.expand;
+    let { expand } = this.state;
     const { children } = this.props;
 
     let checkedTags = children.filter(child => child.props.displayName === 'TagSelectOption').map(child => child.props.value);
@@ -138,20 +138,24 @@ class TagSelect extends PureComponent {
           }))
         }
         {
-          expandNode && <a className={styles.trigger} onClick={this.handleExpand}>
-            { expand ? '收起' : '展开'} <Icon type={expand ? 'up' : 'down'} />
-          </a>
+          expandNode && (
+            <a className={styles.trigger} onClick={this.handleExpand}>
+              { expand ? '收起' : '展开'} <Icon type={expand ? 'up' : 'down'} />
+            </a>
+          )
         }
         {
-          expandNode && <div className={expand ? styles.expand : styles.fold}>
-            {
-              expandNode.props.children.map(child => React.cloneElement(child, {
-                key: `tag-select-${child.props.value}`,
-                checked: checkedTags.indexOf(child.props.value) > -1,
-                onChange: this.handleTagChange,
-              }))
-            }
-          </div>
+          expandNode && (
+            <div className={expand ? styles.expand : styles.fold}>
+              {
+                expandNode.props.children.map(child => React.cloneElement(child, {
+                  key: `tag-select-${child.props.value}`,
+                  checked: checkedTags.indexOf(child.props.value) > -1,
+                  onChange: this.handleTagChange,
+                }))
+              }
+            </div>
+          )
         }
       </div>
     );

src/e2e/login.e2e.js

@@ -11,7 +11,7 @@ describe('Login', () => {
     await page.type('#userName', 'mockuser')
       .type('#password', 'wrong_password')
       .click('button[type="submit"]')
-      .wait('.ant-alert-error')  // should display error
+      .wait('.ant-alert-error') // should display error
       .end();
   });
 
@@ -19,7 +19,7 @@ describe('Login', () => {
     const text = await page.type('#userName', 'admin')
       .type('#password', '888888')
       .click('button[type="submit"]')
-      .wait('.ant-layout-sider h1')  // should display error
+      .wait('.ant-layout-sider h1') // should display error
       .evaluate(() => document.body.innerHTML)
       .end();
     expect(text).toContain('<h1>Ant Design Pro</h1>');

src/layouts/BasicLayout.js

@@ -28,9 +28,6 @@ class BasicLayout extends React.PureComponent {
       openKeys: this.getDefaultCollapsedSubMenus(props),
     };
   }
-  state = {
-    mode: 'inline',
-  };
   getChildContext() {
     const { routes, params } = this.props;
     return { routes, params };
@@ -225,10 +222,10 @@ class BasicLayout extends React.PureComponent {
                   placeholder="站内搜索"
                   dataSource={['搜索提示一', '搜索提示二', '搜索提示三']}
                   onSearch={(value) => {
-                    console.log('input', value);  // eslint-disable-line
+                    console.log('input', value); // eslint-disable-line
                   }}
                   onPressEnter={(value) => {
-                    console.log('enter', value);  // eslint-disable-line
+                    console.log('enter', value); // eslint-disable-line
                   }}
                 />
                 <NoticeIcon

src/models/activities.js

@@ -9,7 +9,7 @@ export default {
   },
 
   effects: {
-    *fetchList({ payload }, { call, put }) {
+    *fetchList(_, { call, put }) {
       yield put({
         type: 'changeLoading',
         payload: true,

src/models/chart.js

@@ -16,14 +16,14 @@ export default {
   },
 
   effects: {
-    *fetch({ payload }, { call, put }) {
+    *fetch(_, { call, put }) {
       const response = yield call(fakeChartData);
       yield put({
         type: 'save',
         payload: response,
       });
     },
-    *fetchSalesData({ payload }, { call, put }) {
+    *fetchSalesData(_, { call, put }) {
       const response = yield call(fakeChartData);
       yield put({
         type: 'save',

src/models/global.js

@@ -10,7 +10,7 @@ export default {
   },
 
   effects: {
-    *fetchNotices({ payload }, { call, put }) {
+    *fetchNotices(_, { call, put }) {
       yield put({
         type: 'changeNoticeLoading',
         payload: true,

src/models/login.js

@@ -23,7 +23,7 @@ export default {
         payload: false,
       });
     },
-    *mobileSubmit({ payload }, { call, put }) {
+    *mobileSubmit(_, { call, put }) {
       yield put({
         type: 'changeSubmitting',
         payload: true,

src/models/monitor.js

@@ -8,7 +8,7 @@ export default {
   },
 
   effects: {
-    *fetchTags({ payload }, { call, put }) {
+    *fetchTags(_, { call, put }) {
       const response = yield call(queryTags);
       yield put({
         type: 'saveTags',

src/models/profile.js

@@ -13,7 +13,7 @@ export default {
   },
 
   effects: {
-    *fetchBasic({ payload }, { call, put }) {
+    *fetchBasic(_, { call, put }) {
       yield put({
         type: 'changeLoading',
         payload: { basicLoading: true },
@@ -28,7 +28,7 @@ export default {
         payload: { basicLoading: false },
       });
     },
-    *fetchAdvanced({ payload }, { call, put }) {
+    *fetchAdvanced(_, { call, put }) {
       yield put({
         type: 'changeLoading',
         payload: { advancedLoading: true },

src/models/project.js

@@ -9,7 +9,7 @@ export default {
   },
 
   effects: {
-    *fetchNotice({ payload }, { call, put }) {
+    *fetchNotice(_, { call, put }) {
       yield put({
         type: 'changeLoading',
         payload: true,

src/models/register.js

@@ -8,7 +8,7 @@ export default {
   },
 
   effects: {
-    *submit({ payload }, { call, put }) {
+    *submit(_, { call, put }) {
       yield put({
         type: 'changeSubmitting',
         payload: true,

src/models/user.js

@@ -10,7 +10,7 @@ export default {
   },
 
   effects: {
-    *fetch({ payload }, { call, put }) {
+    *fetch(_, { call, put }) {
       yield put({
         type: 'changeLoading',
         payload: true,
@@ -25,7 +25,7 @@ export default {
         payload: false,
       });
     },
-    *fetchCurrent({ payload }, { call, put }) {
+    *fetchCurrent(_, { call, put }) {
       const response = yield call(queryCurrent);
       yield put({
         type: 'saveCurrentUser',

src/routes/Dashboard/Analysis.js

@@ -10,7 +10,7 @@ import { getTimeDistance } from '../../utils/utils';
 
 import styles from './Analysis.less';
 
-const TabPane = Tabs.TabPane;
+const { TabPane } = Tabs;
 const { RangePicker } = DatePicker;
 
 const rankingListData = [];
@@ -88,7 +88,7 @@ export default class Analysis extends Component {
       salesTypeData,
       salesTypeDataOnline,
       salesTypeDataOffline,
-      } = chart;
+    } = chart;
 
     const salesPieData = salesType === 'all' ?
       salesTypeData
@@ -101,19 +101,21 @@ export default class Analysis extends Component {
       </span>
     );
 
-    const salesExtra = (<div className={styles.salesExtraWrap}>
-      <div className={styles.salesExtra}>
-        <a onClick={() => this.selectDate('today')}>今日</a>
-        <a onClick={() => this.selectDate('week')}>本周</a>
-        <a onClick={() => this.selectDate('month')}>本月</a>
-        <a onClick={() => this.selectDate('year')}>全年</a>
+    const salesExtra = (
+      <div className={styles.salesExtraWrap}>
+        <div className={styles.salesExtra}>
+          <a onClick={() => this.selectDate('today')}>今日</a>
+          <a onClick={() => this.selectDate('week')}>本周</a>
+          <a onClick={() => this.selectDate('month')}>本月</a>
+          <a onClick={() => this.selectDate('year')}>全年</a>
+        </div>
+        <RangePicker
+          value={rangePickerValue}
+          onChange={this.handleRangePickerChange}
+          style={{ width: 256 }}
+        />
       </div>
-      <RangePicker
-        value={rangePickerValue}
-        onChange={this.handleRangePickerChange}
-        style={{ width: 256 }}
-      />
-    </div>);
+    );
 
     const columns = [
       {
@@ -233,10 +235,12 @@ export default class Analysis extends Component {
               title="线上购物转化率"
               action={<Tooltip title="购买效率"><Icon type="exclamation-circle-o" /></Tooltip>}
               total="78%"
-              footer={<Trend>
-                <Trend.Item title="周同比" flag="up">12.3%</Trend.Item>
-                <Trend.Item title="日环比" flag="down">11%</Trend.Item>
-              </Trend>}
+              footer={
+                <Trend>
+                  <Trend.Item title="周同比" flag="up">12.3%</Trend.Item>
+                  <Trend.Item title="日环比" flag="down">11%</Trend.Item>
+                </Trend>
+              }
               contentHeight={46}
             >
               <MiniProgress percent={78} strokeWidth={8} target={80} color="#5DD1DD" />
@@ -420,4 +424,4 @@ export default class Analysis extends Component {
       </div>
     );
   }
-  }
+}

src/routes/Forms/BasicForm.js

@@ -4,7 +4,7 @@ import { Form, Input, DatePicker, Select, Button, Card } from 'antd';
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 
 const FormItem = Form.Item;
-const Option = Select.Option;
+const { Option } = Select;
 const { RangePicker } = DatePicker;
 
 @connect(state => ({

src/routes/Forms/StepForm/Step1.js

@@ -3,7 +3,7 @@ import { Form, Input, Button, Select, Divider } from 'antd';
 import { routerRedux } from 'dva/router';
 import styles from './style.less';
 
-const Option = Select.Option;
+const { Option } = Select;
 
 export default ({ formItemLayout, form, dispatch }) => {
   const { getFieldDecorator, validateFields } = form;

src/routes/Forms/StepForm/index.js

@@ -5,7 +5,7 @@ import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
 import Step1 from './Step1';
 import styles from '../style.less';
 
-const Step = Steps.Step;
+const { Step } = Steps;
 
 @Form.create()
 class StepForm extends PureComponent {

src/routes/List/BasicList.js

@@ -9,7 +9,7 @@ import styles from './BasicList.less';
 
 const RadioButton = Radio.Button;
 const RadioGroup = Radio.Group;
-const Search = Input.Search;
+const { Search } = Input;
 
 @connect(state => ({
   list: state.list,

src/routes/List/CardList.js

@@ -26,7 +26,8 @@ export default class CardList extends PureComponent {
     const content = (
       <div className={styles.pageHeaderContent}>
         <p>段落示意：蚂蚁金服务设计平台-design.alipay.com，用最小的工作量，无缝接入蚂蚁金服生态，
-          提供跨越设计与开发的体验解决方案。</p>
+          提供跨越设计与开发的体验解决方案。
+        </p>
         <div className={styles.contentLink}>
           <a>
             <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/wUTAfuNZjhmCIxEPxQVY.svg" /> 快速开始

src/routes/List/CoverCardList.js

@@ -12,7 +12,7 @@ import SearchInput from '../../components/SearchInput';
 
 import styles from './CoverCardList.less';
 
-const Option = Select.Option;
+const { Option } = Select;
 const FormItem = Form.Item;
 const TagOption = TagSelect.Option;
 const TagExpand = TagSelect.Expand;

src/routes/List/FilterCardList.js

@@ -11,7 +11,7 @@ import SearchInput from '../../components/SearchInput';
 
 import styles from './FilterCardList.less';
 
-const Option = Select.Option;
+const { Option } = Select;
 const FormItem = Form.Item;
 const TagOption = TagSelect.Option;
 const TagExpand = TagSelect.Expand;

src/routes/List/SearchList.js

@@ -10,7 +10,7 @@ import TagSelect from '../../components/TagSelect';
 import SearchInput from '../../components/SearchInput';
 import styles from './SearchList.less';
 
-const Option = Select.Option;
+const { Option } = Select;
 const FormItem = Form.Item;
 const TagOption = TagSelect.Option;
 const TagExpand = TagSelect.Expand;

src/routes/List/TableList.js

@@ -7,7 +7,7 @@ import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 import styles from './TableList.less';
 
 const FormItem = Form.Item;
-const Option = Select.Option;
+const { Option } = Select;
 const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');
 
 @connect(state => ({
@@ -203,39 +203,43 @@ export default class TableList extends PureComponent {
                   </Col>
                 </Row>
                 {
-                  this.state.expandForm && <Row>
-                    <Col md={8} sm={12} xs={24}>
-                      <FormItem {...formItemLayout} label="更新时间">
-                        {getFieldDecorator('updatedAt')(
-                          <DatePicker style={{ width: '100%' }} />
-                        )}
-                      </FormItem>
-                    </Col>
-                    <Col md={8} sm={12} xs={24}>
-                      <FormItem {...formItemLayout} label="调用次数">
-                        {getFieldDecorator('callNo')(
-                          <InputNumber
-                            prefix={<Icon type="right" />}
-                            placeholder="请输入"
-                          />
-                        )}
-                      </FormItem>
-                    </Col>
-                  </Row>
+                  this.state.expandForm && (
+                    <Row>
+                      <Col md={8} sm={12} xs={24}>
+                        <FormItem {...formItemLayout} label="更新时间">
+                          {getFieldDecorator('updatedAt')(
+                            <DatePicker style={{ width: '100%' }} />
+                          )}
+                        </FormItem>
+                      </Col>
+                      <Col md={8} sm={12} xs={24}>
+                        <FormItem {...formItemLayout} label="调用次数">
+                          {getFieldDecorator('callNo')(
+                            <InputNumber
+                              prefix={<Icon type="right" />}
+                              placeholder="请输入"
+                            />
+                          )}
+                        </FormItem>
+                      </Col>
+                    </Row>
+                  )
                 }
               </Form>
             </div>
             <div className={styles.tableListOperator}>
               <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>新建</Button>
               {
-                selectedRows.length > 0 && <span>
-                  <Button>批量操作</Button>
-                  <Dropdown overlay={menu}>
-                    <Button>
-                      更多操作 <Icon type="down" />
-                    </Button>
-                  </Dropdown>
-                </span>
+                selectedRows.length > 0 && (
+                  <span>
+                    <Button>批量操作</Button>
+                    <Dropdown overlay={menu}>
+                      <Button>
+                        更多操作 <Icon type="down" />
+                      </Button>
+                    </Dropdown>
+                  </span>
+                )
               }
             </div>
             <StandardTable

src/routes/Result/Success.js

@@ -3,7 +3,7 @@ import { Button, Row, Col, Icon, Steps, Card } from 'antd';
 import Result from '../../components/Result';
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 
-const Step = Steps.Step;
+const { Step } = Steps;
 
 const desc1 = (
   <div style={{ fontSize: 14 }}>

src/routes/User/Login.js

@@ -5,7 +5,7 @@ import { Form, Input, Tabs, Button, Icon, Checkbox, Row, Col, Alert } from 'antd
 import styles from './Login.less';
 
 const FormItem = Form.Item;
-const TabPane = Tabs.TabPane;
+const { TabPane } = Tabs;
 
 @connect(state => ({
   login: state.login,

src/routes/User/Register.js

@@ -5,7 +5,7 @@ import { Form, Input, Button, Select, Row, Col, Popover, Progress } from 'antd';
 import styles from './Register.less';
 
 const FormItem = Form.Item;
-const Option = Select.Option;
+const { Option } = Select;
 const InputGroup = Input.Group;
 
 const passwordStatusMap = {
@@ -55,7 +55,7 @@ export default class Register extends Component {
   }
 
   getPasswordStatus = () => {
-    const form = this.props.form;
+    const { form } = this.props;
     const value = form.getFieldValue('password');
     if (value && value.length > 9) {
       return 'ok';
@@ -81,12 +81,12 @@ export default class Register extends Component {
   }
 
   handleConfirmBlur = (e) => {
-    const value = e.target.value;
+    const { value } = e.target;
     this.setState({ confirmDirty: this.state.confirmDirty || !!value });
   }
 
   checkConfirm = (rule, value, callback) => {
-    const form = this.props.form;
+    const { form } = this.props;
     if (value && value !== form.getFieldValue('password')) {
       callback('两次输入的密码不匹配!');
     } else {
@@ -113,7 +113,7 @@ export default class Register extends Component {
       if (value.length < 6) {
         callback('error');
       } else {
-        const form = this.props.form;
+        const { form } = this.props;
         if (value && this.state.confirmDirty) {
           form.validateFields(['confirm'], { force: true });
         }
@@ -123,7 +123,7 @@ export default class Register extends Component {
   }
 
   renderPasswordProgress = () => {
-    const form = this.props.form;
+    const { form } = this.props;
     const value = form.getFieldValue('password');
     const passwordStatus = this.getPasswordStatus();
     return value && value.length ?