[TablePagination] Re-introduce deprecated onChangePage to `ActionsC…

…omponent` (#27407) Co-authored-by: Marija Najdova <[email protected]>
mui · Jul 27, 2021 · bb3b9ad · bb3b9ad
1 parent fcd8647
commit bb3b9ad
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 6 deletions.
diff --git a/packages/material-ui/src/TablePagination/TablePagination.js b/packages/material-ui/src/TablePagination/TablePagination.js
@@ -89,8 +89,8 @@ const TablePagination = React.forwardRef(function TablePagination(props, ref) {
     labelRowsPerPage = 'Rows per page:',
     nextIconButtonProps,
     nextIconButtonText = 'Next page',
-    onChangePage: onChangePageProp,
-    onPageChange: onPageChangeProp,
+    onChangePage,
+    onPageChange,
     onChangeRowsPerPage: onChangeRowsPerPageProp,
     onRowsPerPageChange: onRowsPerPageChangeProp,
     page,
@@ -100,7 +100,6 @@ const TablePagination = React.forwardRef(function TablePagination(props, ref) {
     ...other
   } = props;
 
-  const onChangePage = onChangePageProp || onPageChangeProp;
   const onChangeRowsPerPage = onChangeRowsPerPageProp || onRowsPerPageChangeProp;
 
   let colSpan;
@@ -167,7 +166,8 @@ const TablePagination = React.forwardRef(function TablePagination(props, ref) {
             'aria-label': nextIconButtonText,
             ...nextIconButtonProps,
           }}
-          onPageChange={onChangePage}
+          onChangePage={onChangePage}
+          onPageChange={onPageChange}
           page={page}
           rowsPerPage={rowsPerPage}
         />

diff --git a/packages/material-ui/src/TablePagination/TablePaginationActions.d.ts b/packages/material-ui/src/TablePagination/TablePaginationActions.d.ts
@@ -5,6 +5,10 @@ export interface TablePaginationActionsProps extends React.HTMLAttributes<HTMLDi
   backIconButtonProps?: Partial<IconButtonProps>;
   count: number;
   nextIconButtonProps?: Partial<IconButtonProps>;
+  /**
+   * @deprecated Use onPageChange instead.
+   */
+  onChangePage: (event: React.MouseEvent<HTMLButtonElement> | null, page: number) => void;
   onPageChange: (event: React.MouseEvent<HTMLButtonElement> | null, page: number) => void;
   page: number;
   rowsPerPage: number;

diff --git a/packages/material-ui/src/TablePagination/TablePaginationActions.js b/packages/material-ui/src/TablePagination/TablePaginationActions.js
@@ -13,7 +13,8 @@ const TablePaginationActions = React.forwardRef(function TablePaginationActions(
     backIconButtonProps,
     count,
     nextIconButtonProps,
-    onPageChange,
+    onChangePage = () => {},
+    onPageChange = () => {},
     page,
     rowsPerPage,
     ...other
@@ -22,10 +23,12 @@ const TablePaginationActions = React.forwardRef(function TablePaginationActions(
   const theme = useTheme();
 
   const handleBackButtonClick = (event) => {
+    onChangePage(event, page - 1);
     onPageChange(event, page - 1);
   };
 
   const handleNextButtonClick = (event) => {
+    onChangePage(event, page + 1);
     onPageChange(event, page + 1);
   };
 
@@ -70,7 +73,14 @@ TablePaginationActions.propTypes = {
    * @param {object} event The event source of the callback.
    * @param {number} page The page selected.
    */
-  onPageChange: PropTypes.func.isRequired,
+  onChangePage: PropTypes.func,
+  /**
+   * Callback fired when the page is changed.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {number} page The page selected.
+   */
+  onPageChange: PropTypes.func,
   /**
    * The zero-based index of the current page.
    */