diff --git a/src/components/Pagination/Pagination-test.js b/src/components/Pagination/Pagination-test.js index 1b539367ff..10cd09fa72 100644 --- a/src/components/Pagination/Pagination-test.js +++ b/src/components/Pagination/Pagination-test.js @@ -173,6 +173,13 @@ describe('Pagination', () => { expect(label.text()).toBe('1 of 10 pages'); }); + it('should render ranges and pages for no items', () => { + const pager = mount(); + const labels = pager.find('.bx--pagination__text'); + expect(labels.at(1).text()).toBe('0-0 of 0 items'); + expect(labels.at(2).text()).toBe('1 of 1 pages'); + }); + it('should have two buttons for navigation', () => { const buttons = right.find('.bx--pagination__button'); expect(buttons.length).toBe(2); diff --git a/src/components/Pagination/Pagination.js b/src/components/Pagination/Pagination.js index b7096e58d1..501b114a72 100644 --- a/src/components/Pagination/Pagination.js +++ b/src/components/Pagination/Pagination.js @@ -106,7 +106,8 @@ export default class Pagination extends Component { // used for case when page # is 0 or empty. For other cases // existing props will be used. page >= 0 && - page <= Math.ceil(this.props.totalItems / this.state.pageSize) + page <= + Math.max(Math.ceil(this.props.totalItems / this.state.pageSize), 1) ) { this.setState({ page }, () => this.pageInputDebouncer(this.state.page)); } @@ -138,7 +139,7 @@ export default class Pagination extends Component { return itemText(pageSize * (page - 1) + 1, page * pageSize); } else if (page > 0) { return itemRangeText( - pageSize * (page - 1) + 1, + Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems ); @@ -159,7 +160,7 @@ export default class Pagination extends Component { if (pagesUnknown) { return pageText(page); } else if (page > 0) { - return pageRangeText(page, Math.ceil(totalItems / pageSize)); + return pageRangeText(page, Math.max(Math.ceil(totalItems / pageSize), 1)); } return defaultPageText(Math.ceil(totalItems / pageSize)); }; @@ -192,6 +193,7 @@ export default class Pagination extends Component { const statePage = this.state.page; const statePageSize = this.state.pageSize; + const totalPages = Math.max(Math.ceil(totalItems / statePageSize), 1); const classNames = classnames('bx--pagination', className); const inputId = id || this.uniqueId; @@ -240,9 +242,7 @@ export default class Pagination extends Component { className="bx--pagination__button bx--pagination__button--forward" onClick={this.incrementPage} disabled={ - this.props.disabled || - statePage === Math.ceil(totalItems / statePageSize) || - isLastPage + this.props.disabled || statePage === totalPages || isLastPage }> { expect(label.text()).toBe('1 of 10 pages'); }); + it('should render ranges and pages for no items', () => { + const pager = mount( + + ); + const labels = pager.find('.bx--pagination__text'); + expect(labels.at(1).text()).toBe('\u00a0|\u00a0\u00a00-0 of 0 items'); + expect(labels.at(2).text()).toBe('1 of 1 pages'); + }); + it('should have two buttons for navigation', () => { const buttons = right.find('.bx--pagination__button'); expect(buttons.length).toBe(2); diff --git a/src/components/PaginationV2/PaginationV2.js b/src/components/PaginationV2/PaginationV2.js index e34c91e2f7..b7b266dc4c 100644 --- a/src/components/PaginationV2/PaginationV2.js +++ b/src/components/PaginationV2/PaginationV2.js @@ -165,7 +165,8 @@ export default class PaginationV2 extends Component { const page = Number(evt.target.value); if ( page > 0 && - page <= Math.ceil(this.props.totalItems / this.state.pageSize) + page <= + Math.max(Math.ceil(this.props.totalItems / this.state.pageSize), 1) ) { this.setState({ page }); this.props.onChange({ page, pageSize: this.state.pageSize }); @@ -231,7 +232,7 @@ export default class PaginationV2 extends Component { } ); const inputId = id || this.uniqueId; - const totalPages = Math.ceil(totalItems / statePageSize); + const totalPages = Math.max(Math.ceil(totalItems / statePageSize), 1); const selectItems = this.renderSelectItems(totalPages); return ( @@ -260,7 +261,7 @@ export default class PaginationV2 extends Component { statePage * statePageSize ) : itemRangeText( - statePageSize * (statePage - 1) + 1, + Math.min(statePageSize * (statePage - 1) + 1, totalItems), Math.min(statePage * statePageSize, totalItems), totalItems )} @@ -270,7 +271,7 @@ export default class PaginationV2 extends Component { {pagesUnknown ? pageText(statePage) - : pageRangeText(statePage, Math.ceil(totalItems / statePageSize))} + : pageRangeText(statePage, totalPages)}