From 30141661c26df717c3113a508fd267070f4c7832 Mon Sep 17 00:00:00 2001 From: zuiidea Date: Mon, 20 Mar 2017 17:45:08 +0800 Subject: [PATCH] update components DataTable --- src/components/DataTable/DataTable.js | 32 ++++++++++++++++++--------- src/routes/ui/dataTable.js | 3 +-- src/theme.js | 1 - 3 files changed, 22 insertions(+), 14 deletions(-) diff --git a/src/components/DataTable/DataTable.js b/src/components/DataTable/DataTable.js index 610f8de..8723384 100644 --- a/src/components/DataTable/DataTable.js +++ b/src/components/DataTable/DataTable.js @@ -7,18 +7,19 @@ import './DataTable.less' class DataTable extends React.Component { constructor (props) { super(props) - const { dataSource, pagination = false } = props + const { dataSource, pagination = { + showSizeChanger: true, + showQuickJumper: true, + showTotal: total => `共 ${total} 条`, + current: 1, + total: 100 }, + } = props this.state = { loading: false, dataSource, fetchData: {}, - pagination: pagination === true ? { - showSizeChanger: true, - showQuickJumper: true, - showTotal: total => `共 ${total} 条`, - current: 1, - total: 100, - } : pagination } + pagination, + } } componentDidMount () { @@ -28,10 +29,19 @@ class DataTable extends React.Component { } componentWillReceiveProps (nextProps) { - if (!lodash.isEqual(nextProps.fetch, this.props.fetch)) { + const staticNextProps = lodash.cloneDeep(nextProps) + delete staticNextProps.columns + const { columns, ...otherProps } = this.props + + if (!lodash.isEqual(staticNextProps, otherProps)) { this.props = nextProps this.fetch() } + + // if (!lodash.isEqual(nextProps.fetch, this.props.fetch)) { + // this.props = nextProps + // this.fetch() + // } } handleTableChange = (pagination, filters, sorter) => { @@ -51,16 +61,16 @@ class DataTable extends React.Component { } fetch = () => { - const { fetch: { url, data, dataKey, ...otherFetch } } = this.props + const { fetch: { url, data, dataKey } } = this.props const { fetchData } = this.state this.setState({ loading: true }) + console.log(data) request(url, { result: 10, data: { ...data, ...fetchData, }, - ...otherFetch, }).then((result) => { const { pagination } = this.state pagination.total = result.total || pagination.total diff --git a/src/routes/ui/dataTable.js b/src/routes/ui/dataTable.js index 20bf4cc..226e619 100644 --- a/src/routes/ui/dataTable.js +++ b/src/routes/ui/dataTable.js @@ -22,6 +22,7 @@ class DataTablePage extends React.Component { 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' }], + pagination: false, } const fetchDataTableProps = { @@ -39,7 +40,6 @@ class DataTablePage extends React.Component { { title: 'Gender', dataIndex: 'gender' }, ], rowKey: 'registered', - pagination: true, } const caseChangeDataTableProps = { @@ -58,7 +58,6 @@ class DataTablePage extends React.Component { { title: 'Gender', dataIndex: 'gender' }, ], rowKey: 'registered', - pagination: true, } return (
diff --git a/src/theme.js b/src/theme.js index 34cccac..4f0bf19 100644 --- a/src/theme.js +++ b/src/theme.js @@ -9,6 +9,5 @@ module.exports = () => { '@menu-dark-bg': '#3e3e3e', '@text-color': '#666', '@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', } }