react-paginate - npm Package Compare versions

Comparing version 5.0.0 to 5.1.0

demo/webpack.config.js

@@ -24,3 +24,3 @@ /* global __dirname */
             {
-                loader: 'react-hot',
+                loader: 'react-hot-loader/webpack',
                 test: dir_js,
@@ -27,0 +27,0 @@ },

dist/PaginationBoxView.js

@@ -52,5 +52,7 @@ 'use strict';
     _this.handlePreviousPage = function (evt) {
+      var selected = _this.state.selected;
+
       evt.preventDefault ? evt.preventDefault() : evt.returnValue = false;
-      if (_this.state.selected > 0) {
-        _this.handlePageSelected(_this.state.selected - 1, evt);
+      if (selected > 0) {
+        _this.handlePageSelected(selected - 1, evt);
       }
@@ -60,5 +62,9 @@ };
     _this.handleNextPage = function (evt) {
+      var selected = _this.state.selected;
+      var pageCount = _this.props.pageCount;
+
+
       evt.preventDefault ? evt.preventDefault() : evt.returnValue = false;
-      if (_this.state.selected < _this.props.pageCount - 1) {
-        _this.handlePageSelected(_this.state.selected + 1, evt);
+      if (selected < pageCount - 1) {
+        _this.handlePageSelected(selected + 1, evt);
       }
@@ -86,6 +92,14 @@ };
       var items = {};
+      var _this$props = _this.props,
+          pageRangeDisplayed = _this$props.pageRangeDisplayed,
+          pageCount = _this$props.pageCount,
+          marginPagesDisplayed = _this$props.marginPagesDisplayed,
+          breakLabel = _this$props.breakLabel,
+          breakClassName = _this$props.breakClassName;
+      var selected = _this.state.selected;
 
-      if (_this.props.pageCount <= _this.props.pageRangeDisplayed) {
 
-        for (var index = 0; index < _this.props.pageCount; index++) {
+      if (pageCount <= pageRangeDisplayed) {
+
+        for (var index = 0; index < pageCount; index++) {
           items['key' + index] = _this.getPageElement(index);
@@ -95,11 +109,11 @@ }
 
-        var leftSide = _this.props.pageRangeDisplayed / 2;
-        var rightSide = _this.props.pageRangeDisplayed - leftSide;
+        var leftSide = pageRangeDisplayed / 2;
+        var rightSide = pageRangeDisplayed - leftSide;
 
-        if (_this.state.selected > _this.props.pageCount - _this.props.pageRangeDisplayed / 2) {
-          rightSide = _this.props.pageCount - _this.state.selected;
-          leftSide = _this.props.pageRangeDisplayed - rightSide;
-        } else if (_this.state.selected < _this.props.pageRangeDisplayed / 2) {
-          leftSide = _this.state.selected;
-          rightSide = _this.props.pageRangeDisplayed - leftSide;
+        if (selected > pageCount - pageRangeDisplayed / 2) {
+          rightSide = pageCount - selected;
+          leftSide = pageRangeDisplayed - rightSide;
+        } else if (selected < pageRangeDisplayed / 2) {
+          leftSide = selected;
+          rightSide = pageRangeDisplayed - leftSide;
         }
@@ -114,7 +128,7 @@
 
-        for (_index = 0; _index < _this.props.pageCount; _index++) {
+        for (_index = 0; _index < pageCount; _index++) {
 
           page = _index + 1;
 
-          if (page <= _this.props.marginPagesDisplayed) {
+          if (page <= marginPagesDisplayed) {
             items['key' + _index] = createPageView(_index);
@@ -124,3 +138,3 @@ continue;
 
-          if (page > _this.props.pageCount - _this.props.marginPagesDisplayed) {
+          if (page > pageCount - marginPagesDisplayed) {
             items['key' + _index] = createPageView(_index);
@@ -130,3 +144,3 @@ continue;
 
-          if (_index >= _this.state.selected - leftSide && _index <= _this.state.selected + rightSide) {
+          if (_index >= selected - leftSide && _index <= selected + rightSide) {
             items['key' + _index] = createPageView(_index);
@@ -140,6 +154,6 @@ continue;
 
-          if (_this.props.breakLabel && breakLabelValue !== breakView) {
+          if (breakLabel && breakLabelValue !== breakView) {
             breakView = _react2.default.createElement(_BreakView2.default, {
-              breakLabel: _this.props.breakLabel,
-              breakClassName: _this.props.breakClassName
+              breakLabel: breakLabel,
+              breakClassName: breakClassName
             });
@@ -164,5 +178,9 @@
     value: function componentDidMount() {
+      var _props = this.props,
+          initialPage = _props.initialPage,
+          disableInitialCallback = _props.disableInitialCallback;
       // Call the callback with the initialPage item:
-      if (typeof this.props.initialPage !== 'undefined' && !this.props.disableInitialCallback) {
-        this.callCallback(this.props.initialPage);
+
+      if (typeof initialPage !== 'undefined' && !disableInitialCallback) {
+        this.callCallback(initialPage);
       }
@@ -180,4 +198,8 @@ }
     value: function hrefBuilder(pageIndex) {
-      if (this.props.hrefBuilder && pageIndex !== this.state.selected && pageIndex >= 0 && pageIndex < this.props.pageCount) {
-        return this.props.hrefBuilder(pageIndex + 1);
+      var _props2 = this.props,
+          hrefBuilder = _props2.hrefBuilder,
+          pageCount = _props2.pageCount;
+
+      if (hrefBuilder && pageIndex !== this.state.selected && pageIndex >= 0 && pageIndex < pageCount) {
+        return hrefBuilder(pageIndex + 1);
       }
@@ -188,9 +210,17 @@ }
     value: function getPageElement(index) {
+      var selected = this.state.selected;
+      var _props3 = this.props,
+          pageClassName = _props3.pageClassName,
+          pageLinkClassName = _props3.pageLinkClassName,
+          activeClassName = _props3.activeClassName,
+          extraAriaContext = _props3.extraAriaContext;
+
+
       return _react2.default.createElement(_PageView2.default, {
         onClick: this.handlePageSelected.bind(null, index),
-        selected: this.state.selected === index,
-        pageClassName: this.props.pageClassName,
-        pageLinkClassName: this.props.pageLinkClassName,
-        activeClassName: this.props.activeClassName,
-        extraAriaContext: this.props.extraAriaContext,
+        selected: selected === index,
+        pageClassName: pageClassName,
+        pageLinkClassName: pageLinkClassName,
+        activeClassName: activeClassName,
+        extraAriaContext: extraAriaContext,
         href: this.hrefBuilder(index),
@@ -202,11 +232,23 @@ page: index + 1 });
     value: function render() {
-      var disabled = this.props.disabledClassName;
+      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 selected = this.state.selected;
 
-      var previousClasses = (0, _classnames2.default)(this.props.previousClassName, _defineProperty({}, disabled, this.state.selected === 0));
 
-      var nextClasses = (0, _classnames2.default)(this.props.nextClassName, _defineProperty({}, disabled, this.state.selected === this.props.pageCount - 1));
+      var disabled = disabledClassName;
+      var previousClasses = (0, _classnames2.default)(previousClassName, _defineProperty({}, disabled, selected === 0));
 
+      var nextClasses = (0, _classnames2.default)(nextClassName, _defineProperty({}, disabled, selected === pageCount - 1));
+
       return _react2.default.createElement(
         'ul',
-        { className: this.props.containerClassName },
+        { className: containerClassName },
         _react2.default.createElement(
@@ -218,7 +260,7 @@ 'li',
             { onClick: this.handlePreviousPage,
-              className: this.props.previousLinkClassName,
-              href: this.hrefBuilder(this.state.selected - 1),
+              className: previousLinkClassName,
+              href: this.hrefBuilder(selected - 1),
               tabIndex: '0',
               onKeyPress: this.handlePreviousPage },
-            this.props.previousLabel
+            previousLabel
           )
@@ -233,7 +275,7 @@ ),
             { onClick: this.handleNextPage,
-              className: this.props.nextLinkClassName,
-              href: this.hrefBuilder(this.state.selected + 1),
+              className: nextLinkClassName,
+              href: this.hrefBuilder(selected + 1),
               tabIndex: '0',
               onKeyPress: this.handleNextPage },
-            this.props.nextLabel
+            nextLabel
           )
@@ -240,0 +282,0 @@ )

HISTORY.md

@@ -0,1 +1,7 @@
+## >= 5.1.0
+
+* Refactor using destructuring
+* Upgrade react-hot-loader to version 3.0.0 (dev dependency)
+
+
 ## >= 5.0.0
@@ -2,0 +8,0 @@

package.json

 {
   "name": "react-paginate",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "A ReactJS component that creates a pagination.",
@@ -43,3 +43,3 @@ "main": "./dist/index.js",
     "react-dom": "^16.0.0",
-    "react-hot-loader": "^1.3.1",
+    "react-hot-loader": "^3.0.0",
     "serve-static": "^1.11.1",
@@ -46,0 +46,0 @@ "webpack": "^1.13.3",

react_components/PaginationBoxView.js

@@ -62,5 +62,6 @@ 'use strict';
   componentDidMount() {
+    const { initialPage, disableInitialCallback } = this.props;
     // Call the callback with the initialPage item:
-    if (typeof(this.props.initialPage) !== 'undefined' && !this.props.disableInitialCallback) {
-      this.callCallback(this.props.initialPage);
+    if (typeof(initialPage) !== 'undefined' && !disableInitialCallback) {
+      this.callCallback(initialPage);
     }
@@ -76,5 +77,6 @@ }
   handlePreviousPage = evt => {
+    const { selected } = this.state;
     evt.preventDefault ? evt.preventDefault() : (evt.returnValue = false);
-    if (this.state.selected > 0) {
-      this.handlePageSelected(this.state.selected - 1, evt);
+    if (selected > 0) {
+      this.handlePageSelected(selected - 1, evt);
     }
@@ -84,5 +86,8 @@ };
   handleNextPage = evt => {
+    const { selected } = this.state;
+    const { pageCount } = this.props;
+
     evt.preventDefault ? evt.preventDefault() : (evt.returnValue = false);
-    if (this.state.selected < this.props.pageCount - 1) {
-      this.handlePageSelected(this.state.selected + 1, evt);
+    if (selected < pageCount - 1) {
+      this.handlePageSelected(selected + 1, evt);
     }
@@ -103,8 +108,9 @@ };
   hrefBuilder(pageIndex) {
-    if (this.props.hrefBuilder &&
+    const { hrefBuilder, pageCount } = this.props;
+    if (hrefBuilder &&
       pageIndex !== this.state.selected &&
       pageIndex >= 0 &&
-      pageIndex < this.props.pageCount
+      pageIndex < pageCount
     ) {
-      return this.props.hrefBuilder(pageIndex + 1);
+      return hrefBuilder(pageIndex + 1);
     }
@@ -121,9 +127,17 @@ }
   getPageElement(index) {
+    const { selected } = this.state;
+    const {
+      pageClassName,
+      pageLinkClassName,
+      activeClassName,
+      extraAriaContext
+    } = this.props;
+
     return <PageView
       onClick={this.handlePageSelected.bind(null, index)}
-      selected={this.state.selected === index}
-      pageClassName={this.props.pageClassName}
-      pageLinkClassName={this.props.pageLinkClassName}
-      activeClassName={this.props.activeClassName}
-      extraAriaContext={this.props.extraAriaContext}
+      selected={selected === index}
+      pageClassName={pageClassName}
+      pageLinkClassName={pageLinkClassName}
+      activeClassName={activeClassName}
+      extraAriaContext={extraAriaContext}
       href={this.hrefBuilder(index)}
@@ -135,6 +149,15 @@ page={index + 1} />
     let items = {};
+    const {
+      pageRangeDisplayed,
+      pageCount,
+      marginPagesDisplayed,
+      breakLabel,
+      breakClassName
+    } = this.props;
 
-    if (this.props.pageCount <= this.props.pageRangeDisplayed) {
+    const { selected } = this.state;
 
-      for (let index = 0; index < this.props.pageCount; index++) {
+    if (pageCount <= pageRangeDisplayed) {
+
+      for (let index = 0; index < pageCount; index++) {
         items['key' + index] = this.getPageElement(index);
@@ -145,12 +168,12 @@ }
 
-      let leftSide  = (this.props.pageRangeDisplayed / 2);
-      let rightSide = (this.props.pageRangeDisplayed - leftSide);
+      let leftSide  = (pageRangeDisplayed / 2);
+      let rightSide = (pageRangeDisplayed - leftSide);
 
-      if (this.state.selected > this.props.pageCount - this.props.pageRangeDisplayed / 2) {
-        rightSide = this.props.pageCount - this.state.selected;
-        leftSide  = this.props.pageRangeDisplayed - rightSide;
+      if (selected > pageCount - pageRangeDisplayed / 2) {
+        rightSide = pageCount - selected;
+        leftSide  = pageRangeDisplayed - rightSide;
       }
-      else if (this.state.selected < this.props.pageRangeDisplayed / 2) {
-        leftSide  = this.state.selected;
-        rightSide = this.props.pageRangeDisplayed - leftSide;
+      else if (selected < pageRangeDisplayed / 2) {
+        leftSide  = selected;
+        rightSide = pageRangeDisplayed - leftSide;
       }
@@ -163,7 +186,7 @@
 
-      for (index = 0; index < this.props.pageCount; index++) {
+      for (index = 0; index < pageCount; index++) {
 
         page = index + 1;
 
-        if (page <= this.props.marginPagesDisplayed) {
+        if (page <= marginPagesDisplayed) {
           items['key' + index] = createPageView(index);
@@ -173,3 +196,3 @@ continue;
 
-        if (page > this.props.pageCount - this.props.marginPagesDisplayed) {
+        if (page > pageCount - marginPagesDisplayed) {
           items['key' + index] = createPageView(index);
@@ -179,3 +202,3 @@ continue;
 
-        if ((index >= this.state.selected - leftSide) && (index <= this.state.selected + rightSide)) {
+        if ((index >= selected - leftSide) && (index <= selected + rightSide)) {
           items['key' + index] = createPageView(index);
@@ -189,7 +212,7 @@ continue;
 
-        if (this.props.breakLabel && breakLabelValue !== breakView) {
+        if (breakLabel && breakLabelValue !== breakView) {
           breakView = (
             <BreakView
-              breakLabel={this.props.breakLabel}
-              breakClassName={this.props.breakClassName}
+              breakLabel={breakLabel}
+              breakClassName={breakClassName}
             />
@@ -207,19 +230,32 @@ );
   render() {
-    let disabled = this.props.disabledClassName;
+    const {
+      disabledClassName,
+      previousClassName,
+      nextClassName,
+      pageCount,
+      containerClassName,
+      previousLinkClassName,
+      previousLabel,
+      nextLinkClassName,
+      nextLabel
+    } = this.props;
 
-    const previousClasses = classNames(this.props.previousClassName,
-                                       {[disabled]: this.state.selected === 0});
+    const { selected } = this.state;
+    
+    let disabled = disabledClassName;
+    const previousClasses = classNames(previousClassName,
+                                       {[disabled]: selected === 0});
 
-    const nextClasses = classNames(this.props.nextClassName,
-                                   {[disabled]: this.state.selected === this.props.pageCount - 1});
+    const nextClasses = classNames(nextClassName,
+                                   {[disabled]: selected === pageCount - 1});
 
     return (
-      <ul className={this.props.containerClassName}>
+      <ul className={containerClassName}>
         <li className={previousClasses}>
           <a onClick={this.handlePreviousPage}
-             className={this.props.previousLinkClassName}
-             href={this.hrefBuilder(this.state.selected - 1)}
+             className={previousLinkClassName}
+             href={this.hrefBuilder(selected - 1)}
              tabIndex="0"
              onKeyPress={this.handlePreviousPage}>
-            {this.props.previousLabel}
+            {previousLabel}
           </a>
@@ -232,7 +268,7 @@ </li>
           <a onClick={this.handleNextPage}
-             className={this.props.nextLinkClassName}
-             href={this.hrefBuilder(this.state.selected + 1)}
+             className={nextLinkClassName}
+             href={this.hrefBuilder(selected + 1)}
              tabIndex="0"
              onKeyPress={this.handleNextPage}>
-            {this.props.nextLabel}
+            {nextLabel}
           </a>
@@ -239,0 +275,0 @@ </li>

webpack.config.js

@@ -21,3 +21,3 @@ /* global __dirname */
             {
-                loader: 'react-hot',
+                loader: 'react-hot-loader/webpack',
                 test: dir_js,
@@ -24,0 +24,0 @@ },

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

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

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

Improved metrics

Total package byte prevSize

440976

increased by75.95%

Number of package files

34

increased by3.03%

Lines of code

6460

increased by636.6%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes