@mui/x-data-grid 6.0.0-alpha.0 → 6.0.0-alpha.2

package/node/hooks/features/rows/gridRowsUtils.js

@@ -5,24 +5,44 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.buildRootGroup = exports.GRID_ROOT_GROUP_ID = void 0;
 exports.calculatePinnedRowsHeight = calculatePinnedRowsHeight;
 exports.checkGridRowIdIsValid = checkGridRowIdIsValid;
-exports.getTreeNodeDescendants = exports.getRowsStateFromCache = exports.getRowIdFromRowModel = exports.createRowsInternalCache = void 0;
+exports.createRowsInternalCache = void 0;
+exports.getMinimalContentHeight = getMinimalContentHeight;
+exports.updateCacheWithNewRows = exports.isAutoGeneratedRow = exports.getTreeNodeDescendants = exports.getTopLevelRowCount = exports.getRowsStateFromCache = exports.getRowIdFromRowModel = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
 var _gridRowsSelector = require("./gridRowsSelector");
 
-const _excluded = ["rowsBeforePartialUpdates"];
+var _densitySelector = require("../density/densitySelector");
+
+const GRID_ROOT_GROUP_ID = `auto-generated-group-node-root`;
+exports.GRID_ROOT_GROUP_ID = GRID_ROOT_GROUP_ID;
 
+const buildRootGroup = () => ({
+  type: 'group',
+  id: GRID_ROOT_GROUP_ID,
+  depth: -1,
+  groupingField: null,
+  groupingKey: null,
+  isAutoGenerated: true,
+  children: [],
+  childrenFromPath: {},
+  childrenExpanded: true,
+  parent: null
+});
 /**
  * A helper function to check if the id provided is valid.
  * @param {GridRowId} id Id as [[GridRowId]].
  * @param {GridRowModel | Partial<GridRowModel>} row Row as [[GridRowModel]].
  * @param {string} detailErrorMessage A custom error message to display for invalid IDs
  */
