Fix Table selection page-jumping issue, close #4779

This commit is contained in:
afc163 2017-02-07 21:09:51 +08:00
parent de185ddc19
commit a585f603d0
3 changed files with 37 additions and 6 deletions

View File

@ -194,17 +194,13 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if ('pagination' in nextProps) { if ('pagination' in nextProps || 'pagination' in this.props) {
this.setState(previousState => { this.setState(previousState => {
const newPagination = assign({}, defaultPagination, previousState.pagination, nextProps.pagination); const newPagination = assign({}, defaultPagination, previousState.pagination, nextProps.pagination);
newPagination.current = newPagination.current || 1; newPagination.current = newPagination.current || 1;
newPagination.pageSize = newPagination.pageSize || 10; newPagination.pageSize = newPagination.pageSize || 10;
return { pagination: nextProps.pagination !== false ? newPagination : {} }; return { pagination: nextProps.pagination !== false ? newPagination : {} };
}); });
} else {
this.setState({
pagination: this.getDefaultPagination(nextProps),
});
} }
if (nextProps.rowSelection && if (nextProps.rowSelection &&
'selectedRowKeys' in nextProps.rowSelection) { 'selectedRowKeys' in nextProps.rowSelection) {

View File

@ -76,7 +76,19 @@ describe('Table.pagination', () => {
); );
}); });
it('should display pagination as prop pagination changed', () => { // https://github.com/ant-design/ant-design/issues/4532
// http://codepen.io/anon/pen/NdGgga?editors=001
it.only('should have pager when change pagination from false to undefined', () => {
const wrapper = mount(createTable({ pagination: false }));
expect(wrapper.find('.ant-pagination')).toHaveLength(0);
wrapper.setProps({ pagination: undefined });
expect(wrapper.find('.ant-pagination')).toHaveLength(1);
expect(wrapper.find('.ant-pagination-item-active')).toHaveLength(1);
});
// https://github.com/ant-design/ant-design/issues/4532
// http://codepen.io/anon/pen/ZLbyjV?editors=001
it('should display pagination as prop pagination change between true and false', () => {
const wrapper = mount(createTable()); const wrapper = mount(createTable());
expect(wrapper.find('.ant-pagination')).toHaveLength(1); expect(wrapper.find('.ant-pagination')).toHaveLength(1);
expect(wrapper.find('.ant-pagination-item')).toHaveLength(2); expect(wrapper.find('.ant-pagination-item')).toHaveLength(2);

View File

@ -26,6 +26,10 @@ describe('Table.rowSelection', () => {
); );
} }
function renderedNames(wrapper) {
return wrapper.find('TableRow').map(row => row.props().record.name);
}
it('select by checkbox', () => { it('select by checkbox', () => {
const wrapper = mount(createTable()); const wrapper = mount(createTable());
const checkboxes = wrapper.find('input'); const checkboxes = wrapper.find('input');
@ -179,4 +183,23 @@ describe('Table.rowSelection', () => {
expect(checkbox.props().disabled).toBe(true); expect(checkbox.props().disabled).toBe(true);
}); });
}); });
// https://github.com/ant-design/ant-design/issues/4779
it('should not switch pagination when select record', () => {
const newData = [];
for (let i = 0; i < 20; i += 1) {
newData.push({
key: i.toString(),
name: i.toString(),
});
}
const wrapper = mount(createTable({
rowSelection: {},
dataSource: newData,
}));
wrapper.find('Pager').last().simulate('click'); // switch to second page
wrapper.find('input').first().simulate('change', { target: { checked: true } });
wrapper.update();
expect(renderedNames(wrapper)).toEqual(['10', '11', '12', '13', '14', '15', '16', '17', '18', '19']);
});
}); });