add components DataTable

.eslintrc

@@ -18,7 +18,8 @@
     "no-param-reassign": 0,
     "no-restricted-syntax": 0,
     "no-eval": 0,
-    "react/jsx-no-bind": 0
+    "react/jsx-no-bind": 0,
+    "no-unused-vars": [2, { "ignoreRestSiblings": true }],
   },
   "parser": "babel-eslint",
   "parserOptions": {

package.json

@@ -9,6 +9,7 @@
     "dva": "^1.1.0",
     "dva-loading": "^0.2.0",
     "js-cookie": "^2.1.3",
+    "lodash": "^4.17.4",
     "qs": "^6.2.0",
     "react": "^15.4.1",
     "react-countup": "1.3.0",
@@ -29,7 +30,7 @@
     "dora-plugin-proxy": "^0.8.5",
     "dora-plugin-webpack": "^0.8.1",
     "dora-plugin-webpack-hmr": "^0.2.1",
-    "eslint": "^2.13.1",
+    "eslint": "^3.17.1",
     "eslint-config-airbnb": "^9.0.1",
     "eslint-plugin-import": "^1.16.0",
     "eslint-plugin-jsx-a11y": "^1.4.2",

src/components/DataTable/DataTable.js

@@ -0,0 +1,101 @@
+import React, { PropTypes } from 'react'
+import { Table } from 'antd'
+import { request } from '../../utils'
+import lodash from 'lodash'
+import './DataTable.less'
+
+class DataTable extends React.Component {
+  constructor (props) {
+    super(props)
+    const { dataSource, pagination = false } = props
+    this.state = {
+      loading: false,
+      dataSource,
+      fetchData: {},
+      pagination: pagination === true ? {
+        showSizeChanger: true,
+        showQuickJumper: true,
+        showTotal: total => `共 ${total} 条`,
+        current: 1,
+        total: 100,
+      } : pagination }
+  }
+
+  componentDidMount () {
+    if (this.props.fetch) {
+      this.fetch()
+    }
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (!lodash.isEqual(nextProps.fetch, this.props.fetch)) {
+      this.props = nextProps
+      this.fetch()
+    }
+  }
+
+  handleTableChange = (pagination, filters, sorter) => {
+    const pager = this.state.pagination
+    pager.current = pagination.current
+    this.setState({
+      pagination: pager,
+      fetchData: {
+        results: pagination.pageSize,
+        page: pagination.current,
+        sortField: sorter.field,
+        sortOrder: sorter.order,
+        ...filters,
+      },
+    })
+    this.fetch()
+  }
+
+  fetch = () => {
+    const { fetch: { url, data, dataKey } } = this.props
+    const { fetchData } = this.state
+    this.setState({ loading: true })
+    request(url, {
+      result: 10,
+      data: {
+        ...data,
+        ...fetchData,
+      },
+    }).then((result) => {
+      const { pagination } = this.state
+      pagination.total = result.total || pagination.total
+      this.setState({
+        loading: false,
+        dataSource: dataKey ? result[dataKey] : result.data,
+        pagination,
+      })
+    })
+  }
+
+  render () {
+    const { fetch, ...tableProps } = this.props
+    const { loading, dataSource, pagination } = this.state
+
+    return (<Table
+      bordered
+      loading={loading}
+      onChange={this.handleTableChange}
+      {...tableProps}
+      pagination={pagination}
+      dataSource={dataSource}
+    />)
+  }
+}
+
+
+DataTable.propTypes = {
+  fetch: PropTypes.object,
+  rowKey: PropTypes.string,
+  pagination: React.PropTypes.oneOfType([
+    React.PropTypes.bool,
+    React.PropTypes.object,
+  ]),
+  columns: PropTypes.array,
+  dataSource: PropTypes.array,
+}
+
+export default DataTable

src/components/DataTable/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "table",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./DataTable.js"
+}

src/components/index.js

@@ -0,0 +1,3 @@
+import DataTable from './DataTable'
+
+export { DataTable }

src/components/ui/layer.js

@@ -35,7 +35,6 @@ layer.close = (index) => new Promise((resolve, reject) => {
   }
 })
 
-
 layer.closeAll = () => {
   const { prefixCls } = layer
   const references = document.querySelectorAll(`.${prefixCls}-reference`)

src/router.js

@@ -72,6 +72,14 @@ const Routers = function ({ history, app }) {
               cb(null, require('./routes/ui/layer'))
             }, 'ui-layer')
           },
