@arbor-education/design-system.components 0.1.1 → 0.1.2

package/src/components/table/pagination/PaginationControls.tsx

@@ -0,0 +1,116 @@
+import { Button } from 'Components/button/Button';
+import { NumberInput } from 'Components/formField/inputs/number/NumberInput';
+import { useEffect, useState } from 'react';
+import { useGridApi } from 'Utils/hooks/useGridApi';
+
+export type PaginationControlsProps = {
+  onPageChange?: (newPage: number) => void;
+  totalPages?: number;
+};
+
+export const PaginationControls = (props: PaginationControlsProps) => {
+  const { onPageChange, totalPages: passedTotalPages } = props;
+  const { gridApi, isGridApiReady } = useGridApi();
+  const [inputValue, setInputValue] = useState(1);
+
+  // default to 1, because no content is still one page
+  const [totalPages, setTotalPages] = useState(() => passedTotalPages ?? gridApi?.paginationGetTotalPages() ?? 1);
+
+  useEffect(() => {
+    if (isGridApiReady && !passedTotalPages) {
+      gridApi?.addEventListener('paginationChanged', () => {
+        const newPageCount = gridApi.paginationGetTotalPages();
+        if (newPageCount) {
+          setTotalPages(newPageCount);
+        }
+      });
+    }
+  }, [isGridApiReady]);
+
+  useEffect(() => {
+    if (passedTotalPages) {
+      setTotalPages(passedTotalPages);
+    }
+  }, [passedTotalPages]);
+
+  const goToPage = (page: number) => {
+    if (page === inputValue) {
+      return;
+    }
+    const pageZeroIndexed = page - 1;
+    if (onPageChange) {
+      onPageChange(pageZeroIndexed);
+    }
+    else {
+      gridApi?.paginationGoToPage(pageZeroIndexed);
+    }
+    setInputValue(page);
+  };
+
+  return (
+    <div className="ds-table__pagination-controls">
+      <Button
+        variant="secondary"
+        borderless
+        size="S"
+        color="black"
+        iconLeftName="chevrons-left"
+        iconLeftScreenReaderText="Go to first page"
+        onClick={() => goToPage(1)}
+        disabled={inputValue === 1}
+      />
+      <Button
+        variant="secondary"
+        borderless
+        size="S"
+        color="black"
+        iconLeftName="chevron-left"
+        onClick={() => goToPage(inputValue - 1)}
+        iconLeftScreenReaderText="Go to previous page"
+        disabled={inputValue === 1}
+      />
+      <span>
+        Page
+        {' '}
+        <NumberInput
+          value={inputValue}
+          onChange={(e) => {
+            const newPage = Number(e.currentTarget.value);
+            if (newPage > 0) {
+              goToPage(newPage);
+            }
+          }}
+          max={totalPages}
+          min={1}
+          disableSpinners
+          containerClassName="ds-table__pagination-controls__number-input-container"
+          className="ds-table__pagination-controls__number-input"
+          aria-label="Current page"
+          aria-current="page"
+        />
+        {' '}
+        of
+        {' '}
+        {totalPages}
+      </span>
+      <Button
+        variant="secondary"
+        borderless
+        color="black"
+        iconLeftName="chevron-right"
+        onClick={() => goToPage(inputValue + 1)}
+        disabled={inputValue === totalPages}
+        iconLeftScreenReaderText="Go to next page"
+      />
+      <Button
+        variant="secondary"
+        borderless
+        color="black"
+        iconLeftName="chevrons-right"
+        onClick={() => goToPage(totalPages)}
+        disabled={inputValue === totalPages}
+        iconLeftScreenReaderText="Go to last page"
+      />
+    </div>
+  );
+};

package/src/components/table/pagination/PaginationPanel.tsx

@@ -0,0 +1,30 @@
+import { PageSizeSelector, type PageSizeSelectorProps } from './PageSizeSelector';
+import { RowCountInfo, type RowCountInfoProps } from './RowCountInfo';
+import { PaginationControls, type PaginationControlsProps } from './PaginationControls';
+import classNames from 'classnames';
+
+type PaginationPanelProps = {
+  className?: string;
+} & RowCountInfoProps & PaginationControlsProps & PageSizeSelectorProps;
+
+export const PaginationPanel = (props: PaginationPanelProps) => {
+  const {
+    className = '',
+    totalRows,
+    totalPages,
+    onPageChange,
+    availableSizes,
+    initialPageSize,
+    onPageSizeChange,
+  } = props;
+
+  const classes = classNames('ds-table__pagination-panel', className);
+
+  return (
+    <nav className={classes} aria-label="Pagination">
+      <RowCountInfo totalRows={totalRows} />
+      <PaginationControls totalPages={totalPages} onPageChange={onPageChange} />
+      <PageSizeSelector availableSizes={availableSizes} initialPageSize={initialPageSize} onPageSizeChange={onPageSizeChange} />
+    </nav>
+  );
+};

