@mui/x-data-grid 5.6.1 → 5.9.0

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

@@ -5,25 +5,31 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.computeColumnTypes = void 0;
+exports.computeColumnTypes = exports.applyInitialState = exports.COLUMNS_DIMENSION_PROPERTIES = void 0;
 exports.computeFlexColumnsWidth = computeFlexColumnsWidth;
-exports.setColumnsState = exports.hydrateColumnsWidth = exports.getGridColDef = exports.createColumnsState = void 0;
+exports.createColumnsState = void 0;
+exports.getFirstColumnIndexToRender = getFirstColumnIndexToRender;
+exports.getFirstNonSpannedColumnToRender = getFirstNonSpannedColumnToRender;
+exports.mergeColumnsState = exports.hydrateColumnsWidth = exports.getGridColDef = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _models = require("../../../models");
+var _colDef = require("../../../colDef");
 
 var _gridColumnsSelector = require("./gridColumnsSelector");
 
 var _utils = require("../../../utils/utils");
 
+const COLUMNS_DIMENSION_PROPERTIES = ['maxWidth', 'minWidth', 'width', 'flex'];
+exports.COLUMNS_DIMENSION_PROPERTIES = COLUMNS_DIMENSION_PROPERTIES;
+
 const computeColumnTypes = (customColumnTypes = {}) => {
-  const mergedColumnTypes = (0, _extends2.default)({}, (0, _models.getGridDefaultColumnTypes)());
+  const mergedColumnTypes = (0, _extends2.default)({}, (0, _colDef.getGridDefaultColumnTypes)());
   Object.entries(customColumnTypes).forEach(([colType, colTypeDef]) => {
     if (mergedColumnTypes[colType]) {
       mergedColumnTypes[colType] = (0, _extends2.default)({}, mergedColumnTypes[colType], colTypeDef);
     } else {
-      mergedColumnTypes[colType] = (0, _extends2.default)({}, mergedColumnTypes[colTypeDef.extendType || _models.DEFAULT_GRID_COL_TYPE_KEY], colTypeDef);
+      mergedColumnTypes[colType] = (0, _extends2.default)({}, mergedColumnTypes[colTypeDef.extendType || _colDef.DEFAULT_GRID_COL_TYPE_KEY], colTypeDef);
     }
   });
   return mergedColumnTypes;
@@ -187,13 +193,68 @@ const hydrateColumnsWidth = (rawState, viewportInnerWidth) => {
 
 exports.hydrateColumnsWidth = hydrateColumnsWidth;
 let 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.
+ */
+
+const applyInitialState = (columnsState, initialState) => {
+  if (!initialState) {
+    return columnsState;
+  }
+
+  const {
+    orderedFields = [],
+    dimensions = {}
+  } = initialState;
+  const columnsWithUpdatedDimensions = Object.keys(dimensions);
+
+  if (columnsWithUpdatedDimensions.length === 0 && orderedFields.length === 0) {
+    return columnsState;
+  }
+
+  const orderedFieldsLookup = {};
+  const cleanOrderedFields = [];
+
+  for (let i = 0; i < orderedFields.length; i += 1) {
+    const 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);
+    }
+  }
+
+  const newOrderedFields = cleanOrderedFields.length === 0 ? columnsState.all : [...cleanOrderedFields, ...columnsState.all.filter(field => !orderedFieldsLookup[field])];
+  const newColumnLookup = (0, _extends2.default)({}, columnsState.lookup);
+
+  for (let i = 0; i < columnsWithUpdatedDimensions.length; i += 1) {
+    const field = columnsWithUpdatedDimensions[i];
+    const newColDef = (0, _extends2.default)({}, newColumnLookup[field], {
+      hasBeenResized: true
+    });
+    Object.entries(dimensions[field]).forEach(([key, value]) => {
+      newColDef[key] = value === -1 ? Infinity : value;
+    });
+    newColumnLookup[field] = newColDef;
+  }
+
+  const newColumnsState = {
+    all: newOrderedFields,
+    lookup: newColumnLookup
+  };
+  return newColumnsState;
+};
 /**
  * @deprecated Should have been internal only, you can inline the logic.
  */
 
