From 06d569ebf93879baca45b65c98c78bb59978a6c6 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 30 Nov 2020 16:13:46 +0100 Subject: [PATCH 1/5] init --- docs/pages/api-docs/table-pagination.md | 6 +- .../components/pagination/TablePagination.js | 4 +- .../components/pagination/TablePagination.tsx | 4 +- .../tables/CustomPaginationActionsTable.js | 16 ++-- .../tables/CustomPaginationActionsTable.tsx | 16 ++-- .../pages/components/tables/EnhancedTable.js | 4 +- .../pages/components/tables/EnhancedTable.tsx | 4 +- .../components/tables/StickyHeadTable.js | 4 +- .../components/tables/StickyHeadTable.tsx | 4 +- docs/src/pages/guides/localization/Locales.js | 2 +- .../src/pages/guides/localization/Locales.tsx | 2 +- .../src/TablePagination/TablePagination.d.ts | 10 +++ .../src/TablePagination/TablePagination.js | 39 +++++++- .../TablePagination/TablePagination.spec.tsx | 2 +- .../TablePagination/TablePagination.test.js | 90 ++++++++++++++----- .../TablePaginationActions.d.ts | 2 +- .../TablePagination/TablePaginationActions.js | 8 +- .../test/typescript/components.spec.tsx | 4 +- 18 files changed, 153 insertions(+), 68 deletions(-) diff --git a/docs/pages/api-docs/table-pagination.md b/docs/pages/api-docs/table-pagination.md index f77e3b26cd9013..71118be4c89f21 100644 --- a/docs/pages/api-docs/table-pagination.md +++ b/docs/pages/api-docs/table-pagination.md @@ -38,8 +38,10 @@ The `MuiTablePagination` name can be used for providing [default props](/customi | labelRowsPerPage | node | 'Rows per page:' | Customize the rows per page label.
For localization purposes, you can use the provided [translations](/guides/localization/). | | nextIconButtonProps | object | | Props applied to the next arrow [`IconButton`](/api/icon-button/) element. | | nextIconButtonText | string | 'Next page' | Text label for the next arrow icon button.
For localization purposes, you can use the provided [translations](/guides/localization/). | -| onChangePage* | func | | Callback fired when the page is changed.

**Signature:**
`function(event: object, page: number) => void`
*event:* The event source of the callback.
*page:* The page selected. | -| onChangeRowsPerPage | func | | Callback fired when the number of rows per page is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. | +| onChangePage | func | | Callback fired when the page is changed. | +| onPageChange* | func | | Callback fired when the page is changed.

**Signature:**
`function(event: object, page: number) => void`
*event:* The event source of the callback.
*page:* The page selected. | +| onChangeRowsPerPage | func | | Callback fired when the number of rows per page is changed. | +| onRowsPerPageChange | func | | Callback fired when the number of rows per page is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. | | page* | number | | The zero-based index of the current page. | | rowsPerPage* | number | | The number of rows per page. | | rowsPerPageOptions | array | [10, 25, 50, 100] | 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 index 2fa827458181da..7e65d6791e2bec 100644 --- 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 index 335597e231078d..406096ae1e37c8 100644 --- a/docs/src/pages/components/pagination/TablePagination.tsx +++ b/docs/src/pages/components/pagination/TablePagination.tsx @@ -21,9 +21,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 index 6e4ed723d275dd..f40abc93b564c9 100644 --- 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 ( @@ -75,7 +75,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, }; @@ -161,8 +161,8 @@ export default function CustomPaginationActionsTable() { inputProps: { 'aria-label': 'rows per page' }, native: true, }} - onChangePage={handleChangePage} - onChangeRowsPerPage={handleChangeRowsPerPage} + onPageChange={handleChangePage} + onRowsPerPageChange={handleChangeRowsPerPage} ActionsComponent={TablePaginationActions} /> diff --git a/docs/src/pages/components/tables/CustomPaginationActionsTable.tsx b/docs/src/pages/components/tables/CustomPaginationActionsTable.tsx index 13e32d291c2eba..9b608e2c47f165 100644 --- a/docs/src/pages/components/tables/CustomPaginationActionsTable.tsx +++ b/docs/src/pages/components/tables/CustomPaginationActionsTable.tsx @@ -27,28 +27,28 @@ interface TablePaginationActionsProps { count: number; page: number; rowsPerPage: number; - onChangePage: (event: React.MouseEvent, newPage: number) => void; + onPageChange: (event: React.MouseEvent, newPage: number) => void; } 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) => { - onChangePage(event, 0); + onPageChange(event, 0); }; const handleBackButtonClick = (event: React.MouseEvent) => { - onChangePage(event, page - 1); + onPageChange(event, page - 1); }; const handleNextButtonClick = (event: React.MouseEvent) => { - onChangePage(event, page + 1); + onPageChange(event, page + 1); }; const handleLastPageButtonClick = (event: React.MouseEvent) => { - onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1)); + onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1)); }; return ( @@ -163,8 +163,8 @@ export default function CustomPaginationActionsTable() { inputProps: { 'aria-label': 'rows per page' }, native: true, }} - onChangePage={handleChangePage} - onChangeRowsPerPage={handleChangeRowsPerPage} + onPageChange={handleChangePage} + onRowsPerPageChange={handleChangeRowsPerPage} ActionsComponent={TablePaginationActions} /> diff --git a/docs/src/pages/components/tables/EnhancedTable.js b/docs/src/pages/components/tables/EnhancedTable.js index 5d1732174b5b29..56f99b48e2c145 100644 --- a/docs/src/pages/components/tables/EnhancedTable.js +++ b/docs/src/pages/components/tables/EnhancedTable.js @@ -341,8 +341,8 @@ export default function EnhancedTable() { count={rows.length} rowsPerPage={rowsPerPage} page={page} - onChangePage={handleChangePage} - onChangeRowsPerPage={handleChangeRowsPerPage} + onPageChange={handleChangePage} + onRowsPerPageChange={handleChangeRowsPerPage} /> ); diff --git a/docs/src/pages/components/tables/StickyHeadTable.tsx b/docs/src/pages/components/tables/StickyHeadTable.tsx index 83d1fc789ed2d1..7cbdbfb7239f02 100644 --- a/docs/src/pages/components/tables/StickyHeadTable.tsx +++ b/docs/src/pages/components/tables/StickyHeadTable.tsx @@ -138,8 +138,8 @@ export default function StickyHeadTable() { count={rows.length} rowsPerPage={rowsPerPage} page={page} - onChangePage={handleChangePage} - onChangeRowsPerPage={handleChangeRowsPerPage} + onPageChange={handleChangePage} + onRowsPerPageChange={handleChangeRowsPerPage} /> ); diff --git a/docs/src/pages/guides/localization/Locales.js b/docs/src/pages/guides/localization/Locales.js index 4bb731c9f9f2b7..0d165c4a07c486 100644 --- a/docs/src/pages/guides/localization/Locales.js +++ b/docs/src/pages/guides/localization/Locales.js @@ -31,7 +31,7 @@ export default function Locales() { rowsPerPage={10} page={1} component="div" - onChangePage={() => {}} + onPageChange={() => {}} /> diff --git a/docs/src/pages/guides/localization/Locales.tsx b/docs/src/pages/guides/localization/Locales.tsx index 641eedcd9bd3d3..3218585ef22f9c 100644 --- a/docs/src/pages/guides/localization/Locales.tsx +++ b/docs/src/pages/guides/localization/Locales.tsx @@ -33,7 +33,7 @@ export default function Locales() { rowsPerPage={10} page={1} component="div" - onChangePage={() => {}} + onPageChange={() => {}} /> diff --git a/packages/material-ui/src/TablePagination/TablePagination.d.ts b/packages/material-ui/src/TablePagination/TablePagination.d.ts index 7f0346afd48a01..247093697b1eae 100644 --- a/packages/material-ui/src/TablePagination/TablePagination.d.ts +++ b/packages/material-ui/src/TablePagination/TablePagination.d.ts @@ -24,8 +24,18 @@ export interface TablePaginationTypeMap { labelRowsPerPage?: React.ReactNode; nextIconButtonProps?: Partial; nextIconButtonText?: string; + /** + * Deprecated. Will be removed in v5. Please use the onPageChange prop instead. + * @deprecated + */ onChangePage: (event: React.MouseEvent | null, page: number) => void; + onPageChange: (event: React.MouseEvent | null, page: number) => void; + /** + * Deprecated. Will be removed in v5. Please use the onRowsPerPageChange prop instead. + * @deprecated + */ onChangeRowsPerPage?: React.ChangeEventHandler; + onRowsPerPageChange?: React.ChangeEventHandler; page: number; rowsPerPage: number; rowsPerPageOptions?: Array; diff --git a/packages/material-ui/src/TablePagination/TablePagination.js b/packages/material-ui/src/TablePagination/TablePagination.js index db9bb70be00ec1..fb2e028450ae78 100644 --- a/packages/material-ui/src/TablePagination/TablePagination.js +++ b/packages/material-ui/src/TablePagination/TablePagination.js @@ -88,14 +88,20 @@ const TablePagination = React.forwardRef(function TablePagination(props, ref) { labelRowsPerPage = 'Rows per page:', nextIconButtonProps, nextIconButtonText = 'Next page', - onChangePage, - onChangeRowsPerPage, + onChangePage: onChangePageProp, + onPageChange: onPageChangeProp, + onChangeRowsPerPage: onChangeRowsPerPageProp, + onRowsPerPageChange: onRowsPerPageChangeProp, page, rowsPerPage, rowsPerPageOptions = defaultRowsPerPageOptions, SelectProps = {}, ...other } = props; + + const onChangePage = onChangePageProp || onPageChangeProp; + const onChangeRowsPerPage = onChangeRowsPerPageProp || onRowsPerPageChangeProp; + let colSpan; if (Component === TableCell || Component === 'td') { @@ -237,14 +243,39 @@ TablePagination.propTypes = { * * @param {object} event The event source of the callback. * @param {number} page The page selected. + * + * @deprecated Will be removed in v5. Use the onPageChange prop instead. */ - onChangePage: PropTypes.func.isRequired, + onChangePage: chainPropTypes(PropTypes.func, () => { + return new Error( + 'Warning: Failed props type: Material-UI onChangePage was deprecated. Use onPageChange instead', + ); + }), + /** + * 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.isRequired, + /** + * Callback fired when the number of rows per page is changed. + * + * @param {object} event The event source of the callback. + * + * @deprecated Will be removed in v5. Use the onRowsPerPageChange prop instead. + */ + onChangeRowsPerPage: chainPropTypes(PropTypes.func, () => { + return new Error( + 'Warning: Failed props type: Material-UI onChangeRowsPerPage was deprecated. Use onRowsPerPageChange instead', + ); + }), /** * 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 index e7e6861686197f..bc130f32bd032c 100644 --- 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 index 9d7108aa0494e7..d465a89f41a83e 100644 --- a/packages/material-ui/src/TablePagination/TablePagination.test.js +++ b/packages/material-ui/src/TablePagination/TablePagination.test.js @@ -19,12 +19,12 @@ describe('', () => { before(() => { classes = getClasses( - , + , ); }); describeConformance( - , + , () => ({ classes, inheritComponent: TableCell, @@ -64,8 +64,8 @@ describe('', () => { @@ -87,8 +87,8 @@ describe('', () => { @@ -110,8 +110,8 @@ describe('', () => { @@ -139,8 +139,8 @@ describe('', () => { @@ -161,8 +161,8 @@ describe('', () => { @@ -176,7 +176,7 @@ describe('', () => { }); }); - describe('prop: onChangePage', () => { + describe('prop: onPageChange', () => { it('should handle next button clicks properly', () => { let page = 1; const { getByRole } = render( @@ -186,10 +186,10 @@ describe('', () => { { + onPageChange={(event, nextPage) => { page = nextPage; }} - onChangeRowsPerPage={noop} + onRowsPerPageChange={noop} rowsPerPage={10} /> @@ -211,10 +211,10 @@ describe('', () => { { + onPageChange={(event, nextPage) => { page = nextPage; }} - onChangeRowsPerPage={noop} + onRowsPerPageChange={noop} rowsPerPage={10} /> @@ -238,8 +238,8 @@ describe('', () => { count={0} page={0} rowsPerPage={10} - onChangePage={noop} - onChangeRowsPerPage={noop} + onPageChange={noop} + onRowsPerPageChange={noop} /> @@ -257,8 +257,8 @@ describe('', () => { page={0} rowsPerPage={5} rowsPerPageOptions={[5]} - onChangePage={noop} - onChangeRowsPerPage={noop} + onPageChange={noop} + onRowsPerPageChange={noop} count={10} /> @@ -283,7 +283,7 @@ describe('', () => { page={page} rowsPerPage={10} count={-1} - onChangePage={(_, newPage) => { + onPageChange={(_, newPage) => { setPage(newPage); }} /> @@ -319,8 +319,8 @@ describe('', () => { page: 2, count: 20, rowsPerPage: 10, - onChangePage: noop, - onChangeRowsPerPage: noop, + onPageChange: noop, + onRowsPerPageChange: noop, }, 'prop', 'MockedTablePagination', @@ -332,4 +332,46 @@ describe('', () => { ); }); }); + describe('v5 deprecations', () => { + beforeEach(() => { + PropTypes.resetWarningCache(); + stub(console, 'error'); + }); + + afterEach(() => { + console.error.restore(); + }); + + it('issues a warning when onChangePage is used', () => { + PropTypes.checkPropTypes( + TablePagination.Naked.propTypes, + { + onChangePage: noop, + }, + 'props', + 'onChangePage', + ); + + expect(console.error.callCount).to.equal(1); + expect(console.error.firstCall.args[0]).to.equal( + 'Warning: Failed props type: Material-UI onChangePage was deprecated. Use onPageChange instead', + ); + }); + + it('issues a warning when onChangeRowsPerPage is used', () => { + PropTypes.checkPropTypes( + TablePagination.Naked.propTypes, + { + onChangeRowsPerPage: noop, + }, + 'props', + 'onChangeRowsPerPage', + ); + + expect(console.error.callCount).to.equal(1); + expect(console.error.firstCall.args[0]).to.equal( + 'Warning: Failed props type: Material-UI onChangeRowsPerPage was deprecated. Use onRowsPerPageChange instead', + ); + }); + }); }); diff --git a/packages/material-ui/src/TablePagination/TablePaginationActions.d.ts b/packages/material-ui/src/TablePagination/TablePaginationActions.d.ts index 64c947f034bf58..17d76f48ead94b 100644 --- a/packages/material-ui/src/TablePagination/TablePaginationActions.d.ts +++ b/packages/material-ui/src/TablePagination/TablePaginationActions.d.ts @@ -5,7 +5,7 @@ export interface TablePaginationActionsProps extends React.HTMLAttributes; count: number; nextIconButtonProps?: Partial; - onChangePage: (event: React.MouseEvent | null, page: number) => void; + onPageChange: (event: React.MouseEvent | 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 index feb499783d0e6a..bbe0a95f0e299a 100644 --- a/packages/material-ui/src/TablePagination/TablePaginationActions.js +++ b/packages/material-ui/src/TablePagination/TablePaginationActions.js @@ -13,7 +13,7 @@ const TablePaginationActions = React.forwardRef(function TablePaginationActions( backIconButtonProps, count, nextIconButtonProps, - onChangePage, + onPageChange, page, rowsPerPage, ...other @@ -22,11 +22,11 @@ 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); }; return ( @@ -70,7 +70,7 @@ TablePaginationActions.propTypes = { * @param {object} event The event source of the callback. * @param {number} page The page selected. */ - onChangePage: PropTypes.func.isRequired, + onPageChange: PropTypes.func.isRequired, /** * The zero-based index of the current page. */ diff --git a/packages/material-ui/test/typescript/components.spec.tsx b/packages/material-ui/test/typescript/components.spec.tsx index 6eea228e149709..da47ff8a175102 100644 --- a/packages/material-ui/test/typescript/components.spec.tsx +++ b/packages/material-ui/test/typescript/components.spec.tsx @@ -894,8 +894,8 @@ const TableTest = () => { count={5} rowsPerPage={2} page={1} - onChangePage={() => {}} - onChangeRowsPerPage={(event) => log({ rowsPerPage: event.target.value })} + onPageChange={() => {}} + onRowsPerPageChange={(event) => log({ rowsPerPage: event.target.value })} /> From bb7e7596297fe0e62112fc8d4e16dfdda7b8573a Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 30 Nov 2020 16:38:20 +0100 Subject: [PATCH 2/5] fixes --- docs/src/pages/guides/api/api.md | 1 + packages/material-ui/src/TablePagination/TablePagination.d.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/src/pages/guides/api/api.md b/docs/src/pages/guides/api/api.md index 1c14311477c6a1..d0b5160ffe2019 100644 --- a/docs/src/pages/guides/api/api.md +++ b/docs/src/pages/guides/api/api.md @@ -98,6 +98,7 @@ This choice allows the shorthand notation: Most of the controlled component are controlled via the `value` and the `onChange` properties, 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/packages/material-ui/src/TablePagination/TablePagination.d.ts b/packages/material-ui/src/TablePagination/TablePagination.d.ts index 247093697b1eae..a747f30347c911 100644 --- a/packages/material-ui/src/TablePagination/TablePagination.d.ts +++ b/packages/material-ui/src/TablePagination/TablePagination.d.ts @@ -28,7 +28,7 @@ export interface TablePaginationTypeMap { * Deprecated. Will be removed in v5. Please use the onPageChange prop instead. * @deprecated */ - onChangePage: (event: React.MouseEvent | null, page: number) => void; + onChangePage?: (event: React.MouseEvent | null, page: number) => void; onPageChange: (event: React.MouseEvent | null, page: number) => void; /** * Deprecated. Will be removed in v5. Please use the onRowsPerPageChange prop instead. From daaf9761691465b55b9e505f4347b27115f14cdf Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 30 Nov 2020 17:53:15 +0100 Subject: [PATCH 3/5] comments --- docs/pages/api-docs/table-pagination.md | 4 +- .../src/TablePagination/TablePagination.d.ts | 15 ++++--- .../src/TablePagination/TablePagination.js | 37 +++++++--------- .../TablePagination/TablePagination.test.js | 42 ------------------- 4 files changed, 26 insertions(+), 72 deletions(-) diff --git a/docs/pages/api-docs/table-pagination.md b/docs/pages/api-docs/table-pagination.md index 71118be4c89f21..db82cb4a5667b3 100644 --- a/docs/pages/api-docs/table-pagination.md +++ b/docs/pages/api-docs/table-pagination.md @@ -38,9 +38,9 @@ The `MuiTablePagination` name can be used for providing [default props](/customi | labelRowsPerPage | node | 'Rows per page:' | Customize the rows per page label.
For localization purposes, you can use the provided [translations](/guides/localization/). | | nextIconButtonProps | object | | Props applied to the next arrow [`IconButton`](/api/icon-button/) element. | | nextIconButtonText | string | 'Next page' | Text label for the next arrow icon button.
For localization purposes, you can use the provided [translations](/guides/localization/). | -| onChangePage | func | | Callback fired when the page is changed. | +| ~~onChangePage~~ | func | | *Deprecated*. Use the `onPageChange` prop instead.

Callback fired when the page is changed. | | onPageChange* | func | | Callback fired when the page is changed.

**Signature:**
`function(event: object, page: number) => void`
*event:* The event source of the callback.
*page:* The page selected. | -| onChangeRowsPerPage | func | | Callback fired when the number of rows per page is changed. | +| ~~onChangeRowsPerPage~~ | func | | *Deprecated*. Use the `onRowsPerPageChange` prop instead.

Callback fired when the number of rows per page is changed. | | onRowsPerPageChange | func | | Callback fired when the number of rows per page is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. | | page* | number | | The zero-based index of the current page. | | rowsPerPage* | number | | The number of rows per page. | diff --git a/packages/material-ui/src/TablePagination/TablePagination.d.ts b/packages/material-ui/src/TablePagination/TablePagination.d.ts index a747f30347c911..471bfb30cc59b5 100644 --- a/packages/material-ui/src/TablePagination/TablePagination.d.ts +++ b/packages/material-ui/src/TablePagination/TablePagination.d.ts @@ -25,15 +25,20 @@ export interface TablePaginationTypeMap { nextIconButtonProps?: Partial; nextIconButtonText?: string; /** - * Deprecated. Will be removed in v5. Please use the onPageChange prop instead. - * @deprecated + * Callback fired when the page is changed. + * + * @param {object} event The event source of the callback. + * @param {number} page The page selected. + * @deprecated Use the onPageChange prop instead. */ onChangePage?: (event: React.MouseEvent | null, page: number) => void; onPageChange: (event: React.MouseEvent | null, page: number) => void; /** - * Deprecated. Will be removed in v5. Please use the onRowsPerPageChange prop instead. - * @deprecated - */ + * Callback fired when the number of rows per page is changed. + * + * @param {object} event The event source of the callback. + * @deprecated Use the onRowsPerPageChange prop instead. + */ onChangeRowsPerPage?: React.ChangeEventHandler; onRowsPerPageChange?: React.ChangeEventHandler; page: number; diff --git a/packages/material-ui/src/TablePagination/TablePagination.js b/packages/material-ui/src/TablePagination/TablePagination.js index fb2e028450ae78..2ec0324fcc4555 100644 --- a/packages/material-ui/src/TablePagination/TablePagination.js +++ b/packages/material-ui/src/TablePagination/TablePagination.js @@ -2,6 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { chainPropTypes } from '@material-ui/utils'; import clsx from 'clsx'; +import deprecatedPropType from '../utils/deprecatedPropType'; import withStyles from '../styles/withStyles'; import InputBase from '../InputBase'; import MenuItem from '../MenuItem'; @@ -239,18 +240,13 @@ TablePagination.propTypes = { */ nextIconButtonText: PropTypes.string, /** - * Callback fired when the page is changed. - * - * @param {object} event The event source of the callback. - * @param {number} page The page selected. - * - * @deprecated Will be removed in v5. Use the onPageChange prop instead. - */ - onChangePage: chainPropTypes(PropTypes.func, () => { - return new Error( - 'Warning: Failed props type: Material-UI onChangePage was deprecated. Use onPageChange instead', - ); - }), + * Callback fired when the page is changed. + * + * @param {object} event The event source of the callback. + * @param {number} page The page selected. + * @deprecated Use the onPageChange prop instead. + */ + onChangePage: deprecatedPropType(PropTypes.func, 'Use the `onPageChange` prop instead.'), /** * Callback fired when the page is changed. * @@ -259,17 +255,12 @@ TablePagination.propTypes = { */ onPageChange: PropTypes.func.isRequired, /** - * Callback fired when the number of rows per page is changed. - * - * @param {object} event The event source of the callback. - * - * @deprecated Will be removed in v5. Use the onRowsPerPageChange prop instead. - */ - onChangeRowsPerPage: chainPropTypes(PropTypes.func, () => { - return new Error( - 'Warning: Failed props type: Material-UI onChangeRowsPerPage was deprecated. Use onRowsPerPageChange instead', - ); - }), + * Callback fired when the number of rows per page is changed. + * + * @param {object} event The event source of the callback. + * @deprecated Use the onRowsPerPageChange prop instead. + */ + onChangeRowsPerPage: deprecatedPropType(PropTypes.func, 'Use the `onRowsPerPageChange` prop instead.'), /** * Callback fired when the number of rows per page is changed. * diff --git a/packages/material-ui/src/TablePagination/TablePagination.test.js b/packages/material-ui/src/TablePagination/TablePagination.test.js index d465a89f41a83e..c758e3bb6f17d3 100644 --- a/packages/material-ui/src/TablePagination/TablePagination.test.js +++ b/packages/material-ui/src/TablePagination/TablePagination.test.js @@ -332,46 +332,4 @@ describe('', () => { ); }); }); - describe('v5 deprecations', () => { - beforeEach(() => { - PropTypes.resetWarningCache(); - stub(console, 'error'); - }); - - afterEach(() => { - console.error.restore(); - }); - - it('issues a warning when onChangePage is used', () => { - PropTypes.checkPropTypes( - TablePagination.Naked.propTypes, - { - onChangePage: noop, - }, - 'props', - 'onChangePage', - ); - - expect(console.error.callCount).to.equal(1); - expect(console.error.firstCall.args[0]).to.equal( - 'Warning: Failed props type: Material-UI onChangePage was deprecated. Use onPageChange instead', - ); - }); - - it('issues a warning when onChangeRowsPerPage is used', () => { - PropTypes.checkPropTypes( - TablePagination.Naked.propTypes, - { - onChangeRowsPerPage: noop, - }, - 'props', - 'onChangeRowsPerPage', - ); - - expect(console.error.callCount).to.equal(1); - expect(console.error.firstCall.args[0]).to.equal( - 'Warning: Failed props type: Material-UI onChangeRowsPerPage was deprecated. Use onRowsPerPageChange instead', - ); - }); - }); }); From 60e3ccc177ac823dd6c3a51c5fbc9d373c93ac55 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 30 Nov 2020 18:15:48 +0100 Subject: [PATCH 4/5] comments, prettier, formatting, fixes --- docs/pages/api-docs/table-pagination.md | 2 +- .../src/TablePagination/TablePagination.d.ts | 10 +++--- .../src/TablePagination/TablePagination.js | 31 ++++++++++--------- 3 files changed, 23 insertions(+), 20 deletions(-) diff --git a/docs/pages/api-docs/table-pagination.md b/docs/pages/api-docs/table-pagination.md index db82cb4a5667b3..2cee4e05a0ee8a 100644 --- a/docs/pages/api-docs/table-pagination.md +++ b/docs/pages/api-docs/table-pagination.md @@ -39,8 +39,8 @@ The `MuiTablePagination` name can be used for providing [default props](/customi | nextIconButtonProps | object | | Props applied to the next arrow [`IconButton`](/api/icon-button/) element. | | nextIconButtonText | string | 'Next page' | Text label for the next arrow icon button.
For localization purposes, you can use the provided [translations](/guides/localization/). | | ~~onChangePage~~ | func | | *Deprecated*. Use the `onPageChange` prop instead.

Callback fired when the page is changed. | -| onPageChange* | func | | Callback fired when the page is changed.

**Signature:**
`function(event: object, page: number) => void`
*event:* The event source of the callback.
*page:* The page selected. | | ~~onChangeRowsPerPage~~ | func | | *Deprecated*. Use the `onRowsPerPageChange` prop instead.

Callback fired when the number of rows per page is changed. | +| onPageChange* | func | | Callback fired when the page is changed.

**Signature:**
`function(event: object, page: number) => void`
*event:* The event source of the callback.
*page:* The page selected. | | onRowsPerPageChange | func | | Callback fired when the number of rows per page is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. | | page* | number | | The zero-based index of the current page. | | rowsPerPage* | number | | The number of rows per page. | diff --git a/packages/material-ui/src/TablePagination/TablePagination.d.ts b/packages/material-ui/src/TablePagination/TablePagination.d.ts index 471bfb30cc59b5..b0272262003f71 100644 --- a/packages/material-ui/src/TablePagination/TablePagination.d.ts +++ b/packages/material-ui/src/TablePagination/TablePagination.d.ts @@ -34,11 +34,11 @@ export interface TablePaginationTypeMap { onChangePage?: (event: React.MouseEvent | null, page: number) => void; onPageChange: (event: React.MouseEvent | null, page: number) => void; /** - * Callback fired when the number of rows per page is changed. - * - * @param {object} event The event source of the callback. - * @deprecated Use the onRowsPerPageChange prop instead. - */ + * Callback fired when the number of rows per page is changed. + * + * @param {object} event The event source of the callback. + * @deprecated Use the onRowsPerPageChange prop instead. + */ onChangeRowsPerPage?: React.ChangeEventHandler; onRowsPerPageChange?: React.ChangeEventHandler; page: number; diff --git a/packages/material-ui/src/TablePagination/TablePagination.js b/packages/material-ui/src/TablePagination/TablePagination.js index 2ec0324fcc4555..f05692336018cc 100644 --- a/packages/material-ui/src/TablePagination/TablePagination.js +++ b/packages/material-ui/src/TablePagination/TablePagination.js @@ -167,7 +167,7 @@ const TablePagination = React.forwardRef(function TablePagination(props, ref) { 'aria-label': nextIconButtonText, ...nextIconButtonProps, }} - onChangePage={onChangePage} + onPageChange={onChangePage} page={page} rowsPerPage={rowsPerPage} /> @@ -240,13 +240,23 @@ TablePagination.propTypes = { */ nextIconButtonText: PropTypes.string, /** - * Callback fired when the page is changed. - * - * @param {object} event The event source of the callback. - * @param {number} page The page selected. - * @deprecated Use the onPageChange prop instead. - */ + * Callback fired when the page is changed. + * + * @param {object} event The event source of the callback. + * @param {number} page The page selected. + * @deprecated Use the onPageChange prop instead. + */ onChangePage: deprecatedPropType(PropTypes.func, 'Use the `onPageChange` prop instead.'), + /** + * Callback fired when the number of rows per page is changed. + * + * @param {object} event The event source of the callback. + * @deprecated Use the onRowsPerPageChange prop instead. + */ + onChangeRowsPerPage: deprecatedPropType( + PropTypes.func, + 'Use the `onRowsPerPageChange` prop instead.', + ), /** * Callback fired when the page is changed. * @@ -254,13 +264,6 @@ TablePagination.propTypes = { * @param {number} page The page selected. */ onPageChange: PropTypes.func.isRequired, - /** - * Callback fired when the number of rows per page is changed. - * - * @param {object} event The event source of the callback. - * @deprecated Use the onRowsPerPageChange prop instead. - */ - onChangeRowsPerPage: deprecatedPropType(PropTypes.func, 'Use the `onRowsPerPageChange` prop instead.'), /** * Callback fired when the number of rows per page is changed. * From 219db8e2e7a0763e522deadfe22ea33efa0d3f2b Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 2 Dec 2020 09:47:36 +0100 Subject: [PATCH 5/5] Update docs/src/pages/guides/api/api.md Co-authored-by: Matt --- docs/src/pages/guides/api/api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/api/api.md b/docs/src/pages/guides/api/api.md index d0b5160ffe2019..ecb936dc71e3f4 100644 --- a/docs/src/pages/guides/api/api.md +++ b/docs/src/pages/guides/api/api.md @@ -98,7 +98,7 @@ This choice allows the shorthand notation: Most of the controlled component are controlled via the `value` and the `onChange` properties, 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`. +In cases where there are multiple events, we put the noun first, and then the verb, for example: `onPageChange`, `onRowsChange`. ### boolean vs enum