react-js-pagination - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

build.js

 var fs = require("fs");
-var babel = require("babel");
+var babel = require("babel-core");
 var mkdirp = require("mkdirp");
@@ -4,0 +4,0 @@

dist/Page.js

@@ -7,23 +7,23 @@ "use strict";
 
-var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+var _react = require("react");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _react2 = _interopRequireDefault(_react);
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+var _classnames = require("classnames");
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var _classnames2 = _interopRequireDefault(_classnames);
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _react = require("react");
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var _react2 = _interopRequireDefault(_react);
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-var _classnames = require("classnames");
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-var _classnames2 = _interopRequireDefault(_classnames);
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-var Page = (function (_Component) {
+var Page = function (_Component) {
     _inherits(Page, _Component);
@@ -34,45 +34,78 @@
 
-        _get(Object.getPrototypeOf(Page.prototype), "constructor", this).apply(this, arguments);
+        return _possibleConstructorReturn(this, (Page.__proto__ || Object.getPrototypeOf(Page)).apply(this, arguments));
     }
 
     _createClass(Page, [{
+        key: "handleClick",
+        value: function handleClick(e) {
+            var _props = this.props,
+                isDisabled = _props.isDisabled,
+                pageNumber = _props.pageNumber;
+
+            e.preventDefault();
+            if (isDisabled) {
+                return;
+            }
+            this.props.onClick(pageNumber);
+        }
+    }, {
         key: "render",
         value: function render() {
-            var _this = this;
+            var _cx;
 
-            var text = this.props.pageText || this.props.pageNumber;
-            var activeClass = this.props.activeClass || "active";
+            var _props2 = this.props,
+                pageText = _props2.pageText,
+                pageNumber = _props2.pageNumber,
+                activeClass = _props2.activeClass,
+                disabledClass = _props2.disabledClass,
+                isActive = _props2.isActive,
+                isDisabled = _props2.isDisabled;
 
-            if (_react2["default"].isValidElement(text)) {
-                return text;
-            }
 
-            return _react2["default"].createElement(
+            var css = (0, _classnames2.default)((_cx = {}, _defineProperty(_cx, activeClass, isActive), _defineProperty(_cx, disabledClass, isDisabled), _cx));
+
+            return _react2.default.createElement(
                 "li",
-                { className: (0, _classnames2["default"])(_defineProperty({}, activeClass, this.props.isActive)) },
-                _react2["default"].createElement(
+                { className: css, onClick: this.handleClick.bind(this) },
+                _react2.default.createElement(
                     "a",
-                    { onClick: function (e) {
-                            e.preventDefault();
-                            _this.props.onClick(_this.props.pageNumber);
-                        }, href: "#" },
-                    text
+                    { href: "#" },
+                    pageText
                 )
             );
         }
-    }], [{
-        key: "propTypes",
-        value: {
-            pageText: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-            pageNumber: _react.PropTypes.number.isRequired,
-            onClick: _react.PropTypes.func.isRequired,
-            isActive: _react.PropTypes.bool.isRequired
-        },
-        enumerable: true
     }]);
 
     return Page;
-})(_react.Component);
+}(_react.Component);
 
-exports["default"] = Page;
-module.exports = exports["default"];
+Page.propTypes = {
+    pageText: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    pageNumber: _react.PropTypes.number.isRequired,
+    onClick: _react.PropTypes.func.isRequired,
+    isActive: _react.PropTypes.bool.isRequired,
+    isDisabled: _react.PropTypes.bool,
+    activeClass: _react.PropTypes.string,
+    disabledClass: _react.PropTypes.string
+};
+Page.defaultProps = {
+    activeClass: "active",
+    disabledClass: "disabled",
+    isActive: false,
+    isDisabled: false
+};
+var _default = Page;
+exports.default = _default;
+;
+
+var _temp = function () {
+    if (typeof __REACT_HOT_LOADER__ === 'undefined') {
+        return;
+    }
+
+    __REACT_HOT_LOADER__.register(Page, "Page", "src/components/Page.js");
+
+    __REACT_HOT_LOADER__.register(_default, "default", "src/components/Page.js");
+}();
+
+;

dist/Pagination.js

@@ -7,12 +7,4 @@ "use strict";
 
-var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 var _react = require("react");
@@ -30,3 +22,11 @@
 
-var Pagination = (function (_React$Component) {
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Pagination = function (_React$Component) {
     _inherits(Pagination, _React$Component);
@@ -37,3 +37,3 @@
 
-        _get(Object.getPrototypeOf(Pagination.prototype), "constructor", this).apply(this, arguments);
+        return _possibleConstructorReturn(this, (Pagination.__proto__ || Object.getPrototypeOf(Pagination)).apply(this, arguments));
     }
@@ -45,22 +45,25 @@
             var pages = [];
-            var _props = this.props;
-            var itemsCountPerPage = _props.itemsCountPerPage;
-            var pageRangeDisplayed = _props.pageRangeDisplayed;
-            var activePage = _props.activePage;
-            var prevPageText = _props.prevPageText;
-            var nextPageText = _props.nextPageText;
-            var firstPageText = _props.firstPageText;
-            var lastPageText = _props.lastPageText;
-            var totalItemsCount = _props.totalItemsCount;
-            var onChange = _props.onChange;
-            var activeClass = _props.activeClass;
+            var _props = this.props,
+                itemsCountPerPage = _props.itemsCountPerPage,
+                pageRangeDisplayed = _props.pageRangeDisplayed,
+                activePage = _props.activePage,
+                prevPageText = _props.prevPageText,
+                nextPageText = _props.nextPageText,
+                firstPageText = _props.firstPageText,
+                lastPageText = _props.lastPageText,
+                totalItemsCount = _props.totalItemsCount,
+                onChange = _props.onChange,
+                activeClass = _props.activeClass,
+                hideDisabled = _props.hideDisabled;
 
-            var paginationInfo = new _paginator2["default"](itemsCountPerPage, pageRangeDisplayed).build(totalItemsCount, activePage);
 
+            var paginationInfo = new _paginator2.default(itemsCountPerPage, pageRangeDisplayed).build(totalItemsCount, activePage);
+
             if (paginationInfo.first_page !== paginationInfo.last_page) {
                 for (var i = paginationInfo.first_page; i <= paginationInfo.last_page; i++) {
-                    pages.push(_react2["default"].createElement(_Page2["default"], {
+                    pages.push(_react2.default.createElement(_Page2.default, {
                         isActive: i === activePage,
                         key: i,
                         pageNumber: i,
+                        pageText: i + "",
                         onClick: onChange,
@@ -72,32 +75,32 @@ activeClass: activeClass
 
-            paginationInfo.has_previous_page && pages.unshift(_react2["default"].createElement(_Page2["default"], {
-                isActive: false,
+            hideDisabled && !paginationInfo.has_previous_page || pages.unshift(_react2.default.createElement(_Page2.default, {
                 key: "prev" + paginationInfo.previous_page,
                 pageNumber: paginationInfo.previous_page,
                 onClick: onChange,
-                pageText: prevPageText
+                pageText: prevPageText,
+                isDisabled: !paginationInfo.has_previous_page
             }));
 
-            paginationInfo.first_page > 1 && pages.unshift(_react2["default"].createElement(_Page2["default"], {
-                isActive: false,
-                key: 1,
+            hideDisabled && !paginationInfo.has_previous_page || pages.unshift(_react2.default.createElement(_Page2.default, {
+                key: "first",
                 pageNumber: 1,
                 onClick: onChange,
-                pageText: firstPageText
+                pageText: firstPageText,
+                isDisabled: paginationInfo.current_page === paginationInfo.first_page
             }));
 
-            paginationInfo.has_next_page && pages.push(_react2["default"].createElement(_Page2["default"], {
-                isActive: false,
+            hideDisabled && !paginationInfo.has_next_page || pages.push(_react2.default.createElement(_Page2.default, {
                 key: "next" + paginationInfo.next_page,
                 pageNumber: paginationInfo.next_page,
                 onClick: onChange,
-                pageText: nextPageText
+                pageText: nextPageText,
+                isDisabled: !paginationInfo.has_next_page
             }));
 
-            paginationInfo.last_page !== paginationInfo.total_pages && pages.push(_react2["default"].createElement(_Page2["default"], {
-                isActive: false,
-                key: paginationInfo.total_pages,
+            hideDisabled && !paginationInfo.has_next_page || pages.push(_react2.default.createElement(_Page2.default, {
+                key: "last",
                 pageNumber: paginationInfo.total_pages,
                 onClick: onChange,
-                pageText: lastPageText
+                pageText: lastPageText,
+                isDisabled: paginationInfo.current_page === paginationInfo.total_pages
             }));
@@ -111,3 +114,3 @@
             var pages = this.buildPages();
-            return _react2["default"].createElement(
+            return _react2.default.createElement(
                 "ul",
@@ -118,36 +121,45 @@ { className: this.props.innerClass },
         }
-    }], [{
-        key: "propTypes",
-        value: {
-            totalItemsCount: _react.PropTypes.number.isRequired,
-            onChange: _react.PropTypes.func.isRequired,
-            activePage: _react.PropTypes.number,
-            pageRangeDisplayed: _react.PropTypes.number,
-            itemsCountPerPage: _react.PropTypes.number,
-            prevPageText: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-            nextPageText: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-            lastPageText: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-            firstPageText: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-            innerClass: _react.PropTypes.string
-        },
-        enumerable: true
-    }, {
-        key: "defaultProps",
-        value: {
-            itemsCountPerPage: 10,
-            pageRangeDisplayed: 5,
-            activePage: 1,
-            prevPageText: "⟨",
-            firstPageText: "«",
-            nextPageText: "⟩",
-            lastPageText: "»",
-            innerClass: "pagination"
-        },
-        enumerable: true
     }]);
 
     return Pagination;
-})(_react2["default"].Component);
+}(_react2.default.Component);
 
-exports["default"] = Pagination;
-module.exports = exports["default"];
+Pagination.propTypes = {
+    totalItemsCount: _react.PropTypes.number.isRequired,
+    onChange: _react.PropTypes.func.isRequired,
+    activePage: _react.PropTypes.number,
+    itemsCountPerPage: _react.PropTypes.number,
+    pageRangeDisplayed: _react.PropTypes.number,
+    prevPageText: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    nextPageText: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    lastPageText: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    firstPageText: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    innerClass: _react.PropTypes.string,
+    activeClass: _react.PropTypes.string,
+    hideDisabled: _react.PropTypes.bool
+};
+Pagination.defaultProps = {
+    itemsCountPerPage: 10,
+    pageRangeDisplayed: 5,
+    activePage: 1,
+    prevPageText: "⟨",
+    firstPageText: "«",
+    nextPageText: "⟩",
+    lastPageText: "»",
+    innerClass: "pagination"
+};
+var _default = Pagination;
+exports.default = _default;
+;
+
+var _temp = function () {
+    if (typeof __REACT_HOT_LOADER__ === 'undefined') {
+        return;
+    }
+
+    __REACT_HOT_LOADER__.register(Pagination, "Pagination", "src/components/Pagination.js");
+
+    __REACT_HOT_LOADER__.register(_default, "default", "src/components/Pagination.js");
+}();
+
+;

package.json

 {
   "name": "react-js-pagination",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Simple, easy to use component for pagination. Compatible with bootstrap paginator stylesheets",
@@ -13,5 +13,5 @@ "main": "./dist/Pagination.js",
     "start": "node devServer.js",
-    "lint": "eslint src",
-    "test": "karma start --single-run --no-auto-watch",
-    "test:watch": "karma start"
+    "lint": "eslint src/**/*.js",
+    "test": "mocha --compilers js:babel-register --require ./test-setup.js 'src/**/*-test.js'",
+    "test:watch": "mocha -w --compilers js:babel-register --require ./test-setup.js 'src/**/*-test.js'"
   },
@@ -41,7 +41,9 @@ "repository": {
   "devDependencies": {
-    "babel": "^5.8.23",
-    "babel-core": "^5.4.7",
-    "babel-eslint": "^3.1.9",
-    "babel-loader": "^5.1.2",
-    "babel-plugin-react-transform": "^1.1.1",
+    "babel-core": "6.18.2",
+    "babel-eslint": "7.1.1",
+    "babel-loader": "6.2.8",
+    "babel-preset-es2015": "6.18.0",
+    "babel-preset-react": "6.16.0",
+    "babel-preset-stage-0": "^6.16.0",
+    "babel-register": "^6.18.0",
     "bootstrap": "^3.3.5",
@@ -52,4 +54,4 @@ "chai": "^3.5.0",
     "enzyme": "^2.0.0",
-    "eslint": "^1.3.1",
-    "eslint-plugin-react": "^2.7.1",
+    "eslint": "3.10.2",
+    "eslint-plugin-react": "6.7.1",
     "expect": "^1.14.0",
@@ -59,10 +61,2 @@ "express": "^4.13.3",
     "jsdom": "^8.0.4",
-    "karma": "^0.13.21",
-    "karma-chai": "^0.1.0",
-    "karma-cli": "^0.1.2",
-    "karma-jsdom-launcher": "^3.0.0",
-    "karma-mocha": "^0.2.2",
-    "karma-mocha-reporter": "^1.2.2",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^1.7.0",
     "less": "^2.5.3",
@@ -73,5 +67,2 @@ "less-loader": "^2.2.1",
     "react-addons-test-utils": "^0.14.7 || ^15.0.1",
-    "react-transform-catch-errors": "^1.0.0",
-    "react-transform-hmr": "^1.0.0",
-    "redbox-react": "1.2.6",
     "rimraf": "^2.4.3",
@@ -89,5 +80,6 @@ "style-loader": "^0.12.4",
   "dependencies": {
+    "classnames": "^2.2.5",
     "paginator": "^1.0.0",
-    "classnames": "^2.2.5"
+    "react-hot-loader": "^3.0.0-beta.6"
   }
 }

README.md

@@ -27,9 +27,9 @@ # react-js-pagination
   constructor(props) {
-    super();
+    super(props);
     this.state = {
       activePage: 15
     };
-    this.handlePageChange = ::this._handlePageChange;
   }
-  _handlePageChange(pageNumber) {
+
+  handlePageChange(pageNumber) {
     console.log(`active page is ${pageNumber}`);
@@ -40,11 +40,10 @@ this.setState({activePage: pageNumber});
   render() {
-
     return (
       <div>
-        <Pagination 
-          activePage={this.state.activePage} 
-          itemsCountPerPage={10} 
-          totalItemsCount={450} 
+        <Pagination
+          activePage={this.state.activePage}
+          itemsCountPerPage={10}
+          totalItemsCount={450}
           pageRangeDisplayed={5}
-          onChange={this.handlePageChange}
+          onChange={::this.handlePageChange}
         />
@@ -70,11 +69,11 @@ </div>
 `onChange` | Function | | Page change handler. Receive pageNumber as arg
-`acivePage` | Number | `1` | Active page
+`activePage` | Number | `1` | Active page
 `itemsCountPerPage` | Number | `10` | Count of items per  page
 `pageRangeDisplayed` | Number | `5` | Range of pages in paginator, exclude navigation blocks (prev, next, first, last pages)
-`firstPageText` | String / ReactElement | `«` | Text of first page navigation button or whole element
-`lastPageText` | String / ReactElement | `»` | Text of last page navigation button or whole element
-`prevPageText` | String / ReactElement | `⟨` | Text of prev page navigation button or whole element
-`nextPageText` | String / ReactElement | `⟩` | Text of next page navigation button or whole element
+`prevPageText` | String / ReactElement | `⟨` | Text of prev page navigation button
+`firstPageText` | String / ReactElement | `«` | Text of first page navigation button
+`lastPageText` | String / ReactElement | `»` | Text of last page navigation button
+`nextPageText` | String / ReactElement | `⟩` | Text of next page navigation button
 `innerClass` | String | `pagination` | Class name of `<ul>` tag
-`activeClass` | String | `active` | Class name of `<li>` active tag
-
+`activeClass` | String | `active` | Class name of active `<li>` tag
+`hideDisabled` | Boolean | `false` | Hide navigation buttons (prev page, next page) if they are disabled.

src/components/Page-test.js

 /*eslint-env node, mocha */
-import React from "react";
-import expect from "expect";
 import Page from "./Page";
+import {mount, shallow} from "enzyme";
 
 describe("<Page />", () => {
+  const props = {
+    onClick: () => {},
+    pageNumber: 1
+  };
+
   it("renders an li", () => {
-    const context = {
-      ...Page.prototype,
-      props: {
-        pageText: "1",
-        pageNumber: 1,
-        onClick: () => {},
-        isActive: false
-      }
-    };
-    const result = Page.prototype.render.call(context);
-    expect(result.type).toBe("li");
+    const wrapper = shallow(<Page {...props} />);
+    expect(wrapper.find("li")).to.have.length(1);
   });
 
   it("sets the active class if the page is active", () => {
-    const context = {
-      ...Page.prototype,
-      props: {
-        pageText: "1",
-        pageNumber: 1,
-        onClick: () => {},
-        isActive: true
-      }
-    };
-    const result = Page.prototype.render.call(context);
-    expect(result.props.className).toBe("active");
+    const wrapper = mount(<Page {...props} isActive={true} />);
+    expect(wrapper.prop("isActive")).to.be.true;
+    expect(wrapper.find("li").hasClass("active")).to.be.true;
   });
 
+  it("sets the disabled class if the page is disabled", () => {
+    const wrapper = mount(<Page {...props} isDisabled={true} />);
+    expect(wrapper.prop("isDisabled")).to.be.true;
+    expect(wrapper.find("li").hasClass("disabled")).to.be.true;
+  });
+
+  it("is not disabled by default", () => {
+    const wrapper = mount(<Page {...props} />);
+    expect(wrapper.prop("isDisabled")).to.be.false;
+    expect(wrapper.find("li").hasClass("disabled")).to.be.false;
+  });
+
   it("renders an element as a child if passed an one", () => {
     const child = <strong>1</strong>;
-    const context = {
-      ...Page.prototype,
-      props: {
-        pageText: child,
-        pageNumber: 1,
-        onClick: () => {},
-        isActive: false
-      }
-    };
-    const result = Page.prototype.render.call(context);
-    expect(result.type).toBe("strong");
+    const wrapper = mount(<Page {...props} pageText={child} />);
+    expect(wrapper.html()).to.eql("<strong>1</strong>");
   });
 });

src/components/Page.js

@@ -12,20 +12,43 @@ import React, { Component, PropTypes } from "react";
         onClick: PropTypes.func.isRequired,
-        isActive: PropTypes.bool.isRequired
+        isActive: PropTypes.bool.isRequired,
+        isDisabled: PropTypes.bool,
+        activeClass: PropTypes.string,
+        disabledClass: PropTypes.string
     }
 
-    render() {
-        const text = this.props.pageText || this.props.pageNumber;
-        const activeClass = this.props.activeClass || "active";
+    static defaultProps = {
+        activeClass: "active",
+        disabledClass: "disabled",
+        isActive: false,
+        isDisabled: false
+    }
 
-        if (React.isValidElement(text)) {
-            return text;
+    handleClick(e) {
+        const { isDisabled, pageNumber } = this.props;
+        e.preventDefault();
+        if (isDisabled) {
+            return;
         }
+        this.props.onClick(pageNumber);
+    }
 
+    render() {
+        let {
+          pageText,
+          pageNumber,
+          activeClass,
+          disabledClass,
+          isActive,
+          isDisabled,
+        } = this.props;
+
+        const css = cx({
+          [activeClass]: isActive,
+          [disabledClass]: isDisabled
+        });
+
         return (
-            <li className={cx({ [activeClass]: this.props.isActive })}>
-                <a onClick={ (e) => {
-                    e.preventDefault();
-                    this.props.onClick(this.props.pageNumber);
-                }} href="#">
-                    { text }
+            <li className={css} onClick={::this.handleClick}>
+                <a href="#">
+                    { pageText }
                 </a>
@@ -32,0 +55,0 @@ </li>

src/components/Pagination-test.js

 /*eslint-env node, mocha */
-import React from "react";
-import expect, {createSpy} from "expect";
+import {mount, shallow} from "enzyme";
 import Pagination from "./Pagination";
 
 describe("<Pagination />", () => {
-  const spy = createSpy();
-  const context = {
-    ...Pagination.prototype,
-    props: {
-      totalItemsCount: 20,
-      onChange: spy,
-      activePage: 1,
-      pageRangeDisplayed: 10,
-      itemsCountPerPage: 10,
-      prevPageText: "<",
-      nextPageText: ">",
-      lastPageText: ">>",
-      firstPageText: "<<"
-    },
-    onClick: Pagination.prototype.onClick,
-    buildPages: Pagination.prototype.buildPages,
+  const props = {
+    totalItemsCount: 20,
+    onClick: () => {},
+    onChange: () => {}
   };
@@ -27,103 +14,39 @@
     it("renders a UL tag", () => {
-      const result = Pagination.prototype.render.call(context);
-      expect(result.type).toBe("ul");
+      const wrapper = mount(<Pagination {...props} />);
+      expect(wrapper.find("ul")).to.have.length(1);
     });
 
     it("renders the appropriate amount of children", () => {
-      const result = Pagination.prototype.render.call(context);
-      expect(result.props.children.length).toBe(3);
+      const wrapper = mount(<Pagination {...props} />);
+      expect(wrapper.children()).to.have.length(6);
     });
 
-    it("renders the next page link if there is one", () => {
-      const result = Pagination.prototype.render.call(context);
-      expect(result.props.children[result.props.children.length - 1].key).toBe("next2");
+    it("renders the next page link", () => {
+      const wrapper = mount(<Pagination {...props} />);
+      expect(wrapper.childAt(4).text()).to.eql(wrapper.prop("nextPageText"));
     });
 
     it("renders the prev page link if there is one", () => {
-      const newCtx = {
-        ...Pagination.prototype,
-        props: {
-          totalItemsCount: 20,
-          onChange: spy,
-          activePage: 2,
-          pageRangeDisplayed: 10,
-          itemsCountPerPage: 10,
-          prevPageText: "<",
-          nextPageText: ">",
-          lastPageText: ">>",
-          firstPageText: "<<"
-        },
-        onClick: Pagination.prototype.onClick,
-        buildPages: Pagination.prototype.buildPages,
-      };
-      const result = Pagination.prototype.render.call(newCtx);
-      expect(result.props.children[0].key).toBe("prev1");
+      const wrapper = mount(<Pagination {...props} />);
+      expect(wrapper.childAt(1).text()).to.eql(wrapper.prop("prevPageText"));
     });
 
     it("renders the first page link if there is one", () => {
-      const newCtx = {
-        ...Pagination.prototype,
-        props: {
-          totalItemsCount: 30,
-          onChange: spy,
-          activePage: 3,
-          pageRangeDisplayed: 2,
-          itemsCountPerPage: 10,
-          prevPageText: "<",
-          nextPageText: ">",
-          lastPageText: ">>",
-          firstPageText: "<<"
-        },
-        onClick: Pagination.prototype.onClick,
-        buildPages: Pagination.prototype.buildPages,
-      };
-      const result = Pagination.prototype.render.call(newCtx);
-      expect(result.props.children[0].props.pageText).toBe("<<");
+      const wrapper = mount(<Pagination {...props} />);
+      expect(wrapper.childAt(0).text()).to.eql(wrapper.prop("firstPageText"));
     });
 
     it("renders the last page link if there is one", () => {
-      const newCtx = {
-        ...Pagination.prototype,
-        props: {
-          totalItemsCount: 30,
-          onChange: spy,
-          activePage: 1,
-          pageRangeDisplayed: 2,
-          itemsCountPerPage: 10,
-          prevPageText: "<",
-          nextPageText: ">",
-          lastPageText: ">>",
-          firstPageText: "<<"
-        },
-        onClick: Pagination.prototype.onClick,
-        buildPages: Pagination.prototype.buildPages,
-      };
-      const result = Pagination.prototype.render.call(newCtx);
-      const expected = result.props.children[result.props.children.length - 1];
-      expect(expected.props.pageText).toBe(">>");
+      const wrapper = mount(<Pagination {...props} />);
+      expect(wrapper.childAt(5).text()).to.eql(wrapper.prop("lastPageText"));
     });
 
     it("renders class in UL tag", () => {
-      const newCtx = {
-        ...Pagination.prototype,
-        props: {
-          totalItemsCount: 30,
-          onChange: spy,
-          activePage: 3,
-          pageRangeDisplayed: 2,
-          itemsCountPerPage: 10,
-          prevPageText: "<",
-          nextPageText: ">",
-          lastPageText: ">>",
-          firstPageText: "<<",
-          innerClass: "pagination list-inline center-block text-center"
-        },
-        onClick: Pagination.prototype.onClick,
-        buildPages: Pagination.prototype.buildPages,
-      };
-      const result = Pagination.prototype.render.call(newCtx);
-      expect(result.props.className).toBe("pagination list-inline center-block text-center");
+      const wrapper = mount(<Pagination {...props} innerClass="pagination list-inline center-block text-center" />);
+      expect(wrapper.find("ul").hasClass("pagination")).to.be.true;
+      expect(wrapper.find("ul").hasClass("list-inline")).to.be.true;
+      expect(wrapper.find("ul").hasClass("center-block")).to.be.true;
+      expect(wrapper.find("ul").hasClass("text-center")).to.be.true;
     });
-
   });
 });

src/components/Pagination.js

 import React, { Component, PropTypes } from "react";
-import pagiator from "paginator";
+import paginator from "paginator";
 import Page from "./Page";
@@ -10,4 +10,4 @@
       activePage: PropTypes.number,
+      itemsCountPerPage: PropTypes.number,
       pageRangeDisplayed: PropTypes.number,
-      itemsCountPerPage: PropTypes.number,
       prevPageText: PropTypes.oneOfType([
@@ -29,3 +29,5 @@ PropTypes.string,
       ]),
-      innerClass: PropTypes.string
+      innerClass: PropTypes.string,
+      activeClass: PropTypes.string,
+      hideDisabled: PropTypes.bool
     }
@@ -56,6 +58,7 @@
             onChange,
-            activeClass
+            activeClass,
+            hideDisabled
         } = this.props;
 
-        const paginationInfo = new pagiator(itemsCountPerPage, pageRangeDisplayed)
+        const paginationInfo = new paginator(itemsCountPerPage, pageRangeDisplayed)
             .build(totalItemsCount, activePage);
@@ -70,2 +73,3 @@
                         pageNumber={i}
+                        pageText={i + ""}
                         onClick={onChange}
@@ -78,5 +82,4 @@ activeClass={activeClass}
 
-        paginationInfo.has_previous_page && pages.unshift(
+        (hideDisabled && !paginationInfo.has_previous_page) || pages.unshift(
             <Page
-                isActive={false}
                 key={"prev" + paginationInfo.previous_page}
@@ -86,18 +89,18 @@ pageNumber={paginationInfo.previous_page}
                 pageText={prevPageText}
+                isDisabled={!paginationInfo.has_previous_page}
             />
         );
 
-        paginationInfo.first_page > 1 && pages.unshift(
+        (hideDisabled && !paginationInfo.has_previous_page) || pages.unshift(
             <Page
-                isActive={false}
-                key={1}
+                key={"first"}
                 pageNumber={1}
                 onClick={onChange}
                 pageText={firstPageText}
+                isDisabled={paginationInfo.current_page === paginationInfo.first_page}
             />
         );
 
-        paginationInfo.has_next_page && pages.push(
+        (hideDisabled && !paginationInfo.has_next_page) || pages.push(
             <Page
-                isActive={false}
                 key={"next" + paginationInfo.next_page}
@@ -107,12 +110,13 @@ pageNumber={paginationInfo.next_page}
                 pageText={nextPageText}
+                isDisabled={!paginationInfo.has_next_page}
             />
         );
 
-        paginationInfo.last_page !== paginationInfo.total_pages && pages.push(
+        (hideDisabled && !paginationInfo.has_next_page) || pages.push(
             <Page
-                isActive={false}
-                key={paginationInfo.total_pages}
+                key={"last"}
                 pageNumber={paginationInfo.total_pages}
                 onClick={onChange}
                 pageText={lastPageText}
+                isDisabled={paginationInfo.current_page === paginationInfo.total_pages}
             />
@@ -119,0 +123,0 @@ );

src/example/App.js

 import React, { Component } from "react";
-import ReactDOM from "react-dom";
 import Pagination from "../components/Pagination";
-require("bootstrap/less/bootstrap.less");
+import SyntaxHighlighter from "react-syntax-highlighter";
+import { sunburst } from "react-syntax-highlighter/dist/styles";
+import "./App.less";
+import "bootstrap/less/bootstrap.less";
 
-class App extends Component {
+const PER_PAGE = 10;
+const TOTAL_COUNT = 450;
+
+export default class App extends Component {
   constructor(props) {
     super();
     this.state = {
-      activePage: 15
+      activePage: 1
     };
@@ -21,16 +26,175 @@ this.handlePageChange = ::this._handlePageChange;
   render() {
+    const defaultSnippet = `render() {
+  return (
+    <Pagination
+      activePage={this.state.activePage} 
+      itemsCountPerPage={PER_PAGE} 
+      totalItemsCount={TOTAL_COUNT} 
+      onChange={this.handlePageChange}
+    />
+  );
+}`;
+
+    const hideDisabled = `render() {
+  return (
+    <Pagination
+      hideDisabled
+      activePage={this.state.activePage} 
+      itemsCountPerPage={PER_PAGE} 
+      totalItemsCount={TOTAL_COUNT} 
+      onChange={this.handlePageChange}
+    />
+  );
+}`;
+
+    const customRange = `render() {
+  return (
+    <Pagination
+      pageRangeDisplayed={10}
+      activePage={this.state.activePage} 
+      itemsCountPerPage={PER_PAGE} 
+      totalItemsCount={TOTAL_COUNT} 
+      onChange={this.handlePageChange}
+    />
+  );
+}`;
+    const overrideText = `render() {
+  return (
+    <Pagination
+      prevPageText='prev'
+      nextPageText='next'
+      firstPageText='first'
+      lastPageText='last'
+      activePage={this.state.activePage} 
+      itemsCountPerPage={PER_PAGE} 
+      totalItemsCount={TOTAL_COUNT} 
+      onChange={this.handlePageChange}
+    />
+  );
+}`;
+
+    const overrideElement = `render() {
+  return (
+    <Pagination
+      firstPageText={<i className='glyphicon glyphicon-chevron-left'/>}
+      lastPageText={<i className='glyphicon glyphicon-chevron-right'/>}
+      prevPageText={<i className='glyphicon glyphicon-menu-left'/>}
+      nextPageText={<i className='glyphicon glyphicon-menu-right'/>}
+      activePage={this.state.activePage} 
+      itemsCountPerPage={PER_PAGE} 
+      totalItemsCount={TOTAL_COUNT} 
+      onChange={this.handlePageChange}
+    />
+  );
+}`;
+    
     return (
-      <div>
-        <Pagination 
-          activePage={this.state.activePage} 
-          itemsCountPerPage={10} 
-          totalItemsCount={450} 
-          pageRangeDisplayed={5}
-          onChange={this.handlePageChange}
-        />
+      <div className='app'>
+        <div className="panel panel-default">
+          <div className="panel-heading">
+            <a href='#default'>
+              <h4 id='default' class="panel-title">Default</h4>
+            </a>
+          </div>
+          <div className="panel-body">
+            <SyntaxHighlighter language='javascript' style={sunburst}>{defaultSnippet}</SyntaxHighlighter>
+            <div className='text-center'>
+              <Pagination 
+                activePage={this.state.activePage} 
+                itemsCountPerPage={PER_PAGE} 
+                totalItemsCount={TOTAL_COUNT} 
+                onChange={this.handlePageChange}
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="panel panel-default">
+          <div className="panel-heading">
+            <a href='#hide-disabled'>
+              <h4 id='hide-disabled' class="panel-title">Hide disabled</h4>
+            </a>
+          </div>
+          <div className="panel-body">
+            <SyntaxHighlighter language='javascript' style={sunburst}>{hideDisabled}</SyntaxHighlighter>
+            <div className='text-center'>
+              <Pagination 
+                hideDisabled
+                activePage={this.state.activePage} 
+                itemsCountPerPage={PER_PAGE} 
+                totalItemsCount={TOTAL_COUNT} 
+                onChange={this.handlePageChange}
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="panel panel-default">
+          <div className="panel-heading">
+            <a href='#custom-range'>
+              <h4 id='custom-range'>Custom pages range:</h4>
+            </a>
+          </div>
+          <div className="panel-body">
+            <SyntaxHighlighter language='javascript' style={sunburst}>{customRange}</SyntaxHighlighter>
+            <div className='text-center'>
+              <Pagination 
+                pageRangeDisplayed={10}
+                activePage={this.state.activePage} 
+                itemsCountPerPage={PER_PAGE} 
+                totalItemsCount={TOTAL_COUNT} 
+                onChange={this.handlePageChange}
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="panel panel-default">
+          <div className="panel-heading">
+            <a href='#custom-navigation-text'>
+              <h4 id='custom-navigation-text'>Custom navigation texts:</h4>
+            </a>
+          </div>
+          <div className="panel-body">
+            <SyntaxHighlighter language='javascript' style={sunburst}>{overrideText}</SyntaxHighlighter>
+            <div className='text-center'>
+              <Pagination 
+                prevPageText='prev'
+                nextPageText='next'
+                firstPageText='first'
+                lastPageText='last'
+                activePage={this.state.activePage} 
+                itemsCountPerPage={PER_PAGE} 
+                totalItemsCount={TOTAL_COUNT} 
+                onChange={this.handlePageChange}
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="panel panel-default">
+          <div className="panel-heading">
+            <a href='#custom-navigation-elements'>
+              <h4 id='custom-navigation-elements'>Custom navigation elements:</h4>
+            </a>
+          </div>
+          <div className="panel-body">
+            <SyntaxHighlighter language='javascript' style={sunburst}>{overrideElement}</SyntaxHighlighter>
+            <div className='text-center'>
+              <Pagination 
+                firstPageText={<i className='glyphicon glyphicon-chevron-left'/>}
+                lastPageText={<i className='glyphicon glyphicon-chevron-right'/>}
+                prevPageText={<i className='glyphicon glyphicon-menu-left'/>}
+                nextPageText={<i className='glyphicon glyphicon-menu-right'/>}
+                activePage={this.state.activePage} 
+                itemsCountPerPage={PER_PAGE} 
+                totalItemsCount={TOTAL_COUNT} 
+                onChange={this.handlePageChange}
+              />
+            </div>
+          </div>
+        </div>
       </div>
     );
   }
-}
-
-ReactDOM.render(<App />, document.getElementById("root"));
+}

webpack.config.dev.js

@@ -5,6 +5,7 @@ var path = require("path");
 module.exports = {
-  devtool: "eval",
+  devtool: "cheap-module-source-map",
   entry: [
+    "react-hot-loader/patch",
     "webpack-hot-middleware/client",
-    "./src/example/App"
+    "./src/example/index"
   ],
@@ -17,2 +18,3 @@ output: {
   plugins: [
+  new webpack.optimize.OccurenceOrderPlugin(),
     new webpack.HotModuleReplacementPlugin(),
@@ -23,27 +25,18 @@ new webpack.NoErrorsPlugin()
   module: {
-    loaders: [{
-      test: /\.js$/,
-      loader: "babel",
-      include: path.join(__dirname, "src"),
-      query: {
-          stage: 0,
-          plugins: ["react-transform"],
-          extra: {
-          "react-transform": [{
-              "target": "react-transform-hmr",
-              "imports": ["react"],
-              "locals": ["module"]
-          }, {
-              "target": "react-transform-catch-errors",
-              "imports": ["react", "redbox-react"]
-          }]
-        }
+    loaders: [
+      {
+        test: /\.js$/,
+        loader: "babel",
+        include: path.join(__dirname, "src"),
+        exclude: /(node_modules|bower_components)/
+      },
+      {
+        test: /\.less$/,
+        loader: "style!css!less"
+      },
+      {
+        test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: "url-loader?limit=100000"
       }
-    }, {
-      test: /\.less$/,
-      loader: "style!css!less"
-    }, {
-      test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: "url-loader?limit=100000"
-    }]
+    ]
   }
 };

webpack.config.prod.js

@@ -7,3 +7,3 @@ var path = require("path");
   entry: [
-    "./src/example/App"
+    "./src/example/index"
   ],
@@ -29,13 +29,18 @@ output: {
   module: {
-    loaders: [{
-      test: /\.js$/,
-      loaders: ["babel"],
-      include: path.join(__dirname, "src")
-    }, {
-      test: /\.less$/,
-      loader: "style!css!less"
-    }, {
-      test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: "url-loader?limit=100000"
-    }]
+    loaders: [
+      {
+        test: /\.js$/,
+        loader: "babel",
+        include: path.join(__dirname, "src"),
+        exclude: /(node_modules|bower_components)/
+      },
+      {
+        test: /\.less$/,
+        loader: "style!css!less"
+      },
+      {
+        test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: "url-loader?limit=100000"
+      }
+    ]
   }
 };

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5752089

increased by340.82%

Dev dependency count

29

decreased by-23.68%

Number of package files

25

increased by8.7%

Lines of code

4776

increased by164.6%

Worsened metrics

Dependency count

5

increased by25%

Number of lines in readme file

77

decreased by-1.28%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedreact-hot-loader@^3.0.0-beta.6

• + Addeddom-walk@0.1.2(transitive)

• + Addederror-stack-parser@1.3.6(transitive)

• + Addedglobal@4.4.0(transitive)

• + Addedlodash@4.17.21(transitive)

• + Addedmin-document@2.19.0(transitive)

• + Addedprocess@0.11.10(transitive)

• + Addedreact-deep-force-update@2.1.3(transitive)

• + Addedreact-hot-loader@3.1.3(transitive)

• + Addedreact-proxy@3.0.0-alpha.1(transitive)

• + Addedredbox-react@1.6.0(transitive)

• + Addedsource-map@0.5.60.6.1(transitive)

• + Addedsourcemapped-stacktrace@1.1.11(transitive)

• + Addedstackframe@0.3.1(transitive)