react-paginate - npm Package Compare versions

Comparing version 5.3.1 to 6.0.0

__tests__/PaginationBoxView-test.js

@@ -47,7 +47,7 @@ import React from 'react';
 describe('Test clicks', () => {
-  const pagination = ReactTestUtils.renderIntoDocument(
-    <PaginationBoxView />
-  );
+  it('test clicks on previous and next buttons', () => {
+    const pagination = ReactTestUtils.renderIntoDocument(
+      <PaginationBoxView />
+    );
 
-  it('test clicks on previous and next buttons', () => {
     let elmts = ReactTestUtils.scryRenderedDOMComponentsWithTag(pagination, 'a');
@@ -67,2 +67,6 @@ let previous = elmts[0];
   it('test click on a page item', () => {
+    const pagination = ReactTestUtils.renderIntoDocument(
+      <PaginationBoxView />
+    );
+
     ReactTestUtils.findRenderedComponentWithType(pagination, PaginationBoxView);
@@ -76,2 +80,42 @@
   });
+
+  it('test click on the left break view', () => {
+    const pagination = ReactTestUtils.renderIntoDocument(
+      <PaginationBoxView
+        initialPage={0}
+        pageCount={20}
+        marginPagesDisplayed={2}
+        pageRangeDisplayed={5} />
+    );
+
+    // The selected page is before the left break
+    const leftBreakView1 = ReactDOM.findDOMNode(pagination).querySelector(".break a");
+    ReactTestUtils.Simulate.click(leftBreakView1);
+    expect(ReactDOM.findDOMNode(pagination).querySelector(".selected a").textContent).toBe("6");
+
+    // The selected page is after the left break
+    const leftBreakView2 = ReactDOM.findDOMNode(pagination).querySelectorAll(".break a")[0];
+    ReactTestUtils.Simulate.click(leftBreakView2);
+    expect(ReactDOM.findDOMNode(pagination).querySelector(".selected a").textContent).toBe("1");
+  });
+
+  it('test click on the right break view', () => {
+    const pagination = ReactTestUtils.renderIntoDocument(
+      <PaginationBoxView
+        initialPage={10}
+        pageCount={20}
+        marginPagesDisplayed={2}
+        pageRangeDisplayed={5} />
+    );
+
+    // The selected page is before the right break
+    const rightBreak1 = ReactDOM.findDOMNode(pagination).querySelectorAll(".break a")[1];
+    ReactTestUtils.Simulate.click(rightBreak1);
+    expect(ReactDOM.findDOMNode(pagination).querySelector(".selected a").textContent).toBe("16");
+
+    // The selected page is after the right break
+    const rightBreak2 = ReactDOM.findDOMNode(pagination).querySelector(".break a");
+    ReactTestUtils.Simulate.click(rightBreak2);
+    expect(ReactDOM.findDOMNode(pagination).querySelector(".selected a").textContent).toBe("11");
+  });
 });
@@ -475,3 +519,3 @@
         <PaginationBoxView
-          breakLabel={<a href="">...</a>}
+          breakLabel={"..."}
         />
@@ -478,0 +522,0 @@ );

demo/data.js

@@ -0,0 +0,0 @@ 'use strict';

demo/js/demo.js

@@ -73,3 +73,3 @@ import React, { Component } from 'react';
                        nextLabel={"next"}
-                       breakLabel={<a href="">...</a>}
+                       breakLabel={"..."}
                        breakClassName={"break-me"}
@@ -76,0 +76,0 @@ pageCount={this.state.pageCount}

demo/server.js

@@ -0,0 +0,0 @@ 'use strict';

demo/webpack.config.js

@@ -0,0 +0,0 @@ /* global __dirname */

dist/BreakView.js

@@ -16,2 +16,3 @@ 'use strict';
   var className = props.breakClassName || 'break';
+  var onClick = props.onClick;
 
@@ -21,3 +22,10 @@ return _react2.default.createElement(
     { className: className },
-    label
+    _react2.default.createElement(
+      'a',
+      { onClick: onClick,
+        role: 'button',
+        tabIndex: '0',
+        onKeyPress: onClick },
+      label
+    )
   );
@@ -24,0 +32,0 @@ };

dist/PaginationBoxView.js

@@ -72,2 +72,11 @@ 'use strict';
 
+    _this.handleBreakClick = function (index, evt) {
+      evt.preventDefault ? evt.preventDefault() : evt.returnValue = false;
+
+      var selected = _this.state.selected;
+
+
+      _this.handlePageSelected(selected < index ? _this.getForwardJump() : _this.getBackwardJump(), evt);
+    };
+
     _this.callCallback = function (selectedItem) {
@@ -156,3 +165,4 @@ if (typeof _this.props.onPageChange !== "undefined" && typeof _this.props.onPageChange === "function") {
               breakLabel: breakLabel,
-              breakClassName: breakClassName
+              breakClassName: breakClassName,
+              onClick: _this.handleBreakClick.bind(null, _index)
             });
@@ -193,7 +203,29 @@ items.push(breakView);
   }, {
+    key: 'getForwardJump',
+    value: function getForwardJump() {
+      var selected = this.state.selected;
+      var _props2 = this.props,
+          pageCount = _props2.pageCount,
+          pageRangeDisplayed = _props2.pageRangeDisplayed;
+
+
+      var forwardJump = selected + pageRangeDisplayed;
+      return forwardJump >= pageCount ? pageCount - 1 : forwardJump;
+    }
+  }, {
+    key: 'getBackwardJump',
+    value: function getBackwardJump() {
+      var selected = this.state.selected;
+      var pageRangeDisplayed = this.props.pageRangeDisplayed;
+
+
+      var backwardJump = selected - pageRangeDisplayed;
+      return backwardJump < 0 ? 0 : backwardJump;
+    }
+  }, {
     key: 'hrefBuilder',
     value: function hrefBuilder(pageIndex) {
-      var _props2 = this.props,
-          hrefBuilder = _props2.hrefBuilder,
-          pageCount = _props2.pageCount;
+      var _props3 = this.props,
+          hrefBuilder = _props3.hrefBuilder,
+          pageCount = _props3.pageCount;
 
@@ -208,8 +240,8 @@ if (hrefBuilder && pageIndex !== this.state.selected && pageIndex >= 0 && pageIndex < pageCount) {
       var selected = this.state.selected;
-      var _props3 = this.props,
-          pageClassName = _props3.pageClassName,
-          pageLinkClassName = _props3.pageLinkClassName,
-          activeClassName = _props3.activeClassName,
-          activeLinkClassName = _props3.activeLinkClassName,
-          extraAriaContext = _props3.extraAriaContext;
+      var _props4 = this.props,
+          pageClassName = _props4.pageClassName,
+          pageLinkClassName = _props4.pageLinkClassName,
+          activeClassName = _props4.activeClassName,
+          activeLinkClassName = _props4.activeLinkClassName,
+          extraAriaContext = _props4.extraAriaContext;
 
@@ -232,12 +264,12 @@
     value: function render() {
-      var _props4 = this.props,
-          disabledClassName = _props4.disabledClassName,
-          previousClassName = _props4.previousClassName,
-          nextClassName = _props4.nextClassName,
-          pageCount = _props4.pageCount,
-          containerClassName = _props4.containerClassName,
-          previousLinkClassName = _props4.previousLinkClassName,
-          previousLabel = _props4.previousLabel,
-          nextLinkClassName = _props4.nextLinkClassName,
-          nextLabel = _props4.nextLabel;
+      var _props5 = this.props,
+          disabledClassName = _props5.disabledClassName,
+          previousClassName = _props5.previousClassName,
+          nextClassName = _props5.nextClassName,
+          pageCount = _props5.pageCount,
+          containerClassName = _props5.containerClassName,
+          previousLinkClassName = _props5.previousLinkClassName,
+          previousLabel = _props5.previousLabel,
+          nextLinkClassName = _props5.nextLinkClassName,
+          nextLabel = _props5.nextLabel;
       var selected = this.state.selected;
@@ -294,3 +326,3 @@
   nextLabel: _propTypes2.default.node,
-  breakLabel: _propTypes2.default.node,
+  breakLabel: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node]),
   hrefBuilder: _propTypes2.default.func,
@@ -297,0 +329,0 @@ onPageChange: _propTypes2.default.func,

HISTORY.md

@@ -0,1 +1,6 @@
+## >= 6.0.0
+
+* Implement forward/backward jump when clicking on a breakview (ellipsis).
+* The 'breakLabel' prop should not receive an `<a>` tag anymore. Otherwise, a warning will appear in the JS console: `validateDOMNesting(...): <a> cannot appear as a descendant of <a>.`
+
 ## >= 5.3.1
@@ -2,0 +7,0 @@

package.json

 {
   "name": "react-paginate",
-  "version": "5.3.1",
+  "version": "6.0.0",
   "description": "A ReactJS component that creates a pagination.",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

react_components/BreakView.js

@@ -8,6 +8,12 @@ 'use strict';
   const className = props.breakClassName || 'break';
+  const onClick = props.onClick;
 
   return (
     <li className={className}>
-      {label}
+      <a onClick={onClick}
+        role="button"
+        tabIndex="0"
+        onKeyPress={onClick}>
+        {label}
+      </a>
     </li>
@@ -14,0 +20,0 @@ );

react_components/index.js

 import PaginationBoxView from './PaginationBoxView';
 
 export default PaginationBoxView;

react_components/PageView.js

@@ -38,14 +38,14 @@ 'use strict';
   return (
-      <li className={pageClassName}>
-          <a onClick={onClick}
-             role="button"
-             className={pageLinkClassName}
-             href={href}
-             tabIndex="0"
-             aria-label={ariaLabel}
-             aria-current={ariaCurrent}
-             onKeyPress={onClick}>
-            {props.page}
-          </a>
-      </li>
+    <li className={pageClassName}>
+      <a onClick={onClick}
+        role="button"
+        className={pageLinkClassName}
+        href={href}
+        tabIndex="0"
+        aria-label={ariaLabel}
+        aria-current={ariaCurrent}
+        onKeyPress={onClick}>
+        {props.page}
+      </a>
+    </li>
   )
@@ -52,0 +52,0 @@ }

react_components/PaginationBoxView.js

@@ -16,3 +16,6 @@ 'use strict';
     nextLabel             : PropTypes.node,
-    breakLabel            : PropTypes.node,
+    breakLabel            : PropTypes.oneOfType([
+                              PropTypes.string,
+                              PropTypes.node,
+                            ]),
     hrefBuilder           : PropTypes.func,
@@ -103,2 +106,31 @@ onPageChange          : PropTypes.func,
 
+  getForwardJump() {
+    const { selected } = this.state;
+    const { pageCount, pageRangeDisplayed } = this.props;
+
+    const forwardJump = selected + pageRangeDisplayed;
+    return forwardJump >= pageCount ? pageCount - 1 : forwardJump;
+  }
+
+  getBackwardJump() {
+    const { selected } = this.state;
+    const { pageRangeDisplayed } = this.props;
+
+    const backwardJump = selected - pageRangeDisplayed;
+    return backwardJump < 0 ? 0 : backwardJump;
+  }
+
+  handleBreakClick = (index, evt) => {
+    evt.preventDefault ? evt.preventDefault() : (evt.returnValue = false);
+
+    const { selected } = this.state;
+
+    this.handlePageSelected(
+      selected < index ?
+        this.getForwardJump() :
+        this.getBackwardJump(),
+      evt
+    );
+  }
+
   hrefBuilder(pageIndex) {
@@ -225,2 +257,3 @@ const { hrefBuilder, pageCount } = this.props;
               breakClassName={breakClassName}
+              onClick={this.handleBreakClick.bind(null, index)}
             />
@@ -227,0 +260,0 @@ );

README.md

@@ -0,0 +0,0 @@ # react-paginate

webpack.config.js

@@ -0,0 +0,0 @@ /* global __dirname */

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

541705

increased by2.88%

Lines of code

1608

increased by6.49%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes