@mui/x-data-grid 5.4.0 → 5.6.0

package/modern/hooks/features/columns/gridColumnsSelector.js

@@ -0,0 +1,147 @@
+import { createSelector } from '../../../utils/createSelector';
+
+/**
+ * @category Columns
+ * @deprecated Use the selector returning exactly the value you are looking for.
+ * @ignore - do not document.
+ * TODO v6: Rename `gridColumnsStateSelector`
+ */
+export const gridColumnsSelector = state => state.columns;
+/**
+ * Get the field of each column.
+ * @category Columns
+ */
+
+export const gridColumnFieldsSelector = createSelector(gridColumnsSelector, columnsState => columnsState.all);
+/**
+ * Get the columns as a lookup (an object containing the field for keys and the definition for values).
+ * @category Columns
+ */
+
+export const gridColumnLookupSelector = createSelector(gridColumnsSelector, columnsState => columnsState.lookup);
+/**
+ * Get the columns as an array.
+ * @category Columns
+ */
+
+export const gridColumnDefinitionsSelector = createSelector(gridColumnFieldsSelector, gridColumnLookupSelector, (allFields, lookup) => allFields.map(field => lookup[field]));
+/**
+ * Get the column visibility model, containing the visibility status of each column.
+ * If a column is not registered in the model, it is visible.
+ * @category Visible Columns
+ */
+
+export const gridColumnVisibilityModelSelector = createSelector(gridColumnsSelector, columnsState => columnsState.columnVisibilityModel);
+/**
+ * Get the visible columns as a lookup (an object containing the field for keys and the definition for values).
+ * @category Visible Columns
+ */
+
+export const gridVisibleColumnDefinitionsSelector = createSelector(gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, (columns, columnVisibilityModel) => columns.filter(column => columnVisibilityModel[column.field] !== false));
+/**
+ * Get the field of each visible column.
+ * @category Visible Columns
+ */
+
+export const gridVisibleColumnFieldsSelector = createSelector(gridVisibleColumnDefinitionsSelector, visibleColumns => visibleColumns.map(column => column.field));
+/**
+ * Get the left position in pixel of each visible columns relative to the left of the first column.
+ * @category Visible Columns
+ */
+
+export const gridColumnPositionsSelector = createSelector(gridVisibleColumnDefinitionsSelector, visibleColumns => {
+  const positions = [];
+  let currentPosition = 0;
+
+  for (let i = 0; i < visibleColumns.length; i += 1) {
+    positions.push(currentPosition);
+    currentPosition += visibleColumns[i].computedWidth;
+  }
+
+  return positions;
+});
+/**
+ * Get the summed width of all the visible columns.
+ * @category Visible Columns
+ */
+
+export const gridColumnsTotalWidthSelector = createSelector(gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector, (visibleColumns, positions) => {
+  const colCount = visibleColumns.length;
+
+  if (colCount === 0) {
+    return 0;
+  }
+
+  return positions[colCount - 1] + visibleColumns[colCount - 1].computedWidth;
+});
+/**
+ * Get the filterable columns as an array.
+ * @category Columns
+ */
+
+export const gridFilterableColumnDefinitionsSelector = createSelector(gridColumnDefinitionsSelector, columns => columns.filter(col => col.filterable));
+/**
+ * Get the filterable columns as a lookup (an object containing the field for keys and the definition for values).
+ * @category Columns
+ */
+
+export const gridFilterableColumnLookupSelector = createSelector(gridColumnDefinitionsSelector, columns => columns.reduce((acc, col) => {
+  if (col.filterable) {
+    acc[col.field] = col;
+  }
+
+  return acc;
+}, {}));
+/**
+ * @category Columns
+ * @deprecated Use `gridColumnFieldsSelector` instead.
+ * @ignore - do not document.
+ */
+
+export const allGridColumnsFieldsSelector = gridColumnFieldsSelector;
+/**
+ * @category Columns
+ * @deprecated Use `gridColumnDefinitionsSelector` instead.
+ * @ignore - do not document.
+ */
+
+export const allGridColumnsSelector = gridColumnDefinitionsSelector;
+/**
+ * @category Visible Columns
+ * @deprecated Use `gridVisibleColumnDefinitionsSelector` instead.
+ * @ignore - do not document.
+ */
+
+export const visibleGridColumnsSelector = gridVisibleColumnDefinitionsSelector;
+/**
+ * @category Columns
+ * @deprecated Use `gridFilterableColumnDefinitionsSelector` instead.
+ * @ignore - do not document.
+ */
+
+export const filterableGridColumnsSelector = gridFilterableColumnDefinitionsSelector;
+/**
+ * @category Columns
+ * @deprecated Use `gridFilterableColumnLookupSelector` instead (not the same return format).
+ * @ignore - do not document.
+ */
+
+export const filterableGridColumnsIdsSelector = createSelector(gridFilterableColumnDefinitionsSelector, columns => columns.map(col => col.field));
+/**
+ * Get the amount of visible columns.
+ * @category Visible Columns
+ * @deprecated Use the length of `gridVisibleColumnDefinitionsSelector` instead.
+ * @ignore - do not document.
+ */
+
+export const visibleGridColumnsLengthSelector = createSelector(gridVisibleColumnDefinitionsSelector, visibleColumns => visibleColumns.length);
+/**
+ * @category Visible Columns
+ * @deprecated Use `gridColumnsTotalWidthSelector` or `gridColumnPositionsSelector` instead.
+ * @ignore - do not document.
+ */
+
+export const gridColumnsMetaSelector = createSelector(gridColumnPositionsSelector, gridColumnsTotalWidthSelector, (positions, totalWidth) => ({
+  totalWidth,
+  positions
+}));

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

