@progressiveui/react 1.22.0

package/src/components/Pagination/Pagination-test.js

@@ -0,0 +1,400 @@
+import React from 'react';
+import Pagination from '.';
+import Select from '../Select';
+import SelectItem from '../SelectItem';
+import { shallow, mount } from 'enzyme';
+
+jest.useFakeTimers();
+
+describe('Pagination', () => {
+  describe('renders as expected', () => {
+    const pagination = shallow(
+      <Pagination className="extra-class" pageSizes={[5, 20]} totalItems={50} />
+    );
+
+    beforeEach(() => {
+      pagination.setProps({ itemsPerPageFollowsText: undefined });
+    });
+
+    describe('pagination container', () => {
+      it('should render the expected classes', () => {
+        expect(pagination.hasClass('wfp--pagination')).toBe(true);
+        expect(pagination.hasClass('extra-class')).toBe(true);
+      });
+    });
+
+    describe('pagination size container', () => {
+      const left = pagination.find('.wfp--pagination__left');
+
+      it('should render a left container', () => {
+        expect(left.length).toBe(1);
+      });
+
+      it('should have a size dropdown', () => {
+        const select = left.find(Select);
+        const items = select.find(SelectItem);
+        expect(select.length).toBe(1);
+        expect(items.length).toBe(2);
+        expect(items.at(0).props().value).toBe(5);
+        expect(items.at(1).props().value).toBe(20);
+      });
+
+      it('should label the dropdown', () => {
+        const label = left.find('.wfp--pagination__text').first();
+        expect(label.text()).toBe('Items per page:');
+      });
+
+      it('should support translated label with colon', () => {
+        pagination.setProps({ itemsPerPageFollowsText: 'foo' });
+        const label = pagination
+          .find('.wfp--pagination__left')
+          .find('.wfp--pagination__text')
+          .first();
+        expect(label.text()).toBe('foo');
+      });
+
+      it('should show the item spacers', () => {
+        const label = left.find('.wfp--pagination__text').at(1);
+        expect(label.text()).toBe('\u00a0|\u00a0\u00a0');
+      });
+
+      it('should show the item range out of the total', () => {
+        const label = left.find('.wfp--pagination__text').at(2);
+        expect(label.text()).toBe('1-5 of 50 items');
+      });
+
+      describe('pagination size container when total pages unknown', () => {
+        const pager = mount(
+          <Pagination pageSizes={[5, 10]} pagesUnknown={true} />
+        );
+        const left = pager.find('.wfp--pagination__left');
+
+        it('should render a left container', () => {
+          expect(left.length).toBe(1);
+        });
+
+        it('should have a size dropdown', () => {
+          const select = left.find(Select);
+          const items = select.find(SelectItem);
+          expect(select.length).toBe(1);
+          expect(items.length).toBe(2);
+          expect(items.at(0).props().value).toBe(5);
+          expect(items.at(1).props().value).toBe(10);
+        });
+
+        it('should label the dropdown', () => {
+          const label = left.find('.wfp--pagination__text').first();
+          expect(label.text()).toBe('Items per page:');
+        });
+
+        it('should support translated label with colon', () => {
+          pagination.setProps({ itemsPerPageFollowsText: 'foo' });
+          const label = pagination
+            .find('.wfp--pagination__left')
+            .find('.wfp--pagination__text')
+            .first();
+          expect(label.text()).toBe('foo');
+        });
+
+        it('should show the item range spacers', () => {
+          const label = left.find('.wfp--pagination__text').at(1);
+          expect(label.text()).toBe('\u00a0|\u00a0\u00a0');
+        });
+
+        it('should show the item range out of the total', () => {
+          const label = left.find('.wfp--pagination__text').at(2);
+          expect(label.text()).toBe('1-5 items');
+        });
+      });
+
+      describe('pagination sizing', () => {
+        it('should respond to page size changes', () => {
+          let actualPageSize;
+          const handler = ({ pageSize }) => {
+            actualPageSize = pageSize;
+          };
+          const pager = mount(
+            <Pagination
+              pageSizes={[5, 10]}
+              totalItems={50}
+              onChange={handler}
+            />
+          );
+          expect(pager.state().pageSize).toBe(5);
+          pager
+            .find('select')
+            .first()
+            .simulate('change', { target: { value: 10 } });
+          expect(actualPageSize).toBe(10);
+          expect(pager.state().pageSize).toBe(10);
+
+          // Text updates after change
+          const labels = pager.find('.wfp--pagination__text');
+          expect(labels.at(1).text()).toBe('\u00a0|\u00a0\u00a0');
+          expect(labels.at(2).text()).toBe('1-10 of 50 items');
+        });
+
+        it('should reset the page when page size changes', () => {
+          let actualPage;
+          const handler = ({ page }) => {
+            actualPage = page;
+          };
+          const pager = mount(
+            <Pagination
+              pageSizes={[5, 10]}
+              totalItems={50}
+              onChange={handler}
+            />
+          );
+          pager.setState({ page: 2 });
+          expect(pager.state().page).toBe(2);
+          pager
+            .find('select')
+            .first()
+            .simulate('change', { target: { value: 10 } });
+          expect(actualPage).toBe(1);
+          expect(pager.state().page).toBe(1);
+        });
+
+        it('should return to first page on changes to pageSizes', () => {
+          const pager = mount(
+            <Pagination pageSizes={[5, 10]} totalItems={50} />
+          );
+          pager.setState({ page: 2 });
+          pager.setProps({ pageSizes: [3, 6] });
+          expect(pager.state().page).toEqual(1);
+        });
+
+        it('should avoid returning to first page unless actual change in pageSizes is detected', () => {
+          const pager = mount(
+            <Pagination pageSizes={[5, 10]} totalItems={50} />
+          );
+          pager.setState({ page: 2 });
+          pager.setProps({ pageSizes: [5, 10] });
+          expect(pager.state().page).toEqual(2);
+        });
+
+        it('should default to pageSize if pageSize is provided', () => {
+          const pager = mount(
+            <Pagination pageSizes={[5, 10]} pageSize={10} totalItems={50} />
+          );
+          expect(pager.state().pageSize).toEqual(10);
+        });
+
+        it('should default to pageSize if on change to pageSize', () => {
+          const pager = mount(
+            <Pagination pageSizes={[5, 10]} totalItems={50} />
+          );
+          pager.setProps({ pageSize: 10 });
+          expect(pager.state().pageSize).toEqual(10);
+        });
+
+        it('should avoid defaulting to pageSize unless actual change in pageSize is detected', () => {
+          const pager = mount(
+            <Pagination pageSizes={[5, 10]} pageSize={10} totalItems={50} />
+          );
+          pager.setState({ pageSize: 20 });
+          pager.setProps({ pageSize: 10 });
+          expect(pager.state().pageSize).toEqual(20);
+        });
+      });
+    });
+
+    describe('pagination paging container', () => {
+      const right = pagination.find('.wfp--pagination__right');
+
+      it('should render a right container', () => {
+        expect(right.length).toBe(1);
+      });
+
+      it('should show the current page out of the total number of pages', () => {
+        const label = right.find('.wfp--pagination__text').first();
+        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('.wfp--pagination__text');
+        expect(labels.at(1).text()).toBe('\u00a0|\u00a0\u00a0');
+        expect(labels.at(2).text()).toBe('0-0 of 0 items');
+      });
+
+      it('should have two buttons for navigation', () => {
+        const buttons = right.find('.wfp--pagination__button');
+        expect(buttons.length).toBe(2);
+        expect(
+          buttons.at(0).hasClass('wfp--pagination__button--backward')
+        ).toBe(true);
+        expect(buttons.at(1).hasClass('wfp--pagination__button--forward')).toBe(
+          true
+        );
+      });
+
+      it('should disable backward navigation for the first page', () => {
+        const buttons = right.find('.wfp--pagination__button');
+        expect(buttons.at(0).props().disabled).toBe(true);
+        expect(buttons.at(1).props().disabled).toBe(false);
+      });
+
+      it('should disable forward navigation for the last page', () => {
+        const smallPage = shallow(
+          <Pagination
+            className="extra-class"
+            pageSizes={[100]}
+            totalItems={50}
+          />
+        );
+        const buttons = smallPage.find('.wfp--pagination__button');
+        expect(buttons.at(0).props().disabled).toBe(true);
+        expect(buttons.at(1).props().disabled).toBe(true);
+      });
+
+      describe('pagination paging container when total pages unknown', () => {
+        const pager = mount(
+          <Pagination pageSizes={[5, 10]} pagesUnknown={true} />
+        );
+
+        const right = pager.find('.wfp--pagination__right');
+
+        it('should render a right container', () => {
+          expect(right.length).toBe(1);
+        });
+
+        it('should show the current page without the total number of pages', () => {
+          const label = right.find('.wfp--pagination__text').first();
+          expect(label.text()).toBe('page 1');
+        });
+
+        it('should have two buttons for navigation', () => {
+          const buttons = right.find('.wfp--pagination__button');
+          expect(buttons.length).toBe(2);
+          expect(
+            buttons.at(0).hasClass('wfp--pagination__button--backward')
+          ).toBe(true);
+          expect(
+            buttons.at(1).hasClass('wfp--pagination__button--forward')
+          ).toBe(true);
+        });
+
+        it('should disable backward navigation for the first page', () => {
+          const buttons = right.find('.wfp--pagination__button');
+          expect(buttons.at(0).props().disabled).toBe(true);
+          expect(buttons.at(1).props().disabled).toBe(false);
+        });
+
+        it('should disable forward navigation for the last page', () => {
+          const smallPage = shallow(
+            <Pagination
+              pageSizes={[100]}
+              pagesUnknown={true}
+              isLastPage={true}
+            />
+          );
+          const buttons = smallPage.find('.wfp--pagination__button');
+          expect(buttons.at(0).props().disabled).toBe(true);
+          expect(buttons.at(1).props().disabled).toBe(true);
+        });
+
+        it('should hide text input if disabled', () => {
+          const noTextInput = shallow(
+            <Pagination
+              pageSizes={[100]}
+              pagesUnknown={true}
+              pageInputDisabled={true}
+            />
+          );
+          const right = noTextInput.find(
+            '.wfp--pagination__right .wfp--text-input'
+          );
+          expect(right.length).toEqual(0);
+        });
+      });
+
+      describe('pagination navigation', () => {
+        it('should go to the next page when clicking forward', () => {
+          let actualPage;
+          const handler = ({ page }) => {
+            actualPage = page;
+          };
+          const pager = mount(
+            <Pagination
+              pageSizes={[5, 10]}
+              totalItems={50}
+              onChange={handler}
+            />
+          );
+          expect(pager.state().page).toBe(1);
+          pager.find('.wfp--pagination__button--forward').simulate('click');
+          expect(actualPage).toBe(2);
+          expect(pager.state().page).toBe(2);
+        });
+
+        it('should go to the previous page when clicking backward', () => {
+          let actualPage;
+          const handler = ({ page }) => {
+            actualPage = page;
+          };
+          const pager = mount(
+            <Pagination
+              pageSizes={[5, 10]}
+              totalItems={50}
+              onChange={handler}
+            />
+          );
+          pager.setState({ page: 2 });
+          expect(pager.state().page).toBe(2);
+          pager.find('.wfp--pagination__button--backward').simulate('click');
+          expect(actualPage).toBe(1);
+          expect(pager.state().page).toBe(1);
+        });
+
+        it('should jump to the page entered in the input field', () => {
+          let actualPage;
+          const handler = ({ page }) => {
+            actualPage = page;
+          };
+          const pager = mount(
+            <Pagination
+              pageSizes={[5, 10]}
+              totalItems={50}
+              onChange={handler}
+            />
+          );
+          expect(pager.state().page).toBe(1);
+          pager
+            .find('select')
+            .last()
+            .simulate('change', { target: { value: 2 } });
+          jest.runAllTimers();
+          expect(actualPage).toBe(2);
+          expect(pager.state().page).toBe(2);
+        });
+
+        it('should jump to page number if prop page is provided', () => {
+          const pager = mount(
+            <Pagination pageSizes={[5, 10]} totalItems={50} page={3} />
+          );
+          expect(pager.state().page).toBe(3);
+          pager.setProps({ page: 2 });
+          expect(pager.state().page).toBe(2);
+        });
+
+        it('should avoid jumping to page number unless actual change in prop page is detected', () => {
+          const pager = mount(
+            <Pagination pageSizes={[5, 10]} totalItems={50} page={3} />
+          );
+          expect(pager.state().page).toBe(3);
+          pager.setState({ page: 2 });
+          pager.setProps({ page: 3 });
+          expect(pager.state().page).toBe(2);
+        });
+
+        it('should not increment page if there is only 1 page', () => {
+          const pager = mount(<Pagination pageSizes={[10]} totalItems={5} />);
+          const buttons = pager.find('.wfp--pagination__button');
+          expect(buttons.at(1).props().disabled).toBe(true);
+        });
+      });
+    });
+  });
+});

