From 64b0eafe336ba174ab57ba24f2a20a19be6d7af5 Mon Sep 17 00:00:00 2001 From: delangle Date: Wed, 30 Mar 2022 09:22:53 +0200 Subject: [PATCH 1/5] [data grid] Fix column dimensions import/export with flex and resizing --- .../features/columnResize/useGridColumnResize.tsx | 2 +- .../hooks/features/columns/gridColumnsInterfaces.ts | 2 +- .../src/hooks/features/columns/gridColumnsUtils.ts | 11 ++++++++--- .../src/hooks/features/columns/useGridColumns.tsx | 6 +++++- 4 files changed, 15 insertions(+), 6 deletions(-) diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx index bf86d9d1b9a7..6a15c389e4a6 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx +++ b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx @@ -136,7 +136,7 @@ export const useGridColumnResize = ( colDefRef.current!.computedWidth = newWidth; colDefRef.current!.width = newWidth; - colDefRef.current!.flex = undefined; + colDefRef.current!.flex = 0; colElementRef.current!.style.width = `${newWidth}px`; colElementRef.current!.style.minWidth = `${newWidth}px`; diff --git a/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsInterfaces.ts b/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsInterfaces.ts index 401b312a8a56..84d8d016745b 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsInterfaces.ts +++ b/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsInterfaces.ts @@ -19,7 +19,7 @@ export interface GridColumnsState { columnVisibilityModel: GridColumnVisibilityModel; } -export type GridColumnDimensions = Pick; +export type GridColumnDimensions = { [key in GridColumnDimensionProperties]?: number | 'Infinity' }; export interface GridColumnsInitialState { columnVisibilityModel?: GridColumnVisibilityModel; diff --git a/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts b/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts index 0ba15406ed1b..1c1ecc825e8c 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts +++ b/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts @@ -53,7 +53,7 @@ export function computeFlexColumnsWidth({ totalFlexUnits: number; flexColumns: { field: GridColDef['field']; - flex?: number; + flex?: number | null; minWidth?: number; maxWidth?: number; }[]; @@ -266,11 +266,16 @@ export const applyInitialState = ( for (let i = 0; i < columnsWithUpdatedDimensions.length; i += 1) { const field = columnsWithUpdatedDimensions[i]; - newColumnLookup[field] = { + const newColDef: Omit = { ...newColumnLookup[field], - ...dimensions[field], hasBeenResized: true, }; + + Object.entries(dimensions[field]).forEach(([key, value]) => { + newColDef[key as GridColumnDimensionProperties] = value === 'Infinity' ? Infinity : value; + }); + + newColumnLookup[field] = newColDef; } const newColumnsState: Omit = { diff --git a/packages/grid/x-data-grid/src/hooks/features/columns/useGridColumns.tsx b/packages/grid/x-data-grid/src/hooks/features/columns/useGridColumns.tsx index a0ae8d255491..8056787ef8b6 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columns/useGridColumns.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/columns/useGridColumns.tsx @@ -323,7 +323,11 @@ export function useGridColumns( if (colDef.hasBeenResized) { const colDefDimensions: GridColumnDimensions = {}; COLUMNS_DIMENSION_PROPERTIES.forEach((propertyName) => { - colDefDimensions[propertyName] = colDef[propertyName]; + let propertyValue: number | 'Infinity' | undefined = colDef[propertyName]; + if (propertyValue === Infinity) { + propertyValue = 'Infinity'; + } + colDefDimensions[propertyName] = propertyValue; }); dimensions[colDef.field] = colDefDimensions; } From 29de3efdb385573aa9ce73e60f5064f4af505954 Mon Sep 17 00:00:00 2001 From: delangle Date: Wed, 30 Mar 2022 09:34:45 +0200 Subject: [PATCH 2/5] Work --- .../src/tests/statePersistence.DataGridPro.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx index 888c3041bce1..313764f22f88 100644 --- a/packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx @@ -51,7 +51,7 @@ const FULL_INITIAL_STATE: GridInitialState = { dimensions: { idBis: { width: 75, - maxWidth: Infinity, + maxWidth: 'Infinity', minWidth: 50, flex: undefined, }, From d16aba51538a7465bc9cf86e87f261215ad476b2 Mon Sep 17 00:00:00 2001 From: delangle Date: Mon, 4 Apr 2022 09:18:09 +0200 Subject: [PATCH 3/5] Work --- .../columnResize/useGridColumnResize.tsx | 1 + .../statePersistence.DataGridPro.test.tsx | 2 +- .../features/columns/gridColumnsInterfaces.ts | 2 +- .../features/columns/gridColumnsUtils.ts | 25 ++++++++++--------- .../hooks/features/columns/useGridColumns.tsx | 4 +-- 5 files changed, 18 insertions(+), 16 deletions(-) diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx index 6a15c389e4a6..b7d1229c58de 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx +++ b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx @@ -298,6 +298,7 @@ export const useGridColumnResize = ( }); const handleTouchStart = useEventCallback((event: any) => { + (''); const cellSeparator = findParentElementFromClassName( event.target, gridClasses['columnSeparator--resizable'], diff --git a/packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx index 313764f22f88..87c111db3cad 100644 --- a/packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx @@ -51,7 +51,7 @@ const FULL_INITIAL_STATE: GridInitialState = { dimensions: { idBis: { width: 75, - maxWidth: 'Infinity', + maxWidth: -1, minWidth: 50, flex: undefined, }, diff --git a/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsInterfaces.ts b/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsInterfaces.ts index 84d8d016745b..619bb3124a59 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsInterfaces.ts +++ b/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsInterfaces.ts @@ -19,7 +19,7 @@ export interface GridColumnsState { columnVisibilityModel: GridColumnVisibilityModel; } -export type GridColumnDimensions = { [key in GridColumnDimensionProperties]?: number | 'Infinity' }; +export type GridColumnDimensions = { [key in GridColumnDimensionProperties]?: number }; export interface GridColumnsInitialState { columnVisibilityModel?: GridColumnVisibilityModel; diff --git a/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts b/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts index 1c1ecc825e8c..8854a79a2e2d 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts +++ b/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts @@ -266,16 +266,11 @@ export const applyInitialState = ( for (let i = 0; i < columnsWithUpdatedDimensions.length; i += 1) { const field = columnsWithUpdatedDimensions[i]; - const newColDef: Omit = { + newColumnLookup[field] = { ...newColumnLookup[field], + ...dimensions[field], hasBeenResized: true, }; - - Object.entries(dimensions[field]).forEach(([key, value]) => { - newColDef[key as GridColumnDimensionProperties] = value === 'Infinity' ? Infinity : value; - }); - - newColumnLookup[field] = newColDef; } const newColumnsState: Omit = { @@ -381,16 +376,22 @@ export const createColumnsState = ({ columnsStateWithoutColumnVisibilityModel.all.push(field); } - let hasValidDimension = false; - if (!existingState.hasBeenResized) { - hasValidDimension = COLUMNS_DIMENSION_PROPERTIES.some((key) => newColumn[key] !== undefined); - } + let hasBeenResized = existingState.hasBeenResized; + COLUMNS_DIMENSION_PROPERTIES.forEach((key) => { + if (newColumn[key] !== undefined) { + hasBeenResized = true; + + if (newColumn[key] === -1) { + newColumn[key] = Infinity; + } + } + }); columnsStateWithoutColumnVisibilityModel.lookup[field] = { ...existingState, hide: newColumn.hide == null ? false : newColumn.hide, ...newColumn, - hasBeenResized: existingState.hasBeenResized || hasValidDimension, + hasBeenResized, }; }); diff --git a/packages/grid/x-data-grid/src/hooks/features/columns/useGridColumns.tsx b/packages/grid/x-data-grid/src/hooks/features/columns/useGridColumns.tsx index 8056787ef8b6..92418a0e1bd8 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columns/useGridColumns.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/columns/useGridColumns.tsx @@ -323,9 +323,9 @@ export function useGridColumns( if (colDef.hasBeenResized) { const colDefDimensions: GridColumnDimensions = {}; COLUMNS_DIMENSION_PROPERTIES.forEach((propertyName) => { - let propertyValue: number | 'Infinity' | undefined = colDef[propertyName]; + let propertyValue: number | undefined = colDef[propertyName]; if (propertyValue === Infinity) { - propertyValue = 'Infinity'; + propertyValue = -1; } colDefDimensions[propertyName] = propertyValue; }); From 28b7261917c3bfcb558b23e0edcd8d3dd85d56a5 Mon Sep 17 00:00:00 2001 From: delangle Date: Mon, 4 Apr 2022 09:31:34 +0200 Subject: [PATCH 4/5] Work --- .../src/hooks/features/columnResize/useGridColumnResize.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx index b7d1229c58de..6a15c389e4a6 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx +++ b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx @@ -298,7 +298,6 @@ export const useGridColumnResize = ( }); const handleTouchStart = useEventCallback((event: any) => { - (''); const cellSeparator = findParentElementFromClassName( event.target, gridClasses['columnSeparator--resizable'], From 623644cd7a2cd7511e32a3f5e9fe9419fc2a6652 Mon Sep 17 00:00:00 2001 From: delangle Date: Mon, 4 Apr 2022 10:08:01 +0200 Subject: [PATCH 5/5] Work --- .../src/hooks/features/columns/gridColumnsUtils.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts b/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts index 8854a79a2e2d..1b53b6271743 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts +++ b/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts @@ -266,11 +266,16 @@ export const applyInitialState = ( for (let i = 0; i < columnsWithUpdatedDimensions.length; i += 1) { const field = columnsWithUpdatedDimensions[i]; - newColumnLookup[field] = { + const newColDef: Omit = { ...newColumnLookup[field], - ...dimensions[field], hasBeenResized: true, }; + + Object.entries(dimensions[field]).forEach(([key, value]) => { + newColDef[key as GridColumnDimensionProperties] = value === -1 ? Infinity : value; + }); + + newColumnLookup[field] = newColDef; } const newColumnsState: Omit = {