Merge 94e74a8 into 37b2e4a

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                        |

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 {

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'));

now.json

@@ -0,0 +1,11 @@
+{
+  "version": 2,
+  "name": "rc-pagination",
+  "builds": [
+    {
+      "src": "package.json",
+      "use": "@now/static-build",
+      "config": { "distDir": "build" }
+    }
+  ]
+}

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"
   }

src/Options.jsx

@@ -4,6 +4,7 @@ import KEYCODE from './KeyCode';
 
 class Options extends React.Component {
   static propTypes = {
+    disabled: PropTypes.bool,
     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}

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.bool,
     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}

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();
+      },
+    );
+  });
+});