Skip to content

Commit 1e8de15

Browse files
m4theushwm4theushw
authored
[core] Initialize remaining states before feature hooks (mui#4036)
1 parent fb4fc20 commit 1e8de15

File tree

15 files changed

+185
-116
lines changed

15 files changed

+185
-116
lines changed

‎packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx‎

Lines changed: 34 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,15 +30,28 @@ import {
3030
useGridDimensions,
3131
useGridStatePersistence,
3232
useGridSelectionPreProcessors,
33+
columnMenuStateInitializer,
34+
densityStateInitializer,
35+
editingStateInitializer,
36+
focusStateInitializer,
37+
preferencePanelStateInitializer,
38+
rowsMetaStateInitializer,
39+
selectionStateInitializer,
3340
} from '@mui/x-data-grid/internals';
3441

3542
import { GridApiPro } from '../models/gridApiPro';
3643
import { DataGridProProcessedProps } from '../models/dataGridProProps';
3744

3845
// Pro-only features
3946
import { useGridInfiniteLoader } from '../hooks/features/infiniteLoader/useGridInfiniteLoader';
40-
import { useGridColumnReorder } from '../hooks/features/columnReorder/useGridColumnReorder';
41-
import { useGridColumnResize } from '../hooks/features/columnResize/useGridColumnResize';
47+
import {
48+
useGridColumnReorder,
49+
columnReorderStateInitializer,
50+
} from '../hooks/features/columnReorder/useGridColumnReorder';
51+
import {
52+
useGridColumnResize,
53+
columnResizeStateInitializer,
54+
} from '../hooks/features/columnResize/useGridColumnResize';
4255
import { useGridTreeData } from '../hooks/features/treeData/useGridTreeData';
4356
import { useGridTreeDataPreProcessors } from '../hooks/features/treeData/useGridTreeDataPreProcessors';
4457
import {
@@ -51,7 +64,10 @@ import {
5164
columnPinningStateInitializer,
5265
} from '../hooks/features/columnPinning/useGridColumnPinning';
5366
import { useGridColumnPinningPreProcessors } from '../hooks/features/columnPinning/useGridColumnPinningPreProcessors';
54-
import { useGridDetailPanel } from '../hooks/features/detailPanel/useGridDetailPanel';
67+
import {
68+
useGridDetailPanel,
69+
detailPanelStateInitializer,
70+
} from '../hooks/features/detailPanel/useGridDetailPanel';
5571
import { useGridDetailPanelCache } from '../hooks/features/detailPanel/useGridDetailPanelCache';
5672
import { useGridDetailPanelPreProcessors } from '../hooks/features/detailPanel/useGridDetailPanelPreProcessors';
5773

@@ -73,15 +89,25 @@ export const useDataGridProComponent = (
7389
/**
7490
* Register all state initializers here.
7591
*/
76-
useGridInitializeState(filterStateInitializer, apiRef, props);
77-
useGridInitializeState(paginationStateInitializer, apiRef, props);
78-
useGridInitializeState(sortingStateInitializer, apiRef, props);
92+
useGridInitializeState(selectionStateInitializer, apiRef, props);
93+
useGridInitializeState(detailPanelStateInitializer, apiRef, props);
7994
useGridInitializeState(columnPinningStateInitializer, apiRef, props);
80-
useGridInitializeState(rowGroupingStateInitializer, apiRef, props);
95+
useGridInitializeState(rowGroupingStateInitializer, apiRef, props); // FIXME Call in the same relative position that useGridRowGrouping is called
8196
useGridInitializeState(columnsStateInitializer, apiRef, props);
8297
useGridRowGrouping(apiRef, props); // FIXME Needs to be called before the rows state initialization because it registers a rows group builder
8398
useGridTreeData(apiRef, props); // FIXME Needs to be called before the rows state initialization because it registers a rows group builder
8499
useGridInitializeState(rowsStateInitializer, apiRef, props);
100+
useGridInitializeState(editingStateInitializer, apiRef, props);
101+
useGridInitializeState(focusStateInitializer, apiRef, props);
102+
useGridInitializeState(sortingStateInitializer, apiRef, props);
103+
useGridInitializeState(preferencePanelStateInitializer, apiRef, props);
104+
useGridInitializeState(filterStateInitializer, apiRef, props);
105+
useGridInitializeState(densityStateInitializer, apiRef, props);
106+
useGridInitializeState(columnReorderStateInitializer, apiRef, props);
107+
useGridInitializeState(columnResizeStateInitializer, apiRef, props);
108+
useGridInitializeState(paginationStateInitializer, apiRef, props);
109+
useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
110+
useGridInitializeState(columnMenuStateInitializer, apiRef, props);
85111

86112
useGridSelection(apiRef, props);
87113
useGridDetailPanel(apiRef, props);
@@ -93,7 +119,7 @@ export const useDataGridProComponent = (
93119
useGridEditing(apiRef, props);
94120
useGridFocus(apiRef, props);
95121
useGridSorting(apiRef, props);
96-
useGridPreferencesPanel(apiRef, props);
122+
useGridPreferencesPanel(apiRef);
97123
useGridFilter(apiRef, props);
98124
useGridDensity(apiRef, props);
99125
useGridColumnReorder(apiRef, props);

‎packages/grid/x-data-grid-pro/src/hooks/features/columnReorder/useGridColumnReorder.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
GridEventListener,
99
useGridLogger,
1010
} from '@mui/x-data-grid';
11-
import { useGridStateInit } from '@mui/x-data-grid/internals';
11+
import { GridStateInitializer } from '@mui/x-data-grid/internals';
1212
import { GridApiPro } from '../../../models/gridApiPro';
1313
import { gridColumnReorderDragColSelector } from './columnReorderSelector';
1414
import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
@@ -43,6 +43,11 @@ const useUtilityClasses = (ownerState: OwnerState) => {
4343
return composeClasses(slots, getDataGridUtilityClass, classes);
4444
};
4545

46+
export const columnReorderStateInitializer: GridStateInitializer = (state) => ({
47+
...state,
48+
columnReorder: { dragCol: '' },
49+
});
50+
4651
/**
4752
* Only available in DataGridPro
4853
* @requires useGridColumns (method)
@@ -53,11 +58,6 @@ export const useGridColumnReorder = (
5358
): void => {
5459
const logger = useGridLogger(apiRef, 'useGridColumnReorder');
5560

56-
useGridStateInit(apiRef, (state) => ({
57-
...state,
58-
columnReorder: { dragCol: '' },
59-
}));
60-
6161
const dragColNode = React.useRef<HTMLElement | null>(null);
6262
const cursorPosition = React.useRef<CursorCoordinates>({
6363
x: 0,

‎packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ import {
1515
GridStateColDef,
1616
} from '@mui/x-data-grid';
1717
import {
18-
useGridStateInit,
1918
clamp,
2019
findParentElementFromClassName,
20+
GridStateInitializer,
2121
} from '@mui/x-data-grid/internals';
2222
import {
2323
findGridCellElementsFromCol,
@@ -102,6 +102,11 @@ function getSeparatorSide(element: HTMLElement) {
102102
: GridColumnHeaderSeparatorSides.Left;
103103
}
104104

105+
export const columnResizeStateInitializer: GridStateInitializer = (state) => ({
106+
...state,
107+
columnResize: { resizingColumnField: '' },
108+
});
109+
105110
/**
106111
* Only available in DataGridPro
107112
* @requires useGridColumns (method, event)
@@ -113,10 +118,6 @@ export const useGridColumnResize = (
113118
) => {
114119
const logger = useGridLogger(apiRef, 'useGridColumnResize');
115120

116-
useGridStateInit(apiRef, (state) => ({
117-
...state,
118-
columnResize: { resizingColumnField: '' },
119-
}));
120121
const colDefRef = React.useRef<GridStateColDef>();
121122
const colElementRef = React.useRef<HTMLDivElement>();
122123
const colCellElementsRef = React.useRef<NodeListOf<Element>>();

‎packages/grid/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanel.ts‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ import {
99
GridCellParams,
1010
} from '@mui/x-data-grid';
1111
import {
12-
useGridStateInit,
1312
useGridRegisterPreProcessor,
1413
GridPreProcessor,
14+
GridStateInitializer,
1515
} from '@mui/x-data-grid/internals';
1616
import { GridApiPro } from '../../../models/gridApiPro';
1717
import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from './gridDetailPanelToggleColDef';
@@ -23,6 +23,18 @@ import {
2323
import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
2424
import { GridDetailPanelApi } from './gridDetailPanelInterface';
2525

26+
export const detailPanelStateInitializer: GridStateInitializer<
27+
Pick<DataGridProProcessedProps, 'initialState' | 'detailPanelExpandedRowIds'>
28+
> = (state, props) => {
29+
return {
30+
...state,
31+
detailPanel: {
32+
expandedRowIds:
33+
props.detailPanelExpandedRowIds ?? props.initialState?.detailPanel?.expandedRowIds ?? [],
34+
},
35+
};
36+
};
37+
2638
export const useGridDetailPanel = (
2739
apiRef: React.MutableRefObject<GridApiPro>,
2840
props: Pick<
@@ -36,16 +48,6 @@ export const useGridDetailPanel = (
3648
| 'paginationMode'
3749
>,
3850
): void => {
39-
useGridStateInit(apiRef, (state) => {
40-
return {
41-
...state,
42-
detailPanel: {
43-
expandedRowIds:
44-
props.detailPanelExpandedRowIds ?? props.initialState?.detailPanel?.expandedRowIds ?? [],
45-
},
46-
};
47-
});
48-
4951
const expandedRowIds = useGridSelector(apiRef, gridDetailPanelExpandedRowIdsSelector);
5052
const contentCache = useGridSelector(apiRef, gridDetailPanelExpandedRowsContentCacheSelector);
5153

‎packages/grid/x-data-grid/src/DataGrid/useDataGridComponent.tsx‎

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,30 +5,39 @@ import { useGridInitialization } from '../hooks/core/useGridInitialization';
55
import { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
66

77
import { useGridClipboard } from '../hooks/features/clipboard/useGridClipboard';
8-
import { useGridColumnMenu } from '../hooks/features/columnMenu/useGridColumnMenu';
8+
import {
9+
columnMenuStateInitializer,
10+
useGridColumnMenu,
11+
} from '../hooks/features/columnMenu/useGridColumnMenu';
912
import { useGridColumns, columnsStateInitializer } from '../hooks/features/columns/useGridColumns';
10-
import { useGridDensity } from '../hooks/features/density/useGridDensity';
13+
import { densityStateInitializer, useGridDensity } from '../hooks/features/density/useGridDensity';
1114
import { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
1215
import { useGridPrintExport } from '../hooks/features/export/useGridPrintExport';
1316
import { useGridFilter, filterStateInitializer } from '../hooks/features/filter/useGridFilter';
14-
import { useGridFocus } from '../hooks/features/focus/useGridFocus';
17+
import { focusStateInitializer, useGridFocus } from '../hooks/features/focus/useGridFocus';
1518
import { useGridKeyboard } from '../hooks/features/keyboard/useGridKeyboard';
1619
import { useGridKeyboardNavigation } from '../hooks/features/keyboard/useGridKeyboardNavigation';
1720
import {
1821
useGridPagination,
1922
paginationStateInitializer,
2023
} from '../hooks/features/pagination/useGridPagination';
21-
import { useGridPreferencesPanel } from '../hooks/features/preferencesPanel/useGridPreferencesPanel';
22-
import { useGridEditing } from '../hooks/features/editRows/useGridEditing';
24+
import {
25+
useGridPreferencesPanel,
26+
preferencePanelStateInitializer,
27+
} from '../hooks/features/preferencesPanel/useGridPreferencesPanel';
28+
import { useGridEditing, editingStateInitializer } from '../hooks/features/editRows/useGridEditing';
2329
import { useGridRows, rowsStateInitializer } from '../hooks/features/rows/useGridRows';
2430
import { useGridParamsApi } from '../hooks/features/rows/useGridParamsApi';
25-
import { useGridSelection } from '../hooks/features/selection/useGridSelection';
31+
import {
32+
selectionStateInitializer,
33+
useGridSelection,
34+
} from '../hooks/features/selection/useGridSelection';
2635
import { useGridSelectionPreProcessors } from '../hooks/features/selection/useGridSelectionPreProcessors';
2736
import { useGridSorting, sortingStateInitializer } from '../hooks/features/sorting/useGridSorting';
2837
import { useGridScroll } from '../hooks/features/scroll/useGridScroll';
2938
import { useGridEvents } from '../hooks/features/events/useGridEvents';
3039
import { useGridDimensions } from '../hooks/features/dimensions/useGridDimensions';
31-
import { useGridRowsMeta } from '../hooks/features/rows/useGridRowsMeta';
40+
import { rowsMetaStateInitializer, useGridRowsMeta } from '../hooks/features/rows/useGridRowsMeta';
3241
import { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
3342

3443
export const useDataGridComponent = (props: DataGridProcessedProps) => {
@@ -42,11 +51,18 @@ export const useDataGridComponent = (props: DataGridProcessedProps) => {
4251
/**
4352
* Register all state initializers here.
4453
*/
45-
useGridInitializeState(filterStateInitializer, apiRef, props);
46-
useGridInitializeState(paginationStateInitializer, apiRef, props);
54+
useGridInitializeState(selectionStateInitializer, apiRef, props);
55+
useGridInitializeState(columnsStateInitializer, apiRef, props);
4756
useGridInitializeState(rowsStateInitializer, apiRef, props);
57+
useGridInitializeState(editingStateInitializer, apiRef, props);
58+
useGridInitializeState(focusStateInitializer, apiRef, props);
4859
useGridInitializeState(sortingStateInitializer, apiRef, props);
49-
useGridInitializeState(columnsStateInitializer, apiRef, props);
60+
useGridInitializeState(preferencePanelStateInitializer, apiRef, props);
61+
useGridInitializeState(filterStateInitializer, apiRef, props);
62+
useGridInitializeState(densityStateInitializer, apiRef, props);
63+
useGridInitializeState(paginationStateInitializer, apiRef, props);
64+
useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
65+
useGridInitializeState(columnMenuStateInitializer, apiRef, props);
5066

5167
useGridSelection(apiRef, props);
5268
useGridColumns(apiRef, props);
@@ -55,7 +71,7 @@ export const useDataGridComponent = (props: DataGridProcessedProps) => {
5571
useGridEditing(apiRef, props);
5672
useGridFocus(apiRef, props);
5773
useGridSorting(apiRef, props);
58-
useGridPreferencesPanel(apiRef, props);
74+
useGridPreferencesPanel(apiRef);
5975
useGridFilter(apiRef, props);
6076
useGridDensity(apiRef, props);
6177
useGridPagination(apiRef, props);

‎packages/grid/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenu.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
import * as React from 'react';
22
import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
33
import { GridEvents } from '../../../models/events';
4-
import { useGridStateInit } from '../../utils/useGridStateInit';
54
import { useGridLogger, useGridApiMethod, useGridApiEventHandler } from '../../utils';
65
import { gridColumnMenuSelector } from './columnMenuSelector';
76
import { GridColumnMenuApi } from '../../../models';
7+
import { GridStateInitializer } from '../../utils/useGridInitializeState';
8+
9+
export const columnMenuStateInitializer: GridStateInitializer = (state) => ({
10+
...state,
11+
columnMenu: { open: false },
12+
});
813

914
/**
1015
* @requires useGridColumnResize (event)
@@ -13,8 +18,6 @@ import { GridColumnMenuApi } from '../../../models';
1318
export const useGridColumnMenu = (apiRef: React.MutableRefObject<GridApiCommunity>): void => {
1419
const logger = useGridLogger(apiRef, 'useGridColumnMenu');
1520

16-
useGridStateInit(apiRef, (state) => ({ ...state, columnMenu: { open: false } }));
17-
1821
/**
1922
* API METHODS
2023
*/

‎packages/grid/x-data-grid/src/hooks/features/density/useGridDensity.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ import { useGridApiMethod } from '../../utils/useGridApiMethod';
66
import { GridDensityApi } from '../../../models/api/gridDensityApi';
77
import { GridDensityState } from './densityState';
88
import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
9-
import { useGridStateInit } from '../../utils/useGridStateInit';
109
import { gridDensitySelector } from './densitySelector';
1110
import { isDeepEqual } from '../../../utils/utils';
11+
import { GridStateInitializer } from '../../utils/useGridInitializeState';
1212

1313
export const COMPACT_DENSITY_FACTOR = 0.7;
1414
export const COMFORTABLE_DENSITY_FACTOR = 1.3;
@@ -44,17 +44,19 @@ const getUpdatedDensityState = (
4444
}
4545
};
4646

47+
export const densityStateInitializer: GridStateInitializer<
48+
Pick<DataGridProcessedProps, 'density' | 'headerHeight' | 'rowHeight'>
49+
> = (state, props) => ({
50+
...state,
51+
density: getUpdatedDensityState(props.density, props.headerHeight, props.rowHeight),
52+
});
53+
4754
export const useGridDensity = (
4855
apiRef: React.MutableRefObject<GridApiCommunity>,
4956
props: Pick<DataGridProcessedProps, 'headerHeight' | 'rowHeight' | 'density'>,
5057
): void => {
5158
const logger = useGridLogger(apiRef, 'useDensity');
5259

53-
useGridStateInit(apiRef, (state) => ({
54-
...state,
55-
density: getUpdatedDensityState(props.density, props.headerHeight, props.rowHeight),
56-
}));
57-
5860
const setDensity = React.useCallback<GridDensityApi['setDensity']>(
5961
(newDensity, newHeaderHeight = props.headerHeight, newRowHeight = props.rowHeight): void => {
6062
logger.debug(`Set grid density to ${newDensity}`);

‎packages/grid/x-data-grid/src/hooks/features/editRows/useGridEditing.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,16 @@ import {
1212
} from '../../utils/useGridApiEventHandler';
1313
import { useGridApiMethod } from '../../utils/useGridApiMethod';
1414
import { useGridLogger } from '../../utils/useGridLogger';
15-
import { useGridStateInit } from '../../utils/useGridStateInit';
1615
import { gridEditRowsStateSelector } from './gridEditRowsSelector';
1716
import { GridEventListener, GridRowId } from '../../../models';
1817
import { useCellEditing } from './useGridCellEditing';
1918
import { useGridRowEditing } from './useGridRowEditing';
19+
import { GridStateInitializer } from '../../utils/useGridInitializeState';
20+
21+
export const editingStateInitializer: GridStateInitializer = (state) => ({
22+
...state,
23+
editRows: {},
24+
});
2025

2126
/**
2227
* @requires useGridFocus - can be after, async only
@@ -44,7 +49,6 @@ export function useGridEditing(
4449
const logger = useGridLogger(apiRef, 'useGridEditRows');
4550
useCellEditing(apiRef, props);
4651
useGridRowEditing(apiRef, props);
47-
useGridStateInit(apiRef, (state) => ({ ...state, editRows: {} }));
4852

4953
const debounceMap = React.useRef<Record<GridRowId, Record<string, [NodeJS.Timeout, () => void]>>>(
5054
{},

‎packages/grid/x-data-grid/src/hooks/features/focus/useGridFocus.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,14 @@ import { useGridLogger } from '../../utils/useGridLogger';
99
import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
1010
import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
1111
import { isNavigationKey } from '../../../utils/keyboardUtils';
12-
import { useGridStateInit } from '../../utils/useGridStateInit';
1312
import { gridFocusCellSelector } from './gridFocusStateSelector';
13+
import { GridStateInitializer } from '../../utils/useGridInitializeState';
14+
15+
export const focusStateInitializer: GridStateInitializer = (state) => ({
16+
...state,
17+
focus: { cell: null, columnHeader: null },
18+
tabIndex: { cell: null, columnHeader: null },
19+
});
1420

1521
/**
1622
* @requires useGridParamsApi (method)
@@ -23,11 +29,6 @@ export const useGridFocus = (
2329
): void => {
2430
const logger = useGridLogger(apiRef, 'useGridFocus');
2531

26-
useGridStateInit(apiRef, (state) => ({
27-
...state,
28-
focus: { cell: null, columnHeader: null },
29-
tabIndex: { cell: null, columnHeader: null },
30-
}));
3132
const lastClickedCell = React.useRef<GridCellParams | null>(null);
3233

3334
const setCellFocus = React.useCallback<GridFocusApi['setCellFocus']>(

0 commit comments

Comments
 (0)