@progressiveui/react 2.0.3 → 2.0.5

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

@@ -1,400 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

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

package/src/components/Pagination/Pagination.tsx

@@ -1,263 +0,0 @@
-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;