pref: migrate to new lifecycle

Author: orzyyyy

package.json

@@ -1,70 +1,70 @@
-{
-  "name": "rc-pagination",
-  "version": "1.17.3",
-  "description": "pagination ui component for react",
-  "keywords": [
-    "react",
-    "react-component",
-    "react-pagination",
-    "pagination"
-  ],
-  "homepage": "http://github.com/react-component/pagination",
-  "author": "i@xiaoba.me",
-  "repository": {
-    "type": "git",
-    "url": "git@github.com:react-component/pagination.git"
-  },
-  "bugs": {
-    "url": "http://github.com/react-component/pagination/issues"
-  },
-  "license": "MIT",
-  "files": [
-    "dist",
-    "lib",
-    "es",
-    "assets/*.css"
-  ],
-  "main": "lib/index",
-  "module": "es/index",
-  "config": {
-    "port": 3000,
-    "entry": {
-      "rc-pagination": [
-        "./src/index.js",
-        "./assets/index.less"
-      ]
-    }
-  },
-  "scripts": {
-    "dist": "rc-tools run dist",
-    "build": "rc-tools run build",
-    "compile": "rc-tools run compile --babel-runtime",
-    "gh-pages": "rc-tools run gh-pages",
-    "start": "rc-tools run server",
-    "pub": "rc-tools run pub --babel-runtime",
-    "lint": "rc-tools run lint",
-    "lint:fix": "rc-tools run lint --fix",
-    "karma": "rc-test run karma",
-    "saucelabs": "rc-test run saucelabs",
-    "test": "rc-test run test",
-    "chrome-test": "rc-test run chrome-test",
-    "coverage": "rc-test run coverage"
-  },
-  "devDependencies": {
-    "core-js": "^2.5.1",
-    "expect.js": "0.3.x",
-    "pre-commit": "1.x",
-    "rc-select": "6.x",
-    "rc-test": "^6.0.1",
-    "rc-tools": "6.x",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
-  },
-  "pre-commit": [
-    "lint"
-  ],
-  "dependencies": {
-    "babel-runtime": "6.x",
-    "prop-types": "^15.5.7"
-  }
-}
+{
+  "name": "rc-pagination",
+  "version": "1.17.3",
+  "description": "pagination ui component for react",
+  "keywords": [
+    "react",
+    "react-component",
+    "react-pagination",
+    "pagination"
+  ],
+  "homepage": "http://github.com/react-component/pagination",
+  "author": "i@xiaoba.me",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:react-component/pagination.git"
+  },
+  "bugs": {
+    "url": "http://github.com/react-component/pagination/issues"
+  },
+  "license": "MIT",
+  "files": [
+    "dist",
+    "lib",
+    "es",
+    "assets/*.css"
+  ],
+  "main": "lib/index",
+  "module": "es/index",
+  "config": {
+    "port": 3000,
+    "entry": {
+      "rc-pagination": [
+        "./src/index.js",
+        "./assets/index.less"
+      ]
+    }
+  },
+  "scripts": {
+    "dist": "rc-tools run dist",
+    "build": "rc-tools run build",
+    "compile": "rc-tools run compile --babel-runtime",
+    "gh-pages": "rc-tools run gh-pages",
+    "start": "rc-tools run server",
+    "pub": "rc-tools run pub --babel-runtime",
+    "lint": "rc-tools run lint",
+    "lint:fix": "rc-tools run lint --fix",
+    "karma": "rc-test run karma",
+    "saucelabs": "rc-test run saucelabs",
+    "test": "rc-test run test",
+    "chrome-test": "rc-test run chrome-test",
+    "coverage": "rc-test run coverage"
+  },
+  "devDependencies": {
+    "core-js": "^2.5.1",
+    "expect.js": "0.3.x",
+    "pre-commit": "1.x",
+    "rc-select": "6.x",
+    "rc-test": "^6.0.1",
+    "rc-tools": "6.x",
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2"
+  },
+  "pre-commit": [
+    "lint"
+  ],
+  "dependencies": {
+    "babel-runtime": "6.x",
+    "prop-types": "^15.5.7"
+  }
+}

src/Pagination.jsx

@@ -18,6 +18,14 @@ function defaultItemRender(page, type, element) {
   return element;
 }
 
+function calculatePage(p, state, props) {
+  let pageSize = p;
+  if (typeof pageSize === 'undefined') {
+    pageSize = state.pageSize;
+  }
+  return Math.floor((props.total - 1) / pageSize) + 1;
+}
+
 export default class Pagination extends React.Component {
   static propTypes = {
     prefixCls: PropTypes.string,
@@ -93,28 +101,6 @@ export default class Pagination extends React.Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
-    if ('current' in nextProps) {
-      this.setState({
-        current: nextProps.current,
-        currentInputValue: nextProps.current,
-      });
-    }
-
-    if ('pageSize' in nextProps) {
-      const newState = {};
-      let current = this.state.current;
-      const newCurrent = this.calculatePage(nextProps.pageSize);
-      current = current > newCurrent ? newCurrent : current;
-      if (!('current' in nextProps)) {
-        newState.current = current;
-        newState.currentInputValue = current;
-      }
-      newState.pageSize = nextProps.pageSize;
-      this.setState(newState);
-    }
-  }
-
   componentDidUpdate(prevProps, prevState) {
     // When current page change, fix focused style of prev item
     // A hacky solution of https://github.com/ant-design/ant-design/issues/8948
@@ -129,12 +115,40 @@ export default class Pagination extends React.Component {
     }
   }
 
+  static getDerivedStateFromProps(props, state) {
+    let newState = {};
+
+    if ('current' in props) {
+      newState = {
+        current: props.current,
+        currentInputValue: props.current,
+      };
+    }
+
+    if ('pageSize' in props) {
+      let current = state.current;
+      const newCurrent = calculatePage(props.pageSize, state, props);
+      current = current > newCurrent ? newCurrent : current;
+
+      if (!('current' in props)) {
+        newState.current = current;
+        newState.currentInputValue = current;
+      }
+      newState.pageSize = props.pageSize;
+    }
+
+    return newState;
+  }
+
   getJumpPrevPage = () => {
     return Math.max(1, this.state.current - (this.props.showLessItems ? 3 : 5));
   }
 
   getJumpNextPage = () => {
-    return Math.min(this.calculatePage(), this.state.current + (this.props.showLessItems ? 3 : 5));
+    return Math.min(
+      calculatePage(undefined, this.state, this.props),
+      this.state.current + (this.props.showLessItems ? 3 : 5)
+    );
   }
 
   /**
@@ -156,14 +170,6 @@ export default class Pagination extends React.Component {
     this.paginationNode = node;
   }
 
-  calculatePage = (p) => {
-    let pageSize = p;
-    if (typeof pageSize === 'undefined') {
-      pageSize = this.state.pageSize;
-    }
-    return Math.floor((this.props.total - 1) / pageSize) + 1;
-  }
-
   isValid = (page) => {
     return isInteger(page) && page >= 1 && page !== this.state.current;
   }
@@ -204,7 +210,7 @@ export default class Pagination extends React.Component {
 
   changePageSize = (size) => {
     let current = this.state.current;
-    const newCurrent = this.calculatePage(size);
+    const newCurrent = calculatePage(size, this.state, this.props);
     current = current > newCurrent ? newCurrent : current;
     // fix the issue:
     // Once 'total' is 0, 'current' in 'onShowSizeChange' is 0, which is not correct.
@@ -231,8 +237,9 @@ export default class Pagination extends React.Component {
   handleChange = (p) => {
     let page = p;
     if (this.isValid(page)) {
-      if (page > this.calculatePage()) {
-        page = this.calculatePage();
+      const currentPage = calculatePage(undefined, this.state, this.props);
+      if (page > currentPage) {
+        page = currentPage;
       }
 
       if (!('current' in this.props)) {
@@ -276,7 +283,7 @@ export default class Pagination extends React.Component {
   }
 
   hasNext = () => {
-    return this.state.current < this.calculatePage();
+    return this.state.current < calculatePage(undefined, this.state, this.props);
   }
 
   runIfEnter = (event, callback, ...restParams) => {
@@ -317,7 +324,7 @@ export default class Pagination extends React.Component {
     const locale = props.locale;
 
     const prefixCls = props.prefixCls;
-    const allPages = this.calculatePage();
+    const allPages = calculatePage(undefined, this.state, this.props);
     const pagerList = [];
     let jumpPrev = null;
     let jumpNext = null;