@mui/x-data-grid 5.6.1 → 5.9.0

package/legacy/hooks/features/columns/gridColumnsUtils.js

@@ -1,9 +1,11 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { DEFAULT_GRID_COL_TYPE_KEY, getGridDefaultColumnTypes } from '../../../models';
+import { DEFAULT_GRID_COL_TYPE_KEY, getGridDefaultColumnTypes } from '../../../colDef';
 import { gridColumnsSelector, gridColumnVisibilityModelSelector } from './gridColumnsSelector';
 import { clamp } from '../../../utils/utils';
+export var COLUMNS_DIMENSION_PROPERTIES = ['maxWidth', 'minWidth', 'width', 'flex'];
 export var computeColumnTypes = function computeColumnTypes() {
   var customColumnTypes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
@@ -173,6 +175,71 @@ export var hydrateColumnsWidth = function hydrateColumnsWidth(rawState, viewport
   });
 };
 var columnTypeWarnedOnce = false;
+/**
+ * Apply the order and the dimensions of the initial state.
+ * The columns not registered in `orderedFields` will be placed after the imported columns.
+ */
+
+export var applyInitialState = function applyInitialState(columnsState, initialState) {
+  if (!initialState) {
+    return columnsState;
+  }
+
+  var _initialState$ordered = initialState.orderedFields,
+      orderedFields = _initialState$ordered === void 0 ? [] : _initialState$ordered,
+      _initialState$dimensi = initialState.dimensions,
+      dimensions = _initialState$dimensi === void 0 ? {} : _initialState$dimensi;
+  var columnsWithUpdatedDimensions = Object.keys(dimensions);
+
+  if (columnsWithUpdatedDimensions.length === 0 && orderedFields.length === 0) {
+    return columnsState;
+  }
+
+  var orderedFieldsLookup = {};
+  var cleanOrderedFields = [];
+
+  for (var i = 0; i < orderedFields.length; i += 1) {
+    var _field = orderedFields[i]; // Ignores the fields in the initialState that matches no field on the current column state
+
+    if (columnsState.lookup[_field]) {
+      orderedFieldsLookup[_field] = true;
+      cleanOrderedFields.push(_field);
+    }
+  }
+
+  var newOrderedFields = cleanOrderedFields.length === 0 ? columnsState.all : [].concat(cleanOrderedFields, _toConsumableArray(columnsState.all.filter(function (field) {
+    return !orderedFieldsLookup[field];
+  })));
+
+  var newColumnLookup = _extends({}, columnsState.lookup);
+
+  var _loop = function _loop(_i) {
+    var field = columnsWithUpdatedDimensions[_i];
+
+    var newColDef = _extends({}, newColumnLookup[field], {
+      hasBeenResized: true
+    });
+
+    Object.entries(dimensions[field]).forEach(function (_ref5) {
+      var _ref6 = _slicedToArray(_ref5, 2),
+          key = _ref6[0],
+          value = _ref6[1];
+
+      newColDef[key] = value === -1 ? Infinity : value;
+    });
+    newColumnLookup[field] = newColDef;
+  };
+
+  for (var _i = 0; _i < columnsWithUpdatedDimensions.length; _i += 1) {
+    _loop(_i);
+  }
+
+  var newColumnsState = {
+    all: newOrderedFields,
+    lookup: newColumnLookup
+  };
+  return newColumnsState;
+};
 /**
  * @deprecated Should have been internal only, you can inline the logic.
  */
@@ -195,19 +262,22 @@ export var getGridColDef = function getGridColDef(columnTypes, type) {
 
   return columnTypes[type];
 };
