TablePaginationActions types and tests

mui · May 25, 2022 · 4486f2b · 4486f2b
1 parent 0ca8948
commit 4486f2b
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 37 deletions.
diff --git a/packages/mui-base/src/TablePaginationUnstyled/TablePaginationActionsUnstyled.spec.tsx b/packages/mui-base/src/TablePaginationUnstyled/TablePaginationActionsUnstyled.spec.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { TablePaginationActionsUnstyled } from '@mui/base/TablePaginationUnstyled';
+import {
+  TablePaginationActionsUnstyledButtonSlotProps,
+  TablePaginationActionsUnstyledRootSlotProps,
+} from './TablePaginationActionsUnstyled.types';
+
+function Root(props: TablePaginationActionsUnstyledRootSlotProps) {
+  const { ownerState, ...other } = props;
+  return <div data-rows-per-page={ownerState.rowsPerPage} {...other} />;
+}
+
+function Button(props: TablePaginationActionsUnstyledButtonSlotProps) {
+  const { ownerState, ...other } = props;
+  return <button type="button" data-rows-per-page={ownerState.rowsPerPage} {...other} />;
+}
+
+const styledTablePaginationActions = (
+  <TablePaginationActionsUnstyled
+    components={{
+      Root,
+      BackButton: Button,
+      NextButton: Button,
+      FirstButton: Button,
+      LastButton: Button,
+    }}
+    count={10}
+    getItemAriaLabel={() => ''}
+    onPageChange={() => {}}
+    page={0}
+    rowsPerPage={10}
+    showFirstButton
+    showLastButton
+  />
+);
diff --git a/packages/mui-base/src/TablePaginationUnstyled/TablePaginationActionsUnstyled.tsx b/packages/mui-base/src/TablePaginationUnstyled/TablePaginationActionsUnstyled.tsx
@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { OverridableComponent } from '@mui/types';
-import { appendOwnerState } from '../utils';
+import { appendOwnerState, WithOptionalOwnerState } from '../utils';
 import { ItemAriaLabelType } from './TablePaginationUnstyled.types';
 import {
+  TablePaginationActionsUnstyledButtonSlotProps,
   TablePaginationActionsUnstyledProps,
+  TablePaginationActionsUnstyledRootSlotProps,
   TablePaginationActionsUnstyledTypeMap,
 } from './TablePaginationActionsUnstyled.types';
 
@@ -59,66 +61,85 @@ const TablePaginationActionsUnstyled = React.forwardRef<
   };
 
   const Root = components.Root ?? component ?? 'div';
-  const rootProps = appendOwnerState(Root, { ...other, ...componentsProps.root }, ownerState);
+  const rootProps: WithOptionalOwnerState<TablePaginationActionsUnstyledRootSlotProps> =
+    appendOwnerState(Root, { ref, ...other, ...componentsProps.root }, ownerState);
 
   const FirstButton = components.FirstButton ?? 'button';
-  const firstButtonProps = appendOwnerState(FirstButton, componentsProps.firstButton, ownerState);
+  const firstButtonProps: WithOptionalOwnerState<TablePaginationActionsUnstyledButtonSlotProps> =
+    appendOwnerState(
+      FirstButton,
+      {
+        onClick: handleFirstPageButtonClick,
+        disabled: page === 0,
+        'aria-label': getItemAriaLabel('first', page),
+        title: getItemAriaLabel('first', page),
+        ...componentsProps.firstButton,
+      },
+      ownerState,
+    );
 
   const LastButton = components.LastButton ?? 'button';
-  const lastButtonProps = appendOwnerState(LastButton, componentsProps.lastButton, ownerState);
+  const lastButtonProps: WithOptionalOwnerState<TablePaginationActionsUnstyledButtonSlotProps> =
+    appendOwnerState(
+      LastButton,
+      {
+        onClick: handleLastPageButtonClick,
+        disabled: page >= Math.ceil(count / rowsPerPage) - 1,
+        'aria-label': getItemAriaLabel('last', page),
+        title: getItemAriaLabel('last', page),
+        ...componentsProps.lastButton,
+      },
+      ownerState,
+    );
 
   const NextButton = components.NextButton ?? 'button';
-  const nextButtonProps = appendOwnerState(NextButton, componentsProps.nextButton, ownerState);
+  const nextButtonProps: WithOptionalOwnerState<TablePaginationActionsUnstyledButtonSlotProps> =
+    appendOwnerState(
+      NextButton,
+      {
+        onClick: handleNextButtonClick,
+        disabled: count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false,
+        'aria-label': getItemAriaLabel('next', page),
+        title: getItemAriaLabel('next', page),
+        ...componentsProps.nextButton,
+      },
+      ownerState,
+    );
 
   const BackButton = components.BackButton ?? 'button';