+
+
+exports.buildRootGroup = buildRootGroup;
+
 function checkGridRowIdIsValid(id, row, detailErrorMessage = 'A row was provided without id in the rows prop:') {
   if (id == null) {
     throw new Error(['MUI: The data grid component requires all rows to have a unique `id` property.', 'Alternatively, you can use the `getRowId` prop to specify a custom id for each row.', detailErrorMessage, JSON.stringify(row)].join('\n'));
@@ -42,71 +62,119 @@ const createRowsInternalCache = ({
   getRowId,
   loading
 }) => {
-  const cache = {
-    rowsBeforePartialUpdates: rows,
-    loadingPropBeforePartialUpdates: loading,
-    idRowsLookup: {},
-    idToIdLookup: {},
-    ids: []
+  const updates = {
+    type: 'full',
+    rows: []
   };
+  const dataRowIdToModelLookup = {};
+  const dataRowIdToIdLookup = {};
 
   for (let i = 0; i < rows.length; i += 1) {
-    const row = rows[i];
-    const id = getRowIdFromRowModel(row, getRowId);
-    cache.idRowsLookup[id] = row;
-    cache.idToIdLookup[id] = id;
-    cache.ids.push(id);
+    const model = rows[i];
+    const id = getRowIdFromRowModel(model, getRowId);
+    dataRowIdToModelLookup[id] = model;
+    dataRowIdToIdLookup[id] = id;
+    updates.rows.push(id);
   }
 
-  return cache;
+  return {
+    rowsBeforePartialUpdates: rows,
+    loadingPropBeforePartialUpdates: loading,
+    updates,
+    dataRowIdToIdLookup,
+    dataRowIdToModelLookup
+  };
 };
 
 exports.createRowsInternalCache = createRowsInternalCache;
 
+const getTopLevelRowCount = ({
+  tree,
+  rowCountProp = 0
+}) => {
+  const rootGroupNode = tree[GRID_ROOT_GROUP_ID];
+  return Math.max(rowCountProp, rootGroupNode.children.length + (rootGroupNode.footerId == null ? 0 : 1));
+};
+
+exports.getTopLevelRowCount = getTopLevelRowCount;
+
 const getRowsStateFromCache = ({
   apiRef,
+  rowCountProp = 0,
+  loadingProp,
   previousTree,
-  rowCountProp,
-  loadingProp
+  previousTreeDepths
 }) => {
-  const _apiRef$current$unsta = apiRef.current.unstable_caches.rows,
-        cacheForGrouping = (0, _objectWithoutPropertiesLoose2.default)(_apiRef$current$unsta, _excluded);
-  const rowCount = rowCountProp != null ? rowCountProp : 0;
-  const groupingResponse = apiRef.current.unstable_applyStrategyProcessor('rowTreeCreation', (0, _extends2.default)({}, cacheForGrouping, {
-    previousTree
-  }));
-  const processedGroupingResponse = apiRef.current.unstable_applyPipeProcessors('hydrateRows', groupingResponse);
-  const dataTopLevelRowCount = processedGroupingResponse.treeDepth === 1 ? processedGroupingResponse.ids.length : Object.values(processedGroupingResponse.tree).filter(node => node.parent == null && !node.isPinned).length;
-  return (0, _extends2.default)({}, processedGroupingResponse, {
-    groupingResponseBeforeRowHydration: groupingResponse,
-    loading: loadingProp,
-    totalRowCount: Math.max(rowCount, processedGroupingResponse.ids.length),
-    totalTopLevelRowCount: Math.max(rowCount, dataTopLevelRowCount)
+  const cache = apiRef.current.unstable_caches.rows; // 1. Apply the "rowTreeCreation" family processing.
+
+  const {
+    tree: unProcessedTree,
+    treeDepths: unProcessedTreeDepths,
+    dataRowIds: unProcessedDataRowIds,
+    groupingName
+  } = apiRef.current.unstable_applyStrategyProcessor('rowTreeCreation', {
+    previousTree,
+    previousTreeDepths,
+    updates: cache.updates,
+    dataRowIdToIdLookup: cache.dataRowIdToIdLookup,
+    dataRowIdToModelLookup: cache.dataRowIdToModelLookup
+  }); // 2. Apply the "hydrateRows" pipe-processing.
+
+  const groupingParamsWithHydrateRows = apiRef.current.unstable_applyPipeProcessors('hydrateRows', {
+    tree: unProcessedTree,
+    treeDepths: unProcessedTreeDepths,
+    dataRowIdToIdLookup: cache.dataRowIdToIdLookup,
+    dataRowIds: unProcessedDataRowIds,
+    dataRowIdToModelLookup: cache.dataRowIdToModelLookup
+  }); // 3. Reset the cache updates
+
+  apiRef.current.unstable_caches.rows.updates = {
+    type: 'partial',
+    actions: {
+      insert: [],
+      modify: [],
+      remove: []
+    },
+    idToActionLookup: {}
+  };
+  return (0, _extends2.default)({}, groupingParamsWithHydrateRows, {
+    totalRowCount: Math.max(rowCountProp, groupingParamsWithHydrateRows.dataRowIds.length),
+    totalTopLevelRowCount: getTopLevelRowCount({
+      tree: groupingParamsWithHydrateRows.tree,
+      rowCountProp
+    }),
+    groupingName,
+    loading: loadingProp
   });
 };
 
 exports.getRowsStateFromCache = getRowsStateFromCache;
 
-const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows) => {
-  var _tree$parentId;
+const isAutoGeneratedRow = rowNode => rowNode.type === 'skeletonRow' || rowNode.type === 'footer' || rowNode.type === 'group' && rowNode.isAutoGenerated || rowNode.type === 'pinnedRow' && rowNode.isAutoGenerated;
+
+exports.isAutoGeneratedRow = isAutoGeneratedRow;
 
-  const children = (_tree$parentId = tree[parentId]) == null ? void 0 : _tree$parentId.children;
+const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows) => {
+  const node = tree[parentId];
 
-  if (children == null) {
+  if (node.type !== 'group') {
     return [];
   }
 
   const validDescendants = [];
 
-  for (let i = 0; i < children.length; i += 1) {
-    const child = children[i];
-    const childNode = tree[child];
+  for (let i = 0; i < node.children.length; i += 1) {
+    const child = node.children[i];
 
-    if (!skipAutoGeneratedRows || !childNode.isAutoGenerated) {
+    if (!skipAutoGeneratedRows || !isAutoGeneratedRow(tree[child])) {
       validDescendants.push(child);
     }
 
-    validDescendants.push(...getTreeNodeDescendants(tree, childNode.id, skipAutoGeneratedRows));
+    validDescendants.push(...getTreeNodeDescendants(tree, child, skipAutoGeneratedRows));
+  }
+
+  if (!skipAutoGeneratedRows && node.footerId != null) {
+    validDescendants.push(node.footerId);
   }
 
   return validDescendants;
@@ -114,6 +182,132 @@ const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows) => {
 
 exports.getTreeNodeDescendants = getTreeNodeDescendants;
 
+const updateCacheWithNewRows = ({
+  previousCache,
+  getRowId,
+  updates
+}) => {
+  var _previousCache$update, _previousCache$update2, _previousCache$update3;
+
+  if (previousCache.updates.type === 'full') {
+    throw new Error('MUI: Unable to prepare a partial update if a full update is not applied yet');
+  } // Remove duplicate updates.
+  // A server can batch updates, and send several updates for the same row in one fn call.
+
+
+  const uniqueUpdates = new Map();
+  updates.forEach(update => {
+    const id = getRowIdFromRowModel(update, getRowId, 'A row was provided without id when calling updateRows():');
+
+    if (uniqueUpdates.has(id)) {
+      uniqueUpdates.set(id, (0, _extends2.default)({}, uniqueUpdates.get(id), update));
+    } else {
+      uniqueUpdates.set(id, update);
+    }
+  });
+  const partialUpdates = {
+    type: 'partial',
+    actions: {
+      insert: [...((_previousCache$update = previousCache.updates.actions.insert) != null ? _previousCache$update : [])],
+      modify: [...((_previousCache$update2 = previousCache.updates.actions.modify) != null ? _previousCache$update2 : [])],
+      remove: [...((_previousCache$update3 = previousCache.updates.actions.remove) != null ? _previousCache$update3 : [])]
+    },
+    idToActionLookup: (0, _extends2.default)({}, previousCache.updates.idToActionLookup)
+  };
+  const dataRowIdToModelLookup = (0, _extends2.default)({}, previousCache.dataRowIdToModelLookup);
+  const dataRowIdToIdLookup = (0, _extends2.default)({}, previousCache.dataRowIdToIdLookup);
+  const alreadyAppliedActionsToRemove = {
+    insert: {},
+    modify: {},
+    remove: {}
+  }; // Depending on the action already applied to the data row,
+  // We might want drop the already-applied-update.
+  // For instance:
+  // - if you delete then insert, then you don't want to apply the deletion in the tree.
+  // - if you insert, then modify, then you just want to apply the insertion in the tree.
+
+  uniqueUpdates.forEach((partialRow, id) => {
+    const actionAlreadyAppliedToRow = partialUpdates.idToActionLookup[id]; // Action === "delete"
+    // eslint-disable-next-line no-underscore-dangle
+
+    if (partialRow._action === 'delete') {
+      // If the data row has been removed since the last state update,
+      // Then do nothing.
+      if (actionAlreadyAppliedToRow === 'remove' || !dataRowIdToModelLookup[id]) {
+        return;
+      } // If the data row has been inserted / modified since the last state update,
+      // Then drop this "insert" / "modify" update.
+
+
+      if (actionAlreadyAppliedToRow != null) {
+        alreadyAppliedActionsToRemove[actionAlreadyAppliedToRow][id] = true;
+      } // Remove the data row from the lookups and add it to the "delete" update.
+
+
+      partialUpdates.actions.remove.push(id);
+      delete dataRowIdToModelLookup[id];
+      delete dataRowIdToIdLookup[id];
+      return;
+    }
+
+    const oldRow = dataRowIdToModelLookup[id]; // Action === "modify"
+
+    if (oldRow) {
+      // If the data row has been removed since the last state update,
+      // Then drop this "remove" update and add it to the "modify" update instead.
+      if (actionAlreadyAppliedToRow === 'remove') {
+        alreadyAppliedActionsToRemove.remove[id] = true;
+        partialUpdates.actions.modify.push(id);
+      } // If the date has not been inserted / modified since the last state update,
+      // Then add it to the "modify" update (if it has been inserted it should just remain "inserted").
+      else if (actionAlreadyAppliedToRow == null) {
+        partialUpdates.actions.modify.push(id);
+      } // Update the data row lookups.
+
+
+      dataRowIdToModelLookup[id] = (0, _extends2.default)({}, oldRow, partialRow);
+      return;
+    } // Action === "insert"
+    // If the data row has been removed since the last state update,
+    // Then drop the "remove" update and add it to the "insert" update instead.
+
+
+    if (actionAlreadyAppliedToRow === 'remove') {
+      alreadyAppliedActionsToRemove.remove[id] = true;
+      partialUpdates.actions.insert.push(id);
+    } // If the data row has not been inserted since the last state update,
+    // Then add it to the "insert" update.
+    // `actionAlreadyAppliedToRow` can't be equal to "modify", otherwise we would have an `oldRow` above.
+    else if (actionAlreadyAppliedToRow == null) {
+      partialUpdates.actions.insert.push(id);
+    } // Update the data row lookups.
+
+
+    dataRowIdToModelLookup[id] = partialRow;
+    dataRowIdToIdLookup[id] = id;
+  });
+  const actionTypeWithActionsToRemove = Object.keys(alreadyAppliedActionsToRemove);
+
+  for (let i = 0; i < actionTypeWithActionsToRemove.length; i += 1) {
+    const actionType = actionTypeWithActionsToRemove[i];
+    const idsToRemove = alreadyAppliedActionsToRemove[actionType];
+
+    if (Object.keys(idsToRemove).length > 0) {
+      partialUpdates.actions[actionType] = partialUpdates.actions[actionType].filter(id => !idsToRemove[id]);
+    }
+  }
+
+  return {
+    dataRowIdToModelLookup,
+    dataRowIdToIdLookup,
+    updates: partialUpdates,
+    rowsBeforePartialUpdates: previousCache.rowsBeforePartialUpdates,
+    loadingPropBeforePartialUpdates: previousCache.loadingPropBeforePartialUpdates
+  };
+};
+
+exports.updateCacheWithNewRows = updateCacheWithNewRows;
+
 function calculatePinnedRowsHeight(apiRef) {
   var _pinnedRows$top, _pinnedRows$bottom;
 
@@ -130,4 +324,9 @@ function calculatePinnedRowsHeight(apiRef) {
     top: topPinnedRowsHeight,
     bottom: bottomPinnedRowsHeight
   };
+}
+
+function getMinimalContentHeight(apiRef) {
+  const rowHeight = (0, _densitySelector.gridDensityRowHeightSelector)(apiRef);
+  return 2 * rowHeight;
 }

package/node/hooks/features/rows/index.js

@@ -9,19 +9,33 @@ var _exportNames = {
   gridRowsLoadingSelector: true,
   gridTopLevelRowCountSelector: true,
   gridRowsLookupSelector: true,
-  gridRowsIdToIdLookupSelector: true,
+  gridRowsDataRowIdToIdLookupSelector: true,
   gridRowTreeSelector: true,
   gridRowGroupingNameSelector: true,
-  gridRowTreeDepthSelector: true,
-  gridRowIdsSelector: true,
+  gridRowTreeDepthsSelector: true,
+  gridRowMaximumTreeDepthSelector: true,
+  gridDataRowIdsSelector: true,
+  GRID_ROOT_GROUP_ID: true,
   checkGridRowIdIsValid: true
 };
+Object.defineProperty(exports, "GRID_ROOT_GROUP_ID", {
+  enumerable: true,
+  get: function () {
+    return _gridRowsUtils.GRID_ROOT_GROUP_ID;
+  }
+});
 Object.defineProperty(exports, "checkGridRowIdIsValid", {
   enumerable: true,
   get: function () {
     return _gridRowsUtils.checkGridRowIdIsValid;
   }
 });
+Object.defineProperty(exports, "gridDataRowIdsSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridRowsSelector.gridDataRowIdsSelector;
+  }
+});
 Object.defineProperty(exports, "gridRowCountSelector", {
   enumerable: true,
   get: function () {
@@ -34,16 +48,16 @@ Object.defineProperty(exports, "gridRowGroupingNameSelector", {
     return _gridRowsSelector.gridRowGroupingNameSelector;
   }
 });
-Object.defineProperty(exports, "gridRowIdsSelector", {
+Object.defineProperty(exports, "gridRowMaximumTreeDepthSelector", {
   enumerable: true,
   get: function () {
-    return _gridRowsSelector.gridRowIdsSelector;
+    return _gridRowsSelector.gridRowMaximumTreeDepthSelector;
   }
 });
-Object.defineProperty(exports, "gridRowTreeDepthSelector", {
+Object.defineProperty(exports, "gridRowTreeDepthsSelector", {
   enumerable: true,
   get: function () {
-    return _gridRowsSelector.gridRowTreeDepthSelector;
+    return _gridRowsSelector.gridRowTreeDepthsSelector;
   }
 });
 Object.defineProperty(exports, "gridRowTreeSelector", {
@@ -52,10 +66,10 @@ Object.defineProperty(exports, "gridRowTreeSelector", {
     return _gridRowsSelector.gridRowTreeSelector;
   }
 });
-Object.defineProperty(exports, "gridRowsIdToIdLookupSelector", {
+Object.defineProperty(exports, "gridRowsDataRowIdToIdLookupSelector", {
   enumerable: true,
   get: function () {
-    return _gridRowsSelector.gridRowsIdToIdLookupSelector;
+    return _gridRowsSelector.gridRowsDataRowIdToIdLookupSelector;
   }
 });
 Object.defineProperty(exports, "gridRowsLoadingSelector", {