-export var createColumnsState = function createColumnsState(_ref5) {
+export var createColumnsState = function createColumnsState(_ref7) {
   var _apiRef$current$getRo, _apiRef$current$getRo2, _apiRef$current, _apiRef$current$getRo3;
 
-  var apiRef = _ref5.apiRef,
-      columnsToUpsert = _ref5.columnsToUpsert,
-      columnsTypes = _ref5.columnsTypes,
-      _ref5$currentColumnVi = _ref5.currentColumnVisibilityModel,
-      currentColumnVisibilityModel = _ref5$currentColumnVi === void 0 ? gridColumnVisibilityModelSelector(apiRef) : _ref5$currentColumnVi,
-      shouldRegenColumnVisibilityModelFromColumns = _ref5.shouldRegenColumnVisibilityModelFromColumns,
-      reset = _ref5.reset;
+  var apiRef = _ref7.apiRef,
+      columnsToUpsert = _ref7.columnsToUpsert,
+      initialState = _ref7.initialState,
+      columnTypes = _ref7.columnTypes,
+      _ref7$currentColumnVi = _ref7.currentColumnVisibilityModel,
+      currentColumnVisibilityModel = _ref7$currentColumnVi === void 0 ? gridColumnVisibilityModelSelector(apiRef) : _ref7$currentColumnVi,
+      shouldRegenColumnVisibilityModelFromColumns = _ref7.shouldRegenColumnVisibilityModelFromColumns,
+      _ref7$keepOnlyColumns = _ref7.keepOnlyColumnsToUpsert,
+      keepOnlyColumnsToUpsert = _ref7$keepOnlyColumns === void 0 ? false : _ref7$keepOnlyColumns;
+  var isInsideStateInitializer = !apiRef.current.state.columns;
   var columnsStateWithoutColumnVisibilityModel;
 
-  if (reset) {
+  if (isInsideStateInitializer) {
     columnsStateWithoutColumnVisibilityModel = {
       all: [],
       lookup: {}
@@ -215,77 +285,185 @@ export var createColumnsState = function createColumnsState(_ref5) {
   } else {
     var currentState = gridColumnsSelector(apiRef.current.state);
     columnsStateWithoutColumnVisibilityModel = {
-      all: _toConsumableArray(currentState.all),
-      lookup: _extends({}, currentState.lookup)
+      all: keepOnlyColumnsToUpsert ? [] : _toConsumableArray(currentState.all),
+      lookup: _extends({}, currentState.lookup) // Will be cleaned later if keepOnlyColumnsToUpsert=true
+
     };
   }
 
+  var columnsToKeep = {};
+
+  if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
+    columnsToKeep = Object.keys(columnsStateWithoutColumnVisibilityModel.lookup).reduce(function (acc, key) {
+      return _extends({}, acc, _defineProperty({}, key, false));
+    }, {});
+  }
+
   var columnsToUpsertLookup = {};
   columnsToUpsert.forEach(function (newColumn) {
-    columnsToUpsertLookup[newColumn.field] = true;
+    var field = newColumn.field;
+    columnsToUpsertLookup[field] = true;
+    columnsToKeep[field] = true;
+    var existingState = columnsStateWithoutColumnVisibilityModel.lookup[field];
 
-    if (columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] == null) {
+    if (existingState == null) {
       // New Column
-      columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] = _extends({}, getGridColDef(columnsTypes, newColumn.type), newColumn);
-      columnsStateWithoutColumnVisibilityModel.all.push(newColumn.field);
-    } else {
-      columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] = _extends({}, columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field], newColumn);
+      existingState = _extends({}, getGridColDef(columnTypes, newColumn.type), {
+        // TODO v6: Inline `getGridColDef`
+        field: field,
+        hasBeenResized: false
+      });
+      columnsStateWithoutColumnVisibilityModel.all.push(field);
+    } else if (keepOnlyColumnsToUpsert) {
+      columnsStateWithoutColumnVisibilityModel.all.push(field);
     }
+
+    var hasBeenResized = existingState.hasBeenResized;
+    COLUMNS_DIMENSION_PROPERTIES.forEach(function (key) {
+      if (newColumn[key] !== undefined) {
+        hasBeenResized = true;
+
+        if (newColumn[key] === -1) {
+          newColumn[key] = Infinity;
+        }
+      }
+    });
+    columnsStateWithoutColumnVisibilityModel.lookup[field] = _extends({}, existingState, {
+      hide: newColumn.hide == null ? false : newColumn.hide
+    }, newColumn, {
+      hasBeenResized: hasBeenResized
+    });
   });
 
+  if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
+    Object.keys(columnsStateWithoutColumnVisibilityModel.lookup).forEach(function (field) {
+      if (!columnsToKeep[field]) {
+        delete columnsStateWithoutColumnVisibilityModel.lookup[field];
+      }
+    });
+  }
+
   var columnsLookupBeforePreProcessing = _extends({}, columnsStateWithoutColumnVisibilityModel.lookup);
 