+
+exports.applyInitialState = applyInitialState;
+
 const getGridColDef = (columnTypes, type) => {
   if (!type) {
-    return columnTypes[_models.DEFAULT_GRID_COL_TYPE_KEY];
+    return columnTypes[_colDef.DEFAULT_GRID_COL_TYPE_KEY];
   }
 
   if (process.env.NODE_ENV !== 'production') {
@@ -204,7 +265,7 @@ const getGridColDef = (columnTypes, type) => {
   }
 
   if (!columnTypes[type]) {
-    return columnTypes[_models.DEFAULT_GRID_COL_TYPE_KEY];
+    return columnTypes[_colDef.DEFAULT_GRID_COL_TYPE_KEY];
   }
 
   return columnTypes[type];
@@ -215,16 +276,18 @@ exports.getGridColDef = getGridColDef;
 const createColumnsState = ({
   apiRef,
   columnsToUpsert,
-  columnsTypes,
+  initialState,
+  columnTypes,
   currentColumnVisibilityModel = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef),
   shouldRegenColumnVisibilityModelFromColumns,
-  reset
+  keepOnlyColumnsToUpsert = false
 }) => {
   var _apiRef$current$getRo, _apiRef$current$getRo2, _apiRef$current, _apiRef$current$getRo3;
 
+  const isInsideStateInitializer = !apiRef.current.state.columns;
   let columnsStateWithoutColumnVisibilityModel;
 
-  if (reset) {
+  if (isInsideStateInitializer) {
     columnsStateWithoutColumnVisibilityModel = {
       all: [],
       lookup: {}
@@ -232,65 +295,133 @@ const createColumnsState = ({
   } else {
     const currentState = (0, _gridColumnsSelector.gridColumnsSelector)(apiRef.current.state);
     columnsStateWithoutColumnVisibilityModel = {
-      all: [...currentState.all],
-      lookup: (0, _extends2.default)({}, currentState.lookup)
+      all: keepOnlyColumnsToUpsert ? [] : [...currentState.all],
+      lookup: (0, _extends2.default)({}, currentState.lookup) // Will be cleaned later if keepOnlyColumnsToUpsert=true
+
     };
   }
 
+  let columnsToKeep = {};
+
+  if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
+    columnsToKeep = Object.keys(columnsStateWithoutColumnVisibilityModel.lookup).reduce((acc, key) => (0, _extends2.default)({}, acc, {
+      [key]: false
+    }), {});
+  }
+
   const columnsToUpsertLookup = {};
   columnsToUpsert.forEach(newColumn => {
-    columnsToUpsertLookup[newColumn.field] = true;
-
-    if (columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] == null) {
+    const {
+      field
+    } = newColumn;
+    columnsToUpsertLookup[field] = true;
+    columnsToKeep[field] = true;
+    let existingState = columnsStateWithoutColumnVisibilityModel.lookup[field];
+
+    if (existingState == null) {
       // New Column
-      columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] = (0, _extends2.default)({}, getGridColDef(columnsTypes, newColumn.type), newColumn);
-      columnsStateWithoutColumnVisibilityModel.all.push(newColumn.field);
-    } else {
-      columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] = (0, _extends2.default)({}, columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field], newColumn);
+      existingState = (0, _extends2.default)({}, getGridColDef(columnTypes, newColumn.type), {
+        // TODO v6: Inline `getGridColDef`
+        field,
+        hasBeenResized: false
+      });
+      columnsStateWithoutColumnVisibilityModel.all.push(field);
+    } else if (keepOnlyColumnsToUpsert) {
+      columnsStateWithoutColumnVisibilityModel.all.push(field);
     }
+
+    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] = (0, _extends2.default)({}, existingState, {
+      hide: newColumn.hide == null ? false : newColumn.hide
+    }, newColumn, {
+      hasBeenResized
+    });
   });
+
+  if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
+    Object.keys(columnsStateWithoutColumnVisibilityModel.lookup).forEach(field => {
+      if (!columnsToKeep[field]) {
+        delete columnsStateWithoutColumnVisibilityModel.lookup[field];
+      }
+    });
+  }
+
   const columnsLookupBeforePreProcessing = (0, _extends2.default)({}, columnsStateWithoutColumnVisibilityModel.lookup);
