[Table] Rename onChangeRowsPerPage, onChangePage (#22900)

eladmotola · oliviertassinari · web-flow · commit ab33be89a2da · 2020-10-07T10:56:30.000+02:00
Co-authored-by: Olivier Tassinari &lt;olivier.tassinari@gmail.com&gt;
diff --git a/docs/pages/api-docs/table-pagination.md b/docs/pages/api-docs/table-pagination.md
@@ -37,8 +37,8 @@ The `MuiTablePagination` name can be used for providing [default props](/customi
 | <span class="prop-name">labelDisplayedRows</span> | <span class="prop-type">func</span> | <span class="prop-default">function defaultLabelDisplayedRows({ from, to, count }) {  return `${from}-${to} of ${count !== -1 ? count : `more than ${to}`}`;}</span> | Customize the displayed rows label. Invoked with a `{ from, to, count, page }` object.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
 | <span class="prop-name">labelRowsPerPage</span> | <span class="prop-type">node</span> | <span class="prop-default">'Rows per page:'</span> | Customize the rows per page label.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
 | <span class="prop-name">nextIconButtonProps</span> | <span class="prop-type">object</span> |  | Props applied to the next arrow [`IconButton`](/api/icon-button/) element. |
-| <span class="prop-name required">onChangePage<abbr title="required">*</abbr></span> | <span class="prop-type">func</span> |  | Callback fired when the page is changed.<br><br>**Signature:**<br>`function(event: object, page: number) => void`<br>*event:* The event source of the callback.<br>*page:* The page selected. |
-| <span class="prop-name">onChangeRowsPerPage</span> | <span class="prop-type">func</span> |  | Callback fired when the number of rows per page is changed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. |
+| <span class="prop-name required">onPageChange<abbr title="required">*</abbr></span> | <span class="prop-type">func</span> |  | Callback fired when the page is changed.<br><br>**Signature:**<br>`function(event: object, page: number) => void`<br>*event:* The event source of the callback.<br>*page:* The page selected. |
+| <span class="prop-name">onRowsPerPageChange</span> | <span class="prop-type">func</span> |  | Callback fired when the number of rows per page is changed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. |
 | <span class="prop-name required">page<abbr title="required">*</abbr></span> | <span class="prop-type">number</span> |  | The zero-based index of the current page. |
 | <span class="prop-name required">rowsPerPage<abbr title="required">*</abbr></span> | <span class="prop-type">number</span> |  | The number of rows per page. |
 | <span class="prop-name">rowsPerPageOptions</span> | <span class="prop-type">Array&lt;number<br>&#124;&nbsp;{ label: string, value: number }&gt;</span> | <span class="prop-default">[10, 25, 50, 100]</span> | Customizes the options of the rows per page select field. If less than two options are available, no select field will be displayed. |
diff --git a/docs/src/pages/components/pagination/TablePagination.js b/docs/src/pages/components/pagination/TablePagination.js
@@ -19,9 +19,9 @@ export default function TablePaginationDemo() {
       component="div"
       count={100}
       page={page}
-      onChangePage={handleChangePage}
+      onPageChange={handleChangePage}
       rowsPerPage={rowsPerPage}
-      onChangeRowsPerPage={handleChangeRowsPerPage}
+      onRowsPerPageChange={handleChangeRowsPerPage}
     />
   );
 }
diff --git a/docs/src/pages/components/pagination/TablePagination.tsx b/docs/src/pages/components/pagination/TablePagination.tsx
@@ -24,9 +24,9 @@ export default function TablePaginationDemo() {
       component="div"
       count={100}
       page={page}
-      onChangePage={handleChangePage}
+      onPageChange={handleChangePage}
       rowsPerPage={rowsPerPage}
-      onChangeRowsPerPage={handleChangeRowsPerPage}
+      onRowsPerPageChange={handleChangeRowsPerPage}
     />
   );
 }
