Rework using props

mui · Jul 27, 2021 · 76d0718 · 76d0718
1 parent 26f483b
commit 76d0718
Show file tree

Hide file tree

Showing 6 changed files with 184 additions and 113 deletions.
diff --git a/packages/grid/_modules_/grid/components/GridPagination.tsx b/packages/grid/_modules_/grid/components/GridPagination.tsx
@@ -7,6 +7,8 @@ import { gridPaginationSelector } from '../hooks/features/pagination/gridPaginat
 import { optionsSelector } from '../hooks/utils/optionsSelector';
 import { useGridApiContext } from '../hooks/root/useGridApiContext';
 import { getMuiVersion, createTheme } from '../utils';
+import { GridRootPropsContext } from '../context/GridRootPropsContext';
+import { DEFAULT_PAGE_SIZE } from '../hooks/features/pagination/gridPaginationState';
 
 const defaultTheme = createTheme();
 // Used to hide the Rows per page selector on small devices
@@ -45,6 +47,7 @@ export const GridPagination = React.forwardRef<
 >(function GridPagination(props, ref) {
   const classes = useStyles();
   const apiRef = useGridApiContext();
+  const rootProps = React.useContext(GridRootPropsContext)!;
   const paginationState = useGridSelector(apiRef, gridPaginationSelector);
 
   const lastPage = React.useMemo(
@@ -82,23 +85,21 @@ export const GridPagination = React.forwardRef<
     };
   };
 
-  const hasPageSizeInRowsPerPageOptions = options.rowsPerPageOptions?.includes(
-    paginationState.pageSize,
-  );
-
-  if (
-    process.env.NODE_ENV !== 'production' &&
-    !warnedOnceMissingPageSizeInRowsPerPageOptions &&
-    options.rowsPerPageOptions &&
-    !hasPageSizeInRowsPerPageOptions
-  ) {
-    console.warn(
-      [
-        `Material-UI: The current pageSize (${paginationState.pageSize}) is not preset in the rowsPerPageOptions.`,
-        `Add it to show the pagination select.`,
-      ].join('\n'),
-    );
-    warnedOnceMissingPageSizeInRowsPerPageOptions = true;
+  if (process.env.NODE_ENV !== 'production') {
+    if (
+      !warnedOnceMissingPageSizeInRowsPerPageOptions &&
+      !rootProps.rowsPerPageOptions!.includes(rootProps.pageSize ?? DEFAULT_PAGE_SIZE)
+    ) {
+      console.warn(
+        [
+          `Material-UI: The page size \`${
+            rootProps.pageSize ?? DEFAULT_PAGE_SIZE
+          }\` is not preset in the \`rowsPerPageOptions\``,
+          `Add it to show the pagination select.`,
+        ].join('\n'),
+      );
+      warnedOnceMissingPageSizeInRowsPerPageOptions = true;
+    }
   }
 
   return (
@@ -114,7 +115,11 @@ export const GridPagination = React.forwardRef<
       component="div"
       count={paginationState.rowCount}
       page={paginationState.page <= lastPage ? paginationState.page : lastPage}
-      rowsPerPageOptions={hasPageSizeInRowsPerPageOptions ? options.rowsPerPageOptions : []}
+      rowsPerPageOptions={
+        options.rowsPerPageOptions?.includes(paginationState.pageSize)
+          ? options.rowsPerPageOptions
+          : []
+      }
       rowsPerPage={paginationState.pageSize}
       {...apiRef!.current.getLocaleText('MuiTablePagination')}
       {...getPaginationChangeHandlers()}

diff --git a/packages/grid/_modules_/grid/hooks/features/core/gridState.ts b/packages/grid/_modules_/grid/hooks/features/core/gridState.ts
@@ -30,7 +30,7 @@ import {
   getInitialGridRenderingState,
   InternalRenderingState,
 } from '../virtualization/renderingState';
-import { GridPaginationState } from '../pagination/gridPaginationState';
+import { getInitialPaginationState, GridPaginationState } from '../pagination/gridPaginationState';
 
 export interface GridState {
   rows: InternalGridRowsState;
@@ -60,12 +60,7 @@ export interface GridState {
 export const getInitialGridState = (): GridState => ({
   rows: getInitialGridRowState(),
   editRows: {},
-  pagination: {
-    page: 0,
-    pageCount: 0,
-    rowCount: 0,
-    pageSize: 100,
-  },
+  pagination: getInitialPaginationState(),
   options: DEFAULT_GRID_OPTIONS,
   isScrolling: false,
   columns: getInitialGridColumnsState(),

diff --git a/packages/grid/_modules_/grid/hooks/features/pagination/gridPaginationState.ts b/packages/grid/_modules_/grid/hooks/features/pagination/gridPaginationState.ts
@@ -4,3 +4,12 @@ export interface GridPaginationState {
   pageCount: number;
   rowCount: number;
 }
+
+export const DEFAULT_PAGE_SIZE = 100;
+
+export const getInitialPaginationState = (): GridPaginationState => ({
+  page: 0,
+  pageCount: 0,
+  rowCount: 0,
+  pageSize: DEFAULT_PAGE_SIZE,
+});
diff --git a/packages/grid/_modules_/grid/hooks/features/useGridComponents.tsx b/packages/grid/_modules_/grid/hooks/features/useGridComponents.tsx
@@ -1,8 +1,73 @@
 import * as React from 'react';
+import MUICheckbox from '@material-ui/core/Checkbox';
+
 import { GridApiRef } from '../../models/api/gridApiRef';
 import { GridApiRefComponentsProperty } from '../../models/api/gridComponentsApi';
-import { DEFAULT_GRID_SLOTS_COMPONENTS, GridSlotsComponent } from '../../models/gridSlotsComponent';
+import { GridSlotsComponent } from '../../models/gridSlotsComponent';
 import { GridSlotsComponentsProps } from '../../models/gridSlotsComponentsProps';
+import { GridIconSlotsComponent } from '../../models';
+import {
+  GridArrowDownwardIcon,
+  GridArrowUpwardIcon,
+  GridCheckIcon,
+  GridCloseIcon,
+  GridColumnIcon,
+  GridColumnMenu,
+  GridColumnsPanel,
+  GridFilterAltIcon,
+  GridFilterListIcon,
+  GridFilterPanel,
+  GridFooter,
+  GridHeader,
+  GridLoadingOverlay,
+  GridNoRowsOverlay,
+  GridPagination,
+  GridPanel,
+  GridPreferencesPanel,
+  GridSaveAltIcon,
+  GridSeparatorIcon,
+  GridTableRowsIcon,
+  GridTripleDotsVerticalIcon,
+  GridViewHeadlineIcon,
+  GridViewStreamIcon,
+} from '../../components';
+import { GridColumnUnsortedIcon } from '../../components/columnHeaders/GridColumnUnsortedIcon';
+import { ErrorOverlay } from '../../components/ErrorOverlay';
+import { GridNoResultsOverlay } from '../../components/GridNoResultsOverlay';
+
+const DEFAULT_GRID_SLOTS_ICONS: GridIconSlotsComponent = {
+  BooleanCellTrueIcon: GridCheckIcon,
+  BooleanCellFalseIcon: GridCloseIcon,
+  OpenFilterButtonIcon: GridFilterListIcon,
+  ColumnFilteredIcon: GridFilterAltIcon,
+  ColumnSelectorIcon: GridColumnIcon,
+  ColumnMenuIcon: GridTripleDotsVerticalIcon,
+  ColumnUnsortedIcon: GridColumnUnsortedIcon,
+  ColumnSortedAscendingIcon: GridArrowUpwardIcon,
+  ColumnSortedDescendingIcon: GridArrowDownwardIcon,
+  ColumnResizeIcon: GridSeparatorIcon,
+  DensityCompactIcon: GridViewHeadlineIcon,
+  DensityStandardIcon: GridTableRowsIcon,
+  DensityComfortableIcon: GridViewStreamIcon,
+  ExportIcon: GridSaveAltIcon,
+};
+
+export const DEFAULT_GRID_SLOTS_COMPONENTS: GridApiRefComponentsProperty = {
+  ...DEFAULT_GRID_SLOTS_ICONS,
+  Checkbox: MUICheckbox,
+  ColumnMenu: GridColumnMenu,
+  ColumnsPanel: GridColumnsPanel,
+  ErrorOverlay,
+  FilterPanel: GridFilterPanel,
+  Footer: GridFooter,
+  Header: GridHeader,
+  PreferencesPanel: GridPreferencesPanel,
+  LoadingOverlay: GridLoadingOverlay,
+  NoResultsOverlay: GridNoResultsOverlay,
+  NoRowsOverlay: GridNoRowsOverlay,
+  Pagination: GridPagination,
+  Panel: GridPanel,
+};
 
 export const useGridComponents = (
   apiRef: GridApiRef,

diff --git a/packages/grid/_modules_/grid/models/gridSlotsComponent.ts b/packages/grid/_modules_/grid/models/gridSlotsComponent.ts
@@ -1,34 +1,5 @@
 import * as React from 'react';
-import MUICheckbox from '@material-ui/core/Checkbox';
-import { ErrorOverlay } from '../components/ErrorOverlay';
-import { GridFooter } from '../components/GridFooter';
-import { GridHeader } from '../components/GridHeader';
-import { GridPreferencesPanel } from '../components/panel/GridPreferencesPanel';
-import {
-  GridArrowDownwardIcon,
-  GridArrowUpwardIcon,
-  GridColumnIcon,
-  GridFilterAltIcon,
-  GridFilterListIcon,
-  GridSeparatorIcon,
-  GridTableRowsIcon,
-  GridTripleDotsVerticalIcon,
-  GridViewHeadlineIcon,
-  GridViewStreamIcon,
-  GridSaveAltIcon,
-  GridCloseIcon,
-  GridCheckIcon,
-} from '../components/icons/index';
-import { GridLoadingOverlay } from '../components/GridLoadingOverlay';
-import { GridColumnMenu } from '../components/menu/columnMenu/GridColumnMenu';
-import { GridNoRowsOverlay } from '../components/GridNoRowsOverlay';
-import { GridNoResultsOverlay } from '../components/GridNoResultsOverlay';
-import { GridPagination } from '../components/GridPagination';
-import { GridColumnsPanel } from '../components/panel/GridColumnsPanel';
-import { GridFilterPanel } from '../components/panel/filterPanel/GridFilterPanel';
-import { GridPanel } from '../components/panel/GridPanel';
-import { GridColumnUnsortedIcon } from '../components/columnHeaders/GridColumnUnsortedIcon';
-import { GridApiRefComponentsProperty } from './api/gridComponentsApi';
+
 import { GridIconSlotsComponent } from './gridIconSlotsComponent';
 
 /**
@@ -94,37 +65,3 @@ export interface GridSlotsComponent extends GridIconSlotsComponent {
    */
   Panel?: React.JSXElementConstructor<any>;
 }
-
-export const DEFAULT_GRID_SLOTS_ICONS: GridIconSlotsComponent = {
-  BooleanCellTrueIcon: GridCheckIcon,
-  BooleanCellFalseIcon: GridCloseIcon,
-  OpenFilterButtonIcon: GridFilterListIcon,
-  ColumnFilteredIcon: GridFilterAltIcon,
-  ColumnSelectorIcon: GridColumnIcon,
-  ColumnMenuIcon: GridTripleDotsVerticalIcon,
-  ColumnUnsortedIcon: GridColumnUnsortedIcon,
-  ColumnSortedAscendingIcon: GridArrowUpwardIcon,
-  ColumnSortedDescendingIcon: GridArrowDownwardIcon,
-  ColumnResizeIcon: GridSeparatorIcon,
-  DensityCompactIcon: GridViewHeadlineIcon,
-  DensityStandardIcon: GridTableRowsIcon,
-  DensityComfortableIcon: GridViewStreamIcon,
-  ExportIcon: GridSaveAltIcon,
-};
-
-export const DEFAULT_GRID_SLOTS_COMPONENTS: GridApiRefComponentsProperty = {
-  ...DEFAULT_GRID_SLOTS_ICONS,
-  Checkbox: MUICheckbox,
-  ColumnMenu: GridColumnMenu,
-  ColumnsPanel: GridColumnsPanel,
-  ErrorOverlay,
-  FilterPanel: GridFilterPanel,
-  Footer: GridFooter,
-  Header: GridHeader,
-  PreferencesPanel: GridPreferencesPanel,
-  LoadingOverlay: GridLoadingOverlay,
-  NoResultsOverlay: GridNoResultsOverlay,
-  NoRowsOverlay: GridNoRowsOverlay,
-  Pagination: GridPagination,
-  Panel: GridPanel,
-};