From cb4be92e6436106cba50ed151a71d0a70e7e2db0 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Thu, 9 May 2019 11:44:30 +0800
Subject: [PATCH 1/2] add disabled

---
 assets/index.less  | 30 +++++++++++++++++++++++-------
 examples/jumper.js | 34 ++++++++++++++++++++++++----------
 now.json           | 11 +++++++++++
 package.json       |  4 +++-
 src/Options.jsx    |  6 +++++-
 src/Pagination.jsx | 15 ++++++++++++---
 6 files changed, 78 insertions(+), 22 deletions(-)
 create mode 100644 now.json

diff --git a/assets/index.less b/assets/index.less
index f9d457f7..5f10c6b5 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -1,5 +1,16 @@
 @prefixClass: rc-pagination;
 
+.disabled-item() {
+  cursor: not-allowed;
+
+  &:hover {
+    border-color: #d9d9d9;
+    a {
+      color: #d9d9d9;
+    }
+  }
+}
+
 .@{prefixClass} {
   font-size: 12px;
   font-family: 'Arial';
@@ -54,13 +65,7 @@
     }
 
     &-disabled {
-      cursor: not-allowed;
-      &:hover {
-        border-color: #d9d9d9;
-        a {
-          color: #d9d9d9;
-        }
-      }
+      .disabled-item();
     }
 
     &-active {
@@ -205,6 +210,17 @@
     a {
       color: #ccc;
     }
+
+    .@{prefixClass}-item,
+    .@{prefixClass}-prev,
+    .@{prefixClass}-next {
+      .disabled-item();
+    }
+
+    .@{prefixClass}-jump-prev,
+    .@{prefixClass}-jump-next {
+      pointer-events: none;
+    }
   }
 
   &-options {
diff --git a/examples/jumper.js b/examples/jumper.js
index 7ccc7f1f..b8eeafad 100644
--- a/examples/jumper.js
+++ b/examples/jumper.js
@@ -17,14 +17,28 @@ function onChange(current, pageSize) {
 }
 
 ReactDOM.render(
-  <Pagination
-    selectComponentClass={Select}
-    showQuickJumper
-    showSizeChanger
-    defaultPageSize={20}
-    defaultCurrent={5}
-    onShowSizeChange={onShowSizeChange}
-    onChange={onChange}
-    total={450}
-  />
+  <div>
+    <Pagination
+      selectComponentClass={Select}
+      showQuickJumper
+      showSizeChanger
+      defaultPageSize={20}
+      defaultCurrent={5}
+      onShowSizeChange={onShowSizeChange}
+      onChange={onChange}
+      total={450}
+    />
+    <br />
+    <Pagination
+      selectComponentClass={Select}
+      showQuickJumper={{ goButton: true }}
+      showSizeChanger
+      defaultPageSize={20}
+      defaultCurrent={5}
+      onShowSizeChange={onShowSizeChange}
+      onChange={onChange}
+      total={450}
+      disabled
+    />
+  </div>
 , document.getElementById('__react-content'));
diff --git a/now.json b/now.json
new file mode 100644
index 00000000..68715170
--- /dev/null
+++ b/now.json
@@ -0,0 +1,11 @@
+{
+  "version": 2,
+  "name": "rc-pagination",
+  "builds": [
+    {
+      "src": "package.json",
+      "use": "@now/static-build",
+      "config": { "distDir": "build" }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 83a1118e..26289b45 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,8 @@
     "saucelabs": "rc-test run saucelabs",
     "test": "rc-test run test",
     "chrome-test": "rc-test run chrome-test",
-    "coverage": "rc-test run coverage"
+    "coverage": "rc-test run coverage",
+    "now-build": "npm run build"
   },
   "devDependencies": {
     "core-js": "^3.0.0",
@@ -67,6 +68,7 @@
   ],
   "dependencies": {
     "babel-runtime": "6.x",
+    "classnames": "^2.2.6",
     "prop-types": "^15.5.7",
     "react-lifecycles-compat": "^3.0.4"
   }
diff --git a/src/Options.jsx b/src/Options.jsx
index 3ac8e89e..c37db9f8 100644
--- a/src/Options.jsx
+++ b/src/Options.jsx
@@ -4,6 +4,7 @@ import KEYCODE from './KeyCode';
 
 class Options extends React.Component {
   static propTypes = {
+    disabled: PropTypes.boolean,
     changeSize: PropTypes.func,
     quickGo: PropTypes.func,
     selectComponentClass: PropTypes.func,
@@ -61,7 +62,7 @@ class Options extends React.Component {
     const {
       pageSize, pageSizeOptions, locale, rootPrefixCls, changeSize,
       quickGo, goButton, selectComponentClass, buildOptionText,
-      selectPrefixCls,
+      selectPrefixCls, disabled,
     } = this.props;
     const { goInputText } = this.state;
     const prefixCls = `${rootPrefixCls}-options`;
@@ -83,6 +84,7 @@ class Options extends React.Component {
 
       changeSelect = (
         <Select
+          disabled={disabled}
           prefixCls={selectPrefixCls}
           showSearch={false}
           className={`${prefixCls}-size-changer`}
@@ -104,6 +106,7 @@ class Options extends React.Component {
             type="button"
             onClick={this.go}
             onKeyUp={this.go}
+            disabled={disabled}
           >
             {locale.jump_to_confirm}
           </button>
@@ -120,6 +123,7 @@ class Options extends React.Component {
         <div className={`${prefixCls}-quick-jumper`}>
           {locale.jump_to}
           <input
+            disabled={disabled}
             type="text"
             value={goInputText}
             onChange={this.handleChange}
diff --git a/src/Pagination.jsx b/src/Pagination.jsx
index 09a58a05..c4fe292b 100644
--- a/src/Pagination.jsx
+++ b/src/Pagination.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import Pager from './Pager';
 import Options from './Options';
@@ -29,7 +30,9 @@ function calculatePage(p, state, props) {
 
 class Pagination extends React.Component {
   static propTypes = {
+    disabled: PropTypes.boolean,
     prefixCls: PropTypes.string,
+    className: PropTypes.string,
     current: PropTypes.number,
     defaultCurrent: PropTypes.number,
     total: PropTypes.number,
@@ -245,8 +248,10 @@ class Pagination extends React.Component {
   }
 
   handleChange = (p) => {
+    const { disabled } = this.props;
+
     let page = p;
-    if (this.isValid(page)) {
+    if (this.isValid(page) && !disabled) {
       const currentPage = calculatePage(undefined, this.state, this.props);
       if (page > currentPage) {
         page = currentPage;
@@ -325,6 +330,8 @@ class Pagination extends React.Component {
   }
 
   render() {
+    const { prefixCls, className, disabled } = this.props;
+
     // When hideOnSinglePage is true and there is only 1 page, hide the pager
     if (this.props.hideOnSinglePage === true && this.props.total <= this.state.pageSize) {
       return null;
@@ -333,7 +340,6 @@ class Pagination extends React.Component {
     const props = this.props;
     const locale = props.locale;
 
-    const prefixCls = props.prefixCls;
     const allPages = calculatePage(undefined, this.state, this.props);
     const pagerList = [];
     let jumpPrev = null;
@@ -604,7 +610,9 @@ class Pagination extends React.Component {
     const nextDisabled = !this.hasNext() || !allPages;
     return (
       <ul
-        className={`${prefixCls} ${props.className}`}
+        className={classNames(prefixCls, className, {
+          [`${prefixCls}-disabled`]: disabled,
+        })}
         style={props.style}
         unselectable="unselectable"
         ref={this.savePaginationNode}
@@ -641,6 +649,7 @@ class Pagination extends React.Component {
           )}
         </li>
         <Options
+          disabled={disabled}
           locale={props.locale}
           rootPrefixCls={prefixCls}
           selectComponentClass={props.selectComponentClass}

From 94e74a8d0fe0510072539a14f2927a7a4c81c1cc Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Thu, 9 May 2019 14:28:45 +0800
Subject: [PATCH 2/2] add test case

---
 README.md                |  1 +
 src/Options.jsx          |  2 +-
 src/Pagination.jsx       |  2 +-
 tests/Pagination.spec.js | 65 ++++++++++++++++++++++++++++++++++++++++
 4 files changed, 68 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 594b3da3..33765858 100644
--- a/README.md
+++ b/README.md
@@ -52,6 +52,7 @@ React.render(<Pagination />, container);
 
 | Parameter        | Description                        | Type          | Default                  |
 |------------------|------------------------------------|---------------|--------------------------|
+| disabled         | disable pagination                 | Bool          | -                        |
 | defaultCurrent   | uncontrolled current page          | Number        | 1                        |
 | current          | current page                       | Number        | undefined                |
 | total            | items total count                  | Number        | 0                        |
diff --git a/src/Options.jsx b/src/Options.jsx
index c37db9f8..5950a899 100644
--- a/src/Options.jsx
+++ b/src/Options.jsx
@@ -4,7 +4,7 @@ import KEYCODE from './KeyCode';
 
 class Options extends React.Component {
   static propTypes = {
-    disabled: PropTypes.boolean,
+    disabled: PropTypes.bool,
     changeSize: PropTypes.func,
     quickGo: PropTypes.func,
     selectComponentClass: PropTypes.func,
diff --git a/src/Pagination.jsx b/src/Pagination.jsx
index c4fe292b..2b8b6339 100644
--- a/src/Pagination.jsx
+++ b/src/Pagination.jsx
@@ -30,7 +30,7 @@ function calculatePage(p, state, props) {
 
 class Pagination extends React.Component {
   static propTypes = {
-    disabled: PropTypes.boolean,
+    disabled: PropTypes.bool,
     prefixCls: PropTypes.string,
     className: PropTypes.string,
     current: PropTypes.number,
diff --git a/tests/Pagination.spec.js b/tests/Pagination.spec.js
index 09972c0b..41ba13ef 100644
--- a/tests/Pagination.spec.js
+++ b/tests/Pagination.spec.js
@@ -838,3 +838,68 @@ describe('data and aria props', () => {
     });
   });
 });
+
+describe('disabled', () => {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(container);
+  });
+
+  it('full pagination', (done) => {
+    ReactDOM.render(
+      <Pagination
+        selectComponentClass={Select}
+        showQuickJumper={{ goButton: true }}
+        showSizeChanger
+        defaultPageSize={20}
+        defaultCurrent={5}
+        total={450}
+        disabled
+      />,
+      container,
+      function () {
+        const pagination = this;
+
+        // Root
+        expect(
+          TestUtils.findRenderedDOMComponentWithClass(
+            pagination,
+            'rc-pagination-disabled'
+          )
+        ).to.be.ok();
+
+        expect(
+          TestUtils.findRenderedDOMComponentWithTag(
+            pagination,
+            'input'
+          )
+        ).to.be.ok();
+
+        expect(
+          TestUtils.findRenderedComponentWithType(
+            pagination,
+            Select,
+          ).props.disabled
+        ).to.be.ok();
+
+        expect(
+          TestUtils.findRenderedDOMComponentWithTag(
+            pagination,
+            'input'
+          ).disabled
+        ).to.be.ok();
+
+        expect(
+          TestUtils.findRenderedDOMComponentWithTag(
+            pagination,
+            'button'
+          ).disabled
+        ).to.be.ok();
+
+        done();
+      },
+    );
+  });
+});