fix: wrong select all checkbox displaying when pagination changes (#3904)

components/table/SelectionCheckboxAll.tsx

@@ -18,8 +18,8 @@ export default class SelectionCheckboxAll extends React.Component<SelectionCheck
     super(props);
 
     this.state = {
-      checked: this.getCheckState(),
-      indeterminate: this.getIndeterminateState(),
+      checked: this.getCheckState(props),
+      indeterminate: this.getIndeterminateState(props),
     };
   }
 
@@ -27,6 +27,10 @@ export default class SelectionCheckboxAll extends React.Component<SelectionCheck
     this.subscribe();
   }
 
+  componentWillReceiveProps(nextProps) {
+    this.setCheckState(nextProps);
+  }
+
   componentWillUnmount() {
     if (this.unsubscribe) {
       this.unsubscribe();
@@ -36,14 +40,7 @@ export default class SelectionCheckboxAll extends React.Component<SelectionCheck
   subscribe() {
     const { store } = this.props;
     this.unsubscribe = store.subscribe(() => {
-      const checked = this.getCheckState();
-      const indeterminate = this.getIndeterminateState();
-      if (checked !== this.state.checked) {
-        this.setState({ checked });
-      }
-      if (indeterminate !== this.state.indeterminate) {
-        this.setState({ indeterminate });
-      }
+      this.setCheckState(this.props);
     });
   }
 
@@ -61,8 +58,19 @@ export default class SelectionCheckboxAll extends React.Component<SelectionCheck
     return false;
   }
 
-  getCheckState() {
-    const { store, data } = this.props;
+  setCheckState(props) {
+    const checked = this.getCheckState(props);
+    const indeterminate = this.getIndeterminateState(props);
+    if (checked !== this.state.checked) {
+      this.setState({ checked });
+    }
+    if (indeterminate !== this.state.indeterminate) {
+      this.setState({ indeterminate });
+    }
+  }
+
+  getCheckState(props) {
+    const { store, data } = props;
     let checked;
     if (!data.length) {
       checked = false;
@@ -78,8 +86,8 @@ export default class SelectionCheckboxAll extends React.Component<SelectionCheck
     return checked;
   }
 
-  getIndeterminateState() {
-    const { store, data } = this.props;
+  getIndeterminateState(props) {
+    const { store, data } = props;
     let indeterminate;
     if (!data.length) {
       indeterminate = false;

tests/table/Table.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import createStore from '../../components/table/createStore';
 import Table from '../../components/table';
 import TestUtils from 'react-addons-test-utils';
-import { render } from 'enzyme';
+import { render, mount } from 'enzyme';
 import { renderToJson } from 'enzyme-to-json';
 
 const { Column, ColumnGroup } = Table;
@@ -91,6 +91,49 @@ describe('Table', () => {
       expect(checkboxes[1].disabled).toBe(false);
       expect(checkboxes[2].disabled).toBe(true);
     });
+
+    it('works with pagination', () => {
+      const columns = [{
+        title: 'Name',
+        dataIndex: 'name',
+      }];
+
+      const data = [{
+        id: 0,
+        name: 'Jack',
+      }, {
+        id: 1,
+        name: 'Lucy',
+      }, {
+        id: 3,
+        name: 'Tom',
+      }, {
+        id: 4,
+        name: 'Jerry',
+      }];
+
+      const wrapper = mount(
+        <Table
+          columns={columns}
+          dataSource={data}
+          rowSelection={{}}
+          rowKey="id"
+          pagination={{ pageSize: 2 }}
+        />
+      );
+
+      const checkboxAll = wrapper.find('SelectionCheckboxAll');
+      const pagers = wrapper.find('Pager');
+
+      checkboxAll.find('input').simulate('change', { target: { checked: true } });
+      expect(checkboxAll.node.state).toEqual({ checked: true, indeterminate: false });
+
+      pagers.at(1).simulate('click');
+      expect(checkboxAll.node.state).toEqual({ checked: false, indeterminate: false });
+
+      pagers.at(0).simulate('click');
+      expect(checkboxAll.node.state).toEqual({ checked: true, indeterminate: false });
+    });
   });
 
   describe('JSX style API', () => {