move column hydratation in a dedicated hook

mui · Jul 2, 2022 · 22782a0 · 22782a0
1 parent 0a11d17
commit 22782a0
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 35 deletions.
diff --git 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
@@ -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
@@ -49,13 +49,15 @@ import {
   useGridColumnGrouping,
   columnGroupsStateInitializer,
 } from '../hooks/features/columns/useGridColumnGrouping';
+import { useGridColumnGroupingPreProcessors } from '../hooks/features/columns/useGridColumnGroupingPreProcessors';
 
 export const useDataGridComponent = (props: DataGridProcessedProps) => {
   const apiRef = useGridInitialization<GridApiCommunity>(undefined, props);
 
   /**
    * 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
@@ -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<GridPipeProcessor<'hydrateColumns'>>(
-    (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
@@ -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<GridApiCommunity>,
+  props: DataGridProcessedProps,
+) => {
+  const addHeaderGroups = React.useCallback<GridPipeProcessor<'hydrateColumns'>>(
+    (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
@@ -22,6 +22,7 @@ export {
   useGridColumnGrouping,
   columnGroupsStateInitializer,
 } from '../hooks/features/columns/useGridColumnGrouping';
+export { useGridColumnGroupingPreProcessors } from '../hooks/features/columns/useGridColumnGroupingPreProcessors';
 export type {
   GridColumnRawLookup,
   GridColumnsRawState,