Socket
Socket
Sign inDemoInstall

react-paginate

Package Overview
Dependencies
6
Maintainers
1
Versions
106
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 7.1.3 to 7.1.4

.prettierignore

330

__tests__/PaginationBoxView-test.js

@@ -40,3 +40,3 @@ import React from 'react';

it('test rendering only active page item', function() {
it('test rendering only active page item', function () {
const pagination = ReactTestUtils.renderIntoDocument(

@@ -57,2 +57,62 @@ <PaginationBoxView

describe('Page count is zero', () => {
it('should render Previous / Next if page count is zero (default / when renderOnZeroPageCount is undefined)', () => {
const pagination = ReactTestUtils.renderIntoDocument(
<PaginationBoxView
pageCount={0}
pageRangeDisplayed={0}
marginPagesDisplayed={0}
breakLabel={null}
/>
);
const pageItems = ReactDOM.findDOMNode(pagination).querySelectorAll('li');
// Prev page, next
expect(pageItems.length).toBe(2);
});
it('should render nothing if page count is zero when renderOnZeroPageCount is null', () => {
const pagination = ReactTestUtils.renderIntoDocument(
<PaginationBoxView
pageCount={0}
pageRangeDisplayed={0}
marginPagesDisplayed={0}
breakLabel={null}
renderOnZeroPageCount={null}
/>
);
expect(ReactDOM.findDOMNode(pagination)).toBeNull();
});
it('should render provided Component if page count is zero when renderOnZeroPageCount is not null', () => {
const pagination = ReactTestUtils.renderIntoDocument(
<PaginationBoxView
pageCount={0}
pageRangeDisplayed={0}
marginPagesDisplayed={0}
breakLabel={null}
renderOnZeroPageCount={() => <h2>Nothing</h2>}
/>
);
expect(ReactDOM.findDOMNode(pagination).textContent).toBe('Nothing');
});
});
describe('Page count checks', () => {
it('should trigger a warning when a float is provided', () => {
const consoleWarnMock = jest.spyOn(console, 'warn').mockImplementation();
const pagination = ReactTestUtils.renderIntoDocument(
<PaginationBoxView
pageCount={2.5}
pageRangeDisplayed={0}
marginPagesDisplayed={0}
breakLabel={null}
/>
);
const pageItems = ReactDOM.findDOMNode(pagination).querySelectorAll('li');
// Prev page, next
expect(pageItems.length).toBe(4);
expect(console.warn).toHaveBeenCalledTimes(1);
expect(console.warn).toHaveBeenLastCalledWith("(react-paginate): The pageCount prop value provided is not an integer (2.5). Did you forget a Math.ceil()?");
consoleWarnMock.mockRestore();
});
});
describe('Test clicks', () => {

@@ -87,5 +147,4 @@ it('test clicks on previous and next buttons', () => {

const pageItem = ReactDOM.findDOMNode(pagination).querySelector(
'li:nth-child(3) a'
);
const pageItem =
ReactDOM.findDOMNode(pagination).querySelector('li:nth-child(3) a');

@@ -110,5 +169,4 @@ ReactTestUtils.Simulate.click(pageItem);

// The selected page is before the left break
const leftBreakView1 = ReactDOM.findDOMNode(pagination).querySelector(
'.break a'
);
const leftBreakView1 =
ReactDOM.findDOMNode(pagination).querySelector('.break a');
ReactTestUtils.Simulate.click(leftBreakView1);

@@ -120,5 +178,4 @@ expect(

// The selected page is after the left break
const leftBreakView2 = ReactDOM.findDOMNode(pagination).querySelectorAll(
'.break a'
)[0];
const leftBreakView2 =
ReactDOM.findDOMNode(pagination).querySelectorAll('.break a')[0];
ReactTestUtils.Simulate.click(leftBreakView2);

@@ -141,5 +198,4 @@ expect(

// The selected page is before the right break
const rightBreak1 = ReactDOM.findDOMNode(pagination).querySelectorAll(
'.break a'
)[1];
const rightBreak1 =
ReactDOM.findDOMNode(pagination).querySelectorAll('.break a')[1];
ReactTestUtils.Simulate.click(rightBreak1);

@@ -151,5 +207,4 @@ expect(

// The selected page is after the right break
const rightBreak2 = ReactDOM.findDOMNode(pagination).querySelector(
'.break a'
);
const rightBreak2 =
ReactDOM.findDOMNode(pagination).querySelector('.break a');
ReactTestUtils.Simulate.click(rightBreak2);

@@ -164,3 +219,5 @@ expect(

it('test custom listener on previous and next buttons', () => {
const pagination = ReactTestUtils.renderIntoDocument(<PaginationBoxView eventListener="onMouseOver" />);
const pagination = ReactTestUtils.renderIntoDocument(
<PaginationBoxView eventListener="onMouseOver" />
);

@@ -188,9 +245,10 @@ let elmts = ReactTestUtils.scryRenderedDOMComponentsWithTag(

it('test custom listener on a page item', () => {
const pagination = ReactTestUtils.renderIntoDocument(<PaginationBoxView eventListener="onMouseOver" />);
const pagination = ReactTestUtils.renderIntoDocument(
<PaginationBoxView eventListener="onMouseOver" />
);
ReactTestUtils.findRenderedComponentWithType(pagination, PaginationBoxView);
const pageItem = ReactDOM.findDOMNode(pagination).querySelector(
'li:nth-child(3) a'
);
const pageItem =
ReactDOM.findDOMNode(pagination).querySelector('li:nth-child(3) a');

@@ -216,5 +274,4 @@ ReactTestUtils.Simulate.mouseOver(pageItem);

// The selected page is before the left break
const leftBreakView1 = ReactDOM.findDOMNode(pagination).querySelector(
'.break a'
);
const leftBreakView1 =
ReactDOM.findDOMNode(pagination).querySelector('.break a');
ReactTestUtils.Simulate.mouseOver(leftBreakView1);

@@ -226,5 +283,4 @@ expect(

// The selected page is after the left break
const leftBreakView2 = ReactDOM.findDOMNode(pagination).querySelectorAll(
'.break a'
)[0];
const leftBreakView2 =
ReactDOM.findDOMNode(pagination).querySelectorAll('.break a')[0];
ReactTestUtils.Simulate.mouseOver(leftBreakView2);

@@ -248,8 +304,6 @@ expect(

const previousElement = ReactDOM.findDOMNode(pagination).querySelector(
'li:first-child'
);
const nextElement = ReactDOM.findDOMNode(pagination).querySelector(
'li:last-child'
);
const previousElement =
ReactDOM.findDOMNode(pagination).querySelector('li:first-child');
const nextElement =
ReactDOM.findDOMNode(pagination).querySelector('li:last-child');

@@ -264,3 +318,3 @@ let leftElements = [];

);
elements.forEach(element => {
elements.forEach((element) => {
if (breakElementReached === false && element.className !== 'break') {

@@ -296,8 +350,6 @@ leftElements.push(element);

const previousElement = ReactDOM.findDOMNode(pagination).querySelector(
'li:first-child'
);
const nextElement = ReactDOM.findDOMNode(pagination).querySelector(
'li:last-child'
);
const previousElement =
ReactDOM.findDOMNode(pagination).querySelector('li:first-child');
const nextElement =
ReactDOM.findDOMNode(pagination).querySelector('li:last-child');

@@ -312,3 +364,3 @@ let leftElements = [];

);
elements.forEach(element => {
elements.forEach((element) => {
if (breakElementReached === false && element.className !== 'break') {

@@ -344,8 +396,6 @@ leftElements.push(element);

const previousElement = ReactDOM.findDOMNode(pagination).querySelector(
'li:first-child'
);
const nextElement = ReactDOM.findDOMNode(pagination).querySelector(
'li:last-child'
);
const previousElement =
ReactDOM.findDOMNode(pagination).querySelector('li:first-child');
const nextElement =
ReactDOM.findDOMNode(pagination).querySelector('li:last-child');

@@ -362,3 +412,3 @@ let leftElements = [];

);
elements.forEach(element => {
elements.forEach((element) => {
if (

@@ -409,8 +459,6 @@ leftBreakElementReached === false &&

const previousElement = ReactDOM.findDOMNode(pagination).querySelector(
'li:first-child'
);
const nextElement = ReactDOM.findDOMNode(pagination).querySelector(
'li:last-child'
);
const previousElement =
ReactDOM.findDOMNode(pagination).querySelector('li:first-child');
const nextElement =
ReactDOM.findDOMNode(pagination).querySelector('li:last-child');

@@ -425,3 +473,3 @@ let leftElements = [];

);
elements.forEach(element => {
elements.forEach((element) => {
if (breakElementReached === false && element.className !== 'break') {

@@ -457,8 +505,6 @@ leftElements.push(element);

const previousElement = ReactDOM.findDOMNode(pagination).querySelector(
'li:first-child'
);
const nextElement = ReactDOM.findDOMNode(pagination).querySelector(
'li:last-child'
);
const previousElement =
ReactDOM.findDOMNode(pagination).querySelector('li:first-child');
const nextElement =
ReactDOM.findDOMNode(pagination).querySelector('li:last-child');

@@ -473,3 +519,3 @@ let leftElements = [];

);
elements.forEach(element => {
elements.forEach((element) => {
if (breakElementReached === false && element.className !== 'break') {

@@ -495,3 +541,3 @@ leftElements.push(element);

it('should use ariaLabelBuilder for rendering aria-labels if ariaLabelBuilder is specified', function() {
it('should use ariaLabelBuilder for rendering aria-labels if ariaLabelBuilder is specified', function () {
const linkedPagination = ReactTestUtils.renderIntoDocument(

@@ -525,3 +571,4 @@ <PaginationBoxView

it('test ariaLabelBuilder works with extraAriaContext', function() {
it('test ariaLabelBuilder works with extraAriaContext', function () {
const consoleWarnMock = jest.spyOn(console, 'warn').mockImplementation();
const linkedPagination = ReactTestUtils.renderIntoDocument(

@@ -554,2 +601,4 @@ <PaginationBoxView

).toBe('Current page');
expect(console.warn).toHaveBeenCalledTimes(1);
expect(console.warn).toHaveBeenLastCalledWith("DEPRECATED (react-paginate): The extraAriaContext prop is deprecated. You should now use the ariaLabelBuilder instead.");
});

@@ -597,5 +646,4 @@ });

);
const nextItem = ReactDOM.findDOMNode(pagination).querySelector(
'li:last-child a'
);
const nextItem =
ReactDOM.findDOMNode(pagination).querySelector('li:last-child a');
ReactTestUtils.Simulate.click(nextItem);

@@ -650,5 +698,4 @@

const pageItem = ReactDOM.findDOMNode(pagination).querySelector(
'li:nth-child(3) a'
);
const pageItem =
ReactDOM.findDOMNode(pagination).querySelector('li:nth-child(3) a');
ReactTestUtils.Simulate.click(pageItem);

@@ -717,3 +764,3 @@

describe('default disabledClassName', () => {
it('should use the default disabledClassName', function() {
it('should use the default disabledClassName', function () {
const pagination = ReactTestUtils.renderIntoDocument(

@@ -734,3 +781,3 @@ <PaginationBoxView initialPage={0} pageCount={1} />

describe('default hrefBuilder', () => {
it('should not render href attributes on page items if hrefBuilder is not defined', function() {
it('should not render href attributes on page items if hrefBuilder is not defined', function () {
const linkedPagination = ReactTestUtils.renderIntoDocument(

@@ -833,3 +880,3 @@ <PaginationBoxView />

it('should use the breakClassName prop when defined', function() {
it('should use the breakClassName prop when defined', function () {
const pagination = ReactTestUtils.renderIntoDocument(

@@ -843,3 +890,3 @@ <PaginationBoxView breakClassName={'break-me'} />

it('should use the breakLinkClassName prop when defined', function() {
it('should use the breakLinkClassName prop when defined', function () {
const pagination = ReactTestUtils.renderIntoDocument(

@@ -860,5 +907,4 @@ <PaginationBoxView breakLinkClassName={'break-link'} />

);
const nextItem = ReactDOM.findDOMNode(pagination).querySelector(
'li:last-child a'
);
const nextItem =
ReactDOM.findDOMNode(pagination).querySelector('li:last-child a');
ReactTestUtils.Simulate.click(nextItem);

@@ -877,7 +923,7 @@

onPageActive={myOnPageActiveMethod}
onPageChange={myOnPageChangeMethod} />
onPageChange={myOnPageChangeMethod}
/>
);
const activeItem = ReactDOM.findDOMNode(pagination).querySelector(
'.selected a'
);
const activeItem =
ReactDOM.findDOMNode(pagination).querySelector('.selected a');
ReactTestUtils.Simulate.click(activeItem);

@@ -947,3 +993,3 @@

const pagination = ReactTestUtils.renderIntoDocument(
<PaginationBoxView containerClassName={'my-pagination'} />
<PaginationBoxView containerClassName="my-pagination" />
);

@@ -954,2 +1000,23 @@ expect(ReactDOM.findDOMNode(pagination).className).toEqual(

});
it('should use the className prop when defined', () => {
const pagination = ReactTestUtils.renderIntoDocument(
<PaginationBoxView className="my-pagination" />
);
expect(ReactDOM.findDOMNode(pagination).className).toEqual(
'my-pagination'
);
});
it('should use the className prop in priority from containerClassName', () => {
const pagination = ReactTestUtils.renderIntoDocument(
<PaginationBoxView
className="my-pagination"
containerClassName="another"
/>
);
expect(ReactDOM.findDOMNode(pagination).className).toEqual(
'my-pagination'
);
});
});

@@ -967,5 +1034,4 @@

const pageItem = ReactDOM.findDOMNode(pagination).querySelector(
'li:nth-child(3) a'
);
const pageItem =
ReactDOM.findDOMNode(pagination).querySelector('li:nth-child(3) a');
ReactTestUtils.Simulate.click(pageItem);

@@ -993,5 +1059,4 @@

const pageItem = ReactDOM.findDOMNode(pagination).querySelector(
'li:nth-child(3) a'
);
const pageItem =
ReactDOM.findDOMNode(pagination).querySelector('li:nth-child(3) a');
ReactTestUtils.Simulate.click(pageItem);

@@ -1015,5 +1080,4 @@

const pageItem = ReactDOM.findDOMNode(pagination).querySelector(
'li:nth-child(3) a'
);
const pageItem =
ReactDOM.findDOMNode(pagination).querySelector('li:nth-child(3) a');
ReactTestUtils.Simulate.click(pageItem);

@@ -1142,3 +1206,3 @@

describe('prevRel/nextRel', () => {
it('should render default rel if they are not specified', function() {
it('should render default rel if they are not specified', function () {
const linkedPagination = ReactTestUtils.renderIntoDocument(

@@ -1148,20 +1212,33 @@ <PaginationBoxView pageCount={3} />

expect(ReactDOM.findDOMNode(linkedPagination).querySelector('li:last-child a')
.getAttribute('rel')).toBe('next');
expect(ReactDOM.findDOMNode(linkedPagination).querySelector('li:first-child a')
.getAttribute('rel')).toBe('prev');
expect(
ReactDOM.findDOMNode(linkedPagination)
.querySelector('li:last-child a')
.getAttribute('rel')
).toBe('next');
expect(
ReactDOM.findDOMNode(linkedPagination)
.querySelector('li:first-child a')
.getAttribute('rel')
).toBe('prev');
});
it('should render custom rel if they are defined', function() {
it('should render custom rel if they are defined', function () {
const linkedPagination = ReactTestUtils.renderIntoDocument(
<PaginationBoxView pageCount={3}
nextRel={'nofollow noreferrer'}
prevRel={'nofollow noreferrer'}
<PaginationBoxView
pageCount={3}
nextRel={'nofollow noreferrer'}
prevRel={'nofollow noreferrer'}
/>
);
expect(ReactDOM.findDOMNode(linkedPagination).querySelector('li:last-child a')
.getAttribute('rel')).toBe('nofollow noreferrer');
expect(ReactDOM.findDOMNode(linkedPagination).querySelector('li:first-child a')
.getAttribute('rel')).toBe('nofollow noreferrer');
expect(
ReactDOM.findDOMNode(linkedPagination)
.querySelector('li:last-child a')
.getAttribute('rel')
).toBe('nofollow noreferrer');
expect(
ReactDOM.findDOMNode(linkedPagination)
.querySelector('li:first-child a')
.getAttribute('rel')
).toBe('nofollow noreferrer');
});

@@ -1191,7 +1268,7 @@ });

describe('hrefBuilder', () => {
it('should use the hrefBuilder prop when defined', function() {
it('should use the hrefBuilder prop when defined', function () {
const pagination = ReactTestUtils.renderIntoDocument(
<PaginationBoxView
initialPage={1}
hrefBuilder={page => '/page/' + page}
hrefBuilder={(page) => '/page/' + page}
/>

@@ -1292,3 +1369,3 @@ );

it('should render default aria labels if they are not specified', function() {
it('should render default aria labels if they are not specified', function () {
const linkedPagination = ReactTestUtils.renderIntoDocument(

@@ -1298,20 +1375,33 @@ <PaginationBoxView pageCount={3} />

expect(ReactDOM.findDOMNode(linkedPagination).querySelector('li:last-child a')
.getAttribute('aria-label')).toBe('Next page');
expect(ReactDOM.findDOMNode(linkedPagination).querySelector('li:first-child a')
.getAttribute('aria-label')).toBe('Previous page');
expect(
ReactDOM.findDOMNode(linkedPagination)
.querySelector('li:last-child a')
.getAttribute('aria-label')
).toBe('Next page');
expect(
ReactDOM.findDOMNode(linkedPagination)
.querySelector('li:first-child a')
.getAttribute('aria-label')
).toBe('Previous page');
});
it('should render custom aria labels if they are defined', function() {
it('should render custom aria labels if they are defined', function () {
const linkedPagination = ReactTestUtils.renderIntoDocument(
<PaginationBoxView pageCount={3}
nextAriaLabel={'Go to the next page'}
previousAriaLabel={'Go to the previous page'}
<PaginationBoxView
pageCount={3}
nextAriaLabel={'Go to the next page'}
previousAriaLabel={'Go to the previous page'}
/>
);
expect(ReactDOM.findDOMNode(linkedPagination).querySelector('li:last-child a')
.getAttribute('aria-label')).toBe('Go to the next page');
expect(ReactDOM.findDOMNode(linkedPagination).querySelector('li:first-child a')
.getAttribute('aria-label')).toBe('Go to the previous page');
expect(
ReactDOM.findDOMNode(linkedPagination)
.querySelector('li:last-child a')
.getAttribute('aria-label')
).toBe('Go to the next page');
expect(
ReactDOM.findDOMNode(linkedPagination)
.querySelector('li:first-child a')
.getAttribute('aria-label')
).toBe('Go to the previous page');
});

@@ -1334,3 +1424,3 @@

const pageIndex = page - 1;
return data[pageIndex]?.name
return data[pageIndex]?.name;
}}

@@ -1337,0 +1427,0 @@ />

6

.eslintrc.json

@@ -8,7 +8,3 @@ {

},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:prettier/recommended"
],
"extends": ["eslint:recommended", "plugin:react/recommended"],
"parser": "@babel/eslint-parser",

@@ -15,0 +11,0 @@ "parserOptions": {

4

babel.config.js
module.exports = {
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-proposal-class-properties"],
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: ['@babel/plugin-proposal-class-properties'],
};

13

CHANGELOG.md

@@ -0,1 +1,12 @@

## >= 8.0.0 (WIP)
- Removed support for depecrated `extraAriaContext` (please use `ariaLabelBuilder` instead)
## >= 7.1.4
- A new prop `renderOnZeroPageCount` has been added. It allows to define what to display when `pageCount` is zero. By default, it lets the main pagination boxes be displayed (Previous / Next). To display nothing, just provides `renderOnZeroPageCount={null}`. (see: https://github.com/AdeleD/react-paginate/pull/377)
- A new prop `className` has been added, which is an alias to `containerClassName` and is usefull for integration with CSS-in-JS frameworks like styled-components. (see: https://github.com/AdeleD/react-paginate/issues/321)
- Fix the Webpack build by providing a `web` target (see: https://github.com/AdeleD/react-paginate/issues/317)
- Add a warning when a non integer is provided for `pageCount`
## >= 7.1.3

@@ -18,2 +29,3 @@

## >= 7.0.0
- Add a rel attribute on previous/next buttons. Rel attributes are customizable thanks to props 'prevRel' and 'nextRel' (see: https://github.com/AdeleD/react-paginate/pull/326).

@@ -23,2 +35,3 @@ - Upgrade devDependencies packages jest-cli and webpack-cli.

## >= 6.5.0
- Add a prop 'eventListener' to let users use a custom event listener on prev/next buttons, pages and break views.

@@ -25,0 +38,0 @@

18

demo/js/demo.js

@@ -16,3 +16,7 @@ import React, { Component } from 'react';

let commentNodes = this.props.data.map(function (comment, index) {
return <div key={index}>{comment.comment}</div>;
return (
<div key={index}>
{comment.comment} and {comment.username}
</div>
);
});

@@ -82,6 +86,6 @@

<ReactPaginate
previousLabel={'previous'}
nextLabel={'next'}
breakLabel={'...'}
breakClassName={'break-me'}
previousLabel="previous"
nextLabel="next"
breakLabel="..."
breakClassName="break-me"
pageCount={this.state.pageCount}

@@ -91,4 +95,4 @@ marginPagesDisplayed={2}

onPageChange={this.handlePageClick}
containerClassName={'pagination'}
activeClassName={'active'}
containerClassName="pagination"
activeClassName="active"
/>

@@ -95,0 +99,0 @@ </div>

4

demo/server.js

@@ -38,3 +38,3 @@ 'use strict';

app.get('/comments', function(req, res) {
app.get('/comments', function (req, res) {
var items = JSON.parse(fs.readFileSync(DATA));

@@ -61,4 +61,4 @@ var offset = req.query.offset ? parseInt(req.query.offset, 10) : 0;

app.listen(NODE_PORT, function() {
app.listen(NODE_PORT, function () {
console.log('Demo server running on %s mode on port %d', NODE_ENV, NODE_PORT); // eslint-disable-line
});

2

dist/react-paginate.js

@@ -1,2 +0,2 @@

!function(e,a){"object"==typeof exports&&"object"==typeof module?module.exports=a(require("react")):"function"==typeof define&&define.amd?define(["react"],a):"object"==typeof exports?exports.ReactPaginate=a(require("react")):e.ReactPaginate=a(e.React)}(global,(function(e){return function(e){var a={};function t(r){if(a[r])return a[r].exports;var n=a[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,t),n.l=!0,n.exports}return t.m=e,t.c=a,t.d=function(e,a,r){t.o(e,a)||Object.defineProperty(e,a,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,a){if(1&a&&(e=t(e)),8&a)return e;if(4&a&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&a&&"string"!=typeof e)for(var n in e)t.d(r,n,function(a){return e[a]}.bind(null,n));return r},t.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(a,"a",a),a},t.o=function(e,a){return Object.prototype.hasOwnProperty.call(e,a)},t.p="",t(t.s=4)}([function(e,a,t){e.exports=t(2)()},function(a,t){a.exports=e},function(e,a,t){"use strict";var r=t(3);function n(){}function i(){}i.resetWarningCache=n,e.exports=function(){function e(e,a,t,n,i,s){if(s!==r){var l=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}function a(){return e}e.isRequired=e;var t={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:a,element:e,elementType:e,instanceOf:a,node:e,objectOf:a,oneOf:a,oneOfType:a,shape:a,exact:a,checkPropTypes:i,resetWarningCache:n};return t.PropTypes=t,t}},function(e,a,t){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,a,t){"use strict";t.r(a);var r=t(1),n=t.n(r),i=t(0),s=t.n(i);function l(){return(l=Object.assign||function(e){for(var a=1;a<arguments.length;a++){var t=arguments[a];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var o=function(e){var a=e.pageClassName,t=e.pageLinkClassName,r=e.page,i=e.selected,s=e.activeClassName,o=e.activeLinkClassName,u=e.getEventListener,c=e.pageSelectedHandler,p=e.href,f=e.extraAriaContext,g=e.pageLabelBuilder,d=e.ariaLabel||"Page "+r+(f?" "+f:""),b=null;return i&&(b="page",d=e.ariaLabel||"Page "+r+" is your current page",a=void 0!==a?a+" "+s:s,void 0!==t?void 0!==o&&(t=t+" "+o):t=o),n.a.createElement("li",{className:a},n.a.createElement("a",l({role:"button",className:t,href:p,tabIndex:"0","aria-label":d,"aria-current":b,onKeyPress:c},u(c)),g(r)))};o.propTypes={pageSelectedHandler:s.a.func.isRequired,selected:s.a.bool.isRequired,pageClassName:s.a.string,pageLinkClassName:s.a.string,activeClassName:s.a.string,activeLinkClassName:s.a.string,extraAriaContext:s.a.string,href:s.a.string,ariaLabel:s.a.string,page:s.a.number.isRequired,getEventListener:s.a.func.isRequired,pageLabelBuilder:s.a.func.isRequired};var u=o;function c(){return(c=Object.assign||function(e){for(var a=1;a<arguments.length;a++){var t=arguments[a];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var p=function(e){var a=e.breakLabel,t=e.breakClassName,r=e.breakLinkClassName,i=e.breakHandler,s=e.getEventListener,l=t||"break";return n.a.createElement("li",{className:l},n.a.createElement("a",c({className:r,role:"button",tabIndex:"0",onKeyPress:i},s(i)),a))};p.propTypes={breakLabel:s.a.oneOfType([s.a.string,s.a.node]),breakClassName:s.a.string,breakLinkClassName:s.a.string,breakHandler:s.a.func.isRequired,getEventListener:s.a.func.isRequired};var f=p;function g(e){return(g="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function d(){return(d=Object.assign||function(e){for(var a=1;a<arguments.length;a++){var t=arguments[a];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}function b(e,a){for(var t=0;t<a.length;t++){var r=a[t];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function v(e,a){return(v=Object.setPrototypeOf||function(e,a){return e.__proto__=a,e})(e,a)}function m(e){var a=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var t,r=C(e);if(a){var n=C(this).constructor;t=Reflect.construct(r,arguments,n)}else t=r.apply(this,arguments);return h(this,t)}}function h(e,a){return!a||"object"!==g(a)&&"function"!=typeof a?y(e):a}function y(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function C(e){return(C=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function P(e,a,t){return a in e?Object.defineProperty(e,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[a]=t,e}var k=function(e){!function(e,a){if("function"!=typeof a&&null!==a)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(a&&a.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),a&&v(e,a)}(s,e);var a,t,r,i=m(s);function s(e){var a,t;return function(e,a){if(!(e instanceof a))throw new TypeError("Cannot call a class as a function")}(this,s),P(y(a=i.call(this,e)),"handlePreviousPage",(function(e){var t=a.state.selected;e.preventDefault?e.preventDefault():e.returnValue=!1,t>0&&a.handlePageSelected(t-1,e)})),P(y(a),"handleNextPage",(function(e){var t=a.state.selected,r=a.props.pageCount;e.preventDefault?e.preventDefault():e.returnValue=!1,t<r-1&&a.handlePageSelected(t+1,e)})),P(y(a),"handlePageSelected",(function(e,t){t.preventDefault?t.preventDefault():t.returnValue=!1,a.state.selected!==e?(a.setState({selected:e}),a.callCallback(e)):a.callActiveCallback(e)})),P(y(a),"getEventListener",(function(e){return P({},a.props.eventListener,e)})),P(y(a),"handleBreakClick",(function(e,t){t.preventDefault?t.preventDefault():t.returnValue=!1;var r=a.state.selected;a.handlePageSelected(r<e?a.getForwardJump():a.getBackwardJump(),t)})),P(y(a),"callCallback",(function(e){void 0!==a.props.onPageChange&&"function"==typeof a.props.onPageChange&&a.props.onPageChange({selected:e})})),P(y(a),"callActiveCallback",(function(e){void 0!==a.props.onPageActive&&"function"==typeof a.props.onPageActive&&a.props.onPageActive({selected:e})})),P(y(a),"pagination",(function(){var e=[],t=a.props,r=t.pageRangeDisplayed,i=t.pageCount,s=t.marginPagesDisplayed,l=t.breakLabel,o=t.breakClassName,u=t.breakLinkClassName,c=a.state.selected;if(i<=r)for(var p=0;p<i;p++)e.push(a.getPageElement(p));else{var g,d,b,v=r/2,m=r-v;c>i-r/2?v=r-(m=i-c):c<r/2&&(m=r-(v=c));var h=function(e){return a.getPageElement(e)};for(g=0;g<i;g++)(d=g+1)<=s||d>i-s||g>=c-v&&g<=c+m?e.push(h(g)):l&&e[e.length-1]!==b&&(b=n.a.createElement(f,{key:g,breakLabel:l,breakClassName:o,breakLinkClassName:u,breakHandler:a.handleBreakClick.bind(null,g),getEventListener:a.getEventListener}),e.push(b))}return e})),t=e.initialPage?e.initialPage:e.forcePage?e.forcePage:0,a.state={selected:t},a}return a=s,(t=[{key:"componentDidMount",value:function(){var e=this.props,a=e.initialPage,t=e.disableInitialCallback,r=e.extraAriaContext;void 0===a||t||this.callCallback(a),r&&console.warn("DEPRECATED (react-paginate): The extraAriaContext prop is deprecated. You should now use the ariaLabelBuilder instead.")}},{key:"componentDidUpdate",value:function(e){void 0!==this.props.forcePage&&this.props.forcePage!==e.forcePage&&this.setState({selected:this.props.forcePage})}},{key:"getForwardJump",value:function(){var e=this.state.selected,a=this.props,t=a.pageCount,r=e+a.pageRangeDisplayed;return r>=t?t-1:r}},{key:"getBackwardJump",value:function(){var e=this.state.selected-this.props.pageRangeDisplayed;return e<0?0:e}},{key:"hrefBuilder",value:function(e){var a=this.props,t=a.hrefBuilder,r=a.pageCount;if(t&&e!==this.state.selected&&e>=0&&e<r)return t(e+1)}},{key:"ariaLabelBuilder",value:function(e){var a=e===this.state.selected;if(this.props.ariaLabelBuilder&&e>=0&&e<this.props.pageCount){var t=this.props.ariaLabelBuilder(e+1,a);return this.props.extraAriaContext&&!a&&(t=t+" "+this.props.extraAriaContext),t}}},{key:"getPageElement",value:function(e){var a=this.state.selected,t=this.props,r=t.pageClassName,i=t.pageLinkClassName,s=t.activeClassName,l=t.activeLinkClassName,o=t.extraAriaContext,c=t.pageLabelBuilder;return n.a.createElement(u,{key:e,pageSelectedHandler:this.handlePageSelected.bind(null,e),selected:a===e,pageClassName:r,pageLinkClassName:i,activeClassName:s,activeLinkClassName:l,extraAriaContext:o,href:this.hrefBuilder(e),ariaLabel:this.ariaLabelBuilder(e),page:e+1,pageLabelBuilder:c,getEventListener:this.getEventListener})}},{key:"render",value:function(){var e=this.props,a=e.disabledClassName,t=e.pageCount,r=e.containerClassName,i=e.previousLabel,s=e.previousClassName,l=e.previousLinkClassName,o=e.previousAriaLabel,u=e.prevRel,c=e.nextLabel,p=e.nextClassName,f=e.nextLinkClassName,g=e.nextAriaLabel,b=e.nextRel,v=this.state.selected,m=s+(0===v?" ".concat(a):""),h=p+(v===t-1?" ".concat(a):""),y=0===v?"true":"false",C=v===t-1?"true":"false";return n.a.createElement("ul",{className:r},n.a.createElement("li",{className:m},n.a.createElement("a",d({className:l,href:this.hrefBuilder(v-1),tabIndex:"0",role:"button",onKeyPress:this.handlePreviousPage,"aria-disabled":y,"aria-label":o,rel:u},this.getEventListener(this.handlePreviousPage)),i)),this.pagination(),n.a.createElement("li",{className:h},n.a.createElement("a",d({className:f,href:this.hrefBuilder(v+1),tabIndex:"0",role:"button",onKeyPress:this.handleNextPage,"aria-disabled":C,"aria-label":g,rel:b},this.getEventListener(this.handleNextPage)),c)))}}])&&b(a.prototype,t),r&&b(a,r),s}(r.Component);P(k,"propTypes",{pageCount:s.a.number.isRequired,pageRangeDisplayed:s.a.number.isRequired,marginPagesDisplayed:s.a.number.isRequired,previousLabel:s.a.node,previousAriaLabel:s.a.string,prevRel:s.a.string,nextLabel:s.a.node,nextAriaLabel:s.a.string,nextRel:s.a.string,breakLabel:s.a.oneOfType([s.a.string,s.a.node]),hrefBuilder:s.a.func,onPageChange:s.a.func,onPageActive:s.a.func,initialPage:s.a.number,forcePage:s.a.number,disableInitialCallback:s.a.bool,containerClassName:s.a.string,pageClassName:s.a.string,pageLinkClassName:s.a.string,pageLabelBuilder:s.a.func,activeClassName:s.a.string,activeLinkClassName:s.a.string,previousClassName:s.a.string,nextClassName:s.a.string,previousLinkClassName:s.a.string,nextLinkClassName:s.a.string,disabledClassName:s.a.string,breakClassName:s.a.string,breakLinkClassName:s.a.string,extraAriaContext:s.a.string,ariaLabelBuilder:s.a.func,eventListener:s.a.string}),P(k,"defaultProps",{pageCount:10,pageRangeDisplayed:2,marginPagesDisplayed:3,activeClassName:"selected",previousLabel:"Previous",previousClassName:"previous",previousAriaLabel:"Previous page",prevRel:"prev",nextLabel:"Next",nextClassName:"next",nextAriaLabel:"Next page",nextRel:"next",breakLabel:"...",disabledClassName:"disabled",disableInitialCallback:!1,pageLabelBuilder:function(e){return e},eventListener:"onClick"});a.default=k}])}));
!function(e,a){"object"==typeof exports&&"object"==typeof module?module.exports=a(require("react")):"function"==typeof define&&define.amd?define(["react"],a):"object"==typeof exports?exports.ReactPaginate=a(require("react")):e.ReactPaginate=a(e.React)}(window,(function(e){return function(e){var a={};function t(r){if(a[r])return a[r].exports;var n=a[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,t),n.l=!0,n.exports}return t.m=e,t.c=a,t.d=function(e,a,r){t.o(e,a)||Object.defineProperty(e,a,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,a){if(1&a&&(e=t(e)),8&a)return e;if(4&a&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&a&&"string"!=typeof e)for(var n in e)t.d(r,n,function(a){return e[a]}.bind(null,n));return r},t.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(a,"a",a),a},t.o=function(e,a){return Object.prototype.hasOwnProperty.call(e,a)},t.p="",t(t.s=4)}([function(e,a,t){e.exports=t(2)()},function(a,t){a.exports=e},function(e,a,t){"use strict";var r=t(3);function n(){}function i(){}i.resetWarningCache=n,e.exports=function(){function e(e,a,t,n,i,s){if(s!==r){var o=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw o.name="Invariant Violation",o}}function a(){return e}e.isRequired=e;var t={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:a,element:e,elementType:e,instanceOf:a,node:e,objectOf:a,oneOf:a,oneOfType:a,shape:a,exact:a,checkPropTypes:i,resetWarningCache:n};return t.PropTypes=t,t}},function(e,a,t){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,a,t){"use strict";t.r(a);var r=t(1),n=t.n(r),i=t(0),s=t.n(i);function o(){return(o=Object.assign||function(e){for(var a=1;a<arguments.length;a++){var t=arguments[a];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var l=function(e){var a=e.pageClassName,t=e.pageLinkClassName,r=e.page,i=e.selected,s=e.activeClassName,l=e.activeLinkClassName,u=e.getEventListener,c=e.pageSelectedHandler,p=e.href,f=e.extraAriaContext,g=e.pageLabelBuilder,d=e.ariaLabel||"Page "+r+(f?" "+f:""),b=null;return i&&(b="page",d=e.ariaLabel||"Page "+r+" is your current page",a=void 0!==a?a+" "+s:s,void 0!==t?void 0!==l&&(t=t+" "+l):t=l),n.a.createElement("li",{className:a},n.a.createElement("a",o({role:"button",className:t,href:p,tabIndex:"0","aria-label":d,"aria-current":b,onKeyPress:c},u(c)),g(r)))};l.propTypes={pageSelectedHandler:s.a.func.isRequired,selected:s.a.bool.isRequired,pageClassName:s.a.string,pageLinkClassName:s.a.string,activeClassName:s.a.string,activeLinkClassName:s.a.string,extraAriaContext:s.a.string,href:s.a.string,ariaLabel:s.a.string,page:s.a.number.isRequired,getEventListener:s.a.func.isRequired,pageLabelBuilder:s.a.func.isRequired};var u=l;function c(){return(c=Object.assign||function(e){for(var a=1;a<arguments.length;a++){var t=arguments[a];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var p=function(e){var a=e.breakLabel,t=e.breakClassName,r=e.breakLinkClassName,i=e.breakHandler,s=e.getEventListener,o=t||"break";return n.a.createElement("li",{className:o},n.a.createElement("a",c({className:r,role:"button",tabIndex:"0",onKeyPress:i},s(i)),a))};p.propTypes={breakLabel:s.a.oneOfType([s.a.string,s.a.node]),breakClassName:s.a.string,breakLinkClassName:s.a.string,breakHandler:s.a.func.isRequired,getEventListener:s.a.func.isRequired};var f=p;function g(e){return(g="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function d(){return(d=Object.assign||function(e){for(var a=1;a<arguments.length;a++){var t=arguments[a];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}function b(e,a){for(var t=0;t<a.length;t++){var r=a[t];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function v(e,a){return(v=Object.setPrototypeOf||function(e,a){return e.__proto__=a,e})(e,a)}function m(e){var a=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var t,r=C(e);if(a){var n=C(this).constructor;t=Reflect.construct(r,arguments,n)}else t=r.apply(this,arguments);return h(this,t)}}function h(e,a){if(a&&("object"===g(a)||"function"==typeof a))return a;if(void 0!==a)throw new TypeError("Derived constructors may only return object or undefined");return y(e)}function y(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function C(e){return(C=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function P(e,a,t){return a in e?Object.defineProperty(e,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[a]=t,e}var k=function(e){!function(e,a){if("function"!=typeof a&&null!==a)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(a&&a.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),a&&v(e,a)}(s,e);var a,t,r,i=m(s);function s(e){var a,t;return function(e,a){if(!(e instanceof a))throw new TypeError("Cannot call a class as a function")}(this,s),P(y(a=i.call(this,e)),"handlePreviousPage",(function(e){var t=a.state.selected;e.preventDefault?e.preventDefault():e.returnValue=!1,t>0&&a.handlePageSelected(t-1,e)})),P(y(a),"handleNextPage",(function(e){var t=a.state.selected,r=a.props.pageCount;e.preventDefault?e.preventDefault():e.returnValue=!1,t<r-1&&a.handlePageSelected(t+1,e)})),P(y(a),"handlePageSelected",(function(e,t){t.preventDefault?t.preventDefault():t.returnValue=!1,a.state.selected!==e?(a.setState({selected:e}),a.callCallback(e)):a.callActiveCallback(e)})),P(y(a),"getEventListener",(function(e){return P({},a.props.eventListener,e)})),P(y(a),"handleBreakClick",(function(e,t){t.preventDefault?t.preventDefault():t.returnValue=!1;var r=a.state.selected;a.handlePageSelected(r<e?a.getForwardJump():a.getBackwardJump(),t)})),P(y(a),"callCallback",(function(e){void 0!==a.props.onPageChange&&"function"==typeof a.props.onPageChange&&a.props.onPageChange({selected:e})})),P(y(a),"callActiveCallback",(function(e){void 0!==a.props.onPageActive&&"function"==typeof a.props.onPageActive&&a.props.onPageActive({selected:e})})),P(y(a),"pagination",(function(){var e=[],t=a.props,r=t.pageRangeDisplayed,i=t.pageCount,s=t.marginPagesDisplayed,o=t.breakLabel,l=t.breakClassName,u=t.breakLinkClassName,c=a.state.selected;if(i<=r)for(var p=0;p<i;p++)e.push(a.getPageElement(p));else{var g,d,b,v=r/2,m=r-v;c>i-r/2?v=r-(m=i-c):c<r/2&&(m=r-(v=c));var h=function(e){return a.getPageElement(e)};for(g=0;g<i;g++)(d=g+1)<=s||d>i-s||g>=c-v&&g<=c+m?e.push(h(g)):o&&e[e.length-1]!==b&&(b=n.a.createElement(f,{key:g,breakLabel:o,breakClassName:l,breakLinkClassName:u,breakHandler:a.handleBreakClick.bind(null,g),getEventListener:a.getEventListener}),e.push(b))}return e})),t=e.initialPage?e.initialPage:e.forcePage?e.forcePage:0,a.state={selected:t},a}return a=s,(t=[{key:"componentDidMount",value:function(){var e=this.props,a=e.initialPage,t=e.disableInitialCallback,r=e.extraAriaContext,n=e.pageCount;void 0===a||t||this.callCallback(a),r&&console.warn("DEPRECATED (react-paginate): The extraAriaContext prop is deprecated. You should now use the ariaLabelBuilder instead."),Number.isInteger(n)||console.warn("(react-paginate): The pageCount prop value provided is not an integer (".concat(this.props.pageCount,"). Did you forget a Math.ceil()?"))}},{key:"componentDidUpdate",value:function(e){void 0!==this.props.forcePage&&this.props.forcePage!==e.forcePage&&this.setState({selected:this.props.forcePage}),Number.isInteger(e.pageCount)&&!Number.isInteger(this.props.pageCount)&&console.warn("(react-paginate): The pageCount prop value provided is not an integer (".concat(this.props.pageCount,"). Did you forget a Math.ceil()?"))}},{key:"getForwardJump",value:function(){var e=this.state.selected,a=this.props,t=a.pageCount,r=e+a.pageRangeDisplayed;return r>=t?t-1:r}},{key:"getBackwardJump",value:function(){var e=this.state.selected-this.props.pageRangeDisplayed;return e<0?0:e}},{key:"hrefBuilder",value:function(e){var a=this.props,t=a.hrefBuilder,r=a.pageCount;if(t&&e!==this.state.selected&&e>=0&&e<r)return t(e+1)}},{key:"ariaLabelBuilder",value:function(e){var a=e===this.state.selected;if(this.props.ariaLabelBuilder&&e>=0&&e<this.props.pageCount){var t=this.props.ariaLabelBuilder(e+1,a);return this.props.extraAriaContext&&!a&&(t=t+" "+this.props.extraAriaContext),t}}},{key:"getPageElement",value:function(e){var a=this.state.selected,t=this.props,r=t.pageClassName,i=t.pageLinkClassName,s=t.activeClassName,o=t.activeLinkClassName,l=t.extraAriaContext,c=t.pageLabelBuilder;return n.a.createElement(u,{key:e,pageSelectedHandler:this.handlePageSelected.bind(null,e),selected:a===e,pageClassName:r,pageLinkClassName:i,activeClassName:s,activeLinkClassName:o,extraAriaContext:l,href:this.hrefBuilder(e),ariaLabel:this.ariaLabelBuilder(e),page:e+1,pageLabelBuilder:c,getEventListener:this.getEventListener})}},{key:"render",value:function(){var e=this.props.renderOnZeroPageCount;if(0===this.props.pageCount&&void 0!==e)return e?e(this.props):e;var a=this.props,t=a.disabledClassName,r=a.pageCount,i=a.className,s=a.containerClassName,o=a.previousLabel,l=a.previousClassName,u=a.previousLinkClassName,c=a.previousAriaLabel,p=a.prevRel,f=a.nextLabel,g=a.nextClassName,b=a.nextLinkClassName,v=a.nextAriaLabel,m=a.nextRel,h=this.state.selected,y=l+(0===h?" ".concat(t):""),C=g+(h===r-1?" ".concat(t):""),P=0===h?"true":"false",k=h===r-1?"true":"false";return n.a.createElement("ul",{className:i||s},n.a.createElement("li",{className:y},n.a.createElement("a",d({className:u,href:this.hrefBuilder(h-1),tabIndex:"0",role:"button",onKeyPress:this.handlePreviousPage,"aria-disabled":P,"aria-label":c,rel:p},this.getEventListener(this.handlePreviousPage)),o)),this.pagination(),n.a.createElement("li",{className:C},n.a.createElement("a",d({className:b,href:this.hrefBuilder(h+1),tabIndex:"0",role:"button",onKeyPress:this.handleNextPage,"aria-disabled":k,"aria-label":v,rel:m},this.getEventListener(this.handleNextPage)),f)))}}])&&b(a.prototype,t),r&&b(a,r),s}(r.Component);P(k,"propTypes",{pageCount:s.a.number.isRequired,pageRangeDisplayed:s.a.number.isRequired,marginPagesDisplayed:s.a.number.isRequired,previousLabel:s.a.node,previousAriaLabel:s.a.string,prevRel:s.a.string,nextLabel:s.a.node,nextAriaLabel:s.a.string,nextRel:s.a.string,breakLabel:s.a.oneOfType([s.a.string,s.a.node]),hrefBuilder:s.a.func,onPageChange:s.a.func,onPageActive:s.a.func,initialPage:s.a.number,forcePage:s.a.number,disableInitialCallback:s.a.bool,containerClassName:s.a.string,className:s.a.string,pageClassName:s.a.string,pageLinkClassName:s.a.string,pageLabelBuilder:s.a.func,activeClassName:s.a.string,activeLinkClassName:s.a.string,previousClassName:s.a.string,nextClassName:s.a.string,previousLinkClassName:s.a.string,nextLinkClassName:s.a.string,disabledClassName:s.a.string,breakClassName:s.a.string,breakLinkClassName:s.a.string,extraAriaContext:s.a.string,ariaLabelBuilder:s.a.func,eventListener:s.a.string,renderOnZeroPageCount:s.a.func}),P(k,"defaultProps",{pageCount:10,pageRangeDisplayed:2,marginPagesDisplayed:3,activeClassName:"selected",previousLabel:"Previous",previousClassName:"previous",previousAriaLabel:"Previous page",prevRel:"prev",nextLabel:"Next",nextClassName:"next",nextAriaLabel:"Next page",nextRel:"next",breakLabel:"...",disabledClassName:"disabled",disableInitialCallback:!1,pageLabelBuilder:function(e){return e},eventListener:"onClick",renderOnZeroPageCount:void 0});a.default=k}])}));
//# sourceMappingURL=react-paginate.js.map

4

jest.config.js
module.exports = {
"verbose": true
}
verbose: true,
};

15

package.json
{
"name": "react-paginate",
"version": "7.1.3",
"version": "7.1.4",
"description": "A ReactJS component that creates a pagination.",

@@ -27,3 +27,3 @@ "main": "./dist/react-paginate.js",

"peerDependencies": {
"react": "^16.0.0 || ^17.0.0"
"react": "^16 || ^17"
},

@@ -38,7 +38,5 @@ "devDependencies": {

"babel-core": "^6.26.3",
"babel-jest": "^23.6.0",
"babel-jest": "^26.6.3",
"babel-loader": "^8.1.0",
"eslint": "^7.6.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.5",

@@ -48,3 +46,3 @@ "express": "^4.17.1",

"jquery": "^3.5.1",
"prettier": "^2.0.5",
"prettier": "^2.4.1",
"react": "^16.13.1",

@@ -60,6 +58,9 @@ "react-dom": "^16.13.1",

"test": "jest",
"test-watch": "jest --watch",
"build": "webpack --config webpack.config.js --mode=production",
"demo": "webpack --config demo/webpack.config.js --mode=development && node demo/data.js && node demo/server.js",
"start": "npm run demo"
"start": "npm run demo",
"format": "prettier --write .",
"lint": "eslint ."
}
}

34

react_components/PaginationBoxView.js

@@ -27,2 +27,3 @@ 'use strict';

containerClassName: PropTypes.string,
className: PropTypes.string,
pageClassName: PropTypes.string,

@@ -43,2 +44,3 @@ pageLinkClassName: PropTypes.string,

eventListener: PropTypes.string,
renderOnZeroPageCount: PropTypes.func,
};

@@ -64,2 +66,3 @@

eventListener: 'onClick',
renderOnZeroPageCount: undefined,
};

@@ -85,7 +88,4 @@

componentDidMount() {
const {
initialPage,
disableInitialCallback,
extraAriaContext,
} = this.props;
const { initialPage, disableInitialCallback, extraAriaContext, pageCount } =
this.props;
// Call the callback with the initialPage item:

@@ -101,2 +101,8 @@ if (typeof initialPage !== 'undefined' && !disableInitialCallback) {

}
if (!Number.isInteger(pageCount)) {
console.warn(
`(react-paginate): The pageCount prop value provided is not an integer (${this.props.pageCount}). Did you forget a Math.ceil()?`
);
}
}

@@ -111,2 +117,11 @@

}
if (
Number.isInteger(prevProps.pageCount) &&
!Number.isInteger(this.props.pageCount)
) {
console.warn(
`(react-paginate): The pageCount prop value provided is not an integer (${this.props.pageCount}). Did you forget a Math.ceil()?`
);
}
}

@@ -347,5 +362,12 @@

render() {
const { renderOnZeroPageCount } = this.props;
if (this.props.pageCount === 0 && renderOnZeroPageCount !== undefined) {
return renderOnZeroPageCount
? renderOnZeroPageCount(this.props)
: renderOnZeroPageCount;
}
const {
disabledClassName,
pageCount,
className,
containerClassName,

@@ -376,3 +398,3 @@ previousLabel,

return (
<ul className={containerClassName}>
<ul className={className || containerClassName}>
<li className={previousClasses}>

@@ -379,0 +401,0 @@ <a

153

README.md

@@ -9,2 +9,3 @@ # react-paginate

By installing this component and writing only a little bit of CSS you can obtain this:
Note: You should write your own css to obtain this UI. This package do not provide any css.

@@ -25,14 +26,117 @@ <img src="https://cloud.githubusercontent.com/assets/2084833/24840237/7accb75a-1d1e-11e7-9abb-818431398b91.png" alt="Pagination demo 2" />

For [CommonJS](http://wiki.commonjs.org/wiki/CommonJS) users:
## Usage
```javascript
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import ReactPaginate from 'react-paginate';
// Example items, to simulate fetching from another resources.
const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
function Items({ currentItems }) {
return (
<>
{currentItems &&
currentItems.map((item) => (
<div>
<h3>Item #{item}</h3>
</div>
))}
</>
);
}
function PaginatedItems({ itemsPerPage }) {
// We start with an empty list of items.
const [currentItems, setCurrentItems] = useState(null);
const [pageCount, setPageCount] = useState(0);
// Here we use item offsets; we could also use page offsets
// following the API or data you're working with.
const [itemOffset, setItemOffset] = useState(0);
useEffect(() => {
// Fetch items from another resources.
const endOffset = itemOffset + itemsPerPage;
console.log(`Loading items from ${itemOffset} to ${endOffset}`);
setCurrentItems(items.slice(itemOffset, endOffset));
setPageCount(Math.ceil(items.length / itemsPerPage));
}, [itemOffset, itemsPerPage]);
// Invoke when user click to request another page.
const handlePageClick = (event) => {
const newOffset = (event.selected * itemsPerPage) % items.length;
console.log(
`User requested page number ${event.selected}, which is offset ${newOffset}`
);
setItemOffset(newOffset);
};
return (
<>
<Items currentItems={currentItems} />
<ReactPaginate
breakLabel="..."
nextLabel="next >"
onPageChange={handlePageClick}
pageRangeDisplayed={5}
pageCount={pageCount}
previousLabel="< previous"
renderOnZeroPageCount={null}
/>
</>
);
}
// Add a <div id="container"> to your HTML to see the componend rendered.
ReactDOM.render(
<PaginatedItems itemsPerPage={4} />,
document.getElementById('container')
);
```
Read the code of [demo/js/demo.js][1]. You will quickly understand
how to make `react-paginate` work with a list of objects.
Test it on [CodePen](https://codepen.io/monsieurv/pen/abyJQWQ).
You can also read the code of [demo/js/demo.js][1] to quickly understand how to make `react-paginate` work with a list of objects.
You can also check this **[CodePen demo](https://codepen.io/monsieurv/pen/yLoMxYQ)** with fetching sample code (using GitHub API) and synchronized pagination widgets.
## Props
| Name | Type | Description |
| ------------------------ | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `pageCount` | `Number` | **Required.** The total number of pages. |
| `pageRangeDisplayed` | `Number` | **Required.** The range of pages displayed. |
| `marginPagesDisplayed` | `Number` | **Required.** The number of pages to display for margins. |
| `previousLabel` | `Node` | Label for the `previous` button. |
| `nextLabel` | `Node` | Label for the `next` button. |
| `breakLabel` | `Node` | Label for ellipsis. |
| `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. Do not use with `forcePage` at the same time. |
| `forcePage` | `Number` | To override selected page with parent prop. Use this if you want to control the page from your app state. |
| `disableInitialCallback` | `boolean` | Disable `onPageChange` callback with initial page. Default: `false` |
| `containerClassName` | `String` | The classname of the pagination container. |
| `className` | `String` | Same as `containerClassName`. For use with [styled-components](https://styled-components.com/) & other CSS-in-JS. |
| `pageClassName` | `String` | The classname on tag `li` of each page element. |
| `pageLinkClassName` | `String` | The classname on tag `a` of each page element. |
| `pageLabelBuilder` | `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. |
| `nextClassName` | `String` | The classname on tag `li` of the `next` button. |
| `previousLinkClassName` | `String` | The classname on tag `a` of the `previous` button. |
| `nextLinkClassName` | `String` | The classname on tag `a` of the `next` button. |
| `disabledClassName` | `String` | The classname for disabled `previous` and `next` buttons. |
| `hrefBuilder` | `Function` | The method is called to generate the `href` attribute value on tag `a` of each page element. |
| `extraAriaContext` | `String` | DEPRECATED: Extra context to add to the `aria-label` HTML attribute. |
| `ariaLabelBuilder` | `Function` | The method is called to generate the `aria-label` attribute value on each page link |
| `eventListener` | `String` | The event to listen onto before changing the selected page. Default is: `onClick`. |
| `renderOnZeroPageCount` | `Function` | A render fonction called when `pageCount` is zero. Let the Previous / Next buttons displayed by default (`undefined`). Display nothing when `null` is provided. |
## Demo
Clone the repository and move into:
To run the demo locally, clone the repository and move into it:

@@ -66,35 +170,2 @@ ```console

## Props
| Name | Type | Description |
| ------------------------ | ---------- | -------------------------------------------------------------------------------------------- |
| `pageCount` | `Number` | **Required.** The total number of pages. |
| `pageRangeDisplayed` | `Number` | **Required.** The range of pages displayed. |
| `marginPagesDisplayed` | `Number` | **Required.** The number of pages to display for margins. |
| `previousLabel` | `Node` | Label for the `previous` button. |
| `nextLabel` | `Node` | Label for the `next` button. |
| `breakLabel` | `Node` | Label for ellipsis. |
| `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` |
| `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. |
| `pageLabelBuilder` | `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. |
| `nextClassName` | `String` | The classname on tag `li` of the `next` button. |
| `previousLinkClassName` | `String` | The classname on tag `a` of the `previous` button. |
| `nextLinkClassName` | `String` | The classname on tag `a` of the `next` button. |
| `disabledClassName` | `String` | The classname for disabled `previous` and `next` buttons. |
| `hrefBuilder` | `Function` | The method is called to generate the `href` attribute value on tag `a` of each page element. |
| `extraAriaContext` | `String` | DEPRECATED: Extra context to add to the `aria-label` HTML attribute. |
| `ariaLabelBuilder` | `Function` | The method is called to generate the `aria-label` attribute value on each page link |
| `eventListener` | `String` | The event to listen onto before changing the selected page. Default is: "onClick". |
## Contribute

@@ -105,6 +176,6 @@

3. Create a dedicated branch (never ever work in `master`)
4. The first time, run command: `webpack` into the directory
5. Run `npm start`
6. Fix bugs or implement features
7. Always write tests
4. Run `npm start` http://localhost:3000
5. Fix bugs or implement features
6. Always write tests
7. Format with Prettier `npm run format` and check ESLint `npm run lint`

@@ -111,0 +182,0 @@ Run tests:

8

webpack.config.js

@@ -11,3 +11,3 @@ /* global __dirname */

const config = {
target: 'node',
target: 'web',
entry: path.resolve(dir_js, 'index.js'),

@@ -58,5 +58,7 @@ output: {

config.output.path = dir_dist;
config.module.rules = config.module.rules.filter(rule => rule.use !== 'react-hot-loader/webpack');
config.module.rules = config.module.rules.filter(
(rule) => rule.use !== 'react-hot-loader/webpack'
);
}
return config;
}
};
.travis.yml

Sorry, the diff of this file is not supported yet

demo/index.html

Sorry, the diff of this file is not supported yet

demo/styles/style.css

Sorry, the diff of this file is not supported yet

dist/react-paginate.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc