Merge pull request #349 from AdeleD/add-an-on-page-active-callback

Add an onPageActive callback
AdeleD · Mar 22, 2021 · 721e643 · 721e643
2 parents e5aa093 + f93b89c
commit 721e643
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## >= 7.1.1
+
+- Add an onPageActive callback (see: https://github.com/AdeleD/react-paginate/pull/349).
+
 ## >= 7.1.0
 
 - Compatibility with React v17.0

diff --git a/README.md b/README.md
@@ -74,6 +74,7 @@ Open your browser and go to [http://localhost:3000/](http://localhost:3000/)
 | `breakClassName`         | `String`   | The classname on tag `li` of the ellipsis element.                                           |
 | `breakLinkClassName`     | `String`   | The classname on tag `a` of the ellipsis element.                                            |
 | `onPageChange`           | `Function` | The method to call when a page is clicked. Exposes the current page object as an argument.   |
+| `onPageActive`           | `Function` | The method to call when an active page is clicked. Exposes the active page object as an argument.   |
 | `initialPage`            | `Number`   | The initial page selected.                                                                   |
 | `forcePage`              | `Number`   | To override selected page with parent prop.                                                  |
 | `disableInitialCallback` | `boolean`  | Disable `onPageChange` callback with initial page. Default: `false`                          |

diff --git a/__tests__/PaginationBoxView-test.js b/__tests__/PaginationBoxView-test.js
@@ -836,6 +836,25 @@ describe('Test custom props', () => {
     });
   });
 
+  describe('onPageActive', () => {
+    it('should use the onPageActive prop when defined', () => {
+      const myOnPageActiveMethod = jest.fn();
+      const myOnPageChangeMethod = jest.fn();
+      const pagination = ReactTestUtils.renderIntoDocument(
+        <PaginationBoxView
+          onPageActive={myOnPageActiveMethod}
+          onPageChange={myOnPageChangeMethod} />
+      );
+      const activeItem = ReactDOM.findDOMNode(pagination).querySelector(
+        '.selected a'
+      );
+      ReactTestUtils.Simulate.click(activeItem);
+
+      expect(myOnPageActiveMethod).toHaveBeenCalledWith({ selected: 0 });
+      expect(myOnPageChangeMethod).not.toHaveBeenCalled();
+    });
+  });
+
   describe('initialPage', () => {
     it('should use the initialPage prop when defined', () => {
       const pagination = ReactTestUtils.renderIntoDocument(

diff --git a/dist/react-paginate.js b/dist/react-paginate.js
diff --git a/dist/react-paginate.js.map b/dist/react-paginate.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-paginate",
-  "version": "7.1.0",
+  "version": "7.1.1",
   "description": "A ReactJS component that creates a pagination.",
   "main": "./dist/react-paginate.js",
   "repository": {

diff --git a/react_components/PaginationBoxView.js b/react_components/PaginationBoxView.js
@@ -19,6 +19,7 @@ export default class PaginationBoxView extends Component {
     breakLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     hrefBuilder: PropTypes.func,
     onPageChange: PropTypes.func,
+    onPageActive: PropTypes.func,
     initialPage: PropTypes.number,
     forcePage: PropTypes.number,
     disableInitialCallback: PropTypes.bool,
@@ -123,7 +124,10 @@ export default class PaginationBoxView extends Component {
   handlePageSelected = (selected, evt) => {
     evt.preventDefault ? evt.preventDefault() : (evt.returnValue = false);
 
-    if (this.state.selected === selected) return;
+    if (this.state.selected === selected) {
+      this.callActiveCallback(selected);
+      return;
+    }
 
     this.setState({ selected: selected });
 
@@ -203,6 +207,15 @@ export default class PaginationBoxView extends Component {
     }
   };
 
+  callActiveCallback = (selectedItem) => {
+    if (
+      typeof this.props.onPageActive !== 'undefined' &&
+      typeof this.props.onPageActive === 'function'
+    ) {
+      this.props.onPageActive({ selected: selectedItem });
+    }
+  };
+
   getPageElement(index) {
     const { selected } = this.state;
     const {