From 22782a007bb1631ab06c9544bb7a33b66fb3199a Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Sat, 2 Jul 2022 12:53:28 +0200 Subject: [PATCH] move column hydratation in a dedicated hook --- .../useDataGridPremiumComponent.tsx | 2 + .../DataGridPro/useDataGridProComponent.tsx | 2 + .../src/DataGrid/useDataGridComponent.tsx | 2 + .../features/columns/useGridColumnGrouping.ts | 35 ---------------- .../useGridColumnGroupingPreProcessors.ts | 41 +++++++++++++++++++ .../grid/x-data-grid/src/internals/index.ts | 1 + 6 files changed, 48 insertions(+), 35 deletions(-) create mode 100644 packages/grid/x-data-grid/src/hooks/features/columns/useGridColumnGroupingPreProcessors.ts diff --git a/packages/grid/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx b/packages/grid/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx index 8b7f72dacac62..690ce1d96afea 100644 --- a/packages/grid/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx +++ b/packages/grid/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx @@ -55,6 +55,7 @@ import { useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, + useGridColumnGroupingPreProcessors, } from '@mui/x-data-grid-pro/internals'; import { GridApiPremium } from '../models/gridApiPremium'; import { DataGridPremiumProcessedProps } from '../models/dataGridPremiumProps'; @@ -75,6 +76,7 @@ export const useDataGridPremiumComponent = ( /** * Register all pre-processors called during state initialization here. */ + useGridColumnGroupingPreProcessors(apiRef, props); useGridSelectionPreProcessors(apiRef, props); useGridRowReorderPreProcessors(apiRef, props); useGridRowGroupingPreProcessors(apiRef, props); diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx b/packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx index a4a31168d98e9..5f6fd5b06ea15 100644 --- a/packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx +++ b/packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx @@ -42,6 +42,7 @@ import { selectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, + useGridColumnGroupingPreProcessors, } from '@mui/x-data-grid/internals'; import { GridApiPro } from '../models/gridApiPro'; import { DataGridProProcessedProps } from '../models/dataGridProProps'; @@ -79,6 +80,7 @@ export const useDataGridProComponent = ( /** * Register all pre-processors called during state initialization here. */ + useGridColumnGroupingPreProcessors(apiRef, props); useGridSelectionPreProcessors(apiRef, props); useGridRowReorderPreProcessors(apiRef, props); useGridTreeDataPreProcessors(apiRef, props); diff --git a/packages/grid/x-data-grid/src/DataGrid/useDataGridComponent.tsx b/packages/grid/x-data-grid/src/DataGrid/useDataGridComponent.tsx index d7d4d88752f64..a7d3060c30b1c 100644 --- a/packages/grid/x-data-grid/src/DataGrid/useDataGridComponent.tsx +++ b/packages/grid/x-data-grid/src/DataGrid/useDataGridComponent.tsx @@ -49,6 +49,7 @@ import { useGridColumnGrouping, columnGroupsStateInitializer, } from '../hooks/features/columns/useGridColumnGrouping'; +import { useGridColumnGroupingPreProcessors } from '../hooks/features/columns/useGridColumnGroupingPreProcessors'; export const useDataGridComponent = (props: DataGridProcessedProps) => { const apiRef = useGridInitialization(undefined, props); @@ -56,6 +57,7 @@ export const useDataGridComponent = (props: DataGridProcessedProps) => { /** * Register all pre-processors called during state initialization here. */ + useGridColumnGroupingPreProcessors(apiRef, props); useGridSelectionPreProcessors(apiRef, props); useGridRowsPreProcessors(apiRef); diff --git a/packages/grid/x-data-grid/src/hooks/features/columns/useGridColumnGrouping.ts b/packages/grid/x-data-grid/src/hooks/features/columns/useGridColumnGrouping.ts index 544d5487d7454..b2ff93d548d85 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columns/useGridColumnGrouping.ts +++ b/packages/grid/x-data-grid/src/hooks/features/columns/useGridColumnGrouping.ts @@ -1,6 +1,5 @@ import * as React from 'react'; import { GridApiCommunity } from '../../../models/api/gridApiCommunity'; -import { GridPipeProcessor, useGridRegisterPipeProcessor } from '../../core/pipeProcessing'; import { DataGridProcessedProps } from '../../../models/props/DataGridProps'; import { GridStateInitializer } from '../../utils/useGridInitializeState'; import { @@ -12,7 +11,6 @@ import { gridColumnGroupsLookupSelector, gridColumnLookupSelector } from './grid import { GridColumnGroupLookup } from './gridColumnsInterfaces'; import { GridColumnGroupingApi } from '../../../models/api/gridColumnGroupingApi'; import { useGridApiMethod } from '../../utils/useGridApiMethod'; -import { isDeepEqual } from '../../../utils/utils'; import { GridStateColDef, GridColDef } from '../../../models/colDef'; export function hasGroupPath( @@ -158,39 +156,6 @@ export const useGridColumnGrouping = ( useGridApiMethod(apiRef, columnGroupingApi, 'GridColumnGroupingApi'); - /** - * Processors - * */ - const addHeaderGroups = React.useCallback>( - (columnsState) => { - if (!props.columnGroupingModel) { - return columnsState; - } - const unwrappedGroupingModel = unwrapGroupingColumnModel(props.columnGroupingModel); - if (Object.keys(unwrappedGroupingModel).length === 0) { - return columnsState; - } - - columnsState.all.forEach((field) => { - const newGroupPath = unwrappedGroupingModel[field] ?? []; - - const lookupElement = columnsState.lookup[field]; - if (hasGroupPath(lookupElement) && isDeepEqual(newGroupPath, lookupElement?.groupPath)) { - // Avoid modifying the pointer to allow shadow comparison in https://github.com/mui/mui-x/blob/f90afbf10a1264ee8b453d7549dd7cdd6110a4ed/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts#L446:L453 - return; - } - columnsState.lookup[field] = { - ...columnsState.lookup[field], - groupPath: unwrappedGroupingModel[field] ?? [], - }; - }); - return columnsState; - }, - [props.columnGroupingModel], - ); - - useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', addHeaderGroups); - /** * EFFECTS */ diff --git a/packages/grid/x-data-grid/src/hooks/features/columns/useGridColumnGroupingPreProcessors.ts b/packages/grid/x-data-grid/src/hooks/features/columns/useGridColumnGroupingPreProcessors.ts new file mode 100644 index 0000000000000..88b808ec59792 --- /dev/null +++ b/packages/grid/x-data-grid/src/hooks/features/columns/useGridColumnGroupingPreProcessors.ts @@ -0,0 +1,41 @@ +import * as React from 'react'; +import { GridPipeProcessor, useGridRegisterPipeProcessor } from '../../core/pipeProcessing'; +import { DataGridProcessedProps } from '../../../models/props/DataGridProps'; +import { GridApiCommunity } from '../../../models/api/gridApiCommunity'; +import { isDeepEqual } from '../../../utils/utils'; +import { unwrapGroupingColumnModel, hasGroupPath } from './useGridColumnGrouping'; + +export const useGridColumnGroupingPreProcessors = ( + apiRef: React.MutableRefObject, + props: DataGridProcessedProps, +) => { + const addHeaderGroups = React.useCallback>( + (columnsState) => { + if (!props.columnGroupingModel) { + return columnsState; + } + const unwrappedGroupingModel = unwrapGroupingColumnModel(props.columnGroupingModel); + if (Object.keys(unwrappedGroupingModel).length === 0) { + return columnsState; + } + + columnsState.all.forEach((field) => { + const newGroupPath = unwrappedGroupingModel[field] ?? []; + + const lookupElement = columnsState.lookup[field]; + if (hasGroupPath(lookupElement) && isDeepEqual(newGroupPath, lookupElement?.groupPath)) { + // Avoid modifying the pointer to allow shadow comparison in https://github.com/mui/mui-x/blob/f90afbf10a1264ee8b453d7549dd7cdd6110a4ed/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts#L446:L453 + return; + } + columnsState.lookup[field] = { + ...columnsState.lookup[field], + groupPath: unwrappedGroupingModel[field] ?? [], + }; + }); + return columnsState; + }, + [props.columnGroupingModel], + ); + + useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', addHeaderGroups); +}; diff --git a/packages/grid/x-data-grid/src/internals/index.ts b/packages/grid/x-data-grid/src/internals/index.ts index 01081139eea30..d4450f9fb209a 100644 --- a/packages/grid/x-data-grid/src/internals/index.ts +++ b/packages/grid/x-data-grid/src/internals/index.ts @@ -22,6 +22,7 @@ export { useGridColumnGrouping, columnGroupsStateInitializer, } from '../hooks/features/columns/useGridColumnGrouping'; +export { useGridColumnGroupingPreProcessors } from '../hooks/features/columns/useGridColumnGroupingPreProcessors'; export type { GridColumnRawLookup, GridColumnsRawState,