-  const backButtonProps = appendOwnerState(BackButton, componentsProps.backButton, ownerState);
+  const backButtonProps: WithOptionalOwnerState<TablePaginationActionsUnstyledButtonSlotProps> =
+    appendOwnerState(
+      BackButton,
+      {
+        onClick: handleBackButtonClick,
+        disabled: page === 0,
+        'aria-label': getItemAriaLabel('previous', page),
+        title: getItemAriaLabel('previous', page),
+        ...componentsProps.backButton,
+      },
+      ownerState,
+    );
 
   const LastPageIcon = components.LastPageIcon ?? LastPageIconDefault;
   const FirstPageIcon = components.FirstPageIcon ?? FirstPageIconDefault;
   const NextPageIcon = components.NextPageIcon ?? NextPageIconDefault;
   const BackPageIcon = components.BackPageIcon ?? BackPageIconDefault;
 
   return (
-    <Root ref={ref} {...rootProps}>
+    <Root {...rootProps}>
       {showFirstButton && (
-        <FirstButton
-          onClick={handleFirstPageButtonClick}
-          disabled={page === 0}
-          aria-label={getItemAriaLabel('first', page)}
-          title={getItemAriaLabel('first', page)}
-          {...firstButtonProps}
-        >
+        <FirstButton {...firstButtonProps}>
           {direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
         </FirstButton>
       )}
-      <BackButton
-        onClick={handleBackButtonClick}
-        disabled={page === 0}
-        color="inherit"
-        aria-label={getItemAriaLabel('previous', page)}
-        title={getItemAriaLabel('previous', page)}
-        {...backButtonProps}
-      >
+      <BackButton {...backButtonProps}>
         {direction === 'rtl' ? <NextPageIcon /> : <BackPageIcon />}
       </BackButton>
-      <NextButton
-        onClick={handleNextButtonClick}
-        disabled={count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false}
-        color="inherit"
-        aria-label={getItemAriaLabel('next', page)}
-        title={getItemAriaLabel('next', page)}
-        {...nextButtonProps}
-      >
+      <NextButton {...nextButtonProps}>
         {direction === 'rtl' ? <BackPageIcon /> : <NextPageIcon />}
       </NextButton>
       {showLastButton && (
-        <LastButton
-          onClick={handleLastPageButtonClick}
-          disabled={page >= Math.ceil(count / rowsPerPage) - 1}
-          aria-label={getItemAriaLabel('last', page)}
-          title={getItemAriaLabel('last', page)}
-          {...lastButtonProps}
-        >
+        <LastButton {...lastButtonProps}>
           {direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
         </LastButton>
       )}

diff --git a/packages/mui-base/src/TablePaginationUnstyled/TablePaginationActionsUnstyled.types.ts b/packages/mui-base/src/TablePaginationUnstyled/TablePaginationActionsUnstyled.types.ts
@@ -81,3 +81,20 @@ export interface TablePaginationActionsUnstyledTypeMap<
   props: P & TablePaginationActionsUnstyledOwnProps;
   defaultComponent: D;
 }
+
+export type TablePaginationActionsUnstyledOwnerState = TablePaginationActionsUnstyledProps;
+
+export type TablePaginationActionsUnstyledRootSlotProps = {
+  children?: React.ReactNode;
+  ownerState: TablePaginationActionsUnstyledOwnerState;
+  ref: React.Ref<any>;
+};
+
+export type TablePaginationActionsUnstyledButtonSlotProps = {
+  'aria-label': string;
+  children?: React.ReactNode;
+  disabled: boolean;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  ownerState: TablePaginationActionsUnstyledOwnerState;
+  title: string;
+};
diff --git a/packages/mui-base/src/TablePaginationUnstyled/index.ts b/packages/mui-base/src/TablePaginationUnstyled/index.ts
@@ -1,5 +1,8 @@
 export { default } from './TablePaginationUnstyled';
 export * from './TablePaginationUnstyled.types';
+
+export { default as TablePaginationActionsUnstyled } from './TablePaginationActionsUnstyled';
 export type { TablePaginationActionsUnstyledProps } from './TablePaginationActionsUnstyled.types';
+
 export { default as tablePaginationUnstyledClasses } from './tablePaginationUnstyledClasses';
 export * from './tablePaginationUnstyledClasses';