feat(pager): add props to conditional render elements and smart rende…

…r buttons Adds `show...` props to support conditional rendering of elements within `Pager`. Adds support for smart rendering navigartion controls, if there is zero or one page all buttons are hidden, if there is only two the `First` and `Last` buttons are hidden. Adds example of responsive `Pager` using the `show...` props and the `useMediaQuery` hook fix #3425
Sage · Feb 16, 2021 · 90be09b · 90be09b
1 parent b5e1bb7
commit 90be09b
Show file tree

Hide file tree

Showing 13 changed files with 673 additions and 1,473 deletions.
diff --git a/src/components/pager/__internal__/__snapshots__/pager.spec.js.snap b/src/components/pager/__internal__/__snapshots__/pager.spec.js.snap
diff --git a/src/components/pager/__internal__/pager-navigation-link.component.js b/src/components/pager/__internal__/pager-navigation-link.component.js
@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, useCallback } from "react";
 import PropTypes from "prop-types";
 import I18n from "i18n-js";
-import { StyledPagerLinkStyles } from "./pager.style";
+import { StyledPagerLinkStyles } from "../pager.style";
 
 const PagerNavigationLink = ({
   type,
@@ -10,7 +10,6 @@ const PagerNavigationLink = ({
   pageSize,
   onClick,
   onPagination,
-  ...props
 }) => {
   const linkRef = useRef();
   const navLinkConfig = {
@@ -33,10 +32,6 @@ const PagerNavigationLink = ({
   };
 
   const disabled = useCallback(() => {
-    if (pageCount === 1 || pageCount === 0) {
-      return true;
-    }
-
     if (currentPage === 1) {
       return type === "previous" || type === "first";
     }
@@ -67,7 +62,6 @@ const PagerNavigationLink = ({
       disabled={disabled()}
       onClick={handleOnCLick}
       ref={linkRef}
-      {...props}
     >
       {text}
     </StyledPagerLinkStyles>

diff --git a/src/components/pager/__internal__/pager-navigation.component.js b/src/components/pager/__internal__/pager-navigation.component.js
@@ -5,7 +5,7 @@ import {
   StyledPagerNavigation,
   StyledPagerNavInner,
   StyledPagerNoSelect,
-} from "./pager.style";
+} from "../pager.style";
 import NumberInput from "../../../__experimental__/components/number";
 import Events from "../../../utils/helpers/events";
 import createGuid from "../../../utils/helpers/guid";
@@ -22,10 +22,20 @@ const PagerNavigation = ({
   onLast,
   onPagination,
   pageCount,
-  ...props
+  showFirstAndLastButtons = true,
+  showPreviousAndNextButtons = true,
+  showPageCount = true,
 }) => {
   const guid = useRef(createGuid());
   const currentPageId = `Pager_${guid.current}`;
+  const hasOnePage = pageCount <= 1;
+  const hasTwoPages = pageCount === 2;
+  const pagerNavigationProps = {
+    currentPage,
+    pageSize,
+    pageCount,
+    onPagination,
+  };
 
   const handlePageInputChange = (ev) => {
     if (pageCount === 0) {
@@ -55,59 +65,71 @@ const PagerNavigation = ({
     setCurrentPage(e.target.value);
   };
 
-  const pagerNavigationLinkProps = {
-    currentPage,
-    pageSize,
-    pageCount,
-    onPagination,
-  };
+  const renderButtonsBeforeCount = () => (
+    <>
+      {!hasTwoPages && showFirstAndLastButtons && (
+        <PagerNavigationLink
+          type="first"
+          onClick={onFirst}
+          {...pagerNavigationProps}
+        />
+      )}
+      {showPreviousAndNextButtons && (
+        <PagerNavigationLink
+          type="previous"
+          onClick={onPrevious}
+          {...pagerNavigationProps}
+        />
+      )}
+    </>
+  );
+
+  const renderButtonsAfterCount = () => (
+    <>
+      {showPreviousAndNextButtons && (
+        <PagerNavigationLink
+          type="next"
+          onClick={onNext}
+          {...pagerNavigationProps}
+        />
+      )}
+      {!hasTwoPages && showFirstAndLastButtons && (
+        <PagerNavigationLink
+          type="last"
+          onClick={onLast}
+          {...pagerNavigationProps}
+        />
+      )}
+    </>
+  );
 
   return (
-    <StyledPagerNavigation {...props}>
-      <PagerNavigationLink
-        type="first"
-        onClick={onFirst}
-        {...pagerNavigationLinkProps}
-      />
-      <PagerNavigationLink
-        type="previous"
-        onClick={onPrevious}
-        {...pagerNavigationLinkProps}
-      />
-      <StyledPagerNavInner>
-        <StyledPagerNoSelect>
-          {I18n.t("pager.page_x", { defaultValue: "Page " })}
-        </StyledPagerNoSelect>
-        <Label htmlFor={currentPageId}>
-          <NumberInput
-            value={currentPage.toString()}
-            data-element="current-page"
-            onChange={handleCurrentPageChange}
-            onBlur={handlePageInputChange}
-            id={currentPageId}
-            onKeyUp={(ev) => {
-              if (!Events.isEnterKey(ev)) {
-                return false;
+    <StyledPagerNavigation>
+      {!hasOnePage && renderButtonsBeforeCount()}
+      {showPageCount && (
+        <StyledPagerNavInner>
+          <StyledPagerNoSelect>
+            {I18n.t("pager.page_x", { defaultValue: "Page " })}
+          </StyledPagerNoSelect>
+          <Label htmlFor={currentPageId}>
+            <NumberInput
+              value={currentPage.toString()}
+              data-element="current-page"
+              onChange={handleCurrentPageChange}
+              onBlur={handlePageInputChange}
+              id={currentPageId}
+              onKeyUp={(ev) =>
+                Events.isEnterKey(ev) ? handlePageInputChange(ev) : false
               }
-              return handlePageInputChange(ev);
-            }}
-          />
-        </Label>
-        <StyledPagerNoSelect>
-          {I18n.t("pager.of_y", { defaultValue: " of " })}
-          {pageCount}
-        </StyledPagerNoSelect>
-      </StyledPagerNavInner>
-      <PagerNavigationLink
-        type="next"
-        onClick={onNext}
-        {...pagerNavigationLinkProps}
-      />
-      <PagerNavigationLink
-        type="last"
-        onClick={onLast}
-        {...pagerNavigationLinkProps}
-      />
+            />
+          </Label>
+          <StyledPagerNoSelect>
+            {I18n.t("pager.of_y", { defaultValue: " of " })}
+            {pageCount}
+          </StyledPagerNoSelect>
+        </StyledPagerNavInner>
+      )}
+      {!hasOnePage && renderButtonsAfterCount()}
     </StyledPagerNavigation>
   );
 };
@@ -122,16 +144,22 @@ PagerNavigation.propTypes = {
   pageCount: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** Sets the current page being shown */
   setCurrentPage: PropTypes.func,
-  /** onFirst Callback trigered when first link is triggered */
+  /** onFirst Callback triggered when first link is triggered */
   onFirst: PropTypes.func,
-  /** onPrevious Callback trigered when previous link is triggered */
+  /** onPrevious Callback triggered when previous link is triggered */
   onPrevious: PropTypes.func,
-  /** onNext Callback trigered when next link is triggered */
+  /** onNext Callback triggered when next link is triggered */
   onNext: PropTypes.func,
-  /** onLast Callback trigered when last link is triggered */
+  /** onLast Callback triggered when last link is triggered */
   onLast: PropTypes.func,
-  /** onPagination Callback trigered when a change is triggered */
+  /** onPagination Callback triggered when a change is triggered */
   onPagination: PropTypes.func,
+  /** Should the `First` and `Last` navigation buttons be shown */
+  showFirstAndLastButtons: PropTypes.bool,
+  /** Should the `Next` and `Previous` navigation buttons be shown */
+  showPreviousAndNextButtons: PropTypes.bool,
+  /** Should the page count input be shown */
+  showPageCount: PropTypes.bool,
 };
 
 export default PagerNavigation;
diff --git a/src/components/pager/__internal__/pager-navigation.spec.js b/src/components/pager/__internal__/pager-navigation.spec.js
@@ -1,8 +1,7 @@
 import React from "react";
 import { shallow, mount } from "enzyme";
-import "jest-styled-components";
 import PagerNavigation from "./pager-navigation.component";
-import { StyledPagerLinkStyles } from "./pager.style";
+import { StyledPagerLinkStyles, StyledPagerNavInner } from "../pager.style";
 import { assertStyleMatch } from "../../../__spec_helper__/test-utils";
 import StyledInputPresentation from "../../../__experimental__/components/input/input-presentation.style";
 import StyledInput from "../../../__experimental__/components/input/input.style";
@@ -13,7 +12,7 @@ const pageSizeSelectionOptions = [
   { id: "50", name: 50 },
 ];
 
-function render(props, renderType = shallow) {
+function render(props = {}, renderType = shallow) {
   props.setCurrentThemeName = () => {};
   return renderType(<PagerNavigation {...props} />);
 }
@@ -25,8 +24,6 @@ describe("Pager Navigation", () => {
     onPagination: () => true,
     pageSize: 10,
     pageCount: 10,
-    showPageSizeSelection: true,
-    pageSizeSelectionOptions,
   };
 
   it("renders the Pager Navigation correctly with the Mint Theme", () => {
@@ -75,24 +72,24 @@ describe("Pager Navigation", () => {
 
   describe("onClick", () => {
     it("does not trigger if link is disabled", () => {
-      const onLast = jest.fn();
+      const onFirst = jest.fn();
       const wrapper = render(
         {
           onPagination: () => true,
           pageSize: 10,
           showPageSizeSelection: true,
           pageSizeSelectionOptions,
           currentPage: 1,
-          pageCount: 1,
+          pageCount: 3,
           totalRecords: 1,
-          onLast,
+          onFirst,
         },
         mount
       );
       const navLinks = wrapper.find(StyledPagerLinkStyles);
-      const last = navLinks.last();
-      last.simulate("click");
-      expect(onLast).toBeCalledTimes(0);
+      const first = navLinks.first();
+      first.simulate("click");
+      expect(onFirst).toBeCalledTimes(0);
     });
   });
 
@@ -181,4 +178,59 @@ describe("Pager Navigation", () => {
       expect(onPagination).toHaveBeenCalledWith(0, 10, "input");
     });
   });
+
+  describe("conditional rendering", () => {
+    it("hides the page count input when 'showPageCount' is false", () => {
+      const wrapper = render(
+        {
+          ...props,
+          currentPage: 1,
+          setCurrentPage: () => {},
+          pageCount: 3,
+          showPageCount: false,
+        },
+        mount
+      );
+
+      const navButtons = wrapper.find("button");
+      expect(navButtons.length).toEqual(4);
+      expect(wrapper.find(StyledPagerNavInner).exists()).toBeFalsy();
+    });
+
+    it("hides the `First` and `Last` buttons when 'showFirstAndLastButtons' is false", () => {
+      const wrapper = render(
+        {
+          ...props,
+          currentPage: 1,
+          setCurrentPage: () => {},
+          pageCount: 3,
+          showFirstAndLastButtons: false,
+        },
+        mount
+      );
+
+      const navButtons = wrapper.find("button");
+      expect(navButtons.length).toEqual(2);
+      expect(navButtons.first().text()).toEqual("Previous");
+      expect(navButtons.last().text()).toEqual("Next");
+    });
+
+    it("hides the `Previous` and `Next` buttons when 'showPreviousAndNextButtons' is false", () => {
+      const wrapper = render(
+        {
+          ...props,
+          currentPage: 1,
+          setCurrentPage: () => {},
+          pageCount: 3,
+          showPreviousAndNextButtons: false,
+        },
+        mount
+      );
+
+      const navButtons = wrapper.find("button");
+      expect(navButtons.length).toEqual(2);
+      expect(navButtons.first().text()).toEqual("First");
+      expect(navButtons.last().text()).toEqual("Last");
+    });
+  });
 });