Skip to content

Commit

Permalink
[DataGrid] Fix ElementType usage (#12479)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cherniavskii
cherniavskii authored Mar 19, 2024
1 parent 1a54927 commit 6fc1da5
Show file tree
Hide file tree
Showing 2 changed files with 120 additions and 93 deletions.
180 changes: 100 additions & 80 deletions packages/x-data-grid/src/components/GridPagination.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import TablePagination, {
tablePaginationClasses,
TablePaginationProps,
Expand Down Expand Up @@ -31,88 +32,107 @@ const GridPaginationRoot = styled(TablePagination)(({ theme }) => ({

type MutableArray<A> = A extends readonly (infer T)[] ? T[] : never;

export const GridPagination = React.forwardRef<unknown, Partial<TablePaginationProps>>(
function GridPagination(props, ref) {
const apiRef = useGridApiContext();
const rootProps = useGridRootProps();
const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
const rowCount = useGridSelector(apiRef, gridPaginationRowCountSelector);

const lastPage = React.useMemo(() => {
const calculatedValue = Math.ceil(rowCount / (paginationModel.pageSize || 1)) - 1;
return Math.max(0, calculatedValue);
}, [rowCount, paginationModel.pageSize]);

const handlePageSizeChange = React.useCallback(
(event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
const pageSize = Number(event.target.value);
apiRef.current.setPageSize(pageSize);
},
[apiRef],
);

const handlePageChange = React.useCallback<TablePaginationProps['onPageChange']>(
(_, page) => {
apiRef.current.setPage(page);
},
[apiRef],
);

const isPageSizeIncludedInPageSizeOptions = (pageSize: number) => {
for (let i = 0; i < rootProps.pageSizeOptions.length; i += 1) {
const option = rootProps.pageSizeOptions[i];
if (typeof option === 'number') {
if (option === pageSize) {
return true;
}
} else if (option.value === pageSize) {
interface GridPaginationOwnProps {
component?: React.ElementType;
}

const GridPagination = React.forwardRef<
unknown,
Partial<
// See https://github.com/mui/material-ui/issues/40427
Omit<TablePaginationProps, 'component'>
> &
GridPaginationOwnProps
>(function GridPagination(props, ref) {
const apiRef = useGridApiContext();
const rootProps = useGridRootProps();
const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
const rowCount = useGridSelector(apiRef, gridPaginationRowCountSelector);

const lastPage = React.useMemo(() => {
const calculatedValue = Math.ceil(rowCount / (paginationModel.pageSize || 1)) - 1;
return Math.max(0, calculatedValue);
}, [rowCount, paginationModel.pageSize]);

const handlePageSizeChange = React.useCallback(
(event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
const pageSize = Number(event.target.value);
apiRef.current.setPageSize(pageSize);
},
[apiRef],
);

const handlePageChange = React.useCallback<TablePaginationProps['onPageChange']>(
(_, page) => {
apiRef.current.setPage(page);
},
[apiRef],
);

const isPageSizeIncludedInPageSizeOptions = (pageSize: number) => {
for (let i = 0; i < rootProps.pageSizeOptions.length; i += 1) {
const option = rootProps.pageSizeOptions[i];
if (typeof option === 'number') {
if (option === pageSize) {
return true;
}
}
return false;
};

if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line react-hooks/rules-of-hooks
const warnedOnceMissingInPageSizeOptions = React.useRef(false);

const pageSize = rootProps.paginationModel?.pageSize ?? paginationModel.pageSize;
if (
!warnedOnceMissingInPageSizeOptions.current &&
!rootProps.autoPageSize &&
!isPageSizeIncludedInPageSizeOptions(pageSize)
) {
console.warn(
[
`MUI X: The page size \`${paginationModel.pageSize}\` is not preset in the \`pageSizeOptions\`.`,
`Add it to show the pagination select.`,
].join('\n'),
);

warnedOnceMissingInPageSizeOptions.current = true;
} else if (option.value === pageSize) {
return true;
}
}
return false;
};

const pageSizeOptions = isPageSizeIncludedInPageSizeOptions(paginationModel.pageSize)
? rootProps.pageSizeOptions
: [];

return (
<GridPaginationRoot
ref={ref}
component="div"
count={rowCount}
page={paginationModel.page <= lastPage ? paginationModel.page : lastPage}
// TODO: Remove the cast once the type is fixed in Material UI and that the min Material UI version
// for x-data-grid is past the fix.
// Note that Material UI will not mutate the array, so this is safe.
rowsPerPageOptions={pageSizeOptions as MutableArray<typeof pageSizeOptions>}
rowsPerPage={paginationModel.pageSize}
onPageChange={handlePageChange}
onRowsPerPageChange={handlePageSizeChange}
{...apiRef.current.getLocaleText('MuiTablePagination')}
{...props}
/>
);
},
);
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line react-hooks/rules-of-hooks
const warnedOnceMissingInPageSizeOptions = React.useRef(false);

const pageSize = rootProps.paginationModel?.pageSize ?? paginationModel.pageSize;
if (
!warnedOnceMissingInPageSizeOptions.current &&
!rootProps.autoPageSize &&
!isPageSizeIncludedInPageSizeOptions(pageSize)
) {
console.warn(
[
`MUI X: The page size \`${paginationModel.pageSize}\` is not preset in the \`pageSizeOptions\`.`,
`Add it to show the pagination select.`,
].join('\n'),
);

warnedOnceMissingInPageSizeOptions.current = true;
}
}

const pageSizeOptions = isPageSizeIncludedInPageSizeOptions(paginationModel.pageSize)
? rootProps.pageSizeOptions
: [];

return (
<GridPaginationRoot
ref={ref}
component="div"
count={rowCount}
page={paginationModel.page <= lastPage ? paginationModel.page : lastPage}
// TODO: Remove the cast once the type is fixed in Material UI and that the min Material UI version
// for x-data-grid is past the fix.
// Note that Material UI will not mutate the array, so this is safe.
rowsPerPageOptions={pageSizeOptions as MutableArray<typeof pageSizeOptions>}
rowsPerPage={paginationModel.pageSize}
onPageChange={handlePageChange}
onRowsPerPageChange={handlePageSizeChange}
{...apiRef.current.getLocaleText('MuiTablePagination')}
{...props}
/>
);
});

GridPagination.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the TypeScript types and run "yarn proptypes" |
// ----------------------------------------------------------------------
component: PropTypes.elementType,
} as any;

export { GridPagination };
33 changes: 20 additions & 13 deletions packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,26 @@ import MenuItem, { MenuItemProps } from '@mui/material/MenuItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import { useGridRootProps } from '../../hooks/utils/useGridRootProps';

export type GridActionsCellItemProps = {
interface GridActionsCellItemCommonProps {
label: string;
icon?: React.ReactElement;
/** from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component */
component?: React.ElementType;
} & (
| ({ showInMenu?: false; icon: React.ReactElement } & IconButtonProps)
| ({
showInMenu: true;
/**
* If false, the menu will not close when this item is clicked.
* @default true
*/
closeMenuOnClick?: boolean;
closeMenu?: () => void;
} & MenuItemProps)
);
}

export type GridActionsCellItemProps = GridActionsCellItemCommonProps &
(
| ({ showInMenu?: false; icon: React.ReactElement } & Omit<IconButtonProps, 'component'>)
| ({
showInMenu: true;
/**
* If false, the menu will not close when this item is clicked.
* @default true
*/
closeMenuOnClick?: boolean;
closeMenu?: () => void;
} & Omit<MenuItemProps, 'component'>)
);

const GridActionsCellItem = React.forwardRef<HTMLElement, GridActionsCellItemProps>(
(props, ref) => {
Expand Down Expand Up @@ -80,6 +83,10 @@ GridActionsCellItem.propTypes = {
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the TypeScript types and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component
*/
component: PropTypes.elementType,
icon: PropTypes.element,
label: PropTypes.string.isRequired,
showInMenu: PropTypes.bool,
Expand Down

0 comments on commit 6fc1da5

Please sign in to comment.