+        }, {
+          path: 'ui/dataTable',
+          name: 'ui/dataTable',
+          getComponent (nextState, cb) {
+            require.ensure([], require => {
+              cb(null, require('./routes/ui/dataTable'))
+            }, 'ui-dataTable')
+          },
         }, {
           path: '*',
           name: 'error',

src/routes/ui/dataTable.js

@@ -0,0 +1,138 @@
+import React from 'react'
+import { DataTable } from '../../components'
+import { Table, Row, Col, Card, Select } from 'antd'
+
+class DataTablePage extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = { filterCase: {
+      gender: '',
+    } }
+  }
+
+  handleSelectChange = (gender) => {
+    this.setState({
+      filterCase: {
+        gender,
+      },
+    })
+  }
+  render () {
+    const { filterCase } = this.state
+    const staticDataTableProps = {
+      dataSource: [{ key: '1', name: 'John Brown', age: 24, address: 'New York' }, { key: '2', name: 'Jim Green', age: 23, address: 'London' }],
+      columns: [{ title: 'name', dataIndex: 'name' }, { title: 'Age', dataIndex: 'age' }, { title: 'Address', dataIndex: 'address' }],
+    }
+
+    const fetchDataTableProps = {
+      fetch: {
+        url: 'https://randomuser.me/api',
+        data: {
+          results: 10,
+          testPrams: 'test',
+        },
+        dataKey: 'results',
+      },
+      columns: [
+        { title: 'Name', dataIndex: 'name', render: (text) => `${text.first} ${text.last}` },
+        { title: 'Phone', dataIndex: 'phone' },
+        { title: 'Gender', dataIndex: 'gender' },
+      ],
+      rowKey: 'registered',
+      pagination: true,
+    }
+
+    const caseChangeDataTableProps = {
+      fetch: {
+        url: 'https://randomuser.me/api',
+        data: {
+          results: 10,
+          testPrams: 'test',
+          ...filterCase,
+        },
+        dataKey: 'results',
+      },
+      columns: [
+        { title: 'Name', dataIndex: 'name', render: (text) => `${text.first} ${text.last}` },
+        { title: 'Phone', dataIndex: 'phone' },
+        { title: 'Gender', dataIndex: 'gender' },
+      ],
+      rowKey: 'registered',
+      pagination: true,
+    }
+
+    return (<div className="content-inner">
+      <Row gutter={32}>
+        <Col lg={12} md={24}>
+          <Card title="默认">
+            <DataTable />
+          </Card>
+        </Col>
+        <Col lg={12} md={24}>
+          <Card title="静态数据">
+            <DataTable
+              {...staticDataTableProps}
+            />
+          </Card>
+        </Col>
+        <Col lg={12} md={24}>
+          <Card title="远程数据">
+            <DataTable
+              {...fetchDataTableProps}
+            />
+          </Card>
+        </Col>
+        <Col lg={12} md={24}>
+          <Card title="条件变化">
+            <Select placeholder="Please select gender" allowClear onChange={this.handleSelectChange} style={{ width: 200, marginBottom: 16 }}>
+              <Select.Option value="male">Male</Select.Option>
+              <Select.Option value="female">Female</Select.Option>
+            </Select>
+            <DataTable
+              {...caseChangeDataTableProps}
+            />
+          </Card>
+        </Col>
+      </Row>
+      <h2 style={{ margin: '16px 0' }}>Props</h2>
+      <Row>
+        <Col lg={18} md={24}>
+          <Table
+            rowKey={(record, key) => key}
+            pagination={false}
+            bordered
+            scroll={{ x: 800 }}
+            columns={[
+              {
+                title: '参数',
+                dataIndex: 'props',
+              },
+              {
+                title: '说明',
+                dataIndex: 'desciption',
+              },
+              {
+                title: '类型',
+                dataIndex: 'type',
+              },
+              {
+                title: '默认值',
+                dataIndex: 'default',
+              },
+            ]}
+            dataSource={[
+              {
+                props: 'fetch',
+                desciption: '远程获取数据的参数',
+                type: 'Object',
+                default: '后面有空加上',
+              }]}
+          />
+        </Col>
+      </Row>
+    </div>)
+  }
+}
+
+
+export default DataTablePage

src/theme.js

@@ -8,6 +8,7 @@ module.exports = () => {
     '@border-color-base': '#e5e5e5',
     '@menu-dark-bg': '#3e3e3e',
     '@text-color': '#666',
-    '@font-family': '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif',
+    '@font-family': '"AvenirNext-Regular", "Helvetica Neue", "lucida grande", "PingFangHK-Light", "STHeiti", "Heiti SC", "Hiragino Sans GB", "Microsoft JhengHei", "Microsoft Yahei", SimHei, "WenQuanYi Micro Hei", "Droid Sans", "Roboto", Helvetica, Tahoma, Arial, "sans-serif"',
+    // '@font-family': '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif',
   }
 }

src/utils/menu.js

@@ -31,6 +31,10 @@ module.exports = [
         key: 'layer',
         name: 'Layer 弹层',
       },
+      {
+        key: 'DataTable',
+        name: 'DataTable 数据表格',
+      },
     ],
   },
   {

src/utils/request.js

@@ -11,7 +11,6 @@ export default function request (url, options) {
     url,
     method: options.method || 'get',
     data: options.data || {},
-    processData: options.method === 'get',
     dataType: 'JSON',
   }).done((data) => {
     return data