Merge pull request #189 from IBM/feat-tilecatalog-pages

feat(tilecatalog): add page of pages label option
carbon-design-system · Apr 22, 2019 · c0b879b · c0b879b
2 parents abac2db + 70e004a
commit c0b879b
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 242 deletions.
diff --git a/src/components/SimplePagination/SimplePagination.jsx b/src/components/SimplePagination/SimplePagination.jsx
@@ -55,6 +55,8 @@ const propTypes = {
   page: PropTypes.number.isRequired,
   /** The maximum page number that can be navigated to */
   maxPage: PropTypes.number.isRequired,
+  /** Gets called back with arguments (page, maxPage) */
+  pageOfPagesText: PropTypes.func,
   /** Internationalized label for the word 'Page' */
   pageText: PropTypes.string,
   /** Internationalized label for the word 'Next page' */
@@ -66,13 +68,22 @@ const propTypes = {
 };
 
 const defaultProps = {
-  pageText: 'Page',
+  pageOfPagesText: (page, maxPage) => `Page ${page} of ${maxPage}`,
+  pageText: null,
   nextPageText: 'Next page',
   prevPageText: 'Prev page',
 };
 
 /** This is a lighter weight pagination component than the default Carbon one */
-const SimplePagination = ({ pageText, prevPageText, nextPageText, page, maxPage, onPage }) => {
+const SimplePagination = ({
+  pageText,
+  prevPageText,
+  nextPageText,
+  pageOfPagesText,
+  page,
+  maxPage,
+  onPage,
+}) => {
   const hasPrev = page > 1;
   const hasNext = page <= maxPage - 1;
 
@@ -82,7 +93,7 @@ const SimplePagination = ({ pageText, prevPageText, nextPageText, page, maxPage,
   return (
     <StyledContainer>
       <StyledPageLabel>
-        {pageText} {page}
+        {pageText ? `${pageText} ${page}` : pageOfPagesText(page, maxPage)}
       </StyledPageLabel>
       <StyledButton
         role="button"

diff --git a/src/components/TileCatalog/StatefulTileCatalog.test.jsx b/src/components/TileCatalog/StatefulTileCatalog.test.jsx
@@ -71,7 +71,7 @@ describe('StatefulTileCatalog', () => {
         .find('span')
         .at(1)
         .text()
-    ).toEqual('Page 1');
+    ).toContain('Page 1');
     const nextButton = wrapper.find('div[tabIndex=0]');
     nextButton.simulate('click');
     // on Page 2
@@ -80,7 +80,7 @@ describe('StatefulTileCatalog', () => {
         .find('span')
         .at(1)
         .text()
-    ).toEqual('Page 2');
+    ).toContain('Page 2');
 
     const newTiles = commonTileProps.tiles.slice(1, 5);
     // Back to Page 1
@@ -91,7 +91,7 @@ describe('StatefulTileCatalog', () => {
         .find('span')
         .at(1)
         .text()
-    ).toEqual('Page 1');
+    ).toContain('Page 1');
 
     // The new first tile should be selected
     expect(

diff --git a/src/components/TileCatalog/TileCatalog.jsx b/src/components/TileCatalog/TileCatalog.jsx
@@ -49,6 +49,8 @@ export const propTypes = {
   pagination: PropTypes.shape({
     pageSize: PropTypes.number,
     pageText: PropTypes.string,
+    /** Gets called back with arguments (page, maxPage) */
+    pageOfPagesText: PropTypes.func,
     nextPageText: PropTypes.string,
     prevPageText: PropTypes.string,
     onPage: PropTypes.func,
@@ -168,7 +170,7 @@ const TileCatalog = ({
           )}
         </StyledEmptyTile>
       )}
-      {pagination ? (
+      {!isLoading && tiles.length > 0 && !error && pagination ? (
         <SimplePagination {...pagination} maxPage={Math.ceil(totalTiles / pageSize)} />
       ) : null}
     </StyledContainerDiv>