diff --git a/components/Pagination.js b/components/Pagination.js index ad16850606..f96f9fff3b 100644 --- a/components/Pagination.js +++ b/components/Pagination.js @@ -21,6 +21,7 @@ class Pagination extends Component { totalItems: PropTypes.number.isRequired, disabled: PropTypes.bool, page: PropTypes.number, + pageSize: PropTypes.number, }; static defaultProps = { backwardText: 'Backward', @@ -36,14 +37,22 @@ class Pagination extends Component { static uuid = 0; state = { page: this.props.page, - pageSize: this.props.pageSizes[0], + pageSize: this.props.pageSize && + this.props.pageSizes.includes(this.props.pageSize) + ? this.props.pageSize + : this.props.pageSizes[0], }; - componentWillReceiveProps({ pageSizes, page }) { + componentWillReceiveProps({ pageSizes, page, pageSize }) { if (!equals(pageSizes, this.props.pageSizes)) { this.setState({ pageSize: pageSizes[0], page: 1 }); } - if (!equals(page, this.props.page)) { - this.setState({ page }); + if (page !== this.props.page) { + this.setState({ + page, + }); + } + if (pageSize !== this.props.pageSize) { + this.setState({ pageSize }); } } id = Pagination.uuid++; @@ -101,9 +110,9 @@ class Pagination extends Component { onChange={this.handleSizeChange} value={pageSize} > - {pageSizes.map(size => ( + {pageSizes.map(size => - ))} + )} {itemsPerPageText}  |   diff --git a/components/__tests__/Pagination-test.js b/components/__tests__/Pagination-test.js index a9a5443520..4fc8aa307e 100644 --- a/components/__tests__/Pagination-test.js +++ b/components/__tests__/Pagination-test.js @@ -63,7 +63,11 @@ describe('Pagination', () => { actualPageSize = pageSize; }; const pager = mount( - + ); expect(pager.state().pageSize).toBe(5); pager.find('select').simulate('change', { target: { value: 10 } }); @@ -81,7 +85,11 @@ describe('Pagination', () => { actualPage = page; }; const pager = mount( - + ); pager.setState({ page: 2 }); expect(pager.state().page).toBe(2); @@ -97,6 +105,19 @@ describe('Pagination', () => { pager.setProps({ pageSizes: [3, 6] }); expect(pager.state().page).toEqual(1); }); + it('should default to pageSize if pageSize is provided', () => { + const pager = mount( + + ); + expect(pager.state().pageSize).toEqual(10); + }); + it('should default to pageSize if on change to pageSize', () => { + const pager = mount( + + ); + pager.setProps({ pageSize: 10 }); + expect(pager.state().pageSize).toEqual(10); + }); }); }); @@ -112,8 +133,12 @@ describe('Pagination', () => { it('should have two buttons for navigation', () => { const buttons = right.find('.bx--pagination__button'); expect(buttons.length).toBe(2); - expect(buttons.at(0).hasClass('bx--pagination__button--backward')).toBe(true); - expect(buttons.at(1).hasClass('bx--pagination__button--forward')).toBe(true); + expect(buttons.at(0).hasClass('bx--pagination__button--backward')).toBe( + true + ); + expect(buttons.at(1).hasClass('bx--pagination__button--forward')).toBe( + true + ); }); it('should disable backward navigation for the first page', () => { const buttons = right.find('.bx--pagination__button'); @@ -122,7 +147,11 @@ describe('Pagination', () => { }); it('should disable forward navigation for the last page', () => { const smallPage = shallow( - + ); const buttons = smallPage.find('.bx--pagination__button'); expect(buttons.at(0).props().disabled).toBe(true); @@ -136,7 +165,11 @@ describe('Pagination', () => { actualPage = page; }; const pager = mount( - + ); expect(pager.state().page).toBe(1); pager.find('.bx--pagination__button--forward').simulate('click'); @@ -149,7 +182,11 @@ describe('Pagination', () => { actualPage = page; }; const pager = mount( - + ); pager.setState({ page: 2 }); expect(pager.state().page).toBe(2); @@ -163,10 +200,16 @@ describe('Pagination', () => { actualPage = page; }; const pager = mount( - + ); expect(pager.state().page).toBe(1); - pager.find('.bx--text__input').simulate('change', { target: { value: 2 } }); + pager + .find('.bx--text__input') + .simulate('change', { target: { value: 2 } }); expect(actualPage).toBe(2); expect(pager.state().page).toBe(2); });