react-js-pagination - npm Package Compare versions

Comparing version 2.2.0 to 2.3.0

dist/Pagination.js

@@ -25,2 +25,6 @@ "use strict";
 
+var _classnames = require("classnames");
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -59,7 +63,11 @@
                 itemClass = _props.itemClass,
-                linkClass = _props.linkClass,
                 activeLinkClass = _props.activeLinkClass,
                 disabledClass = _props.disabledClass,
                 hideDisabled = _props.hideDisabled,
-                hideNavigation = _props.hideNavigation;
+                hideNavigation = _props.hideNavigation,
+                linkClass = _props.linkClass,
+                linkClassFirst = _props.linkClassFirst,
+                linkClassPrev = _props.linkClassPrev,
+                linkClassNext = _props.linkClassNext,
+                linkClassLast = _props.linkClassLast;
 
@@ -92,3 +100,3 @@
                 itemClass: itemClass,
-                linkClass: linkClass,
+                linkClass: (0, _classnames2.default)(linkClass, linkClassPrev),
                 disabledClass: disabledClass
@@ -104,3 +112,3 @@ }));
                 itemClass: itemClass,
-                linkClass: linkClass,
+                linkClass: (0, _classnames2.default)(linkClass, linkClassFirst),
                 disabledClass: disabledClass
@@ -116,3 +124,3 @@ }));
                 itemClass: itemClass,
-                linkClass: linkClass,
+                linkClass: (0, _classnames2.default)(linkClass, linkClassNext),
                 disabledClass: disabledClass
@@ -128,3 +136,3 @@ }));
                 itemClass: itemClass,
-                linkClass: linkClass,
+                linkClass: (0, _classnames2.default)(linkClass, linkClassLast),
                 disabledClass: disabledClass
@@ -160,2 +168,5 @@ }));
     firstPageText: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
+    disabledClass: _propTypes2.default.string,
+    hideDisabled: _propTypes2.default.bool,
+    hideNavigation: _propTypes2.default.bool,
     innerClass: _propTypes2.default.string,
@@ -166,5 +177,6 @@ itemClass: _propTypes2.default.string,
     activeLinkClass: _propTypes2.default.string,
-    disabledClass: _propTypes2.default.string,
-    hideDisabled: _propTypes2.default.bool,
-    hideNavigation: _propTypes2.default.bool
+    linkClassFirst: _propTypes2.default.string,
+    linkClassPrev: _propTypes2.default.string,
+    linkClassNext: _propTypes2.default.string,
+    linkClassLast: _propTypes2.default.string
 };