-  const columnsStateWithPreProcessing = apiRef.current.unstable_applyPreProcessors('hydrateColumns', columnsStateWithoutColumnVisibilityModel); // TODO v6: remove the sync between the columns `hide` option and the model.
+  const columnsStateWithPreProcessing = apiRef.current.unstable_applyPipeProcessors('hydrateColumns', columnsStateWithoutColumnVisibilityModel); // TODO v6: remove the sync between the columns `hide` option and the model.
 
   let columnVisibilityModel = {};
 
   if (shouldRegenColumnVisibilityModelFromColumns) {
-    if (reset) {
+    let hasModelChanged = false;
+    const newColumnVisibilityModel = (0, _extends2.default)({}, currentColumnVisibilityModel);
+
+    if (isInsideStateInitializer) {
       columnsStateWithPreProcessing.all.forEach(field => {
-        columnVisibilityModel[field] = !columnsStateWithoutColumnVisibilityModel.lookup[field].hide;
+        newColumnVisibilityModel[field] = !columnsStateWithoutColumnVisibilityModel.lookup[field].hide;
       });
-    } else {
-      const newColumnVisibilityModel = (0, _extends2.default)({}, currentColumnVisibilityModel);
-      let hasModelChanged = false;
-      columnsStateWithPreProcessing.all.forEach(field => {
-        var _currentColumnVisibil;
-
-        // 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;
-        }
-
-        const isVisibleBefore = (_currentColumnVisibil = currentColumnVisibilityModel[field]) != null ? _currentColumnVisibil : true;
-        const isVisibleAfter = !columnsStateWithPreProcessing.lookup[field].hide;
-
-        if (isVisibleAfter !== isVisibleBefore) {
+    } 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(field => {
+        if (!columnsStateWithPreProcessing.lookup[field]) {
+          delete newColumnVisibilityModel[field];
           hasModelChanged = true;
-          newColumnVisibilityModel[field] = isVisibleAfter;
         }
       });
+    }
 
-      if (hasModelChanged) {
-        columnVisibilityModel = newColumnVisibilityModel;
-      } else {
-        columnVisibilityModel = currentColumnVisibilityModel;
+    columnsStateWithPreProcessing.all.forEach(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.
+
+
+      let isVisibleBefore = currentColumnVisibilityModel[field];
+
+      if (isVisibleBefore === undefined) {
+        if (isInsideStateInitializer) {
+          isVisibleBefore = true;
+        } else {
+          const currentState = (0, _gridColumnsSelector.gridColumnsSelector)(apiRef.current.state);
+          isVisibleBefore = !!currentState.lookup[field];
+        }
       }
+
+      const isVisibleAfter = !columnsStateWithPreProcessing.lookup[field].hide;
+
+      if (isVisibleAfter !== isVisibleBefore) {
+        hasModelChanged = true;
+        newColumnVisibilityModel[field] = isVisibleAfter;
+      }
+    });
+
+    if (hasModelChanged || isInsideStateInitializer) {
+      columnVisibilityModel = newColumnVisibilityModel;
+    } else {
+      columnVisibilityModel = currentColumnVisibilityModel;
     }
   } else {
     columnVisibilityModel = currentColumnVisibilityModel;
   }
 
-  const columnsState = (0, _extends2.default)({}, columnsStateWithPreProcessing, {
+  const columnsStateWithPortableColumns = applyInitialState(columnsStateWithPreProcessing, initialState);
+  const columnsState = (0, _extends2.default)({}, columnsStateWithPortableColumns, {
     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);
@@ -298,8 +429,53 @@ const createColumnsState = ({
 
 exports.createColumnsState = createColumnsState;
 
-const setColumnsState = columnsState => state => (0, _extends2.default)({}, state, {
+const mergeColumnsState = columnsState => state => (0, _extends2.default)({}, state, {
   columns: columnsState
 });
 
-exports.setColumnsState = setColumnsState;
+exports.mergeColumnsState = mergeColumnsState;
+
+function getFirstNonSpannedColumnToRender({
+  firstColumnToRender,
+  apiRef,
+  firstRowToRender,
+  lastRowToRender,
+  visibleRows
+}) {
+  let firstNonSpannedColumnToRender = firstColumnToRender;
+
+  for (let i = firstRowToRender; i < lastRowToRender; i += 1) {
+    const row = visibleRows[i];
+
+    if (row) {
+      const rowId = visibleRows[i].id;
+      const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, firstColumnToRender);
+
+      if (cellColSpanInfo && cellColSpanInfo.spannedByColSpan) {
+        firstNonSpannedColumnToRender = cellColSpanInfo.leftVisibleCellIndex;
+      }
+    }
+  }
+
+  return firstNonSpannedColumnToRender;
+}
+
+function getFirstColumnIndexToRender({
+  firstColumnIndex,
+  minColumnIndex,
+  columnBuffer,
+  firstRowToRender,
+  lastRowToRender,
+  apiRef,
+  visibleRows
+}) {
+  const initialFirstColumnToRender = Math.max(firstColumnIndex - columnBuffer, minColumnIndex);
+  const firstColumnToRender = getFirstNonSpannedColumnToRender({
+    firstColumnToRender: initialFirstColumnToRender,
+    apiRef,
+    firstRowToRender,
+    lastRowToRender,
+    visibleRows
+  });
+  return firstColumnToRender;
+}

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

@@ -0,0 +1,130 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridColumnSpanning = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useGridApiMethod = require("../../utils/useGridApiMethod");
+
+var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+
+var _gridEvents = require("../../../models/events/gridEvents");
+
+/**
+ * @requires useGridColumns (method, event)
+ * @requires useGridParamsApi (method)
+ */
+const useGridColumnSpanning = apiRef => {
+  const lookup = _react.default.useRef({});
+
+  const setCellColSpanInfo = _react.default.useCallback((rowId, columnIndex, cellColSpanInfo) => {
+    const sizes = lookup.current;
+
+    if (!sizes[rowId]) {
+      sizes[rowId] = {};
+    }
+
+    sizes[rowId][columnIndex] = cellColSpanInfo;
+  }, []);
+
+  const getCellColSpanInfo = _react.default.useCallback((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.
+
+
+  const calculateCellColSpan = _react.default.useCallback(params => {
+    const {
+      columnIndex,
+      rowId,
+      minFirstColumnIndex,
+      maxLastColumnIndex
+    } = params;
+    const visibleColumns = apiRef.current.getVisibleColumns();
+    const columnsLength = visibleColumns.length;
+    const column = visibleColumns[columnIndex];
+    const 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
+      };
+    }
+
+    let width = column.computedWidth;
+
+    for (let j = 1; j < colSpan; j += 1) {
+      const nextColumnIndex = columnIndex + j; // Cells should be spanned only within their column section (left-pinned, right-pinned and unpinned).
+
+      if (nextColumnIndex >= minFirstColumnIndex && nextColumnIndex < maxLastColumnIndex) {
+        const 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,
+          width
+        }
+      });
+    }
+
+    return {
+      colSpan
+    };
+  }, [apiRef, setCellColSpanInfo]); // Calculate `colSpan` for each cell in the row
+
+
+  const calculateColSpan = _react.default.useCallback(({
+    rowId,
+    minFirstColumn,
+    maxLastColumn
+  }) => {
+    for (let i = minFirstColumn; i < maxLastColumn; i += 1) {
+      const cellProps = calculateCellColSpan({
+        columnIndex: i,
+        rowId,
+        minFirstColumnIndex: minFirstColumn,
+        maxLastColumnIndex: maxLastColumn
+      });
+
+      if (cellProps.colSpan > 1) {
+        i += cellProps.colSpan - 1;
+      }
+    }
+  }, [calculateCellColSpan]);
+
+  const columnSpanningApi = {
+    unstable_getCellColSpanInfo: getCellColSpanInfo,
+    unstable_calculateColSpan: calculateColSpan
+  };
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, columnSpanningApi, 'GridColumnSpanningAPI');
+
+  const handleColumnReorderChange = _react.default.useCallback(() => {
+    // `colSpan` needs to be recalculated after column reordering
+    lookup.current = {};
+  }, []);
+
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.columnOrderChange, handleColumnReorderChange);
+};
+
+exports.useGridColumnSpanning = useGridColumnSpanning;