Update EuiTablePagination to accept number | 'all' instead of 0 for all

cee-chen · Feb 11, 2022 · 6903978 · 6903978
1 parent fcb5618
commit 6903978
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 32 deletions.
diff --git a/src-docs/src/views/pagination/table_pagination.tsx b/src-docs/src/views/pagination/table_pagination.tsx
@@ -5,12 +5,14 @@ import { EuiTablePagination } from '../../../../src';
 export default () => {
   const totalEntries = 1250;
   const [activePage, setActivePage] = useState(0);
-  const [rowSize, setRowSize] = useState(50);
+  const [rowSize, setRowSize] = useState<number | 'all'>(50);
   const [pageCount, setPageCount] = useState(Math.ceil(totalEntries / 50));
 
   const goToPage = (pageNumber: number) => setActivePage(pageNumber);
-  const changeItemsPerPage = (pageSize: number) => {
-    setPageCount(Math.ceil(totalEntries / pageSize));
+  const changeItemsPerPage = (pageSize: number | 'all') => {
+    const pageCount =
+      pageSize === 'all' ? 1 : Math.ceil(totalEntries / pageSize);
+    setPageCount(pageCount);
     setRowSize(pageSize);
     setActivePage(0);
   };
@@ -23,7 +25,7 @@ export default () => {
       onChangePage={goToPage}
       itemsPerPage={rowSize}
       onChangeItemsPerPage={changeItemsPerPage}
-      itemsPerPageOptions={[10, 20, 0]}
+      itemsPerPageOptions={[10, 20, 'all']}
     />
   );
 };
diff --git a/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap b/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
@@ -354,3 +354,45 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = `
   </div>
 </div>
 `;
+
+exports[`EuiTablePagination renders a "show all" itemsPerPage option 1`] = `
+<div
+  class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow eui-xScroll"
+>
+  <div
+    class="euiFlexItem euiFlexItem--flexGrowZero"
+  >
+    <div
+      class="euiPopover euiPopover--anchorUpRight"
+    >
+      <div
+        class="euiPopover__anchor"
+      >
+        <button
+          class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
+          data-test-subj="tablePaginationPopoverButton"
+          type="button"
+        >
+          <span
+            class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+          >
+            <span
+              class="euiButtonContent__icon"
+              color="inherit"
+              data-euiicon-type="arrowDown"
+            />
+            <span
+              class="euiButtonEmpty__text"
+            >
+              Showing all
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div
+    class="euiFlexItem euiFlexItem--flexGrowZero"
+  />
+</div>
+`;
diff --git a/src/components/table/table_pagination/table_pagination.test.tsx b/src/components/table/table_pagination/table_pagination.test.tsx
@@ -37,4 +37,17 @@ describe('EuiTablePagination', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  test('renders a "show all" itemsPerPage option', () => {
+    const component = render(
+      <EuiTablePagination
+        {...requiredProps}
+        {...paginationProps}
+        itemsPerPage="all"
+        itemsPerPageOptions={[10, 50, 'all']}
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
 });
diff --git a/src/components/table/table_pagination/table_pagination.tsx b/src/components/table/table_pagination/table_pagination.tsx
@@ -16,7 +16,7 @@ import { EuiPopover } from '../../popover';
 import { EuiI18n } from '../../i18n';
 
 export type PageChangeHandler = EuiPaginationProps['onPageClick'];
-export type ItemsPerPageChangeHandler = (pageSize: number) => void;
+export type ItemsPerPageChangeHandler = (pageSize: number | 'all') => void;
 
 export interface EuiTablePaginationProps
   extends Omit<EuiPaginationProps, 'onPageClick'> {
@@ -26,14 +26,14 @@ export interface EuiTablePaginationProps
   showPerPageOptions?: boolean;
   /**
    * Current selection for "Rows per page".
-   * Pass `0` as to display the selected "Show all" option and hide the pagination.
+   * Pass `'all'` to display the selected "Show all" option and hide the pagination.
    */
-  itemsPerPage?: number;
+  itemsPerPage?: number | 'all';
   /**
    * Custom array of options for "Rows per page".
-   * Pass `0` as one of option to create a "Show all" option.
+   * Pass `'all'` as one of the options to create a "Show all" option.
    */
-  itemsPerPageOptions?: number[];
+  itemsPerPageOptions?: Array<number | 'all'>;
   /**
    * Click handler that passes back selected `pageSize` number
    */
@@ -75,7 +75,7 @@ export const EuiTablePagination: FunctionComponent<EuiTablePaginationProps> = ({
       data-test-subj="tablePaginationPopoverButton"
       onClick={onButtonClick}
     >
-      {itemsPerPage === 0 ? (
+      {itemsPerPage === 'all' ? (
         <EuiI18n token="euiTablePagination.showingAll" default="Showing all" />
       ) : (
         <>
@@ -90,22 +90,7 @@ export const EuiTablePagination: FunctionComponent<EuiTablePaginationProps> = ({
   );
 
   const items = itemsPerPageOptions.map((itemsPerPageOption) => {
-    return itemsPerPageOption === 0 ? (
-      <EuiContextMenuItem
-        key={itemsPerPageOption}
-        icon={itemsPerPageOption === itemsPerPage ? 'check' : 'empty'}
-        onClick={() => {
-          closePopover();
-          onChangeItemsPerPage(itemsPerPageOption);
-        }}
-        data-test-subj={`tablePagination-${'all'}-rows`}
-      >
-        <EuiI18n
-          token="euiTablePagination.rowsPerPageOptionShowAll"
-          default="Show all"
-        />
-      </EuiContextMenuItem>
-    ) : (
+    return (
       <EuiContextMenuItem
         key={itemsPerPageOption}
         icon={itemsPerPageOption === itemsPerPage ? 'check' : 'empty'}
@@ -115,11 +100,18 @@ export const EuiTablePagination: FunctionComponent<EuiTablePaginationProps> = ({
         }}
         data-test-subj={`tablePagination-${itemsPerPageOption}-rows`}
       >
-        <EuiI18n
-          token="euiTablePagination.rowsPerPageOption"
-          values={{ rowsPerPage: itemsPerPageOption }}
-          default="{rowsPerPage} rows"
-        />
+        {itemsPerPageOption === 'all' ? (
+          <EuiI18n
+            token="euiTablePagination.rowsPerPageOptionShowAll"
+            default="Show all"
+          />
+        ) : (
+          <EuiI18n
+            token="euiTablePagination.rowsPerPageOption"
+            values={{ rowsPerPage: itemsPerPageOption }}
+            default="{rowsPerPage} rows"
+          />
+        )}
       </EuiContextMenuItem>
     );
   });
@@ -149,7 +141,7 @@ export const EuiTablePagination: FunctionComponent<EuiTablePaginationProps> = ({
       </EuiFlexItem>
 
       <EuiFlexItem grow={false}>
-        {itemsPerPage > 0 && (
+        {itemsPerPage !== 'all' && (
           <EuiPagination
             pageCount={pageCount}
             activePage={activePage}