package/src/components/table/pagination/RowCountInfo.tsx

@@ -0,0 +1,67 @@
+import { useEffect, useState } from 'react';
+import { useGridApi } from 'Utils/hooks/useGridApi';
+
+export type RowCountInfoProps = {
+  totalRows?: number;
+};
+
+export const RowCountInfo = (props: RowCountInfoProps) => {
+  const { totalRows: passedTotalRows } = props;
+
+  const { gridApi, isGridApiReady } = useGridApi();
+
+  const getTrueDisplayedRowCount = () => {
+    const displayedRowCount = gridApi?.getDisplayedRowCount() || 0;
+    const pageSize = gridApi?.paginationGetPageSize() || 0;
+    const result = Math.min(displayedRowCount, pageSize);
+    const currentPage = gridApi?.paginationGetCurrentPage() || 0;
+    const totalPages = gridApi?.paginationGetTotalPages();
+
+    if (totalPages === 1) {
+      return displayedRowCount;
+    }
+    if (gridApi && displayedRowCount && pageSize && currentPage + 1 === totalPages) {
+      return displayedRowCount % pageSize || pageSize;
+    }
+    return result;
+  };
+  const [displayedRowCount, setDisplayedRowCount] = useState(() => getTrueDisplayedRowCount());
+
+  useEffect(() => {
+    if (isGridApiReady) {
+      const result = getTrueDisplayedRowCount();
+      setDisplayedRowCount(result);
+    }
+  }, [isGridApiReady]);
+
+  if (!isGridApiReady) {
+    return null;
+  }
+
+  // TODO when writing tests, see how this behaves with or without pagination
+  let totalRows: number | undefined;
+  if (typeof passedTotalRows !== 'undefined') {
+    totalRows = passedTotalRows;
+  }
+  else if (gridApi && gridApi.paginationGetTotalPages() > 1) {
+    totalRows = gridApi.paginationGetRowCount();
+  }
+
+  gridApi?.addEventListener('paginationChanged', () => {
+    setDisplayedRowCount(getTrueDisplayedRowCount());
+  });
+  gridApi?.addEventListener('filterChanged', () => {
+    setDisplayedRowCount(getTrueDisplayedRowCount());
+  });
+  gridApi?.addEventListener('rowDataUpdated', () => {
+    setDisplayedRowCount(getTrueDisplayedRowCount());
+  });
+
+  const message = totalRows && totalRows !== displayedRowCount
+    ? `Showing ${displayedRowCount} of ${totalRows} results`
+    : `Showing ${displayedRowCount} results`;
+
+  return (
+    <span className="ds-table__row-count-info">{message}</span>
+  );
+};

package/src/components/table/pagination/pagination.scss

@@ -0,0 +1,26 @@
+.ds-table__pagination-panel {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+}
+
+.ds-table__pagination-controls {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 3px;
+
+    &__number-input-container {
+        display: inline;
+    }
+
+    &__number-input {
+        width: 39px;
+    }
+}
+
+.ds-table__pagination-controls, .ds-table__row-count-info {
+    font-size: var(--font-size-2-13);
+}

package/src/index.scss

@@ -18,5 +18,6 @@
 @use "./components/slideoverManager/slideoverManager.scss";
 @use "./components/slideover/slideover.scss";
 @use "./components/table/table.scss";
+@use "./components/table/pagination/pagination.scss";
 @use "./components/tooltip/tooltip.scss";
 @import 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap';

package/src/utils/hooks/useGridApi.ts

@@ -0,0 +1,15 @@
+import { GridApiContext } from 'Components/table/GridApiContext';
+import { useContext, useEffect, useState } from 'react';
+
+export const useGridApi = () => {
+  const gridApi = useContext(GridApiContext);
+  const [isGridApiReady, setIsGridApiReady] = useState(false);
+
+  useEffect(() => {
+    if (gridApi) {
+      setIsGridApiReady(true);
+    }
+  }, [gridApi]);
+
+  return { gridApi, isGridApiReady };
+};

package/src/utils/hooks/useIsMounted.ts

@@ -0,0 +1,12 @@
+import { useRef } from 'react';
+import { useComponentDidMount } from './useComponentDidMount';
+
+export const useIsMounted = () => {
+  const isMounted = useRef(true);
+  useComponentDidMount(() => {
+    return () => {
+      isMounted.current = false;
+    };
+  });
+  return isMounted;
+};