Merge branch 'master' of https://github.com/reediculous456/react-pagi…

…nate into reediculous456-master
AdeleD · Mar 23, 2021 · ae8092e · ae8092e
2 parents 721e643 + 0539354
commit ae8092e
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@ or
 Install `react-paginate` with [npm](https://www.npmjs.com/):
 
 ```
-$ npm install react-paginate --save
+npm install react-paginate --save
 ```
 
 For [CommonJS](http://wiki.commonjs.org/wiki/CommonJS) users:
@@ -35,26 +35,26 @@ how to make `react-paginate` work with a list of objects.
 Clone the repository and move into:
 
 ```console
-$ git clone git@github.com:AdeleD/react-paginate.git
-$ cd react-paginate
+git clone git@github.com:AdeleD/react-paginate.git
+cd react-paginate
 ```
 
 Install dependencies:
 
 ```console
-$ make install
+make install
 ```
 
 Prepare the demo:
 
 ```console
-$ make demo
+make demo
 ```
 
 Run the server:
 
 ```console
-$ make serve
+make serve
 ```
 
 Open your browser and go to [http://localhost:3000/](http://localhost:3000/)
@@ -81,6 +81,7 @@ Open your browser and go to [http://localhost:3000/](http://localhost:3000/)
 | `containerClassName`     | `String`   | The classname of the pagination container.                                                   |
 | `pageClassName`          | `String`   | The classname on tag `li` of each page element.                                              |
 | `pageLinkClassName`      | `String`   | The classname on tag `a` of each page element.                                               |
+| `pageLabelRender`        | `Function` | Function to set the text on page links. Defaults to `(page) => page`                   |
 | `activeClassName`        | `String`   | The classname for the active page.                                                           |
 | `activeLinkClassName`    | `String`   | The classname on the active tag `a`.                                                         |
 | `previousClassName`      | `String`   | The classname on tag `li` of the `previous` button.                                          |
@@ -106,7 +107,7 @@ Open your browser and go to [http://localhost:3000/](http://localhost:3000/)
 Run tests:
 
 ```console
-$ make test
+make test
 ```
 
 [1]: https://github.com/AdeleD/react-paginate/blob/master/demo/js/demo.js
diff --git a/__tests__/PaginationBoxView-test.js b/__tests__/PaginationBoxView-test.js
@@ -1273,4 +1273,31 @@ describe('Test custom props', () => {
     expect(ReactDOM.findDOMNode(linkedPagination).querySelector('li:first-child a')
       .getAttribute('aria-label')).toBe('Go to the previous page');
   });
+
+  describe('render custom page labels if defined', () => {
+    it('should use custom page labels', () => {
+      const data = [
+        { name: 'Item 1' },
+        { name: 'Item 2' },
+        { name: 'Item 3' },
+        { name: 'Item 4' },
+        { name: 'Item 5' },
+      ];
+
+      const pagination = ReactTestUtils.renderIntoDocument(
+        <PaginationBoxView
+          pageCount={data.length}
+          pageLabelRender={(page) => {
+            const pageIndex = page - 1;
+            return data[pageIndex]?.name
+          }}
+        />
+      );
+
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('.selected a')
+          .textContent
+      ).toBe('Item 1');
+    });
+  });
 });
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/react_components/BreakView.js b/react_components/BreakView.js
@@ -4,7 +4,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 const BreakView = (props) => {
-  const { breakLabel, breakClassName, breakLinkClassName, breakHandler, getEventListener } = props;
+  const {
+    breakLabel,
+    breakClassName,
+    breakLinkClassName,
+    breakHandler,
+    getEventListener,
+  } = props;
   const className = breakClassName || 'break';
 
   return (

diff --git a/react_components/PageView.js b/react_components/PageView.js
@@ -13,21 +13,19 @@ const PageView = (props) => {
     getEventListener,
     pageSelectedHandler,
     href,
-    extraAriaContext
+    extraAriaContext,
+    pageLabelRender,
   } = props;
 
   let ariaLabel =
     props.ariaLabel ||
-    'Page ' +
-      page +
-      (extraAriaContext ? ' ' + extraAriaContext : '');
+    'Page ' + page + (extraAriaContext ? ' ' + extraAriaContext : '');
   let ariaCurrent = null;
 
   if (selected) {
     ariaCurrent = 'page';
 
-    ariaLabel =
-      props.ariaLabel || 'Page ' + page + ' is your current page';
+    ariaLabel = props.ariaLabel || 'Page ' + page + ' is your current page';
 
     if (typeof pageClassName !== 'undefined') {
       pageClassName = pageClassName + ' ' + activeClassName;
@@ -56,7 +54,7 @@ const PageView = (props) => {
         onKeyPress={pageSelectedHandler}
         {...getEventListener(pageSelectedHandler)}
       >
-        {page}
+        {pageLabelRender(page)}
       </a>
     </li>
   );
@@ -74,6 +72,7 @@ PageView.propTypes = {
   ariaLabel: PropTypes.string,
   page: PropTypes.number.isRequired,
   getEventListener: PropTypes.func.isRequired,
+  pageLabelRender: PropTypes.func.isRequired,
 };
 
 export default PageView;
diff --git a/react_components/PaginationBoxView.js b/react_components/PaginationBoxView.js
@@ -26,6 +26,7 @@ export default class PaginationBoxView extends Component {
     containerClassName: PropTypes.string,
     pageClassName: PropTypes.string,
     pageLinkClassName: PropTypes.string,
+    pageLabelRender: PropTypes.func,
     activeClassName: PropTypes.string,
     activeLinkClassName: PropTypes.string,
     previousClassName: PropTypes.string,
@@ -56,6 +57,7 @@ export default class PaginationBoxView extends Component {
     breakLabel: '...',
     disabledClassName: 'disabled',
     disableInitialCallback: false,
+    pageLabelRender: (page) => page,
     eventListener: 'onClick',
   };
 
@@ -140,7 +142,7 @@ export default class PaginationBoxView extends Component {
     return {
       [eventListener]: handlerFunction,
     };
-  }
+  };
 
   getForwardJump() {
     const { selected } = this.state;
@@ -224,6 +226,7 @@ export default class PaginationBoxView extends Component {
       activeClassName,
       activeLinkClassName,
       extraAriaContext,
+      pageLabelRender,
     } = this.props;
 
     return (
@@ -239,6 +242,7 @@ export default class PaginationBoxView extends Component {
         href={this.hrefBuilder(index)}
         ariaLabel={this.ariaLabelBuilder(index)}
         page={index + 1}
+        pageLabelRender={pageLabelRender}
         getEventListener={this.getEventListener}
       />
     );