@@ -0,0 +1,275 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { DEFAULT_GRID_COL_TYPE_KEY, getGridDefaultColumnTypes } from '../../../models';
+import { gridColumnsSelector, gridColumnVisibilityModelSelector } from './gridColumnsSelector';
+import { clamp } from '../../../utils/utils';
+export const computeColumnTypes = (customColumnTypes = {}) => {
+  const allColumnTypes = _extends({}, getGridDefaultColumnTypes(), customColumnTypes);
+
+  const mergedColumnTypes = {};
+  Object.entries(allColumnTypes).forEach(([colType, colTypeDef]) => {
+    colTypeDef = _extends({}, allColumnTypes[colTypeDef.extendType || DEFAULT_GRID_COL_TYPE_KEY], colTypeDef);
+    mergedColumnTypes[colType] = colTypeDef;
+  });
+  return mergedColumnTypes;
+};
+/**
+ * Computes width for flex columns.
+ * Based on CSS Flexbox specification:
+ * https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths
+ */
+
+export function computeFlexColumnsWidth({
+  initialFreeSpace,
+  totalFlexUnits,
+  flexColumns
+}) {
+  const flexColumnsLookup = {
+    all: {},
+    frozenFields: [],
+    freeze: field => {
+      const value = flexColumnsLookup.all[field];
+
+      if (value && value.frozen !== true) {
+        flexColumnsLookup.all[field].frozen = true;
+        flexColumnsLookup.frozenFields.push(field);
+      }
+    }
+  }; // Step 5 of https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths
+
+  function loopOverFlexItems() {
+    // 5a: If all the flex items on the line are frozen, free space has been distributed.
+    if (flexColumnsLookup.frozenFields.length === flexColumns.length) {
+      return;
+    }
+
+    const violationsLookup = {
+      min: {},
+      max: {}
+    };
+    let remainingFreeSpace = initialFreeSpace;
+    let flexUnits = totalFlexUnits;
+    let totalViolation = 0; // 5b: Calculate the remaining free space
+
+    flexColumnsLookup.frozenFields.forEach(field => {
+      remainingFreeSpace -= flexColumnsLookup.all[field].computedWidth;
+      flexUnits -= flexColumnsLookup.all[field].flex;
+    });
+
+    for (let i = 0; i < flexColumns.length; i += 1) {
+      const column = flexColumns[i];
+
+      if (flexColumnsLookup.all[column.field] && flexColumnsLookup.all[column.field].frozen === true) {
+        // eslint-disable-next-line no-continue
+        continue;
+      } // 5c: Distribute remaining free space proportional to the flex factors
+
+
+      const widthPerFlexUnit = remainingFreeSpace / flexUnits;
+      let computedWidth = widthPerFlexUnit * column.flex; // 5d: Fix min/max violations
+
+      if (computedWidth < column.minWidth) {
+        totalViolation += column.minWidth - computedWidth;
+        computedWidth = column.minWidth;
+        violationsLookup.min[column.field] = true;
+      } else if (computedWidth > column.maxWidth) {
+        totalViolation += column.maxWidth - computedWidth;
+        computedWidth = column.maxWidth;
+        violationsLookup.max[column.field] = true;
+      }
+
+      flexColumnsLookup.all[column.field] = {
+        frozen: false,
+        computedWidth,
+        flex: column.flex
+      };
+    } // 5e: Freeze over-flexed items
+
+
+    if (totalViolation < 0) {
+      // Freeze all the items with max violations
+      Object.keys(violationsLookup.max).forEach(field => {
+        flexColumnsLookup.freeze(field);
+      });
+    } else if (totalViolation > 0) {
+      // Freeze all the items with min violations
+      Object.keys(violationsLookup.min).forEach(field => {
+        flexColumnsLookup.freeze(field);
+      });
+    } else {
+      // Freeze all items
+      flexColumns.forEach(({
+        field
+      }) => {
+        flexColumnsLookup.freeze(field);
+      });
+    } // 5f: Return to the start of this loop
+
+
+    loopOverFlexItems();
+  }
+
+  loopOverFlexItems();
+  return flexColumnsLookup.all;
+}
+/**
+ * Compute the `computedWidth` (ie: the width the column should have during rendering) based on the `width` / `flex` / `minWidth` / `maxWidth` properties of `GridColDef`.
+ * The columns already have been merged with there `type` default values for `minWidth`, `maxWidth` and `width`, thus the `!` for those properties below.
+ * TODO: Unit test this function in depth and only keep basic cases for the whole grid testing.
+ * TODO: Improve the `GridColDef` typing to reflect the fact that `minWidth` / `maxWidth` and `width` can't be null after the merge with the `type` default values.
+ */
+
+export const hydrateColumnsWidth = (rawState, viewportInnerWidth) => {
+  const columnsLookup = {};
+  let totalFlexUnits = 0;
+  let widthAllocatedBeforeFlex = 0;
+  const flexColumns = []; // For the non-flex columns, compute their width
+  // For the flex columns, compute there minimum width and how much width must be allocated during the flex allocation
+
+  rawState.all.forEach(columnField => {
+    const newColumn = _extends({}, rawState.lookup[columnField]);
+
+    if (rawState.columnVisibilityModel[columnField] === false) {
+      newColumn.computedWidth = 0;
+    } else {
+      let computedWidth;
+
+      if (newColumn.flex && newColumn.flex > 0) {
+        totalFlexUnits += newColumn.flex;
+        computedWidth = 0;
+        flexColumns.push(newColumn);
+      } else {
+        computedWidth = clamp(newColumn.width, newColumn.minWidth, newColumn.maxWidth);
+      }
+
+      widthAllocatedBeforeFlex += computedWidth;
+      newColumn.computedWidth = computedWidth;
+    }
+
+    columnsLookup[columnField] = newColumn;
+  });
+  const initialFreeSpace = Math.max(viewportInnerWidth - widthAllocatedBeforeFlex, 0); // Allocate the remaining space to the flex columns
+
+  if (totalFlexUnits > 0 && viewportInnerWidth > 0) {
+    const computedColumnWidths = computeFlexColumnsWidth({
+      initialFreeSpace,
+      totalFlexUnits,
+      flexColumns
+    });
+    Object.keys(computedColumnWidths).forEach(field => {
+      columnsLookup[field].computedWidth = computedColumnWidths[field].computedWidth;
+    });
+  }
+
+  return _extends({}, rawState, {
+    lookup: columnsLookup
+  });
+};
+let columnTypeWarnedOnce = false;
+/**
+ * @deprecated Should have been internal only, you can inline the logic.
+ */
+
+export const getGridColDef = (columnTypes, type) => {
+  if (!type) {
+    return columnTypes[DEFAULT_GRID_COL_TYPE_KEY];
+  }
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (!columnTypeWarnedOnce && !columnTypes[type]) {
+      console.warn([`MUI: The column type "${type}" you are using is not supported.`, `Column type "string" is being used instead.`].join('\n'));
+      columnTypeWarnedOnce = true;
+    }
+  }
+
+  if (!columnTypes[type]) {
+    return columnTypes[DEFAULT_GRID_COL_TYPE_KEY];
+  }
+
+  return columnTypes[type];
+};
+export const createColumnsState = ({
+  apiRef,
+  columnsToUpsert,
+  columnsTypes,
+  currentColumnVisibilityModel = gridColumnVisibilityModelSelector(apiRef),
+  shouldRegenColumnVisibilityModelFromColumns,
+  reset
+}) => {
+  let columnsStateWithoutColumnVisibilityModel;
+
+  if (reset) {
+    columnsStateWithoutColumnVisibilityModel = {
+      all: [],
+      lookup: {}
+    };
+  } else {
+    const currentState = gridColumnsSelector(apiRef.current.state);
+    columnsStateWithoutColumnVisibilityModel = {
+      all: [...currentState.all],
+      lookup: _extends({}, currentState.lookup)
+    };
+  }
+
+  const columnsToUpsertLookup = {};
+  columnsToUpsert.forEach(newColumn => {
+    columnsToUpsertLookup[newColumn.field] = true;
+
+    if (columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] == 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);
+    }
+  });
+
+  const columnsLookupBeforePreProcessing = _extends({}, columnsStateWithoutColumnVisibilityModel.lookup);
+
+  const columnsStateWithPreProcessing = apiRef.current.unstable_applyPreProcessors('hydrateColumns', columnsStateWithoutColumnVisibilityModel); // TODO v6: remove the sync between the columns `hide` option and the model.
+
+  let columnVisibilityModel = {};
+
+  if (shouldRegenColumnVisibilityModelFromColumns) {
+    if (reset) {
+      columnsStateWithPreProcessing.all.forEach(field => {
+        columnVisibilityModel[field] = !columnsStateWithoutColumnVisibilityModel.lookup[field].hide;
+      });
+    } else {
+      const newColumnVisibilityModel = _extends({}, currentColumnVisibilityModel);
+
+      let hasModelChanged = false;
+      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;
+        }
+
+        const isVisibleBefore = currentColumnVisibilityModel[field] ?? true;
+        const isVisibleAfter = !columnsStateWithPreProcessing.lookup[field].hide;
+
+        if (isVisibleAfter !== isVisibleBefore) {
+          hasModelChanged = true;
+          newColumnVisibilityModel[field] = isVisibleAfter;
+        }
+      });
+
+      if (hasModelChanged) {
+        columnVisibilityModel = newColumnVisibilityModel;
+      } else {
+        columnVisibilityModel = currentColumnVisibilityModel;
+      }
+    }
+  } else {
+    columnVisibilityModel = currentColumnVisibilityModel;
+  }
+
+  const columnsState = _extends({}, columnsStateWithPreProcessing, {
+    columnVisibilityModel
+  });
+
+  return hydrateColumnsWidth(columnsState, apiRef.current.getRootDimensions?.()?.viewportInnerSize.width ?? 0);
+};
+export const setColumnsState = columnsState => state => _extends({}, state, {
+  columns: columnsState
+});

package/modern/hooks/features/columns/index.js

@@ -0,0 +1,2 @@
+export * from './gridColumnsSelector';
+export { getGridColDef } from './gridColumnsUtils';