@@ -171,0 +183,0 @@ Pagination.defaultProps = {

package.json

 {
   "name": "react-js-pagination",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Simple, easy to use component for pagination. Compatible with bootstrap paginator stylesheets",
@@ -5,0 +5,0 @@ "main": "./dist/Pagination.js",

README.md

@@ -82,5 +82,9 @@ [![Build Status](https://travis-ci.org/vayser/react-js-pagination.svg?branch=master)](https://travis-ci.org/vayser/react-js-pagination)
 `itemClass` | String | | Default class of the `<li>` tag
-`linkClass` | String | | Default class of the `<a>` tag
 `disabledClass` | String | `disabled` | Class name of the first, previous, next and last `<li>` tags when disabled
 `hideDisabled` | Boolean | `false` | Hide navigation buttons (prev page, next page) if they are disabled.
 `hideNavigation` | Boolean | `false` | Hide navigation buttons (prev page, next page)
+`linkClass` | String | | Default class of the `<a>` tag
+`linkClassFirst` | String | | Class of the first `<a>` tag
+`linkClassPrev` | String | | Class of the previous `<a>` tag
+`linkClassNext` | String | | Class of the next `<a>` tag
+`linkClassLast` | String | | Class of the last `<a>` tag

src/components/Pagination-test.js

@@ -101,3 +101,63 @@ /*eslint-env node, mocha */
     });
+
+    it("assigns linkClassFirst to first link", () => {
+      const wrapper = mount(
+        <Pagination
+          {...props}
+          hideDisabled={false}
+          totalItemsCount={1}
+          linkClass="link"
+          linkClassFirst="first"
+        />
+      );
+
+      expect(wrapper.find("ul").childAt(0).find("a").hasClass("first")).to.be.true;
+      expect(wrapper.find("ul").childAt(1).find("a").hasClass("first")).to.be.false;
+    });
+
+    it("assigns linkClassPrev to prev link", () => {
+      const wrapper = mount(
+        <Pagination
+          {...props}
+          hideDisabled={false}
+          totalItemsCount={80}
+          linkClass="link"
+          linkClassPrev="prev"
+        />
+      );
+
+      expect(wrapper.find("ul").childAt(1).find("a").hasClass("prev")).to.be.true;
+      expect(wrapper.find("ul").childAt(2).find("a").hasClass("prev")).to.be.false;
+    });
+
+    it("assigns linkClassNext to next link", () => {
+      const wrapper = mount(
+        <Pagination
+          {...props}
+          hideDisabled={false}
+          totalItemsCount={80}
+          linkClass="link"
+          linkClassNext="next"
+        />
+      );
+
+      expect(wrapper.find("ul").childAt(7).find("a").hasClass("next")).to.be.true;
+      expect(wrapper.find("ul").childAt(8).find("a").hasClass("next")).to.be.false;
+    });
+
+    it("assigns linkClassLast to last link", () => {
+      const wrapper = mount(
+        <Pagination
+          {...props}
+          hideDisabled={false}
+          totalItemsCount={80}
+          linkClass="link"
+          linkClassLast="last"
+        />
+      );
+
+      expect(wrapper.find("ul").childAt(8).find("a").hasClass("last")).to.be.true;
+      expect(wrapper.find("ul").childAt(7).find("a").hasClass("last")).to.be.false;
+    });
   });
 });

src/components/Pagination.js

@@ -5,2 +5,3 @@ import React, { Component } from "react";
 import Page from "./Page";
+import cx from "classnames";
 
@@ -30,2 +31,5 @@ export default class Pagination extends React.Component {
       ]),
+      disabledClass: PropTypes.string,
+      hideDisabled: PropTypes.bool,
+      hideNavigation: PropTypes.bool,
       innerClass: PropTypes.string,
@@ -36,5 +40,6 @@ itemClass: PropTypes.string,
       activeLinkClass: PropTypes.string,
-      disabledClass: PropTypes.string,
-      hideDisabled: PropTypes.bool,
-      hideNavigation: PropTypes.bool
+      linkClassFirst: PropTypes.string,
+      linkClassPrev: PropTypes.string,
+      linkClassNext: PropTypes.string,
+      linkClassLast: PropTypes.string,
     }
@@ -70,7 +75,11 @@
             itemClass,
-            linkClass,
             activeLinkClass,
             disabledClass,
             hideDisabled,
-            hideNavigation
+            hideNavigation,
+            linkClass,
+            linkClassFirst,
+            linkClassPrev,
+            linkClassNext,
+            linkClassLast
         } = this.props;
@@ -107,3 +116,3 @@
                 itemClass={itemClass}
-                linkClass={linkClass}
+                linkClass={cx(linkClass, linkClassPrev)}
                 disabledClass={disabledClass}
@@ -121,3 +130,3 @@ />
                 itemClass={itemClass}
-                linkClass={linkClass}
+                linkClass={cx(linkClass, linkClassFirst)}
                 disabledClass={disabledClass}
@@ -135,3 +144,3 @@ />
                 itemClass={itemClass}
-                linkClass={linkClass}
+                linkClass={cx(linkClass, linkClassNext)}
                 disabledClass={disabledClass}
@@ -149,3 +158,3 @@ />
                 itemClass={itemClass}
-                linkClass={linkClass}
+                linkClass={cx(linkClass, linkClassLast)}
                 disabledClass={disabledClass}
@@ -152,0 +161,0 @@ />

No alert changes

Improved metrics

Number of lines in readme file

90

increased by4.65%

Worsened metrics

Total package byte prevSize

1624519

decreased by-70.28%

Lines of code

2583

decreased by-35.79%

No dependency changes