From ec8f808b4df3753e7bc6ef1f5517d547b948945c Mon Sep 17 00:00:00 2001 From: zuiidea Date: Fri, 17 Mar 2017 19:30:39 +0800 Subject: [PATCH] add components DataTable --- .eslintrc | 3 +- package.json | 3 +- src/components/DataTable/DataTable.js | 101 +++++++++++++++++ src/components/DataTable/DataTable.less | 0 src/components/DataTable/package.json | 6 ++ src/components/index.js | 3 + src/components/ui/layer.js | 1 - src/router.js | 8 ++ src/routes/ui/dataTable.js | 138 ++++++++++++++++++++++++ src/theme.js | 3 +- src/utils/menu.js | 4 + src/utils/request.js | 1 - 12 files changed, 266 insertions(+), 5 deletions(-) create mode 100644 src/components/DataTable/DataTable.js create mode 100644 src/components/DataTable/DataTable.less create mode 100644 src/components/DataTable/package.json create mode 100644 src/components/index.js create mode 100644 src/routes/ui/dataTable.js diff --git a/.eslintrc b/.eslintrc index 6098ed7..5cd1493 100644 --- a/.eslintrc +++ b/.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": { diff --git a/package.json b/package.json index f5f14ff..59d6c1c 100644 --- a/package.json +++ b/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", diff --git a/src/components/DataTable/DataTable.js b/src/components/DataTable/DataTable.js new file mode 100644 index 0000000..8b7eda2 --- /dev/null +++ b/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 () + } +} + + +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 diff --git a/src/components/DataTable/DataTable.less b/src/components/DataTable/DataTable.less new file mode 100644 index 0000000..e69de29 diff --git a/src/components/DataTable/package.json b/src/components/DataTable/package.json new file mode 100644 index 0000000..480ec5a --- /dev/null +++ b/src/components/DataTable/package.json @@ -0,0 +1,6 @@ +{ + "name": "table", + "version": "0.0.0", + "private": true, + "main": "./DataTable.js" +} diff --git a/src/components/index.js b/src/components/index.js new file mode 100644 index 0000000..08a94ec --- /dev/null +++ b/src/components/index.js @@ -0,0 +1,3 @@ +import DataTable from './DataTable' + +export { DataTable } diff --git a/src/components/ui/layer.js b/src/components/ui/layer.js index 319253a..bd8d9d3 100644 --- a/src/components/ui/layer.js +++ b/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`) diff --git a/src/router.js b/src/router.js index 187bf0e..276b836 100644 --- a/src/router.js +++ b/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', diff --git a/src/routes/ui/dataTable.js b/src/routes/ui/dataTable.js new file mode 100644 index 0000000..20bf4cc --- /dev/null +++ b/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 (
+ +
+ + + + + + + + + + + + + + + + + + + + + +

Props

+ + +
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: '后面有空加上', + }]} + /> + + + ) + } +} + + +export default DataTablePage diff --git a/src/theme.js b/src/theme.js index 7a97966..34cccac 100644 --- a/src/theme.js +++ b/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', } } diff --git a/src/utils/menu.js b/src/utils/menu.js index ae6e080..6d12eaf 100644 --- a/src/utils/menu.js +++ b/src/utils/menu.js @@ -31,6 +31,10 @@ module.exports = [ key: 'layer', name: 'Layer 弹层', }, + { + key: 'DataTable', + name: 'DataTable 数据表格', + }, ], }, { diff --git a/src/utils/request.js b/src/utils/request.js index 566ff54..930aa8e 100644 --- a/src/utils/request.js +++ b/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