div to fragment (#883)

* div to fragment * Remove extra divs * fix indent
8 years ago · 3c18317cde
14 changed files with 117 additions and 110 deletions
--- a/src/components/Charts/Radar/index.js
+++ b/src/components/Charts/Radar/index.js
@ -60,7 +60,9 @@ export default class Radar extends Component {
    const { legendData } = this.state;
    legendData[i] = newItem;

-    const filteredLegendData = legendData.filter(l => l.checked).map(l => l.name);
+    const filteredLegendData = legendData
+      .filter(l => l.checked)
+      .map(l => l.name);

    if (this.chart) {
      this.chart.filter('name', val => filteredLegendData.indexOf(val) > -1);
@ -109,71 +111,76 @@ export default class Radar extends Component {

    return (
      <div className={styles.radar} style={{ height }}>
-        <div>
-          {title && <h4>{title}</h4>}
-          <Chart
-            scale={scale}
-            height={chartHeight}
-            forceFit={forceFit}
-            data={data}
-            padding={padding}
-            animate={animate}
-            onGetG2Instance={this.getG2Instance}
-          >
-            <Tooltip />
-            <Coord type="polar" />
-            <Axis
-              name="label"
-              line={null}
-              tickLine={null}
-              grid={{
-                lineStyle: {
-                  lineDash: null,
-                },
-                hideFirstLine: false,
-              }}
-            />
-            <Axis
-              name="value"
-              grid={{
-                type: 'polygon',
-                lineStyle: {
-                  lineDash: null,
-                },
-              }}
-            />
-            <Geom type="line" position="label*value" color={['name', colors]} size={1} />
-            <Geom
-              type="point"
-              position="label*value"
-              color={['name', colors]}
-              shape="circle"
-              size={3}
-            />
-          </Chart>
-          {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>
-                  </div>
-                </Col>
-              ))}
-            </Row>
-          )}
-        </div>
+        {title && <h4>{title}</h4>}
+        <Chart
+          scale={scale}
+          height={chartHeight}
+          forceFit={forceFit}
+          data={data}
+          padding={padding}
+          animate={animate}
+          onGetG2Instance={this.getG2Instance}
+        >
+          <Tooltip />
+          <Coord type="polar" />
+          <Axis
+            name="label"
+            line={null}
+            tickLine={null}
+            grid={{
+              lineStyle: {
+                lineDash: null,
+              },
+              hideFirstLine: false,
+            }}
+          />
+          <Axis
+            name="value"
+            grid={{
+              type: 'polygon',
+              lineStyle: {
+                lineDash: null,
+              },
+            }}
+          />
+          <Geom
+            type="line"
+            position="label*value"
+            color={['name', colors]}
+            size={1}
+          />
+          <Geom
+            type="point"
+            position="label*value"
+            color={['name', colors]}
+            shape="circle"
+            size={3}
+          />
+        </Chart>
+        {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>
+                </div>
+              </Col>
+           ))}
+          </Row>
+        )}
      </div>
    );
  }
--- a/src/components/StandardTable/index.js
+++ b/src/components/StandardTable/index.js
@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import { Table, Alert } from 'antd';
 import styles from './index.less';

@ -84,7 +84,7 @@ class StandardTable extends PureComponent {
        <div className={styles.tableAlert}>
          <Alert
            message={(
-              <div>
+              <Fragment>
                已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项&nbsp;&nbsp;
                {
                  needTotalList.map(item => (
@ -97,7 +97,7 @@ class StandardTable extends PureComponent {
                  )
                }
                <a onClick={this.cleanSelectedKeys} style={{ marginLeft: 24 }}>清空</a>
-              </div>
+              </Fragment>
            )}
            type="info"
            showIcon
--- a/src/layouts/BasicLayout.js
+++ b/src/layouts/BasicLayout.js
@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Layout, Icon, message } from 'antd';
 import DocumentTitle from 'react-document-title';
@ -222,9 +222,9 @@ class BasicLayout extends React.PureComponent {
                blankTarget: true,
              }]}
              copyright={
-                <div>
+                <Fragment>
                  Copyright <Icon type="copyright" /> 2018 蚂蚁金服体验技术部出品
-                </div>
+                </Fragment>
              }
            />
          </Footer>
