fix: Pagination component's range and page text for no items, resolves …

…#553
carbon-design-system · May 9, 2018 · 4a0f1f0 · 4a0f1f0
1 parent 7065843
commit 4a0f1f0
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 12 deletions.
diff --git a/src/components/Pagination/Pagination-test.js b/src/components/Pagination/Pagination-test.js
@@ -171,6 +171,13 @@ describe('Pagination', () => {
         expect(label.text()).toBe('1 of 10 pages');
       });
 
+      it('should render ranges and pages for no items', () => {
+        const pager = mount(<Pagination pageSizes={[5, 10]} totalItems={0} />);
+        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
@@ -83,7 +83,8 @@ export default class Pagination 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 });
@@ -127,6 +128,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;
 
@@ -153,7 +155,7 @@ export default class Pagination extends Component {
                   statePage * statePageSize
                 )
               : itemRangeText(
-                  statePageSize * (statePage - 1) + 1,
+                  Math.min(statePageSize * (statePage - 1) + 1, totalItems),
                   Math.min(statePage * statePageSize, totalItems),
                   totalItems
                 )}
@@ -163,7 +165,7 @@ export default class Pagination extends Component {
           <span className="bx--pagination__text">
             {pagesUnknown
               ? pageText(statePage)
-              : pageRangeText(statePage, Math.ceil(totalItems / statePageSize))}
+              : pageRangeText(statePage, totalPages)}
           </span>
           <button
             className="bx--pagination__button bx--pagination__button--backward"
@@ -191,9 +193,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
             }>
             <Icon
               className="bx--pagination__button-icon"

diff --git a/src/components/PaginationV2/PaginationV2-test.js b/src/components/PaginationV2/PaginationV2-test.js
@@ -171,6 +171,13 @@ describe('Pagination', () => {
         expect(label.text()).toBe('1 of 10 pages');
       });
 
+      it('should render ranges and pages for no items', () => {
+        const pager = mount(<Pagination pageSizes={[5, 10]} totalItems={0} />);
+        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/PaginationV2/PaginationV2.js b/src/components/PaginationV2/PaginationV2.js
@@ -152,7 +152,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 (
@@ -180,7 +180,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
                 )}
@@ -190,7 +190,7 @@ export default class PaginationV2 extends Component {
           <span className="bx--pagination__text">
             {pagesUnknown
               ? pageText(statePage)
-              : pageRangeText(statePage, Math.ceil(totalItems / statePageSize))}
+              : pageRangeText(statePage, totalPages)}
           </span>
           <button
             className={backButtonClasses}
@@ -217,9 +217,7 @@ export default class PaginationV2 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
             }>
             <Icon
               className="bx--pagination__button-icon"