mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

Make column.sorted be a controlled prop

Browse Source
This commit is contained in:
afc163 2016-03-29 15:03:31 +08:00
parent 5ce99d7c07
commit 6d2b9b249c
2 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/table/demo/reset-filter.md
View File

@ -37,7 +37,7 @@ const App = React.createClass({
filteredValue: {},
sortedValue: {
order: 'descend',
field: 'name',
columnKey: 'name',
},
};
},
@ -63,13 +63,13 @@ const App = React.createClass({
filteredValue: filteredValue.name,
onFilter: (value, record) => record.name.indexOf(value) === 0,
sorter: (a, b) => a.name.length - b.name.length,
sorted: sortedValue.field === 'name' && sortedValue.order,
sorted: sortedValue.columnKey === 'name' && sortedValue.order,
}, {
title: '年龄',
dataIndex: 'age',
key: 'age',
sorter: (a, b) => a.age - b.age,
sorted: sortedValue.field === 'age' && sortedValue.order,
sorted: sortedValue.columnKey === 'age' && sortedValue.order,
}, {
title: '地址',
dataIndex: 'address',
@ -81,7 +81,7 @@ const App = React.createClass({
filteredValue: filteredValue.address,
onFilter: (value, record) => record.address.indexOf(value) === 0,
sorter: (a, b) => a.address.length - b.address.length,
sorted: sortedValue.column.key === 'address' && sortedValue.order,
sorted: sortedValue.columnKey === 'address' && sortedValue.order,
}];
return <Table columns={columns} dataSource={data} onChange={this.handleChange} />;
}

19
components/table/index.jsx
View File

@ -33,7 +33,7 @@ const Table = React.createClass({
selectedRowKeys: this.props.selectedRowKeys || [],
filters: {},
selectionDirty: false,
...this.getSortState(),
...this.getSortStateFromColumns(),
radioIndex: null,
pagination: this.hasPagination() ?
{
@ -114,8 +114,10 @@ const Table = React.createClass({
});
}
if ('columns' in nextProps) {
const sortState = this.getSortState(nextProps.columns);
if (sortState) {
const sortState = this.getSortStateFromColumns(nextProps.columns);
if (sortState && (
sortState.sortColumn !== this.state.sortColumn ||
sortState.sortOrder !== this.state.sortOrder)) {
this.setState(sortState);
}
}
@ -143,7 +145,7 @@ const Table = React.createClass({
return (columns || this.props.columns).filter(col => col.sorted)[0];
},
getSortState(columns) {
getSortStateFromColumns(columns) {
const sortedColumn = this.getSortedColumn(columns);
if (sortedColumn) {
return {
@ -155,7 +157,8 @@ const Table = React.createClass({
getSorterFn() {
const { sortOrder, sortColumn } = this.state;
if (!sortOrder || !sortColumn) {
if (!sortOrder || !sortColumn ||
typeof sortColumn.sorter !== 'function') {
return () => {};
}
return (a, b) => {
@ -186,7 +189,10 @@ const Table = React.createClass({
sortOrder,
sortColumn,
};
this.setState(newState);
// Controlled
if (!this.getSortStateFromColumns()) {
this.setState(newState);
}
this.props.onChange(...this.prepareParamsArguments({ ...this.state, ...newState }));
},
@ -525,6 +531,7 @@ const Table = React.createClass({
sorter.column = state.sortColumn;
sorter.order = state.sortOrder;
sorter.field = state.sortColumn.dataIndex;
sorter.columnKey = this.getColumnKey(state.sortColumn);
}
return [pagination, filters, sorter];
},