Add an onPageActive callback

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

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`                          |

__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(

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": {

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 {