--- a/src/layouts/UserLayout.js
+++ b/src/layouts/UserLayout.js
@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { Link, Redirect, Switch, Route } from 'dva/router';
 import DocumentTitle from 'react-document-title';
 import { Icon } from 'antd';
@ -21,7 +21,7 @@ const links = [{
  href: '',
 }];

-const copyright = <div>Copyright <Icon type="copyright" /> 2018 蚂蚁金服体验技术部出品</div>;
+const copyright = <Fragment>Copyright <Icon type="copyright" /> 2018 蚂蚁金服体验技术部出品</Fragment>;

 class UserLayout extends React.PureComponent {
  getPageTitle() {
--- a/src/routes/Dashboard/Analysis.js
+++ b/src/routes/Dashboard/Analysis.js
@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { connect } from 'dva';
 import {
  Row,
@ -241,7 +241,7 @@ export default class Analysis extends Component {
    };

    return (
-      <div>
+      <Fragment>
        <Row gutter={24}>
          <Col {...topColResponsiveProps}>
            <ChartCard
@ -482,7 +482,7 @@ export default class Analysis extends Component {
            ))}
          </Tabs>
        </Card>
-      </div>
+      </Fragment>
    );
  }
 }
--- a/src/routes/Dashboard/Monitor.js
+++ b/src/routes/Dashboard/Monitor.js
@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import { connect } from 'dva';
 import { Row, Col, Card, Tooltip } from 'antd';
 import numeral from 'numeral';
@ -35,7 +35,7 @@ export default class Monitor extends PureComponent {
    const { tags } = monitor;

    return (
-      <div>
+      <Fragment>
        <Row gutter={24}>
          <Col xl={18} lg={24} md={24} sm={24} xs={24} style={{ marginBottom: 24 }}>
            <Card title="活动实时交易情况" bordered={false}>
@ -164,7 +164,7 @@ export default class Monitor extends PureComponent {
            </Card>
          </Col>
        </Row>
-      </div>
+      </Fragment>
    );
  }
 }
--- a/src/routes/Forms/StepForm/Step1.js
+++ b/src/routes/Forms/StepForm/Step1.js
@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { connect } from 'dva';
 import { Form, Input, Button, Select, Divider } from 'antd';
 import { routerRedux } from 'dva/router';
@ -32,7 +32,7 @@ class Step1 extends React.PureComponent {
      });
    };
    return (
-      <div>
+      <Fragment>
        <Form layout="horizontal" className={styles.stepForm} hideRequiredMark>
          <Form.Item
            {...formItemLayout}
@ -112,7 +112,7 @@ class Step1 extends React.PureComponent {
          <h4>转账到银行卡</h4>
          <p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p>
        </div>
-      </div>
+      </Fragment>
    );
  }
 }
--- a/src/routes/Forms/StepForm/Step3.js
+++ b/src/routes/Forms/StepForm/Step3.js
@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { connect } from 'dva';
 import { Button, Row, Col } from 'antd';
 import { routerRedux } from 'dva/router';
@ -32,14 +32,14 @@ class Step3 extends React.PureComponent {
      </div>
    );
    const actions = (
-      <div>
+      <Fragment>
        <Button type="primary" onClick={onFinish}>
          再转一笔
        </Button>
        <Button>
          查看账单
        </Button>
-      </div>
+      </Fragment>
    );
    return (
      <Result
--- a/src/routes/Forms/StepForm/index.js
+++ b/src/routes/Forms/StepForm/index.js
@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import { Route, Redirect, Switch } from 'dva/router';
 import { Card, Steps } from 'antd';
 import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
@ -25,7 +25,7 @@ export default class StepForm extends PureComponent {
    return (
      <PageHeaderLayout title="分步表单" content="将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。">
        <Card bordered={false}>
-          <div>
+          <Fragment>
            <Steps current={this.getCurrentStep()} className={styles.steps}>
              <Step title="填写转账信息" />
              <Step title="确认转账信息" />
@ -45,7 +45,7 @@ export default class StepForm extends PureComponent {
              <Redirect exact from="/form/step-form" to="/form/step-form/info" />
              <Route render={NotFound} />
            </Switch>
-          </div>
+          </Fragment>
        </Card>
      </PageHeaderLayout>
    );
--- a/src/routes/Forms/TableForm.js
+++ b/src/routes/Forms/TableForm.js
@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import { Table, Button, Input, message, Popconfirm, Divider } from 'antd';
 import styles from './style.less';

@ -203,7 +203,7 @@ export default class TableForm extends PureComponent {
    }];

    return (
-      <div>
+      <Fragment>
        <Table
          loading={this.state.loading}
          columns={columns}
@ -221,7 +221,7 @@ export default class TableForm extends PureComponent {
        >
          新增成员
        </Button>
-      </div>
+      </Fragment>
    );
  }
 }
--- a/src/routes/List/Articles.js
+++ b/src/routes/List/Articles.js
@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import moment from 'moment';
 import { connect } from 'dva';
 import { Form, Card, Select, List, Tag, Icon, Avatar, Row, Col, Button } from 'antd';
@ -99,7 +99,7 @@ export default class SearchList extends Component {
    ) : null;

    return (
-      <div>
+      <Fragment>
        <Card bordered={false}>
          <Form layout="inline">
            <StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}>
@ -230,7 +230,7 @@ export default class SearchList extends Component {
            )}
          />
        </Card>
-      </div>
+      </Fragment>
    );
  }
 }
--- a/src/routes/Profile/AdvancedProfile.js
+++ b/src/routes/Profile/AdvancedProfile.js
@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import Debounce from 'lodash-decorators/debounce';
 import Bind from 'lodash-decorators/bind';
 import { connect } from 'dva';
@ -23,7 +23,7 @@ const menu = (
 );

 const action = (
-  <div>
+  <Fragment>
    <ButtonGroup>
      <Button>操作</Button>
      <Button>操作</Button>
@ -32,7 +32,7 @@ const action = (
      </Dropdown>
    </ButtonGroup>
    <Button type="primary">主操作</Button>
-  </div>
+  </Fragment>
 );

 const extra = (
@ -69,20 +69,20 @@ const tabList = [{

 const desc1 = (
  <div className={classNames(styles.textSecondary, styles.stepDescription)}>
-    <div>
+    <Fragment>
      曲丽丽
      <Icon type="dingding-o" style={{ marginLeft: 8 }} />
-    </div>
+    </Fragment>
    <div>2016-12-12 12:32</div>
  </div>
 );

 const desc2 = (
  <div className={styles.stepDescription}>
-    <div>
+    <Fragment>
      周毛毛
      <Icon type="dingding-o" style={{ color: '#00A0E9', marginLeft: 8 }} />
-    </div>
+    </Fragment>
    <div><a href="">催一下</a></div>
  </div>
 );
--- a/src/routes/Result/Error.js
+++ b/src/routes/Result/Error.js
@ -1,10 +1,10 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { Button, Icon, Card } from 'antd';
 import Result from '../../components/Result';
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';

 const extra = (
-  <div>
+  <Fragment>
    <div style={{ fontSize: 16, color: 'rgba(0, 0, 0, 0.85)', fontWeight: '500', marginBottom: 16 }}>
      您提交的内容有如下错误：
    </div>
@ -16,7 +16,7 @@ const extra = (
      <Icon style={{ color: '#f5222d', marginRight: 8 }} type="close-circle-o" />您的账户还不具备申请资格
      <a style={{ marginLeft: 16 }}>立即升级 <Icon type="right" /></a>
    </div>
-  </div>
+  </Fragment>
 );

 const actions = <Button type="primary">返回修改</Button>;
--- a/src/routes/Result/Success.js
+++ b/src/routes/Result/Success.js
@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { Button, Row, Col, Icon, Steps, Card } from 'antd';
 import Result from '../../components/Result';
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
@ -24,7 +24,7 @@ const desc2 = (
 );

 const extra = (
-  <div>
+  <Fragment>
    <div style={{ fontSize: 16, color: 'rgba(0, 0, 0, 0.85)', fontWeight: '500', marginBottom: 20 }}>
      项目名称
    </div>
@ -48,15 +48,15 @@ const extra = (
      <Step title={<span style={{ fontSize: 14 }}>财务复核</span>} />
      <Step title={<span style={{ fontSize: 14 }}>完成</span>} />
    </Steps>
-  </div>
+  </Fragment>
 );

 const actions = (
-  <div>
+  <Fragment>
    <Button type="primary">返回列表</Button>
    <Button>查看项目</Button>
    <Button>打 印</Button>
-  </div>
+  </Fragment>
 );

 export default () => (