From 0d976428c4f54530d82ea9c00a68845bf7e50149 Mon Sep 17 00:00:00 2001 From: Mahendra Singh Date: Mon, 2 Mar 2020 18:08:57 +0530 Subject: [PATCH] parent d4328dcf823bfae1792e76e32e83646f3b75e6e7 author Mahendra Singh 1583155922 +530 committer Mahendra Singh 1583155922 +0530 feat#773: Added visiblePageTotal prop to Pagination component. --- src/Pagination/Pagination.Component.js | 12 + src/Pagination/Pagination.js | 39 +- src/Pagination/Pagination.test.js | 49 ++ .../__snapshots__/Pagination.test.js.snap | 507 ++++++++++++++++-- 4 files changed, 566 insertions(+), 41 deletions(-) diff --git a/src/Pagination/Pagination.Component.js b/src/Pagination/Pagination.Component.js index 87dbcae30..7b6f41453 100644 --- a/src/Pagination/Pagination.Component.js +++ b/src/Pagination/Pagination.Component.js @@ -78,6 +78,18 @@ export const PaginationComponent = () => { totalText='Dalmations' /> + + + + ); }; diff --git a/src/Pagination/Pagination.js b/src/Pagination/Pagination.js index 97947241e..40eca0b38 100644 --- a/src/Pagination/Pagination.js +++ b/src/Pagination/Pagination.js @@ -63,19 +63,40 @@ class Pagination extends Component { }; // create pagination links - createPaginationLinks = numberOfPages => { + createPaginationLinks = (numberOfPages) => { + let linksToBeAdded = numberOfPages; + let pageNumberOffset = 1; + + //if numberOfPages is more than noOfPages + if (numberOfPages > this.props.visiblePageTotal) { + linksToBeAdded = this.props.visiblePageTotal; + //highest page number possible + let maxPageNumber = this.state.selectedPage + Math.ceil(this.props.visiblePageTotal / 2); + //all but the last page, selected page is the center of selection + if (maxPageNumber <= numberOfPages) { + pageNumberOffset = this.state.selectedPage - Math.floor(this.props.visiblePageTotal / 2) + 1; + } else { + //last page,selected page is to the right of the center + pageNumberOffset = numberOfPages - Math.floor(this.props.visiblePageTotal) + 1; + } + //prevent negative values on first page + if (pageNumberOffset <= 0) { + pageNumberOffset = 1; + } + } + // create an array with number of pages and fill it with links - const aPages = Array(numberOfPages) + const aPages = Array(linksToBeAdded) .fill() .map((link, index) => ( - {index + 1} + {index + pageNumberOffset} )); return aPages; @@ -96,6 +117,7 @@ class Pagination extends Component { nextProps, onClick, initialPage, + visiblePageTotal, ...props } = this.props; @@ -166,7 +188,8 @@ Pagination.propTypes = { }), nextProps: PropTypes.object, prevProps: PropTypes.object, - totalText: PropTypes.string + totalText: PropTypes.string, + visiblePageTotal: PropTypes.number }; Pagination.defaultProps = { @@ -177,7 +200,8 @@ Pagination.defaultProps = { next: 'Next', previous: 'Previous' }, - totalText: 'items' + totalText: 'items', + visiblePageTotal: 10 }; Pagination.propDescriptions = { @@ -192,7 +216,8 @@ Pagination.propDescriptions = { }, nextProps: 'Additional props to be spread to the next arrow `` element.', prevProps: 'Additional props to be spread to the previous arrow `` element.', - totalText: 'Localized text to display next to the total number of items. Used with `displayTotal`.' + totalText: 'Localized text to display next to the total number of items. Used with `displayTotal`.', + visiblePageTotal: 'Total number of visible pages.' }; export default Pagination; diff --git a/src/Pagination/Pagination.test.js b/src/Pagination/Pagination.test.js index 807f448e3..b4d5fa84e 100644 --- a/src/Pagination/Pagination.test.js +++ b/src/Pagination/Pagination.test.js @@ -57,6 +57,24 @@ describe('', () => { onClick={handleClick} /> ); + const visibleTotalPagesPagination = ( + + ); + + const visibleTotalPagesWithItemTotalPagination = ( + + ); + + const visibleTotalPagesZeroPagination = ( + + ); + test('create default Pagination component', () => { const component = renderer.create(defaultPagination); const tree = component.toJSON(); @@ -113,6 +131,27 @@ describe('', () => { expect(tree).toMatchSnapshot(); }); + test('create Pagination component with visibleTotalPages set', () => { + const component = renderer.create(visibleTotalPagesPagination); + const tree = component.toJSON(); + + expect(tree).toMatchSnapshot(); + }); + + test('create Pagination component with visibleTotalPages set to 20 and item per page set to 0', () => { + const component = renderer.create(visibleTotalPagesZeroPagination); + const tree = component.toJSON(); + + expect(tree).toMatchSnapshot(); + }); + + test('create Pagination component with visibleTotalPages set to 20 and totaPage = 10', () => { + const component = renderer.create(visibleTotalPagesWithItemTotalPagination); + const tree = component.toJSON(); + + expect(tree).toMatchSnapshot(); + }); + test('navigate to previous page', () => { const wrapper = shallow(initialSetPagination); wrapper.setState({ selectedPage: 5 }); @@ -153,6 +192,16 @@ describe('', () => { expect(wrapper.state(['selectedPage'])).toEqual(4); }); + test('create Pagination component with total pages = 20', () => { + const wrapper = shallow(visibleTotalPagesPagination); + expect(wrapper.find('a.fd-pagination__link').length).toEqual(22); + }); + + test('create Pagination component with total pages = 20 and itemTotal = 10', () => { + const wrapper = shallow(visibleTotalPagesWithItemTotalPagination); + expect(wrapper.find('a.fd-pagination__link').length).toEqual(12); + }); + describe('Prop spreading', () => { test('should allow props to be spread to the Pagination component', () => { let element = mount( diff --git a/src/Pagination/__snapshots__/Pagination.test.js.snap b/src/Pagination/__snapshots__/Pagination.test.js.snap index 8f9173546..656fd6c25 100644 --- a/src/Pagination/__snapshots__/Pagination.test.js.snap +++ b/src/Pagination/__snapshots__/Pagination.test.js.snap @@ -102,14 +102,6 @@ exports[` create Pagination component with initial page set 1`] = > 10 - - 11 - create Pagination component with item per page set to 0 > 10 - - 11 - create Pagination component with total item hidden 1`] = > 10 + + + +`; + +exports[` create Pagination component with total text set 1`] = ` +
+ + 101 + + Dalmations + +
`; -exports[` create Pagination component with total text set 1`] = ` +exports[` create Pagination component with visibleTotalPages set 1`] = `
- 101 + 221 - Dalmations + items
`; -exports[` create default Pagination component 1`] = ` +exports[` create Pagination component with visibleTotalPages set to 20 and item per page set to 0 1`] = `
- 101 + 200 items @@ -656,6 +816,78 @@ exports[` create default Pagination component 1`] = ` > 11 + + 12 + + + 13 + + + 14 + + + 15 + + + 16 + + + 17 + + + 18 + + + 19 + + + 20 + create default Pagination component 1`] = `
`; -exports[` create default Pagination component with displayTotalProps 1`] = ` +exports[` create Pagination component with visibleTotalPages set to 20 and totaPage = 10 1`] = ` +
+ + 10 + + items + + +
+`; + +exports[` create default Pagination component 1`] = `
101 @@ -769,13 +1112,118 @@ exports[` create default Pagination component with displayTotalPro > 10 + + +
+`; + +exports[` create default Pagination component with displayTotalProps 1`] = ` +
+ + 101 + + items + +