diff --git a/docs/src/pages/components/tables/CustomPaginationActionsTable.js b/docs/src/pages/components/tables/CustomPaginationActionsTable.js
@@ -25,22 +25,22 @@ const useStyles1 = makeStyles((theme) => ({
 function TablePaginationActions(props) {
   const classes = useStyles1();
   const theme = useTheme();
-  const { count, page, rowsPerPage, onChangePage } = props;
+  const { count, page, rowsPerPage, onPageChange } = props;
 
   const handleFirstPageButtonClick = (event) => {
-    onChangePage(event, 0);
+    onPageChange(event, 0);
   };
 
   const handleBackButtonClick = (event) => {
-    onChangePage(event, page - 1);
+    onPageChange(event, page - 1);
   };
 
   const handleNextButtonClick = (event) => {
-    onChangePage(event, page + 1);
+    onPageChange(event, page + 1);
   };
 
   const handleLastPageButtonClick = (event) => {
-    onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
   };
 
   return (
@@ -87,7 +87,7 @@ function TablePaginationActions(props) {
 
 TablePaginationActions.propTypes = {
   count: PropTypes.number.isRequired,
-  onChangePage: PropTypes.func.isRequired,
+  onPageChange: PropTypes.func.isRequired,
   page: PropTypes.number.isRequired,
   rowsPerPage: PropTypes.number.isRequired,
 };
@@ -176,8 +176,8 @@ export default function CustomPaginationActionsTable() {
                 },
                 native: true,
               }}
-              onChangePage={handleChangePage}
-              onChangeRowsPerPage={handleChangeRowsPerPage}
+              onPageChange={handleChangePage}
+              onRowsPerPageChange={handleChangeRowsPerPage}
               ActionsComponent={TablePaginationActions}
             />
           </TableRow>
diff --git a/docs/src/pages/components/tables/CustomPaginationActionsTable.tsx b/docs/src/pages/components/tables/CustomPaginationActionsTable.tsx
@@ -32,7 +32,7 @@ interface TablePaginationActionsProps {
   count: number;
   page: number;
   rowsPerPage: number;
-  onChangePage: (
+  onPageChange: (
     event: React.MouseEvent<HTMLButtonElement>,
     newPage: number,
   ) => void;
@@ -41,30 +41,30 @@ interface TablePaginationActionsProps {
 function TablePaginationActions(props: TablePaginationActionsProps) {
   const classes = useStyles1();
   const theme = useTheme();
-  const { count, page, rowsPerPage, onChangePage } = props;
+  const { count, page, rowsPerPage, onPageChange } = props;
 
   const handleFirstPageButtonClick = (
     event: React.MouseEvent<HTMLButtonElement>,
   ) => {
-    onChangePage(event, 0);
+    onPageChange(event, 0);
   };
 
   const handleBackButtonClick = (
     event: React.MouseEvent<HTMLButtonElement>,
   ) => {
-    onChangePage(event, page - 1);
+    onPageChange(event, page - 1);
   };
 
   const handleNextButtonClick = (
     event: React.MouseEvent<HTMLButtonElement>,
   ) => {
-    onChangePage(event, page + 1);
+    onPageChange(event, page + 1);
   };
 
   const handleLastPageButtonClick = (
     event: React.MouseEvent<HTMLButtonElement>,
   ) => {
-    onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
   };
 
   return (
@@ -197,8 +197,8 @@ export default function CustomPaginationActionsTable() {
                 },
                 native: true,
               }}
-              onChangePage={handleChangePage}
-              onChangeRowsPerPage={handleChangeRowsPerPage}
+              onPageChange={handleChangePage}
+              onRowsPerPageChange={handleChangeRowsPerPage}
               ActionsComponent={TablePaginationActions}
             />
           </TableRow>
diff --git a/docs/src/pages/components/tables/EnhancedTable.js b/docs/src/pages/components/tables/EnhancedTable.js
@@ -396,8 +396,8 @@ export default function EnhancedTable() {
           count={rows.length}
           rowsPerPage={rowsPerPage}
           page={page}
-          onChangePage={handleChangePage}
-          onChangeRowsPerPage={handleChangeRowsPerPage}
+          onPageChange={handleChangePage}
+          onRowsPerPageChange={handleChangeRowsPerPage}
         />
       </Paper>
       <FormControlLabel
diff --git a/docs/src/pages/components/tables/EnhancedTable.tsx b/docs/src/pages/components/tables/EnhancedTable.tsx
@@ -443,8 +443,8 @@ export default function EnhancedTable() {
           count={rows.length}
           rowsPerPage={rowsPerPage}
           page={page}
-          onChangePage={handleChangePage}
-          onChangeRowsPerPage={handleChangeRowsPerPage}
+          onPageChange={handleChangePage}
+          onRowsPerPageChange={handleChangeRowsPerPage}
         />
       </Paper>
       <FormControlLabel
diff --git a/docs/src/pages/components/tables/StickyHeadTable.js b/docs/src/pages/components/tables/StickyHeadTable.js
@@ -126,8 +126,8 @@ export default function StickyHeadTable() {
         count={rows.length}
         rowsPerPage={rowsPerPage}
         page={page}
-        onChangePage={handleChangePage}
-        onChangeRowsPerPage={handleChangeRowsPerPage}
+        onPageChange={handleChangePage}
+        onRowsPerPageChange={handleChangeRowsPerPage}
       />
     </Paper>
   );
diff --git a/docs/src/pages/components/tables/StickyHeadTable.tsx b/docs/src/pages/components/tables/StickyHeadTable.tsx
@@ -149,8 +149,8 @@ export default function StickyHeadTable() {
         count={rows.length}
         rowsPerPage={rowsPerPage}
         page={page}
-        onChangePage={handleChangePage}
-        onChangeRowsPerPage={handleChangeRowsPerPage}
+        onPageChange={handleChangePage}
+        onRowsPerPageChange={handleChangeRowsPerPage}
       />
     </Paper>
   );
diff --git a/docs/src/pages/guides/api/api.md b/docs/src/pages/guides/api/api.md
@@ -102,6 +102,7 @@ This choice allows the shorthand notation:
 
 Most of the controlled component are controlled via the `value` and the `onChange` props,
 however, the `open` / `onClose` / `onOpen` combination is used for display related state.
+In the cases where there are more events, we put the noun first, and then the verb, for example: `onPageChange`, `onRowsChange`.
 
 ### boolean vs enum
 
diff --git a/docs/src/pages/guides/localization/Locales.js b/docs/src/pages/guides/localization/Locales.js
@@ -38,7 +38,7 @@ export default function Locales() {
           rowsPerPage={10}
           page={1}
           component="div"
-          onChangePage={() => {}}
+          onPageChange={() => {}}
         />
       </ThemeProvider>
     </div>
diff --git a/docs/src/pages/guides/localization/Locales.tsx b/docs/src/pages/guides/localization/Locales.tsx
@@ -40,7 +40,7 @@ export default function Locales() {
           rowsPerPage={10}
           page={1}
           component="div"
-          onChangePage={() => {}}
+          onPageChange={() => {}}
         />
       </ThemeProvider>
     </div>
diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -704,6 +704,16 @@ const theme = createMuiTheme({
   + getItemAriaLabel={…}
   ```
 
+- Rename `onChangeRowsPerPage` to `onRowsPerPageChange` and `onChangePage` to `onPageChange` due to API consistency.
+
+  ```diff
+  <TablePagination
+  - onChangeRowsPerPage={()=>{}}
+  - onChangePage={()=>{}}
+  + onRowsPerPageChange={()=>{}}
+  + onPageChange={()=>{}}
+  ```
+
 ### Tabs
 
 - TypeScript: The `event` in `onChange` is no longer typed as a `React.ChangeEvent` but `React.SyntheticEvent`.
diff --git a/packages/material-ui/src/TablePagination/TablePagination.d.ts b/packages/material-ui/src/TablePagination/TablePagination.d.ts
@@ -96,13 +96,13 @@ export interface TablePaginationTypeMap<P, D extends React.ElementType> {
        * @param {object} event The event source of the callback.
        * @param {number} page The page selected.
        */
-      onChangePage: (event: React.MouseEvent<HTMLButtonElement> | null, page: number) => void;
+      onPageChange: (event: React.MouseEvent<HTMLButtonElement> | null, page: number) => void;
       /**
        * Callback fired when the number of rows per page is changed.
        *
        * @param {object} event The event source of the callback.
        */
-      onChangeRowsPerPage?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
+      onRowsPerPageChange?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
       /**
        * The zero-based index of the current page.
        */
diff --git a/packages/material-ui/src/TablePagination/TablePagination.js b/packages/material-ui/src/TablePagination/TablePagination.js
@@ -91,8 +91,8 @@ const TablePagination = React.forwardRef(function TablePagination(props, ref) {
     labelDisplayedRows = defaultLabelDisplayedRows,
     labelRowsPerPage = 'Rows per page:',
     nextIconButtonProps,
-    onChangePage,
-    onChangeRowsPerPage,
+    onPageChange,
+    onRowsPerPageChange,
     page,
     rowsPerPage,
     rowsPerPageOptions = [10, 25, 50, 100],
@@ -129,7 +129,7 @@ const TablePagination = React.forwardRef(function TablePagination(props, ref) {
             }}
             input={<InputBase className={clsx(classes.input, classes.selectRoot)} />}
             value={rowsPerPage}
-            onChange={onChangeRowsPerPage}
+            onChange={onRowsPerPageChange}
             id={selectId}
             labelId={labelId}
             {...SelectProps}
@@ -159,7 +159,7 @@ const TablePagination = React.forwardRef(function TablePagination(props, ref) {
           backIconButtonProps={backIconButtonProps}
           count={count}
           nextIconButtonProps={nextIconButtonProps}
-          onChangePage={onChangePage}
+          onPageChange={onPageChange}
           page={page}
           rowsPerPage={rowsPerPage}
           showFirstButton={showFirstButton}
@@ -248,13 +248,13 @@ TablePagination.propTypes = {
    * @param {object} event The event source of the callback.
    * @param {number} page The page selected.
    */
-  onChangePage: PropTypes.func.isRequired,
+  onPageChange: PropTypes.func.isRequired,
   /**
    * Callback fired when the number of rows per page is changed.
    *
    * @param {object} event The event source of the callback.
    */
-  onChangeRowsPerPage: PropTypes.func,
+  onRowsPerPageChange: PropTypes.func,
   /**
    * The zero-based index of the current page.
    */
diff --git a/packages/material-ui/src/TablePagination/TablePagination.spec.tsx b/packages/material-ui/src/TablePagination/TablePagination.spec.tsx
@@ -4,7 +4,7 @@ import TablePagination from '@material-ui/core/TablePagination';
 function classesTest() {
   const defaultProps = {
     count: 1,
-    onChangePage: () => {},
+    onPageChange: () => {},
     page: 1,
     rowsPerPage: 1,
   };
diff --git a/packages/material-ui/src/TablePagination/TablePagination.test.js b/packages/material-ui/src/TablePagination/TablePagination.test.js
diff --git a/packages/material-ui/src/TablePagination/TablePaginationActions.d.ts b/packages/material-ui/src/TablePagination/TablePaginationActions.d.ts
diff --git a/packages/material-ui/src/TablePagination/TablePaginationActions.js b/packages/material-ui/src/TablePagination/TablePaginationActions.js
diff --git a/packages/material-ui/test/typescript/components.spec.tsx b/packages/material-ui/test/typescript/components.spec.tsx