package/src/components/Pagination/Pagination.Skeleton.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import SkeletonText from '../SkeletonText';
+import useSettings from '../../hooks/useSettings';
+
+const PaginationSkeleton = () => {
+  const { prefix } = useSettings();
+  return (
+    <div className={`${prefix}--pagination ${prefix}--skeleton`}>
+      <div className={`${prefix}--pagination__left`}>
+        <SkeletonText width="70px" />
+        <SkeletonText width="35px" />
+        <SkeletonText width="105px" />
+      </div>
+      <div
+        className={`${prefix}--pagination__right ${prefix}--pagination--inline`}>
+        <SkeletonText width="70px" />
+      </div>
+    </div>
+  );
+};
+
+export default PaginationSkeleton;

package/src/components/Pagination/Pagination.stories.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import markdown from "./README.mdx";
+import Pagination from ".";
+
+export default {
+  title: "Components/UI Elements/Pagination",
+  component: Pagination,
+  parameters: {
+    componentSubtitle: "Component",
+    status: "released",
+    mdx: markdown,
+  },
+};
+
+export const PaginationDefault: Story = {
+  render: (args) => <Pagination {...args} />,
+  args: {
+    pageSizes: [5, 20],
+    totalItems: 30,
+    // onChange: () => {},
+  },
+};

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,263 @@
+import React, { useState, ChangeEvent } from "react";
+import classnames from "classnames";
+import { ChevronLeft, ChevronRight } from "@progressiveui/icons-react";
+import Select from "../Select";
+import SelectItem from "../SelectItem";
+// import { equals } from '../../tools/array';
+
+interface PaginationProps {
+  /**
+   * The description for the backward icon.
+   */
+  backwardText?: string;
+  /**
+   * The CSS class names.
+   */
+  className?: string;
+  /**
+   * The function returning a translatable text showing where the current page is,
+   * in a manner of the range of items.
+   */
+  itemRangeText?: (min: number, max: number, total: number) => string;
+  /**
+   * The description for the forward icon.
+   */
+  forwardText?: string;
+  /**
+   * The unique ID of this component instance.
+   */
+  id?: string | number;
+  /**
+   * The translatable text indicating the number of items per page.
+   */
+  itemsPerPageText?: string;
+  /**
+   * A variant of `itemsPerPageText`, with a sign indicating that the number follows, e.g. ':'.
+   */
+  itemsPerPageFollowsText?: string;
+  /**
+   * A variant of `itemRangeText`, used if the total number of items is unknown.
+   */
+  itemText?: (min: number, max: number) => string;
+  /**
+   * The callback function called when the current page changes.
+   */
+  onChange?: (params: { page: number; pageSize: number }) => void;
+  /**
+   * A function returning PII showing where the current page is.
+   */
+  pageRangeText?: (current: number, total: number) => string;
+  /**
+   * The translatable text showing the current page.
+   */
+  pageText?: (page: number) => string;
+  /**
+   * The choices for `pageSize`.
+   */
+  pageSizes: number[];
+  /**
+   * `true` if ture the pageSizes should be not visible.
+   */
+  pageSizesDisabled?: boolean;
+  /**
+   * The total number of items.
+   */
+  totalItems?: number;
+  /**
+   * `true` if the backward/forward buttons should be disabled.
+   */
+  disabled?: boolean;
+  /**
+   * The current page.
+   */
+  page?: number;
+  /**
+   * The number dictating how many items a page contains.
+   */
+  pageSize?: number;
+  pageNumberText?: string;
+  /**
+   * `true` if the total number of items is unknown.
+   */
+  pagesUnknown?: boolean;
+  /**
+   * `true` if the current page should be the last page.
+   */
+  isLastPage?: boolean;
+  /**
+   * `true` if the select box to change the page should be disabled.
+   */
+  pageInputDisabled?: boolean;
+}
+
+let instanceId = 0;
+
+const Pagination = (props: PaginationProps) => {
+  const {
+    backwardText = "Backward",
+    className,
+    forwardText = "Forward",
+    id,
+    itemsPerPageText = "Items per page:",
+    itemsPerPageFollowsText,
+    itemRangeText = (min, max, total) => `${min}-${max} of ${total} items`,
+    pageRangeText = (current, total) => `${current} of ${total} pages`,
+    pageSize, //eslint-disable-line
+    pageSizesDisabled,
+    pageSizes,
+    itemText = (min, max) => `${min}-${max} items`,
+    pageText = (page) => `page ${page}`,
+    pageNumberText = "Page Number", //eslint-disable-line
+    pagesUnknown = false,
+    isLastPage = false,
+    pageInputDisabled = false,
+    totalItems,
+    onChange,
+    page: pageNumber = 1,
+    ...other
+  } = props;
+
+  const [page, setPage] = useState<number>(pageNumber);
+  const [pageSizeState, setPageSize] = useState<number>(
+    props.pageSize ? props.pageSize : pageSizes[0]
+  );
+  const uniqueId = useState<number>(() => ++instanceId)[0];
+
+  const handleSizeChange = (evt: ChangeEvent<HTMLSelectElement>) => {
+    const pageSize = Number(evt.target.value);
+    setPage(1);
+    setPageSize(pageSize);
+    onChange?.({ page: 1, pageSize });
+  };
+
+  // const handlePageChange = (evt: ChangeEvent<HTMLSelectElement>) => {
+  //   setPage(Number(evt.target.value));
+  // };
+
+  const handlePageInputChange = (evt: ChangeEvent<HTMLSelectElement>) => {
+    const page = Number(evt.target.value);
+    if (
+      page > 0 &&
+      page <= Math.max(Math.ceil(totalItems! / pageSizeState), 1)
+    ) {
+      setPage(page);
+      onChange?.({ page, pageSize: pageSizeState });
+    }
+  };
+
+  const incrementPage = () => {
+    const newPage = page + 1;
+    setPage(newPage);
+    onChange?.({ page: newPage, pageSize: pageSizeState });
+  };
+
+  const decrementPage = () => {
+    const newPage = page - 1;
+    setPage(newPage);
+    onChange?.({ page: newPage, pageSize: pageSizeState });
+  };
+
+  const renderSelectItems = (total: number) => {
+    let counter = 1;
+    const itemArr: React.ReactNode[] = [];
+    while (counter <= total) {
+      itemArr.push(
+        <SelectItem key={counter} value={counter} text={String(counter)} />
+      );
+      counter++;
+    }
+    return itemArr;
+  };
+
+  const classNames = classnames("wfp--pagination", className);
+  const backButtonClasses = classnames(
+    "wfp--pagination__button",
+    "wfp--pagination__button--backward",
+    {
+      "wfp--pagination__button--no-index": pageInputDisabled,
+    }
+  );
+  const inputId = id || uniqueId;
+  const totalPages = Math.max(Math.ceil(totalItems! / pageSizeState), 1);
+  const selectItems = renderSelectItems(totalPages);
+
+  return (
+    <div className={classNames} {...other}>
+      <div className="wfp--pagination__left">
+        {!pageSizesDisabled && (
+          <React.Fragment>
+            <span className="wfp--pagination__text">
+              {itemsPerPageFollowsText || itemsPerPageText}
+            </span>
+            <Select
+              id={`wfp-pagination-select-${inputId}`}
+              labelText={itemsPerPageText}
+              hideLabel
+              inline
+              onChange={handleSizeChange}
+              value={pageSizeState}
+            >
+              {pageSizes.map((size) => (
+                <SelectItem key={size} value={size} text={String(size)} />
+              ))}
+            </Select>
+            <span className="wfp--pagination__text">
+              {" "}
+              &nbsp;&nbsp;|&nbsp;&nbsp;
+            </span>
+          </React.Fragment>
+        )}
+        <span className="wfp--pagination__text">
+          {pagesUnknown
+            ? itemText!(pageSizeState * (page - 1) + 1, page * pageSizeState)
+            : itemRangeText!(
+                Math.min(pageSizeState * (page - 1) + 1, totalItems!),
+                Math.min(page * pageSizeState!, totalItems!),
+                totalItems!
+              )}
+        </span>
+      </div>
+      <div className="wfp--pagination__right wfp--pagination--inline">
+        <span className="wfp--pagination__text">
+          {pagesUnknown ? pageText!(page) : pageRangeText!(page, totalPages)}
+        </span>
+        <button
+          className={backButtonClasses}
+          onClick={decrementPage}
+          disabled={props.disabled || page === 1}
+        >
+          <ChevronLeft
+            className="wfp--pagination__button-icon"
+            description={backwardText}
+          />
+        </button>
+        {pageInputDisabled ? null : (
+          <Select
+            id={`wfp-pagination-select-${+inputId + 2}`}
+            labelText={itemsPerPageText}
+            hideLabel
+            inline
+            onChange={handlePageInputChange}
+            value={page}
+          >
+            {selectItems}
+          </Select>
+        )}
+        <button
+          className="wfp--pagination__button wfp--pagination__button--forward"
+          onClick={incrementPage}
+          disabled={props.disabled || page === totalPages || isLastPage}
+        >
+          <ChevronRight
+            className="wfp--pagination__button-icon"
+            description={forwardText}
+          />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+Pagination.displayName = "Pagination";
+
+export default Pagination;