feat: pagination: Add visiblePagerCountSize prop

Controls number of pages displayed b/w ... buttons
EightfoldAI · Apr 5, 2023 · 0251d80 · 0251d80
1 parent f34259b
commit 0251d80
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 8 deletions.
diff --git a/src/components/Pagination/Pager.tsx b/src/components/Pagination/Pager.tsx
@@ -1,5 +1,8 @@
 import React, { FC, useEffect, useCallback, useState, Ref } from 'react';
-import { PagerProps } from './Pagination.types';
+import {
+  PagerProps,
+  PaginationVisiblePagerCountSizeOptions,
+} from './Pagination.types';
 import { ButtonShape, ButtonSize, NeutralButton } from '../Button';
 import { IconName } from '../Icon';
 import { mergeClasses } from '../../shared/utilities';
@@ -9,12 +12,16 @@ import styles from './pagination.module.scss';
 /** Represents the number of pages from each edge of the list before we show quick buttons. */
 const EDGE_BUFFER_THRESHOLD: number = 5;
 
-/** Represents that only 7 list items (pages) are visible at any given time. */
-const PAGER_COUNT: number = 7;
-
 /** Represents a list too short to display meaningful quick buttons. */
 const SHORT_LIST_THRESHOLD: number = 10;
 
+/** Represents the number of list items (pages) visible at any given time. */
+const VISIBLE_PAGER_COUNT = {
+  [PaginationVisiblePagerCountSizeOptions.Small]: 3,
+  [PaginationVisiblePagerCountSizeOptions.Medium]: 5,
+  [PaginationVisiblePagerCountSizeOptions.Large]: 7,
+};
+
 export const Pager: FC<PagerProps> = React.forwardRef(
   (
     {
@@ -26,6 +33,7 @@ export const Pager: FC<PagerProps> = React.forwardRef(
       quickPreviousIconButtonAriaLabel,
       simplified = false,
       showLast = true,
+      visiblePagerCountSize = PaginationVisiblePagerCountSizeOptions.Large,
       ...rest
     },
     ref: Ref<HTMLUListElement>
@@ -35,6 +43,8 @@ export const Pager: FC<PagerProps> = React.forwardRef(
     const [_quickPreviousActive, setQuickPreviousActive] =
       useState<boolean>(false);
 
+    const visiblePagerCount = VISIBLE_PAGER_COUNT?.[visiblePagerCountSize] || 7;
+
     /**
      * Updates the visible range of pages in the UL based upon list
      * traversal and other actions that trigger currentPage and pageCount updates.
@@ -69,7 +79,7 @@ export const Pager: FC<PagerProps> = React.forwardRef(
          * Only the quick previous button is visible.
          */
         if (afterQuickPrevious && !beforeQuickNext) {
-          const startPage = pageCount - (PAGER_COUNT - 2);
+          const startPage = pageCount - (visiblePagerCount - 2);
 
           for (let i: number = startPage; i < pageCount; ++i) {
             array.push(i);
@@ -83,7 +93,7 @@ export const Pager: FC<PagerProps> = React.forwardRef(
            * Only the quick next button is visible.
            */
         } else if (!afterQuickPrevious && beforeQuickNext) {
-          for (let i: number = 2; i < PAGER_COUNT; ++i) {
+          for (let i: number = 2; i < visiblePagerCount; ++i) {
             array.push(i);
           }
 
@@ -94,7 +104,7 @@ export const Pager: FC<PagerProps> = React.forwardRef(
            * position in the visible array. Both quick buttons are visible.
            */
         } else if (afterQuickPrevious && beforeQuickNext) {
-          const offset = Math.floor(PAGER_COUNT / 2) - 1;
+          const offset = Math.floor(visiblePagerCount / 2) - 1;
 
           for (
             let i: number = currentPage - offset;

diff --git a/src/components/Pagination/Pagination.stories.tsx b/src/components/Pagination/Pagination.stories.tsx
@@ -1,7 +1,11 @@
 import React from 'react';
 import { Stories } from '@storybook/addon-docs';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { Pagination, PaginationLayoutOptions } from './index';
+import {
+  Pagination,
+  PaginationLayoutOptions,
+  PaginationVisiblePagerCountSizeOptions,
+} from './index';
 
 export default {
   title: 'Pagination',
@@ -112,6 +116,7 @@ const paginationArgs: Object = {
   restrictPageSizesPropToSizesLayout: false,
   hideWhenSinglePage: false,
   total: 50,
+  visiblePagerCountSize: PaginationVisiblePagerCountSizeOptions.Large,
   'data-test-id': 'myPaginationTestId',
 };
 

diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
@@ -4,6 +4,7 @@ import {
   PaginationLayoutOptions,
   PaginationLocale,
   PaginationProps,
+  PaginationVisiblePagerCountSizeOptions,
 } from './index';
 import {
   ButtonIconAlign,
@@ -55,6 +56,7 @@ export const Pagination: FC<PaginationProps> = React.forwardRef(
       restrictPageSizesPropToSizesLayout = false,
       totalText: defaultTotalText,
       selfControlled = true,
+      visiblePagerCountSize = PaginationVisiblePagerCountSizeOptions.Large,
       'data-test-id': dataTestId,
       ...rest
     } = props;
@@ -400,6 +402,7 @@ export const Pagination: FC<PaginationProps> = React.forwardRef(
                       showLast={
                         !layout.includes(PaginationLayoutOptions.NoLast)
                       }
+                      visiblePagerCountSize={visiblePagerCountSize}
                     />
                   ) : (
                     (hideWhenSinglePage ? moreThanOnePage : true) && (
@@ -419,6 +422,7 @@ export const Pagination: FC<PaginationProps> = React.forwardRef(
                         showLast={
                           !layout.includes(PaginationLayoutOptions.NoLast)
                         }
+                        visiblePagerCountSize={visiblePagerCountSize}
                       />
                     )
                   )}

diff --git a/src/components/Pagination/Pagination.types.ts b/src/components/Pagination/Pagination.types.ts
@@ -54,6 +54,12 @@ export enum PaginationLayoutOptions {
   NoLast = 'noLast',
 }
 
+export enum PaginationVisiblePagerCountSizeOptions {
+  Small = 'small',
+  Medium = 'medium',
+  Large = 'large',
+}
+
 export type PaginationLocale = {
   lang: Locale;
 };
@@ -192,4 +198,9 @@ export interface PaginationProps extends OcBaseProps<HTMLElement> {
    * @default 'Total'
    */
   totalText?: string;
+  /**
+   * Represents the number of list items (pages) are visible at any given time.
+   * @default PaginationVisiblePagerCountSizeOptions.Large
+   */
+  visiblePagerCountSize?: PaginationVisiblePagerCountSizeOptions;
 }