-  var columnsStateWithPreProcessing = apiRef.current.unstable_applyPreProcessors('hydrateColumns', columnsStateWithoutColumnVisibilityModel); // TODO v6: remove the sync between the columns `hide` option and the model.
+  var columnsStateWithPreProcessing = apiRef.current.unstable_applyPipeProcessors('hydrateColumns', columnsStateWithoutColumnVisibilityModel); // TODO v6: remove the sync between the columns `hide` option and the model.
 
   var columnVisibilityModel = {};
 
   if (shouldRegenColumnVisibilityModelFromColumns) {
-    if (reset) {
+    var hasModelChanged = false;
+
+    var newColumnVisibilityModel = _extends({}, currentColumnVisibilityModel);
+
+    if (isInsideStateInitializer) {
       columnsStateWithPreProcessing.all.forEach(function (field) {
-        columnVisibilityModel[field] = !columnsStateWithoutColumnVisibilityModel.lookup[field].hide;
+        newColumnVisibilityModel[field] = !columnsStateWithoutColumnVisibilityModel.lookup[field].hide;
       });
-    } else {
-      var newColumnVisibilityModel = _extends({}, currentColumnVisibilityModel);
+    } else if (keepOnlyColumnsToUpsert) {
+      // At this point, `keepOnlyColumnsToUpsert` has a new meaning: keep the columns
+      // passed via `columnToUpsert` + columns added by the pre-processors. We do the following
+      // cleanup because a given column may have been removed from the `columns` prop but it still
+      // exists in the state.
+      Object.keys(newColumnVisibilityModel).forEach(function (field) {
+        if (!columnsStateWithPreProcessing.lookup[field]) {
+          delete newColumnVisibilityModel[field];
+          hasModelChanged = true;
+        }
+      });
+    }
 
-      var hasModelChanged = false;
-      columnsStateWithPreProcessing.all.forEach(function (field) {
-        var _currentColumnVisibil;
+    columnsStateWithPreProcessing.all.forEach(function (field) {
+      // If neither the `columnsToUpsert` nor the pre-processors updated the column,
+      // Then we don't want to update the visibility status of the column in the model.
+      if (!columnsToUpsertLookup[field] && columnsLookupBeforePreProcessing[field] === columnsStateWithPreProcessing.lookup[field]) {
+        return;
+      } // We always assume that a column not in the model is visible by default. However, there's an
+      // edge case where the column is not in the model but it also doesn't exist in the `columns`
+      // prop, meaning that the column is being added. In that case, we assume that the column was
+      // not visible before for it be added to the model.
 
-        // If neither the `columnsToUpsert` nor the pre-processors updated the column,
-        // Then we don't want to update the visibility status of the column in the model.
-        if (!columnsToUpsertLookup[field] && columnsLookupBeforePreProcessing[field] === columnsStateWithPreProcessing.lookup[field]) {
-          return;
-        }
 
-        var isVisibleBefore = (_currentColumnVisibil = currentColumnVisibilityModel[field]) != null ? _currentColumnVisibil : true;
-        var isVisibleAfter = !columnsStateWithPreProcessing.lookup[field].hide;
+      var isVisibleBefore = currentColumnVisibilityModel[field];
 
-        if (isVisibleAfter !== isVisibleBefore) {
-          hasModelChanged = true;
-          newColumnVisibilityModel[field] = isVisibleAfter;
+      if (isVisibleBefore === undefined) {
+        if (isInsideStateInitializer) {
+          isVisibleBefore = true;
+        } else {
+          var _currentState = gridColumnsSelector(apiRef.current.state);
+
+          isVisibleBefore = !!_currentState.lookup[field];
         }
-      });
+      }
 
-      if (hasModelChanged) {
-        columnVisibilityModel = newColumnVisibilityModel;
-      } else {
-        columnVisibilityModel = currentColumnVisibilityModel;
+      var isVisibleAfter = !columnsStateWithPreProcessing.lookup[field].hide;
+
+      if (isVisibleAfter !== isVisibleBefore) {
+        hasModelChanged = true;
+        newColumnVisibilityModel[field] = isVisibleAfter;
       }
+    });
+
+    if (hasModelChanged || isInsideStateInitializer) {
+      columnVisibilityModel = newColumnVisibilityModel;
+    } else {
+      columnVisibilityModel = currentColumnVisibilityModel;
     }
   } else {
     columnVisibilityModel = currentColumnVisibilityModel;
   }
 
-  var columnsState = _extends({}, columnsStateWithPreProcessing, {
+  var columnsStateWithPortableColumns = applyInitialState(columnsStateWithPreProcessing, initialState);
+
+  var columnsState = _extends({}, columnsStateWithPortableColumns, {
     columnVisibilityModel: columnVisibilityModel
   });
 
   return hydrateColumnsWidth(columnsState, (_apiRef$current$getRo = (_apiRef$current$getRo2 = (_apiRef$current = apiRef.current).getRootDimensions) == null ? void 0 : (_apiRef$current$getRo3 = _apiRef$current$getRo2.call(_apiRef$current)) == null ? void 0 : _apiRef$current$getRo3.viewportInnerSize.width) != null ? _apiRef$current$getRo : 0);
 };
-export var setColumnsState = function setColumnsState(columnsState) {
+export var mergeColumnsState = function mergeColumnsState(columnsState) {
   return function (state) {
     return _extends({}, state, {
       columns: columnsState
     });
   };
-};
+};
+export function getFirstNonSpannedColumnToRender(_ref8) {
+  var firstColumnToRender = _ref8.firstColumnToRender,
+      apiRef = _ref8.apiRef,
+      firstRowToRender = _ref8.firstRowToRender,
+      lastRowToRender = _ref8.lastRowToRender,
+      visibleRows = _ref8.visibleRows;
+  var firstNonSpannedColumnToRender = firstColumnToRender;
+
+  for (var i = firstRowToRender; i < lastRowToRender; i += 1) {
+    var row = visibleRows[i];
+
+    if (row) {
+      var rowId = visibleRows[i].id;
+      var cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, firstColumnToRender);
+
+      if (cellColSpanInfo && cellColSpanInfo.spannedByColSpan) {
+        firstNonSpannedColumnToRender = cellColSpanInfo.leftVisibleCellIndex;
+      }
+    }
+  }
+
+  return firstNonSpannedColumnToRender;
+}
+export function getFirstColumnIndexToRender(_ref9) {
+  var firstColumnIndex = _ref9.firstColumnIndex,
+      minColumnIndex = _ref9.minColumnIndex,
+      columnBuffer = _ref9.columnBuffer,
+      firstRowToRender = _ref9.firstRowToRender,
+      lastRowToRender = _ref9.lastRowToRender,
+      apiRef = _ref9.apiRef,
+      visibleRows = _ref9.visibleRows;
+  var initialFirstColumnToRender = Math.max(firstColumnIndex - columnBuffer, minColumnIndex);
+  var firstColumnToRender = getFirstNonSpannedColumnToRender({
+    firstColumnToRender: initialFirstColumnToRender,
+    apiRef: apiRef,
+    firstRowToRender: firstRowToRender,
+    lastRowToRender: lastRowToRender,
+    visibleRows: visibleRows
+  });
+  return firstColumnToRender;
+}

package/legacy/hooks/features/columns/useGridColumnSpanning.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+import { GridEvents } from '../../../models/events/gridEvents';
+
+/**
+ * @requires useGridColumns (method, event)
+ * @requires useGridParamsApi (method)
+ */
+export var useGridColumnSpanning = function useGridColumnSpanning(apiRef) {
+  var lookup = React.useRef({});
+  var setCellColSpanInfo = React.useCallback(function (rowId, columnIndex, cellColSpanInfo) {
+    var sizes = lookup.current;
+
+    if (!sizes[rowId]) {
+      sizes[rowId] = {};
+    }
+
+    sizes[rowId][columnIndex] = cellColSpanInfo;
+  }, []);
+  var getCellColSpanInfo = React.useCallback(function (rowId, columnIndex) {
+    var _lookup$current$rowId;
+
+    return (_lookup$current$rowId = lookup.current[rowId]) == null ? void 0 : _lookup$current$rowId[columnIndex];
+  }, []); // Calculate `colSpan` for the cell.
+
+  var calculateCellColSpan = React.useCallback(function (params) {
+    var columnIndex = params.columnIndex,
+        rowId = params.rowId,
+        minFirstColumnIndex = params.minFirstColumnIndex,
+        maxLastColumnIndex = params.maxLastColumnIndex;
+    var visibleColumns = apiRef.current.getVisibleColumns();
+    var columnsLength = visibleColumns.length;
+    var column = visibleColumns[columnIndex];
+    var colSpan = typeof column.colSpan === 'function' ? column.colSpan(apiRef.current.getCellParams(rowId, column.field)) : column.colSpan;
+
+    if (!colSpan || colSpan === 1) {
+      setCellColSpanInfo(rowId, columnIndex, {
+        spannedByColSpan: false,
+        cellProps: {
+          colSpan: 1,
+          width: column.computedWidth
+        }
+      });
+      return {
+        colSpan: 1
+      };
+    }
+
+    var width = column.computedWidth;
+
+    for (var j = 1; j < colSpan; j += 1) {
+      var nextColumnIndex = columnIndex + j; // Cells should be spanned only within their column section (left-pinned, right-pinned and unpinned).
+
+      if (nextColumnIndex >= minFirstColumnIndex && nextColumnIndex < maxLastColumnIndex) {
+        var nextColumn = visibleColumns[nextColumnIndex];
+        width += nextColumn.computedWidth;
+        setCellColSpanInfo(rowId, columnIndex + j, {
+          spannedByColSpan: true,
+          rightVisibleCellIndex: Math.min(columnIndex + colSpan, columnsLength - 1),
+          leftVisibleCellIndex: columnIndex
+        });
+      }
+
+      setCellColSpanInfo(rowId, columnIndex, {
+        spannedByColSpan: false,
+        cellProps: {
+          colSpan: colSpan,
+          width: width
+        }
+      });
+    }
+
+    return {
+      colSpan: colSpan
+    };
+  }, [apiRef, setCellColSpanInfo]); // Calculate `colSpan` for each cell in the row
+
+  var calculateColSpan = React.useCallback(function (_ref) {
+    var rowId = _ref.rowId,
+        minFirstColumn = _ref.minFirstColumn,
+        maxLastColumn = _ref.maxLastColumn;
+
+    for (var i = minFirstColumn; i < maxLastColumn; i += 1) {
+      var cellProps = calculateCellColSpan({
+        columnIndex: i,
+        rowId: rowId,
+        minFirstColumnIndex: minFirstColumn,
+        maxLastColumnIndex: maxLastColumn
+      });
+
+      if (cellProps.colSpan > 1) {
+        i += cellProps.colSpan - 1;
+      }
+    }
+  }, [calculateCellColSpan]);
+  var columnSpanningApi = {
+    unstable_getCellColSpanInfo: getCellColSpanInfo,
+    unstable_calculateColSpan: calculateColSpan
+  };
+  useGridApiMethod(apiRef, columnSpanningApi, 'GridColumnSpanningAPI');
+  var handleColumnReorderChange = React.useCallback(function () {
+    // `colSpan` needs to be recalculated after column reordering
+    lookup.current = {};
+  }, []);
+  useGridApiEventHandler(apiRef, GridEvents.columnOrderChange, handleColumnReorderChange);
+};