From 94e64655aebe97e53c3647d3753028d74b11dafa Mon Sep 17 00:00:00 2001 From: delangle Date: Mon, 26 Jul 2021 13:56:42 +0200 Subject: [PATCH 1/6] [core] Use rootProps instead of options in Grid components except for classes --- .../_modules_/grid/components/GridFooter.tsx | 14 ++--- .../grid/components/GridPagination.tsx | 13 ++-- .../grid/components/GridViewport.tsx | 9 +-- .../columnHeaders/GridColumnUnsortedIcon.tsx | 7 +-- .../GridCellCheckboxRenderer.tsx | 7 +-- .../grid/components/containers/GridRoot.tsx | 4 +- .../menu/columnMenu/GridColumnsMenuItem.tsx | 7 +-- .../menu/columnMenu/GridFilterMenuItem.tsx | 7 +-- .../menu/columnMenu/HideGridColMenuItem.tsx | 7 +-- .../components/panel/GridPreferencesPanel.tsx | 8 +-- .../grid/components/toolbar/GridToolbar.tsx | 13 ++-- .../toolbar/GridToolbarColumnsButton.tsx | 6 +- .../toolbar/GridToolbarDensitySelector.tsx | 6 +- .../toolbar/GridToolbarFilterButton.tsx | 6 +- .../grid/hooks/features/useGridComponents.tsx | 63 ++++++++++++++++++- .../grid/models/gridSlotsComponent.ts | 63 ------------------- 16 files changed, 115 insertions(+), 125 deletions(-) diff --git a/packages/grid/_modules_/grid/components/GridFooter.tsx b/packages/grid/_modules_/grid/components/GridFooter.tsx index 6404881727813..018ca012f9125 100644 --- a/packages/grid/_modules_/grid/components/GridFooter.tsx +++ b/packages/grid/_modules_/grid/components/GridFooter.tsx @@ -4,37 +4,37 @@ import { gridPaginationSelector } from '../hooks/features/pagination/gridPaginat import { gridRowCountSelector } from '../hooks/features/rows/gridRowsSelector'; import { selectedGridRowsCountSelector } from '../hooks/features/selection/gridSelectionSelector'; import { visibleGridRowCountSelector } from '../hooks/features/filter/gridFilterSelector'; -import { optionsSelector } from '../hooks/utils/optionsSelector'; import { useGridApiContext } from '../hooks/root/useGridApiContext'; import { GridRowCount } from './GridRowCount'; import { GridSelectedRowCount } from './GridSelectedRowCount'; import { GridFooterContainer, GridFooterContainerProps } from './containers/GridFooterContainer'; +import {GridRootPropsContext} from "../context/GridRootPropsContext"; export const GridFooter = React.forwardRef( function GridFooter(props, ref) { const apiRef = useGridApiContext(); - const totalRowCount = useGridSelector(apiRef, gridRowCountSelector); - const options = useGridSelector(apiRef, optionsSelector); + const rootProps = React.useContext(GridRootPropsContext)!; + const totalRowCount = useGridSelector(apiRef, gridRowCountSelector); const selectedRowCount = useGridSelector(apiRef, selectedGridRowsCountSelector); const pagination = useGridSelector(apiRef, gridPaginationSelector); const visibleRowCount = useGridSelector(apiRef, visibleGridRowCountSelector); const SelectedRowCountElement = - !options.hideFooterSelectedRowCount && selectedRowCount > 0 ? ( + !rootProps.hideFooterSelectedRowCount && selectedRowCount > 0 ? ( ) : (
); const RowCountElement = - !options.hideFooterRowCount && !options.pagination ? ( + !rootProps.hideFooterRowCount && !rootProps.pagination ? ( ) : null; const PaginationComponent = - !!options.pagination && + !!rootProps.pagination && pagination.pageSize != null && - !options.hideFooterPagination && + !rootProps.hideFooterPagination && apiRef?.current.components.Pagination; const PaginationElement = PaginationComponent && ( diff --git a/packages/grid/_modules_/grid/components/GridPagination.tsx b/packages/grid/_modules_/grid/components/GridPagination.tsx index eb35ceebf6c5e..1ef98c7629c44 100644 --- a/packages/grid/_modules_/grid/components/GridPagination.tsx +++ b/packages/grid/_modules_/grid/components/GridPagination.tsx @@ -4,9 +4,9 @@ import { Theme } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/styles'; import { useGridSelector } from '../hooks/features/core/useGridSelector'; import { gridPaginationSelector } from '../hooks/features/pagination/gridPaginationSelector'; -import { optionsSelector } from '../hooks/utils/optionsSelector'; import { useGridApiContext } from '../hooks/root/useGridApiContext'; import { getMuiVersion, createTheme } from '../utils'; +import {GridRootPropsContext} from "../context/GridRootPropsContext"; const defaultTheme = createTheme(); // Used to hide the Rows per page selector on small devices @@ -43,13 +43,12 @@ export const GridPagination = React.forwardRef< >(function GridPagination(props, ref) { const classes = useStyles(); const apiRef = useGridApiContext(); - const paginationState = useGridSelector(apiRef, gridPaginationSelector); + const rootProps = React.useContext(GridRootPropsContext)!; + const paginationState = useGridSelector(apiRef, gridPaginationSelector); const lastPage = React.useMemo( () => Math.floor(paginationState.rowCount / (paginationState.pageSize || 1)), [paginationState.rowCount, paginationState.pageSize], ); - const options = useGridSelector(apiRef, optionsSelector); - const handlePageSizeChange = React.useCallback( (event: React.ChangeEvent) => { const newPageSize = Number(event.target.value); @@ -93,9 +92,9 @@ export const GridPagination = React.forwardRef< count={paginationState.rowCount} page={paginationState.page <= lastPage ? paginationState.page : lastPage} rowsPerPageOptions={ - options.rowsPerPageOptions && - options.rowsPerPageOptions.indexOf(paginationState.pageSize) > -1 - ? options.rowsPerPageOptions + rootProps.rowsPerPageOptions && + rootProps.rowsPerPageOptions.indexOf(paginationState.pageSize) > -1 + ? rootProps.rowsPerPageOptions : [] } rowsPerPage={paginationState.pageSize} diff --git a/packages/grid/_modules_/grid/components/GridViewport.tsx b/packages/grid/_modules_/grid/components/GridViewport.tsx index e8ddabf3d845d..abe3f3cb506c5 100644 --- a/packages/grid/_modules_/grid/components/GridViewport.tsx +++ b/packages/grid/_modules_/grid/components/GridViewport.tsx @@ -23,13 +23,14 @@ import { gridViewportSizesSelector, gridScrollBarSizeSelector, } from '../hooks/root/gridContainerSizesSelector'; +import {GridRootPropsContext} from "../context/GridRootPropsContext"; type ViewportType = React.ForwardRefExoticComponent>; export const GridViewport: ViewportType = React.forwardRef( function GridViewport(props, renderingZoneRef) { const apiRef = useGridApiContext(); - + const rootProps = React.useContext(GridRootPropsContext)!; const options = useGridSelector(apiRef, optionsSelector); const containerSizes = useGridSelector(apiRef, gridContainerSizesSelector); const viewportSizes = useGridSelector(apiRef, gridViewportSizesSelector); @@ -72,15 +73,15 @@ export const GridViewport: ViewportType = React.forwardRef( lastColIdx={renderState.renderContext!.lastColIdx!} hasScrollX={scrollBarState.hasScrollX} hasScrollY={scrollBarState.hasScrollY} - showCellRightBorder={!!options.showCellRightBorder} - extendRowFullWidth={!options.disableExtendRowFullWidth} + showCellRightBorder={!!rootProps.showCellRightBorder} + extendRowFullWidth={!rootProps.disableExtendRowFullWidth} rowIndex={renderState.renderContext!.firstRowIdx! + idx} cellFocus={cellFocus} cellTabIndex={cellTabIndex} isSelected={selectionLookup[id] !== undefined} editRowState={editRowsState[id]} cellClassName={options.classes?.cell} - getCellClassName={options.getCellClassName} + getCellClassName={rootProps.getCellClassName} /> diff --git a/packages/grid/_modules_/grid/components/columnHeaders/GridColumnUnsortedIcon.tsx b/packages/grid/_modules_/grid/components/columnHeaders/GridColumnUnsortedIcon.tsx index 4d478b1250a59..540913366d440 100644 --- a/packages/grid/_modules_/grid/components/columnHeaders/GridColumnUnsortedIcon.tsx +++ b/packages/grid/_modules_/grid/components/columnHeaders/GridColumnUnsortedIcon.tsx @@ -1,12 +1,11 @@ import * as React from 'react'; -import { useGridSelector } from '../../hooks/features/core/useGridSelector'; -import { optionsSelector } from '../../hooks/utils/optionsSelector'; import { useGridApiContext } from '../../hooks/root/useGridApiContext'; +import {GridRootPropsContext} from "../../context/GridRootPropsContext"; export const GridColumnUnsortedIcon = React.memo(function GridColumnHeaderSortIcon(props) { const apiRef = useGridApiContext(); - const options = useGridSelector(apiRef, optionsSelector); - const [nextSortDirection] = options.sortingOrder; + const rootProps = React.useContext(GridRootPropsContext)!; + const [nextSortDirection] = rootProps.sortingOrder!; const Icon = nextSortDirection === 'asc' diff --git a/packages/grid/_modules_/grid/components/columnSelection/GridCellCheckboxRenderer.tsx b/packages/grid/_modules_/grid/components/columnSelection/GridCellCheckboxRenderer.tsx index b421ff6625fb6..c0b1a5c5b571d 100644 --- a/packages/grid/_modules_/grid/components/columnSelection/GridCellCheckboxRenderer.tsx +++ b/packages/grid/_modules_/grid/components/columnSelection/GridCellCheckboxRenderer.tsx @@ -3,15 +3,14 @@ import { useForkRef } from '@material-ui/core/utils'; import { GRID_CELL_NAVIGATION_KEY_DOWN } from '../../constants/eventsConstants'; import { GridCellParams } from '../../models/params/gridCellParams'; import { isNavigationKey, isSpaceKey } from '../../utils/keyboardUtils'; -import { useGridSelector } from '../../hooks/features/core/useGridSelector'; -import { optionsSelector } from '../../hooks/utils/optionsSelector'; import { useGridApiContext } from '../../hooks/root/useGridApiContext'; +import {GridRootPropsContext} from "../../context/GridRootPropsContext"; export const GridCellCheckboxForwardRef = React.forwardRef( function GridCellCheckboxRenderer(props, ref) { const { field, id, value, tabIndex, hasFocus } = props; const apiRef = useGridApiContext(); - const options = useGridSelector(apiRef, optionsSelector); + const rootProps = React.useContext(GridRootPropsContext)!; const checkboxElement = React.useRef(null); const handleRef = useForkRef(checkboxElement, ref); @@ -53,7 +52,7 @@ export const GridCellCheckboxForwardRef = React.forwardRef(function
{ const { onClick } = props; const apiRef = useGridApiContext(); - const options = useGridSelector(apiRef, optionsSelector); + const rootProps = React.useContext(GridRootPropsContext)!; const showColumns = React.useCallback( (event: React.MouseEvent) => { @@ -19,7 +18,7 @@ export const GridColumnsMenuItem = (props: GridFilterItemProps) => { [apiRef, onClick], ); - if (options.disableColumnSelector) { + if (rootProps.disableColumnSelector) { return null; } diff --git a/packages/grid/_modules_/grid/components/menu/columnMenu/GridFilterMenuItem.tsx b/packages/grid/_modules_/grid/components/menu/columnMenu/GridFilterMenuItem.tsx index fd231ba0d2df2..c92cc90bb86b1 100644 --- a/packages/grid/_modules_/grid/components/menu/columnMenu/GridFilterMenuItem.tsx +++ b/packages/grid/_modules_/grid/components/menu/columnMenu/GridFilterMenuItem.tsx @@ -1,14 +1,13 @@ import * as React from 'react'; import MenuItem from '@material-ui/core/MenuItem'; -import { useGridSelector } from '../../../hooks/features/core/useGridSelector'; -import { optionsSelector } from '../../../hooks/utils/optionsSelector'; import { useGridApiContext } from '../../../hooks/root/useGridApiContext'; import { GridFilterItemProps } from './GridFilterItemProps'; +import {GridRootPropsContext} from "../../../context/GridRootPropsContext"; export const GridFilterMenuItem = (props: GridFilterItemProps) => { const { column, onClick } = props; const apiRef = useGridApiContext(); - const options = useGridSelector(apiRef, optionsSelector); + const rootProps = React.useContext(GridRootPropsContext)!; const showFilter = React.useCallback( (event: React.MouseEvent) => { @@ -18,7 +17,7 @@ export const GridFilterMenuItem = (props: GridFilterItemProps) => { [apiRef, column?.field, onClick], ); - if (options.disableColumnFilter || !column?.filterable) { + if (rootProps.disableColumnFilter || !column?.filterable) { return null; } diff --git a/packages/grid/_modules_/grid/components/menu/columnMenu/HideGridColMenuItem.tsx b/packages/grid/_modules_/grid/components/menu/columnMenu/HideGridColMenuItem.tsx index c51cc78c4ee78..db70c3d0a9152 100644 --- a/packages/grid/_modules_/grid/components/menu/columnMenu/HideGridColMenuItem.tsx +++ b/packages/grid/_modules_/grid/components/menu/columnMenu/HideGridColMenuItem.tsx @@ -2,13 +2,12 @@ import * as React from 'react'; import MenuItem from '@material-ui/core/MenuItem'; import { GridFilterItemProps } from './GridFilterItemProps'; import { useGridApiContext } from '../../../hooks/root/useGridApiContext'; -import { useGridSelector } from '../../../hooks/features/core/useGridSelector'; -import { optionsSelector } from '../../../hooks/utils/optionsSelector'; +import {GridRootPropsContext} from "../../../context/GridRootPropsContext"; export const HideGridColMenuItem = (props: GridFilterItemProps) => { const { column, onClick } = props; const apiRef = useGridApiContext(); - const options = useGridSelector(apiRef, optionsSelector); + const rootProps = React.useContext(GridRootPropsContext)!; const timeoutRef = React.useRef(); const toggleColumn = React.useCallback( @@ -25,7 +24,7 @@ export const HideGridColMenuItem = (props: GridFilterItemProps) => { return () => clearTimeout(timeoutRef.current); }, []); - if (options.disableColumnSelector) { + if (rootProps.disableColumnSelector) { return null; } diff --git a/packages/grid/_modules_/grid/components/panel/GridPreferencesPanel.tsx b/packages/grid/_modules_/grid/components/panel/GridPreferencesPanel.tsx index 94db92e72a07f..4d9892dfdab55 100644 --- a/packages/grid/_modules_/grid/components/panel/GridPreferencesPanel.tsx +++ b/packages/grid/_modules_/grid/components/panel/GridPreferencesPanel.tsx @@ -3,8 +3,8 @@ import { allGridColumnsSelector } from '../../hooks/features/columns/gridColumns import { useGridSelector } from '../../hooks/features/core/useGridSelector'; import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector'; import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue'; -import { optionsSelector } from '../../hooks/utils/optionsSelector'; import { useGridApiContext } from '../../hooks/root/useGridApiContext'; +import {GridRootPropsContext} from "../../context/GridRootPropsContext"; export const GridPreferencesPanel = React.forwardRef< HTMLDivElement, @@ -12,7 +12,7 @@ export const GridPreferencesPanel = React.forwardRef< >(function GridPreferencesPanel(props, ref) { const apiRef = useGridApiContext(); const columns = useGridSelector(apiRef, allGridColumnsSelector); - const options = useGridSelector(apiRef, optionsSelector); + const rootProps = React.useContext(GridRootPropsContext)!; const preferencePanelState = useGridSelector(apiRef, gridPreferencePanelStateSelector); const isColumnsTabOpen = @@ -29,10 +29,10 @@ export const GridPreferencesPanel = React.forwardRef< {...apiRef?.current.componentsProps?.panel} {...props} > - {!options.disableColumnSelector && isColumnsTabOpen && ( + {!rootProps.disableColumnSelector && isColumnsTabOpen && ( )} - {!options.disableColumnFilter && isFiltersTabOpen && ( + {!rootProps.disableColumnFilter && isFiltersTabOpen && ( )} diff --git a/packages/grid/_modules_/grid/components/toolbar/GridToolbar.tsx b/packages/grid/_modules_/grid/components/toolbar/GridToolbar.tsx index 7857170117e62..3934fb152bf7c 100644 --- a/packages/grid/_modules_/grid/components/toolbar/GridToolbar.tsx +++ b/packages/grid/_modules_/grid/components/toolbar/GridToolbar.tsx @@ -1,7 +1,4 @@ import * as React from 'react'; -import { useGridSelector } from '../../hooks/features/core/useGridSelector'; -import { optionsSelector } from '../../hooks/utils/optionsSelector'; -import { useGridApiContext } from '../../hooks/root/useGridApiContext'; import { GridToolbarContainer, GridToolbarContainerProps, @@ -10,16 +7,16 @@ import { GridToolbarColumnsButton } from './GridToolbarColumnsButton'; import { GridToolbarDensitySelector } from './GridToolbarDensitySelector'; import { GridToolbarFilterButton } from './GridToolbarFilterButton'; import { GridToolbarExport } from './GridToolbarExport'; +import {GridRootPropsContext} from "../../context/GridRootPropsContext"; export const GridToolbar = React.forwardRef( function GridToolbar(props, ref) { - const apiRef = useGridApiContext(); - const options = useGridSelector(apiRef, optionsSelector); + const rootProps = React.useContext(GridRootPropsContext)!; if ( - options.disableColumnFilter && - options.disableColumnSelector && - options.disableDensitySelector + rootProps.disableColumnFilter && + rootProps.disableColumnSelector && + rootProps.disableDensitySelector ) { return null; } diff --git a/packages/grid/_modules_/grid/components/toolbar/GridToolbarColumnsButton.tsx b/packages/grid/_modules_/grid/components/toolbar/GridToolbarColumnsButton.tsx index 8f5c5d2e5d6f0..c842a31df8271 100644 --- a/packages/grid/_modules_/grid/components/toolbar/GridToolbarColumnsButton.tsx +++ b/packages/grid/_modules_/grid/components/toolbar/GridToolbarColumnsButton.tsx @@ -1,16 +1,16 @@ import * as React from 'react'; import Button, { ButtonProps } from '@material-ui/core/Button'; import { useGridSelector } from '../../hooks/features/core/useGridSelector'; -import { optionsSelector } from '../../hooks/utils/optionsSelector'; import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector'; import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue'; import { useGridApiContext } from '../../hooks/root/useGridApiContext'; +import {GridRootPropsContext} from "../../context/GridRootPropsContext"; export const GridToolbarColumnsButton = React.forwardRef( function GridToolbarColumnsButton(props, ref) { const { onClick, ...other } = props; const apiRef = useGridApiContext(); - const options = useGridSelector(apiRef, optionsSelector); + const rootProps = React.useContext(GridRootPropsContext)!; const ColumnSelectorIcon = apiRef!.current.components.ColumnSelectorIcon!; const { open, openedPanelValue } = useGridSelector(apiRef, gridPreferencePanelStateSelector); @@ -25,7 +25,7 @@ export const GridToolbarColumnsButton = React.forwardRef( function GridToolbarDensitySelector(props, ref) { const { onClick, ...other } = props; const apiRef = useGridApiContext(); - const options = useGridSelector(apiRef, optionsSelector); + const rootProps = React.useContext(GridRootPropsContext)!; const densityValue = useGridSelector(apiRef, gridDensityValueSelector); const densityButtonId = useId(); const densityMenuId = useId(); @@ -77,7 +77,7 @@ export const GridToolbarDensitySelector = React.forwardRef; } -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, -}; From 3cde8c1ca9bd4b347e20f49c5ff77d8c8680502f Mon Sep 17 00:00:00 2001 From: delangle Date: Mon, 26 Jul 2021 13:57:33 +0200 Subject: [PATCH 2/6] Prettier --- .../_modules_/grid/components/GridFooter.tsx | 6 +++--- .../grid/components/GridPagination.tsx | 10 ++++----- .../grid/components/GridViewport.tsx | 4 ++-- .../columnHeaders/GridColumnUnsortedIcon.tsx | 2 +- .../GridCellCheckboxRenderer.tsx | 4 ++-- .../menu/columnMenu/GridColumnsMenuItem.tsx | 2 +- .../menu/columnMenu/GridFilterMenuItem.tsx | 2 +- .../menu/columnMenu/HideGridColMenuItem.tsx | 2 +- .../components/panel/GridPreferencesPanel.tsx | 2 +- .../grid/components/toolbar/GridToolbar.tsx | 10 ++++----- .../toolbar/GridToolbarColumnsButton.tsx | 4 ++-- .../toolbar/GridToolbarDensitySelector.tsx | 4 ++-- .../toolbar/GridToolbarFilterButton.tsx | 2 +- .../grid/hooks/features/useGridComponents.tsx | 21 +++++++++++-------- .../grid/models/gridSlotsComponent.ts | 1 - 15 files changed, 39 insertions(+), 37 deletions(-) diff --git a/packages/grid/_modules_/grid/components/GridFooter.tsx b/packages/grid/_modules_/grid/components/GridFooter.tsx index 018ca012f9125..514f48ebdc728 100644 --- a/packages/grid/_modules_/grid/components/GridFooter.tsx +++ b/packages/grid/_modules_/grid/components/GridFooter.tsx @@ -8,13 +8,13 @@ import { useGridApiContext } from '../hooks/root/useGridApiContext'; import { GridRowCount } from './GridRowCount'; import { GridSelectedRowCount } from './GridSelectedRowCount'; import { GridFooterContainer, GridFooterContainerProps } from './containers/GridFooterContainer'; -import {GridRootPropsContext} from "../context/GridRootPropsContext"; +import { GridRootPropsContext } from '../context/GridRootPropsContext'; export const GridFooter = React.forwardRef( function GridFooter(props, ref) { const apiRef = useGridApiContext(); - const rootProps = React.useContext(GridRootPropsContext)!; - const totalRowCount = useGridSelector(apiRef, gridRowCountSelector); + const rootProps = React.useContext(GridRootPropsContext)!; + const totalRowCount = useGridSelector(apiRef, gridRowCountSelector); const selectedRowCount = useGridSelector(apiRef, selectedGridRowsCountSelector); const pagination = useGridSelector(apiRef, gridPaginationSelector); const visibleRowCount = useGridSelector(apiRef, visibleGridRowCountSelector); diff --git a/packages/grid/_modules_/grid/components/GridPagination.tsx b/packages/grid/_modules_/grid/components/GridPagination.tsx index 1ef98c7629c44..005de341cd28b 100644 --- a/packages/grid/_modules_/grid/components/GridPagination.tsx +++ b/packages/grid/_modules_/grid/components/GridPagination.tsx @@ -6,7 +6,7 @@ import { useGridSelector } from '../hooks/features/core/useGridSelector'; import { gridPaginationSelector } from '../hooks/features/pagination/gridPaginationSelector'; import { useGridApiContext } from '../hooks/root/useGridApiContext'; import { getMuiVersion, createTheme } from '../utils'; -import {GridRootPropsContext} from "../context/GridRootPropsContext"; +import { GridRootPropsContext } from '../context/GridRootPropsContext'; const defaultTheme = createTheme(); // Used to hide the Rows per page selector on small devices @@ -43,8 +43,8 @@ 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 rootProps = React.useContext(GridRootPropsContext)!; + const paginationState = useGridSelector(apiRef, gridPaginationSelector); const lastPage = React.useMemo( () => Math.floor(paginationState.rowCount / (paginationState.pageSize || 1)), [paginationState.rowCount, paginationState.pageSize], @@ -92,8 +92,8 @@ export const GridPagination = React.forwardRef< count={paginationState.rowCount} page={paginationState.page <= lastPage ? paginationState.page : lastPage} rowsPerPageOptions={ - rootProps.rowsPerPageOptions && - rootProps.rowsPerPageOptions.indexOf(paginationState.pageSize) > -1 + rootProps.rowsPerPageOptions && + rootProps.rowsPerPageOptions.indexOf(paginationState.pageSize) > -1 ? rootProps.rowsPerPageOptions : [] } diff --git a/packages/grid/_modules_/grid/components/GridViewport.tsx b/packages/grid/_modules_/grid/components/GridViewport.tsx index abe3f3cb506c5..c2383cd8e7606 100644 --- a/packages/grid/_modules_/grid/components/GridViewport.tsx +++ b/packages/grid/_modules_/grid/components/GridViewport.tsx @@ -23,14 +23,14 @@ import { gridViewportSizesSelector, gridScrollBarSizeSelector, } from '../hooks/root/gridContainerSizesSelector'; -import {GridRootPropsContext} from "../context/GridRootPropsContext"; +import { GridRootPropsContext } from '../context/GridRootPropsContext'; type ViewportType = React.ForwardRefExoticComponent>; export const GridViewport: ViewportType = React.forwardRef( function GridViewport(props, renderingZoneRef) { const apiRef = useGridApiContext(); - const rootProps = React.useContext(GridRootPropsContext)!; + const rootProps = React.useContext(GridRootPropsContext)!; const options = useGridSelector(apiRef, optionsSelector); const containerSizes = useGridSelector(apiRef, gridContainerSizesSelector); const viewportSizes = useGridSelector(apiRef, gridViewportSizesSelector); diff --git a/packages/grid/_modules_/grid/components/columnHeaders/GridColumnUnsortedIcon.tsx b/packages/grid/_modules_/grid/components/columnHeaders/GridColumnUnsortedIcon.tsx index 540913366d440..f3bf73137155b 100644 --- a/packages/grid/_modules_/grid/components/columnHeaders/GridColumnUnsortedIcon.tsx +++ b/packages/grid/_modules_/grid/components/columnHeaders/GridColumnUnsortedIcon.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { useGridApiContext } from '../../hooks/root/useGridApiContext'; -import {GridRootPropsContext} from "../../context/GridRootPropsContext"; +import { GridRootPropsContext } from '../../context/GridRootPropsContext'; export const GridColumnUnsortedIcon = React.memo(function GridColumnHeaderSortIcon(props) { const apiRef = useGridApiContext(); diff --git a/packages/grid/_modules_/grid/components/columnSelection/GridCellCheckboxRenderer.tsx b/packages/grid/_modules_/grid/components/columnSelection/GridCellCheckboxRenderer.tsx index c0b1a5c5b571d..521252537b32e 100644 --- a/packages/grid/_modules_/grid/components/columnSelection/GridCellCheckboxRenderer.tsx +++ b/packages/grid/_modules_/grid/components/columnSelection/GridCellCheckboxRenderer.tsx @@ -4,13 +4,13 @@ import { GRID_CELL_NAVIGATION_KEY_DOWN } from '../../constants/eventsConstants'; import { GridCellParams } from '../../models/params/gridCellParams'; import { isNavigationKey, isSpaceKey } from '../../utils/keyboardUtils'; import { useGridApiContext } from '../../hooks/root/useGridApiContext'; -import {GridRootPropsContext} from "../../context/GridRootPropsContext"; +import { GridRootPropsContext } from '../../context/GridRootPropsContext'; export const GridCellCheckboxForwardRef = React.forwardRef( function GridCellCheckboxRenderer(props, ref) { const { field, id, value, tabIndex, hasFocus } = props; const apiRef = useGridApiContext(); - const rootProps = React.useContext(GridRootPropsContext)!; + const rootProps = React.useContext(GridRootPropsContext)!; const checkboxElement = React.useRef(null); const handleRef = useForkRef(checkboxElement, ref); diff --git a/packages/grid/_modules_/grid/components/menu/columnMenu/GridColumnsMenuItem.tsx b/packages/grid/_modules_/grid/components/menu/columnMenu/GridColumnsMenuItem.tsx index 7af73045e90b2..3b12ca5474549 100644 --- a/packages/grid/_modules_/grid/components/menu/columnMenu/GridColumnsMenuItem.tsx +++ b/packages/grid/_modules_/grid/components/menu/columnMenu/GridColumnsMenuItem.tsx @@ -3,7 +3,7 @@ import MenuItem from '@material-ui/core/MenuItem'; import { GridPreferencePanelsValue } from '../../../hooks/features/preferencesPanel/gridPreferencePanelsValue'; import { useGridApiContext } from '../../../hooks/root/useGridApiContext'; import { GridFilterItemProps } from './GridFilterItemProps'; -import {GridRootPropsContext} from "../../../context/GridRootPropsContext"; +import { GridRootPropsContext } from '../../../context/GridRootPropsContext'; export const GridColumnsMenuItem = (props: GridFilterItemProps) => { const { onClick } = props; diff --git a/packages/grid/_modules_/grid/components/menu/columnMenu/GridFilterMenuItem.tsx b/packages/grid/_modules_/grid/components/menu/columnMenu/GridFilterMenuItem.tsx index c92cc90bb86b1..23bb314fa704a 100644 --- a/packages/grid/_modules_/grid/components/menu/columnMenu/GridFilterMenuItem.tsx +++ b/packages/grid/_modules_/grid/components/menu/columnMenu/GridFilterMenuItem.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import MenuItem from '@material-ui/core/MenuItem'; import { useGridApiContext } from '../../../hooks/root/useGridApiContext'; import { GridFilterItemProps } from './GridFilterItemProps'; -import {GridRootPropsContext} from "../../../context/GridRootPropsContext"; +import { GridRootPropsContext } from '../../../context/GridRootPropsContext'; export const GridFilterMenuItem = (props: GridFilterItemProps) => { const { column, onClick } = props; diff --git a/packages/grid/_modules_/grid/components/menu/columnMenu/HideGridColMenuItem.tsx b/packages/grid/_modules_/grid/components/menu/columnMenu/HideGridColMenuItem.tsx index db70c3d0a9152..6430cfd9f7b82 100644 --- a/packages/grid/_modules_/grid/components/menu/columnMenu/HideGridColMenuItem.tsx +++ b/packages/grid/_modules_/grid/components/menu/columnMenu/HideGridColMenuItem.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import MenuItem from '@material-ui/core/MenuItem'; import { GridFilterItemProps } from './GridFilterItemProps'; import { useGridApiContext } from '../../../hooks/root/useGridApiContext'; -import {GridRootPropsContext} from "../../../context/GridRootPropsContext"; +import { GridRootPropsContext } from '../../../context/GridRootPropsContext'; export const HideGridColMenuItem = (props: GridFilterItemProps) => { const { column, onClick } = props; diff --git a/packages/grid/_modules_/grid/components/panel/GridPreferencesPanel.tsx b/packages/grid/_modules_/grid/components/panel/GridPreferencesPanel.tsx index 4d9892dfdab55..f286645b2a7f0 100644 --- a/packages/grid/_modules_/grid/components/panel/GridPreferencesPanel.tsx +++ b/packages/grid/_modules_/grid/components/panel/GridPreferencesPanel.tsx @@ -4,7 +4,7 @@ import { useGridSelector } from '../../hooks/features/core/useGridSelector'; import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector'; import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue'; import { useGridApiContext } from '../../hooks/root/useGridApiContext'; -import {GridRootPropsContext} from "../../context/GridRootPropsContext"; +import { GridRootPropsContext } from '../../context/GridRootPropsContext'; export const GridPreferencesPanel = React.forwardRef< HTMLDivElement, diff --git a/packages/grid/_modules_/grid/components/toolbar/GridToolbar.tsx b/packages/grid/_modules_/grid/components/toolbar/GridToolbar.tsx index 3934fb152bf7c..ecdaee933aaaf 100644 --- a/packages/grid/_modules_/grid/components/toolbar/GridToolbar.tsx +++ b/packages/grid/_modules_/grid/components/toolbar/GridToolbar.tsx @@ -7,16 +7,16 @@ import { GridToolbarColumnsButton } from './GridToolbarColumnsButton'; import { GridToolbarDensitySelector } from './GridToolbarDensitySelector'; import { GridToolbarFilterButton } from './GridToolbarFilterButton'; import { GridToolbarExport } from './GridToolbarExport'; -import {GridRootPropsContext} from "../../context/GridRootPropsContext"; +import { GridRootPropsContext } from '../../context/GridRootPropsContext'; export const GridToolbar = React.forwardRef( function GridToolbar(props, ref) { - const rootProps = React.useContext(GridRootPropsContext)!; + const rootProps = React.useContext(GridRootPropsContext)!; if ( - rootProps.disableColumnFilter && - rootProps.disableColumnSelector && - rootProps.disableDensitySelector + rootProps.disableColumnFilter && + rootProps.disableColumnSelector && + rootProps.disableDensitySelector ) { return null; } diff --git a/packages/grid/_modules_/grid/components/toolbar/GridToolbarColumnsButton.tsx b/packages/grid/_modules_/grid/components/toolbar/GridToolbarColumnsButton.tsx index c842a31df8271..544d52c75d947 100644 --- a/packages/grid/_modules_/grid/components/toolbar/GridToolbarColumnsButton.tsx +++ b/packages/grid/_modules_/grid/components/toolbar/GridToolbarColumnsButton.tsx @@ -4,13 +4,13 @@ import { useGridSelector } from '../../hooks/features/core/useGridSelector'; import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector'; import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue'; import { useGridApiContext } from '../../hooks/root/useGridApiContext'; -import {GridRootPropsContext} from "../../context/GridRootPropsContext"; +import { GridRootPropsContext } from '../../context/GridRootPropsContext'; export const GridToolbarColumnsButton = React.forwardRef( function GridToolbarColumnsButton(props, ref) { const { onClick, ...other } = props; const apiRef = useGridApiContext(); - const rootProps = React.useContext(GridRootPropsContext)!; + const rootProps = React.useContext(GridRootPropsContext)!; const ColumnSelectorIcon = apiRef!.current.components.ColumnSelectorIcon!; const { open, openedPanelValue } = useGridSelector(apiRef, gridPreferencePanelStateSelector); diff --git a/packages/grid/_modules_/grid/components/toolbar/GridToolbarDensitySelector.tsx b/packages/grid/_modules_/grid/components/toolbar/GridToolbarDensitySelector.tsx index 8cf1619ad9069..90414a055c655 100644 --- a/packages/grid/_modules_/grid/components/toolbar/GridToolbarDensitySelector.tsx +++ b/packages/grid/_modules_/grid/components/toolbar/GridToolbarDensitySelector.tsx @@ -12,13 +12,13 @@ import { useGridApiContext } from '../../hooks/root/useGridApiContext'; import { useGridSelector } from '../../hooks/features/core/useGridSelector'; import { GridDensityOption } from '../../models/api/gridDensityApi'; import { GridMenu } from '../menu/GridMenu'; -import {GridRootPropsContext} from "../../context/GridRootPropsContext"; +import { GridRootPropsContext } from '../../context/GridRootPropsContext'; export const GridToolbarDensitySelector = React.forwardRef( function GridToolbarDensitySelector(props, ref) { const { onClick, ...other } = props; const apiRef = useGridApiContext(); - const rootProps = React.useContext(GridRootPropsContext)!; + const rootProps = React.useContext(GridRootPropsContext)!; const densityValue = useGridSelector(apiRef, gridDensityValueSelector); const densityButtonId = useId(); const densityMenuId = useId(); diff --git a/packages/grid/_modules_/grid/components/toolbar/GridToolbarFilterButton.tsx b/packages/grid/_modules_/grid/components/toolbar/GridToolbarFilterButton.tsx index 6b752966dc72f..b46211d765990 100644 --- a/packages/grid/_modules_/grid/components/toolbar/GridToolbarFilterButton.tsx +++ b/packages/grid/_modules_/grid/components/toolbar/GridToolbarFilterButton.tsx @@ -17,7 +17,7 @@ import { GridTranslationKeys } from '../../models/api/gridLocaleTextApi'; import { GridFilterItem } from '../../models/gridFilterItem'; import { createTheme } from '../../utils/utils'; import { useGridApiContext } from '../../hooks/root/useGridApiContext'; -import {GridRootPropsContext} from "../../context/GridRootPropsContext"; +import { GridRootPropsContext } from '../../context/GridRootPropsContext'; const defaultTheme = createTheme(); const useStyles = makeStyles( diff --git a/packages/grid/_modules_/grid/hooks/features/useGridComponents.tsx b/packages/grid/_modules_/grid/hooks/features/useGridComponents.tsx index 244e5a5b9ef4d..0e6e446a5c898 100644 --- a/packages/grid/_modules_/grid/hooks/features/useGridComponents.tsx +++ b/packages/grid/_modules_/grid/hooks/features/useGridComponents.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import MUICheckbox from "@material-ui/core/Checkbox"; +import MUICheckbox from '@material-ui/core/Checkbox'; import { GridApiRef } from '../../models/api/gridApiRef'; import { GridApiRefComponentsProperty } from '../../models/api/gridComponentsApi'; import { GridSlotsComponent } from '../../models/gridSlotsComponent'; import { GridSlotsComponentsProps } from '../../models/gridSlotsComponentsProps'; -import {GridIconSlotsComponent} from "../../models"; +import { GridIconSlotsComponent } from '../../models'; import { GridArrowDownwardIcon, GridArrowUpwardIcon, @@ -17,18 +17,22 @@ import { GridFilterListIcon, GridFilterPanel, GridFooter, - GridHeader, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, + 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"; + 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, @@ -64,7 +68,6 @@ const DEFAULT_GRID_SLOTS_COMPONENTS: GridApiRefComponentsProperty = { 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 index 8671c682feef3..b409c991c8e6f 100644 --- a/packages/grid/_modules_/grid/models/gridSlotsComponent.ts +++ b/packages/grid/_modules_/grid/models/gridSlotsComponent.ts @@ -64,4 +64,3 @@ export interface GridSlotsComponent extends GridIconSlotsComponent { */ Panel?: React.JSXElementConstructor; } - From 8f1c257f5893b22fdd244c3b845ff10081e104bd Mon Sep 17 00:00:00 2001 From: delangle Date: Wed, 28 Jul 2021 13:09:23 +0200 Subject: [PATCH 3/6] New hook useGridRootProps --- packages/grid/_modules_/grid/GridBody.tsx | 4 ++-- packages/grid/_modules_/grid/GridErrorHandler.tsx | 6 +++--- .../grid/_modules_/grid/GridFooterPlaceholder.tsx | 6 +++--- .../grid/_modules_/grid/GridHeaderPlaceholder.tsx | 6 +++--- packages/grid/_modules_/grid/GridOverlays.tsx | 4 ++-- .../grid/_modules_/grid/components/GridFooter.tsx | 4 ++-- .../_modules_/grid/components/GridPagination.tsx | 4 ++-- .../_modules_/grid/components/GridViewport.tsx | 4 ++-- .../columnHeaders/GridColumnUnsortedIcon.tsx | 4 ++-- .../columnSelection/GridCellCheckboxRenderer.tsx | 4 ++-- .../grid/components/containers/GridRoot.tsx | 4 ++-- .../menu/columnMenu/GridColumnsMenuItem.tsx | 4 ++-- .../menu/columnMenu/GridFilterMenuItem.tsx | 4 ++-- .../menu/columnMenu/HideGridColMenuItem.tsx | 4 ++-- .../components/panel/GridPreferencesPanel.tsx | 4 ++-- .../grid/components/toolbar/GridToolbar.tsx | 4 ++-- .../toolbar/GridToolbarColumnsButton.tsx | 4 ++-- .../toolbar/GridToolbarDensitySelector.tsx | 4 ++-- .../toolbar/GridToolbarFilterButton.tsx | 4 ++-- .../grid/hooks/utils/useGridRootProps.ts | 15 +++++++++++++++ 20 files changed, 56 insertions(+), 41 deletions(-) create mode 100644 packages/grid/_modules_/grid/hooks/utils/useGridRootProps.ts diff --git a/packages/grid/_modules_/grid/GridBody.tsx b/packages/grid/_modules_/grid/GridBody.tsx index 0853b0327d6b3..25d7611f59f2c 100644 --- a/packages/grid/_modules_/grid/GridBody.tsx +++ b/packages/grid/_modules_/grid/GridBody.tsx @@ -8,13 +8,13 @@ import { GridAutoSizer } from './components/GridAutoSizer'; import { GridViewport } from './components/GridViewport'; import { Watermark } from './components/Watermark'; import { GRID_RESIZE } from './constants/eventsConstants'; -import { GridRootPropsContext } from './context/GridRootPropsContext'; import { GridOverlays } from './GridOverlays'; import { ElementSize } from './models/elementSize'; +import { useGridRootProps } from './hooks/utils/useGridRootProps'; export function GridBody() { const apiRef = useGridApiContext(); - const rootProps = React.useContext(GridRootPropsContext)!; + const rootProps = useGridRootProps(); const columnsHeaderRef = React.useRef(null); const columnsContainerRef = React.useRef(null); diff --git a/packages/grid/_modules_/grid/GridErrorHandler.tsx b/packages/grid/_modules_/grid/GridErrorHandler.tsx index e148bbc4f968b..de323d17a0b84 100644 --- a/packages/grid/_modules_/grid/GridErrorHandler.tsx +++ b/packages/grid/_modules_/grid/GridErrorHandler.tsx @@ -2,15 +2,15 @@ import * as React from 'react'; import { GridMainContainer } from './components/containers/GridMainContainer'; import { ErrorBoundary } from './components/ErrorBoundary'; import { useGridApiContext } from './hooks/root/useGridApiContext'; -import { GridRootPropsContext } from './context/GridRootPropsContext'; import { useGridState } from './hooks/features/core/useGridState'; import { useLogger } from './hooks/utils/useLogger'; +import { useGridRootProps } from './hooks/utils/useGridRootProps'; export function GridErrorHandler(props) { const { children } = props; const logger = useLogger('GridErrorHandler'); const apiRef = useGridApiContext(); - const propsContext = React.useContext(GridRootPropsContext)!; + const rootProps = useGridRootProps(); const [gridState] = useGridState(apiRef); return ( @@ -23,7 +23,7 @@ export function GridErrorHandler(props) { )} diff --git a/packages/grid/_modules_/grid/GridFooterPlaceholder.tsx b/packages/grid/_modules_/grid/GridFooterPlaceholder.tsx index 59d5355a00910..6277b1ea7268e 100644 --- a/packages/grid/_modules_/grid/GridFooterPlaceholder.tsx +++ b/packages/grid/_modules_/grid/GridFooterPlaceholder.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { useGridApiContext } from './hooks/root/useGridApiContext'; -import { GridRootPropsContext } from './context/GridRootPropsContext'; +import { useGridRootProps } from './hooks/utils/useGridRootProps'; export function GridFooterPlaceholder() { const apiRef = useGridApiContext(); - const props = React.useContext(GridRootPropsContext)!; + const rootProps = useGridRootProps(); const footerRef = React.useRef(null); apiRef.current.footerRef = footerRef; @@ -14,7 +14,7 @@ export function GridFooterPlaceholder() { return (
- +
); } diff --git a/packages/grid/_modules_/grid/GridHeaderPlaceholder.tsx b/packages/grid/_modules_/grid/GridHeaderPlaceholder.tsx index d1dacd5aa9655..108f550f4d134 100644 --- a/packages/grid/_modules_/grid/GridHeaderPlaceholder.tsx +++ b/packages/grid/_modules_/grid/GridHeaderPlaceholder.tsx @@ -1,16 +1,16 @@ import * as React from 'react'; import { useGridApiContext } from './hooks/root/useGridApiContext'; -import { GridRootPropsContext } from './context/GridRootPropsContext'; +import { useGridRootProps } from './hooks/utils/useGridRootProps'; export function GridHeaderPlaceholder() { const apiRef = useGridApiContext(); - const props = React.useContext(GridRootPropsContext)!; + const rootProps = useGridRootProps(); const headerRef = React.useRef(null); apiRef.current.headerRef = headerRef; return (
- +
); } diff --git a/packages/grid/_modules_/grid/GridOverlays.tsx b/packages/grid/_modules_/grid/GridOverlays.tsx index 49cd5cf5c0fb3..123f3399fb1ba 100644 --- a/packages/grid/_modules_/grid/GridOverlays.tsx +++ b/packages/grid/_modules_/grid/GridOverlays.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; import { useGridApiContext } from './hooks/root/useGridApiContext'; -import { GridRootPropsContext } from './context/GridRootPropsContext'; import { useGridSelector } from './hooks/features/core/useGridSelector'; import { visibleGridRowCountSelector } from './hooks/features/filter/gridFilterSelector'; import { gridRowCountSelector } from './hooks/features/rows/gridRowsSelector'; +import { useGridRootProps } from './hooks/utils/useGridRootProps'; export function GridOverlays() { const apiRef = useGridApiContext(); - const rootProps = React.useContext(GridRootPropsContext)!; + const rootProps = useGridRootProps(); const totalRowCount = useGridSelector(apiRef, gridRowCountSelector); const visibleRowCount = useGridSelector(apiRef, visibleGridRowCountSelector); diff --git a/packages/grid/_modules_/grid/components/GridFooter.tsx b/packages/grid/_modules_/grid/components/GridFooter.tsx index 514f48ebdc728..c5002299df193 100644 --- a/packages/grid/_modules_/grid/components/GridFooter.tsx +++ b/packages/grid/_modules_/grid/components/GridFooter.tsx @@ -8,12 +8,12 @@ import { useGridApiContext } from '../hooks/root/useGridApiContext'; import { GridRowCount } from './GridRowCount'; import { GridSelectedRowCount } from './GridSelectedRowCount'; import { GridFooterContainer, GridFooterContainerProps } from './containers/GridFooterContainer'; -import { GridRootPropsContext } from '../context/GridRootPropsContext'; +import { useGridRootProps } from '../hooks/utils/useGridRootProps'; export const GridFooter = React.forwardRef( function GridFooter(props, ref) { const apiRef = useGridApiContext(); - const rootProps = React.useContext(GridRootPropsContext)!; + const rootProps = useGridRootProps(); const totalRowCount = useGridSelector(apiRef, gridRowCountSelector); const selectedRowCount = useGridSelector(apiRef, selectedGridRowsCountSelector); const pagination = useGridSelector(apiRef, gridPaginationSelector); diff --git a/packages/grid/_modules_/grid/components/GridPagination.tsx b/packages/grid/_modules_/grid/components/GridPagination.tsx index 005de341cd28b..b67bff6324d0b 100644 --- a/packages/grid/_modules_/grid/components/GridPagination.tsx +++ b/packages/grid/_modules_/grid/components/GridPagination.tsx @@ -6,7 +6,7 @@ import { useGridSelector } from '../hooks/features/core/useGridSelector'; import { gridPaginationSelector } from '../hooks/features/pagination/gridPaginationSelector'; import { useGridApiContext } from '../hooks/root/useGridApiContext'; import { getMuiVersion, createTheme } from '../utils'; -import { GridRootPropsContext } from '../context/GridRootPropsContext'; +import { useGridRootProps } from '../hooks/utils/useGridRootProps'; const defaultTheme = createTheme(); // Used to hide the Rows per page selector on small devices @@ -43,7 +43,7 @@ export const GridPagination = React.forwardRef< >(function GridPagination(props, ref) { const classes = useStyles(); const apiRef = useGridApiContext(); - const rootProps = React.useContext(GridRootPropsContext)!; + const rootProps = useGridRootProps(); const paginationState = useGridSelector(apiRef, gridPaginationSelector); const lastPage = React.useMemo( () => Math.floor(paginationState.rowCount / (paginationState.pageSize || 1)), diff --git a/packages/grid/_modules_/grid/components/GridViewport.tsx b/packages/grid/_modules_/grid/components/GridViewport.tsx index c2383cd8e7606..389ccfb344cbb 100644 --- a/packages/grid/_modules_/grid/components/GridViewport.tsx +++ b/packages/grid/_modules_/grid/components/GridViewport.tsx @@ -23,14 +23,14 @@ import { gridViewportSizesSelector, gridScrollBarSizeSelector, } from '../hooks/root/gridContainerSizesSelector'; -import { GridRootPropsContext } from '../context/GridRootPropsContext'; +import { useGridRootProps } from '../hooks/utils/useGridRootProps'; type ViewportType = React.ForwardRefExoticComponent>; export const GridViewport: ViewportType = React.forwardRef( function GridViewport(props, renderingZoneRef) { const apiRef = useGridApiContext(); - const rootProps = React.useContext(GridRootPropsContext)!; + const rootProps = useGridRootProps(); const options = useGridSelector(apiRef, optionsSelector); const containerSizes = useGridSelector(apiRef, gridContainerSizesSelector); const viewportSizes = useGridSelector(apiRef, gridViewportSizesSelector); diff --git a/packages/grid/_modules_/grid/components/columnHeaders/GridColumnUnsortedIcon.tsx b/packages/grid/_modules_/grid/components/columnHeaders/GridColumnUnsortedIcon.tsx index f3bf73137155b..0325319b16c45 100644 --- a/packages/grid/_modules_/grid/components/columnHeaders/GridColumnUnsortedIcon.tsx +++ b/packages/grid/_modules_/grid/components/columnHeaders/GridColumnUnsortedIcon.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { useGridApiContext } from '../../hooks/root/useGridApiContext'; -import { GridRootPropsContext } from '../../context/GridRootPropsContext'; +import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; export const GridColumnUnsortedIcon = React.memo(function GridColumnHeaderSortIcon(props) { const apiRef = useGridApiContext(); - const rootProps = React.useContext(GridRootPropsContext)!; + const rootProps = useGridRootProps(); const [nextSortDirection] = rootProps.sortingOrder!; const Icon = diff --git a/packages/grid/_modules_/grid/components/columnSelection/GridCellCheckboxRenderer.tsx b/packages/grid/_modules_/grid/components/columnSelection/GridCellCheckboxRenderer.tsx index 521252537b32e..5c8f136117e25 100644 --- a/packages/grid/_modules_/grid/components/columnSelection/GridCellCheckboxRenderer.tsx +++ b/packages/grid/_modules_/grid/components/columnSelection/GridCellCheckboxRenderer.tsx @@ -4,13 +4,13 @@ import { GRID_CELL_NAVIGATION_KEY_DOWN } from '../../constants/eventsConstants'; import { GridCellParams } from '../../models/params/gridCellParams'; import { isNavigationKey, isSpaceKey } from '../../utils/keyboardUtils'; import { useGridApiContext } from '../../hooks/root/useGridApiContext'; -import { GridRootPropsContext } from '../../context/GridRootPropsContext'; +import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; export const GridCellCheckboxForwardRef = React.forwardRef( function GridCellCheckboxRenderer(props, ref) { const { field, id, value, tabIndex, hasFocus } = props; const apiRef = useGridApiContext(); - const rootProps = React.useContext(GridRootPropsContext)!; + const rootProps = useGridRootProps(); const checkboxElement = React.useRef(null); const handleRef = useForkRef(checkboxElement, ref); diff --git a/packages/grid/_modules_/grid/components/containers/GridRoot.tsx b/packages/grid/_modules_/grid/components/containers/GridRoot.tsx index 4741e406ca208..faa81d2ec0cda 100644 --- a/packages/grid/_modules_/grid/components/containers/GridRoot.tsx +++ b/packages/grid/_modules_/grid/components/containers/GridRoot.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import clsx from 'clsx'; import { useForkRef } from '@material-ui/core/utils'; import NoSsr from '@material-ui/core/NoSsr'; -import { GridRootPropsContext } from '../../context/GridRootPropsContext'; import { optionsSelector } from '../../hooks/utils/optionsSelector'; import { GridRootContainerRef } from '../../models/gridRootContainerRef'; import { useStyles } from './GridRootStyles'; @@ -10,6 +9,7 @@ import { visibleGridColumnsLengthSelector } from '../../hooks/features/columns/g import { useGridSelector } from '../../hooks/features/core/useGridSelector'; import { useGridState } from '../../hooks/features/core/useGridState'; import { useGridApiContext } from '../../hooks/root/useGridApiContext'; +import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; export type GridRootProps = React.HTMLAttributes; @@ -19,7 +19,7 @@ export const GridRoot = React.forwardRef(function ) { const classes = useStyles(); const apiRef = useGridApiContext(); - const rootProps = React.useContext(GridRootPropsContext)!; + const rootProps = useGridRootProps(); const { children, className: classNameProp, ...other } = props; const visibleColumnsLength = useGridSelector(apiRef, visibleGridColumnsLengthSelector); const [gridState] = useGridState(apiRef!); diff --git a/packages/grid/_modules_/grid/components/menu/columnMenu/GridColumnsMenuItem.tsx b/packages/grid/_modules_/grid/components/menu/columnMenu/GridColumnsMenuItem.tsx index 3b12ca5474549..f29cc218d8814 100644 --- a/packages/grid/_modules_/grid/components/menu/columnMenu/GridColumnsMenuItem.tsx +++ b/packages/grid/_modules_/grid/components/menu/columnMenu/GridColumnsMenuItem.tsx @@ -3,12 +3,12 @@ import MenuItem from '@material-ui/core/MenuItem'; import { GridPreferencePanelsValue } from '../../../hooks/features/preferencesPanel/gridPreferencePanelsValue'; import { useGridApiContext } from '../../../hooks/root/useGridApiContext'; import { GridFilterItemProps } from './GridFilterItemProps'; -import { GridRootPropsContext } from '../../../context/GridRootPropsContext'; +import { useGridRootProps } from '../../../hooks/utils/useGridRootProps'; export const GridColumnsMenuItem = (props: GridFilterItemProps) => { const { onClick } = props; const apiRef = useGridApiContext(); - const rootProps = React.useContext(GridRootPropsContext)!; + const rootProps = useGridRootProps(); const showColumns = React.useCallback( (event: React.MouseEvent) => { diff --git a/packages/grid/_modules_/grid/components/menu/columnMenu/GridFilterMenuItem.tsx b/packages/grid/_modules_/grid/components/menu/columnMenu/GridFilterMenuItem.tsx index 23bb314fa704a..2a20573391d9b 100644 --- a/packages/grid/_modules_/grid/components/menu/columnMenu/GridFilterMenuItem.tsx +++ b/packages/grid/_modules_/grid/components/menu/columnMenu/GridFilterMenuItem.tsx @@ -2,12 +2,12 @@ import * as React from 'react'; import MenuItem from '@material-ui/core/MenuItem'; import { useGridApiContext } from '../../../hooks/root/useGridApiContext'; import { GridFilterItemProps } from './GridFilterItemProps'; -import { GridRootPropsContext } from '../../../context/GridRootPropsContext'; +import { useGridRootProps } from '../../../hooks/utils/useGridRootProps'; export const GridFilterMenuItem = (props: GridFilterItemProps) => { const { column, onClick } = props; const apiRef = useGridApiContext(); - const rootProps = React.useContext(GridRootPropsContext)!; + const rootProps = useGridRootProps(); const showFilter = React.useCallback( (event: React.MouseEvent) => { diff --git a/packages/grid/_modules_/grid/components/menu/columnMenu/HideGridColMenuItem.tsx b/packages/grid/_modules_/grid/components/menu/columnMenu/HideGridColMenuItem.tsx index 6430cfd9f7b82..eee137b301250 100644 --- a/packages/grid/_modules_/grid/components/menu/columnMenu/HideGridColMenuItem.tsx +++ b/packages/grid/_modules_/grid/components/menu/columnMenu/HideGridColMenuItem.tsx @@ -2,12 +2,12 @@ import * as React from 'react'; import MenuItem from '@material-ui/core/MenuItem'; import { GridFilterItemProps } from './GridFilterItemProps'; import { useGridApiContext } from '../../../hooks/root/useGridApiContext'; -import { GridRootPropsContext } from '../../../context/GridRootPropsContext'; +import { useGridRootProps } from '../../../hooks/utils/useGridRootProps'; export const HideGridColMenuItem = (props: GridFilterItemProps) => { const { column, onClick } = props; const apiRef = useGridApiContext(); - const rootProps = React.useContext(GridRootPropsContext)!; + const rootProps = useGridRootProps(); const timeoutRef = React.useRef(); const toggleColumn = React.useCallback( diff --git a/packages/grid/_modules_/grid/components/panel/GridPreferencesPanel.tsx b/packages/grid/_modules_/grid/components/panel/GridPreferencesPanel.tsx index f286645b2a7f0..51d5f23d26876 100644 --- a/packages/grid/_modules_/grid/components/panel/GridPreferencesPanel.tsx +++ b/packages/grid/_modules_/grid/components/panel/GridPreferencesPanel.tsx @@ -4,7 +4,7 @@ import { useGridSelector } from '../../hooks/features/core/useGridSelector'; import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector'; import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue'; import { useGridApiContext } from '../../hooks/root/useGridApiContext'; -import { GridRootPropsContext } from '../../context/GridRootPropsContext'; +import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; export const GridPreferencesPanel = React.forwardRef< HTMLDivElement, @@ -12,7 +12,7 @@ export const GridPreferencesPanel = React.forwardRef< >(function GridPreferencesPanel(props, ref) { const apiRef = useGridApiContext(); const columns = useGridSelector(apiRef, allGridColumnsSelector); - const rootProps = React.useContext(GridRootPropsContext)!; + const rootProps = useGridRootProps(); const preferencePanelState = useGridSelector(apiRef, gridPreferencePanelStateSelector); const isColumnsTabOpen = diff --git a/packages/grid/_modules_/grid/components/toolbar/GridToolbar.tsx b/packages/grid/_modules_/grid/components/toolbar/GridToolbar.tsx index ecdaee933aaaf..2e90bc2e1acf2 100644 --- a/packages/grid/_modules_/grid/components/toolbar/GridToolbar.tsx +++ b/packages/grid/_modules_/grid/components/toolbar/GridToolbar.tsx @@ -7,11 +7,11 @@ import { GridToolbarColumnsButton } from './GridToolbarColumnsButton'; import { GridToolbarDensitySelector } from './GridToolbarDensitySelector'; import { GridToolbarFilterButton } from './GridToolbarFilterButton'; import { GridToolbarExport } from './GridToolbarExport'; -import { GridRootPropsContext } from '../../context/GridRootPropsContext'; +import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; export const GridToolbar = React.forwardRef( function GridToolbar(props, ref) { - const rootProps = React.useContext(GridRootPropsContext)!; + const rootProps = useGridRootProps(); if ( rootProps.disableColumnFilter && diff --git a/packages/grid/_modules_/grid/components/toolbar/GridToolbarColumnsButton.tsx b/packages/grid/_modules_/grid/components/toolbar/GridToolbarColumnsButton.tsx index 544d52c75d947..f21b56da54aff 100644 --- a/packages/grid/_modules_/grid/components/toolbar/GridToolbarColumnsButton.tsx +++ b/packages/grid/_modules_/grid/components/toolbar/GridToolbarColumnsButton.tsx @@ -4,13 +4,13 @@ import { useGridSelector } from '../../hooks/features/core/useGridSelector'; import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector'; import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue'; import { useGridApiContext } from '../../hooks/root/useGridApiContext'; -import { GridRootPropsContext } from '../../context/GridRootPropsContext'; +import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; export const GridToolbarColumnsButton = React.forwardRef( function GridToolbarColumnsButton(props, ref) { const { onClick, ...other } = props; const apiRef = useGridApiContext(); - const rootProps = React.useContext(GridRootPropsContext)!; + const rootProps = useGridRootProps(); const ColumnSelectorIcon = apiRef!.current.components.ColumnSelectorIcon!; const { open, openedPanelValue } = useGridSelector(apiRef, gridPreferencePanelStateSelector); diff --git a/packages/grid/_modules_/grid/components/toolbar/GridToolbarDensitySelector.tsx b/packages/grid/_modules_/grid/components/toolbar/GridToolbarDensitySelector.tsx index 90414a055c655..06f8189bd897d 100644 --- a/packages/grid/_modules_/grid/components/toolbar/GridToolbarDensitySelector.tsx +++ b/packages/grid/_modules_/grid/components/toolbar/GridToolbarDensitySelector.tsx @@ -12,13 +12,13 @@ import { useGridApiContext } from '../../hooks/root/useGridApiContext'; import { useGridSelector } from '../../hooks/features/core/useGridSelector'; import { GridDensityOption } from '../../models/api/gridDensityApi'; import { GridMenu } from '../menu/GridMenu'; -import { GridRootPropsContext } from '../../context/GridRootPropsContext'; +import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; export const GridToolbarDensitySelector = React.forwardRef( function GridToolbarDensitySelector(props, ref) { const { onClick, ...other } = props; const apiRef = useGridApiContext(); - const rootProps = React.useContext(GridRootPropsContext)!; + const rootProps = useGridRootProps(); const densityValue = useGridSelector(apiRef, gridDensityValueSelector); const densityButtonId = useId(); const densityMenuId = useId(); diff --git a/packages/grid/_modules_/grid/components/toolbar/GridToolbarFilterButton.tsx b/packages/grid/_modules_/grid/components/toolbar/GridToolbarFilterButton.tsx index b46211d765990..997bf733d0645 100644 --- a/packages/grid/_modules_/grid/components/toolbar/GridToolbarFilterButton.tsx +++ b/packages/grid/_modules_/grid/components/toolbar/GridToolbarFilterButton.tsx @@ -17,7 +17,7 @@ import { GridTranslationKeys } from '../../models/api/gridLocaleTextApi'; import { GridFilterItem } from '../../models/gridFilterItem'; import { createTheme } from '../../utils/utils'; import { useGridApiContext } from '../../hooks/root/useGridApiContext'; -import { GridRootPropsContext } from '../../context/GridRootPropsContext'; +import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; const defaultTheme = createTheme(); const useStyles = makeStyles( @@ -48,7 +48,7 @@ export const GridToolbarFilterButton = React.forwardRef< const buttonProps = componentsProps.button || {}; const classes = useStyles(); const apiRef = useGridApiContext(); - const rootProps = React.useContext(GridRootPropsContext)!; + const rootProps = useGridRootProps(); const counter = useGridSelector(apiRef, filterGridItemsCounterSelector); const activeFilters = useGridSelector(apiRef, activeGridFilterItemsSelector); const lookup = useGridSelector(apiRef, gridColumnLookupSelector); diff --git a/packages/grid/_modules_/grid/hooks/utils/useGridRootProps.ts b/packages/grid/_modules_/grid/hooks/utils/useGridRootProps.ts new file mode 100644 index 0000000000000..50ef40d12a7a3 --- /dev/null +++ b/packages/grid/_modules_/grid/hooks/utils/useGridRootProps.ts @@ -0,0 +1,15 @@ +import * as React from 'react'; + +import { GridRootPropsContext } from '../../context/GridRootPropsContext'; + +export const useGridRootProps = () => { + const contextValue = React.useContext(GridRootPropsContext); + + if (!contextValue) { + throw new Error( + 'Material-UI: useGridRootProps should only be used inside the DataGrid / XGrid component', + ); + } + + return contextValue; +}; From 09a08110c95cf9cf12c867156da14cdf4ee0a146 Mon Sep 17 00:00:00 2001 From: delangle Date: Wed, 28 Jul 2021 13:51:54 +0200 Subject: [PATCH 4/6] Fix --- packages/grid/_modules_/grid/GridFooterPlaceholder.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/_modules_/grid/GridFooterPlaceholder.tsx b/packages/grid/_modules_/grid/GridFooterPlaceholder.tsx index 6277b1ea7268e..69553b2683077 100644 --- a/packages/grid/_modules_/grid/GridFooterPlaceholder.tsx +++ b/packages/grid/_modules_/grid/GridFooterPlaceholder.tsx @@ -8,7 +8,7 @@ export function GridFooterPlaceholder() { const footerRef = React.useRef(null); apiRef.current.footerRef = footerRef; - if (props.hideFooter) { + if (rootProps.hideFooter) { return null; } From 58dd56d204a610f13435c2433d17b41a2fe5a817 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Thu, 29 Jul 2021 08:53:57 +0200 Subject: [PATCH 5/6] Update packages/grid/_modules_/grid/hooks/utils/useGridRootProps.ts Co-authored-by: Olivier Tassinari --- packages/grid/_modules_/grid/hooks/utils/useGridRootProps.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/_modules_/grid/hooks/utils/useGridRootProps.ts b/packages/grid/_modules_/grid/hooks/utils/useGridRootProps.ts index 50ef40d12a7a3..6efdeac178c78 100644 --- a/packages/grid/_modules_/grid/hooks/utils/useGridRootProps.ts +++ b/packages/grid/_modules_/grid/hooks/utils/useGridRootProps.ts @@ -7,7 +7,7 @@ export const useGridRootProps = () => { if (!contextValue) { throw new Error( - 'Material-UI: useGridRootProps should only be used inside the DataGrid / XGrid component', + 'Material-UI: useGridRootProps should only be used inside the DataGrid/XGrid component.', ); } From 262361df6cc4ebde71cc292e3b20b7aee3fcd1f7 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Thu, 29 Jul 2021 08:54:04 +0200 Subject: [PATCH 6/6] Update packages/grid/_modules_/grid/hooks/utils/useGridRootProps.ts Co-authored-by: Olivier Tassinari --- packages/grid/_modules_/grid/hooks/utils/useGridRootProps.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/grid/_modules_/grid/hooks/utils/useGridRootProps.ts b/packages/grid/_modules_/grid/hooks/utils/useGridRootProps.ts index 6efdeac178c78..52375ab5daed4 100644 --- a/packages/grid/_modules_/grid/hooks/utils/useGridRootProps.ts +++ b/packages/grid/_modules_/grid/hooks/utils/useGridRootProps.ts @@ -1,5 +1,4 @@ import * as React from 'react'; - import { GridRootPropsContext } from '../../context/GridRootPropsContext'; export const useGridRootProps = () => {