@mui/x-data-grid 5.5.1 → 5.7.0

package/legacy/hooks/features/rows/useGridRowsMeta.js

@@ -0,0 +1,139 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { useGridSelector } from '../../utils/useGridSelector';
+import { gridDensityRowHeightSelector, gridDensityFactorSelector } from '../density/densitySelector';
+import { gridFilterStateSelector } from '../filter/gridFilterSelector';
+import { gridPaginationSelector } from '../pagination/gridPaginationSelector';
+import { gridSortingStateSelector } from '../sorting/gridSortingSelector';
+import { GridEvents } from '../../../models/events/gridEvents';
+import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+export var rowsMetaStateInitializer = function rowsMetaStateInitializer(state) {
+  return _extends({}, state, {
+    rowsMeta: {
+      currentPageTotalHeight: 0,
+      positions: []
+    }
+  });
+};
+/**
+ * @requires useGridPageSize (method)
+ * @requires useGridPage (method)
+ */
+
+export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
+  var getRowHeight = props.getRowHeight,
+      getRowSpacing = props.getRowSpacing;
+  var rowsHeightLookup = React.useRef({});
+  var rowHeight = useGridSelector(apiRef, gridDensityRowHeightSelector);
+  var filterState = useGridSelector(apiRef, gridFilterStateSelector);
+  var paginationState = useGridSelector(apiRef, gridPaginationSelector);
+  var sortingState = useGridSelector(apiRef, gridSortingStateSelector);
+  var currentPage = useGridVisibleRows(apiRef, props);
+  var hydrateRowsMeta = React.useCallback(function () {
+    apiRef.current.setState(function (state) {
+      var positions = [];
+      var densityFactor = gridDensityFactorSelector(state, apiRef.current.instanceId);
+      var currentRowHeight = gridDensityRowHeightSelector(state, apiRef.current.instanceId);
+      var currentPageTotalHeight = currentPage.rows.reduce(function (acc, row) {
+        positions.push(acc);
+        var baseRowHeight;
+        var isResized = rowsHeightLookup.current[row.id] && rowsHeightLookup.current[row.id].isResized || false;
+
+        if (isResized) {
+          // do not recalculate resized row height and use the value from the lookup
+          baseRowHeight = rowsHeightLookup.current[row.id].value;
+        } else {
+          baseRowHeight = currentRowHeight;
+
+          if (getRowHeight) {
+            var _getRowHeight;
+
+            // Default back to base rowHeight if getRowHeight returns null or undefined.
+            baseRowHeight = (_getRowHeight = getRowHeight(_extends({}, row, {
+              densityFactor: densityFactor
+            }))) != null ? _getRowHeight : currentRowHeight;
+          }
+        } // We use an object to make simple to check if a height is already added or not
+
+
+        var initialHeights = {
+          base: baseRowHeight
+        };
+
+        if (getRowSpacing) {
+          var _spacing$top, _spacing$bottom;
+
+          var index = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
+          var spacing = getRowSpacing(_extends({}, row, {
+            isFirstVisible: index === 0,
+            isLastVisible: index === currentPage.rows.length - 1
+          }));
+          initialHeights.spacingTop = (_spacing$top = spacing.top) != null ? _spacing$top : 0;
+          initialHeights.spacingBottom = (_spacing$bottom = spacing.bottom) != null ? _spacing$bottom : 0;
+        }
+
+        var sizes = apiRef.current.unstable_applyPreProcessors('rowHeight', initialHeights, row);
+        var finalRowHeight = Object.values(sizes).reduce(function (acc2, value) {
+          return acc2 + value;
+        }, 0);
+        rowsHeightLookup.current[row.id] = {
+          value: baseRowHeight,
+          sizes: sizes,
+          isResized: isResized
+        };
+        return acc + finalRowHeight;
+      }, 0);
+      return _extends({}, state, {
+        rowsMeta: {
+          currentPageTotalHeight: currentPageTotalHeight,
+          positions: positions
+        }
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef, currentPage.rows, getRowSpacing, getRowHeight]);
+
+  var getTargetRowHeight = function getTargetRowHeight(rowId) {
+    var _rowsHeightLookup$cur;
+
+    return ((_rowsHeightLookup$cur = rowsHeightLookup.current[rowId]) == null ? void 0 : _rowsHeightLookup$cur.value) || rowHeight;
+  };
+
+  var getRowInternalSizes = function getRowInternalSizes(rowId) {
+    var _rowsHeightLookup$cur2;
+
+    return (_rowsHeightLookup$cur2 = rowsHeightLookup.current[rowId]) == null ? void 0 : _rowsHeightLookup$cur2.sizes;
+  };
+
+  var setRowHeight = React.useCallback(function (id, height) {
+    rowsHeightLookup.current[id] = {
+      value: height,
+      isResized: true,
+      sizes: _extends({}, rowsHeightLookup.current[id].sizes, {
+        base: height
+      })
+    };
+    hydrateRowsMeta();
+  }, [hydrateRowsMeta]); // The effect is used to build the rows meta data - currentPageTotalHeight and positions.
+  // Because of variable row height this is needed for the virtualization
+
+  React.useEffect(function () {
+    hydrateRowsMeta();
+  }, [rowHeight, filterState, paginationState, sortingState, hydrateRowsMeta]);
+  var handlePreProcessorRegister = React.useCallback(function (name) {
+    if (name !== 'rowHeight') {
+      return;
+    }
+
+    hydrateRowsMeta();
+  }, [hydrateRowsMeta]);
+  useGridApiEventHandler(apiRef, GridEvents.preProcessorRegister, handlePreProcessorRegister);
+  var rowsMetaApi = {
+    unstable_getRowHeight: getTargetRowHeight,
+    unstable_getRowInternalSizes: getRowInternalSizes,
+    unstable_setRowHeight: setRowHeight
+  };
+  useGridApiMethod(apiRef, rowsMetaApi, 'GridRowsMetaApi');
+};

package/legacy/hooks/features/rows/useGridRowsPreProcessors.js

@@ -0,0 +1,36 @@
+import { GRID_DEFAULT_STRATEGY, useGridRegisterStrategyProcessor } from '../../core/strategyProcessing';
+
+var flatRowTreeCreationMethod = function flatRowTreeCreationMethod(_ref) {
+  var ids = _ref.ids,
+      idRowsLookup = _ref.idRowsLookup,
+      previousTree = _ref.previousTree;
+  var tree = {};
+
+  for (var i = 0; i < ids.length; i += 1) {
+    var rowId = ids[i];
+
+    if (previousTree && previousTree[rowId]) {
+      tree[rowId] = previousTree[rowId];
+    } else {
+      tree[rowId] = {
+        id: rowId,
+        depth: 0,
+        parent: null,
+        groupingKey: '',
+        groupingField: null
+      };
+    }
+  }
+
+  return {
+    groupingName: GRID_DEFAULT_STRATEGY,
+    tree: tree,
+    treeDepth: 1,
+    idRowsLookup: idRowsLookup,
+    ids: ids
+  };
+};
+
+export var useGridRowsPreProcessors = function useGridRowsPreProcessors(apiRef) {
+  useGridRegisterStrategyProcessor(apiRef, GRID_DEFAULT_STRATEGY, 'rowTreeCreation', flatRowTreeCreationMethod);
+};

package/legacy/hooks/features/scroll/useGridScroll.js

@@ -0,0 +1,127 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import * as React from 'react';
+import { useGridLogger } from '../../utils/useGridLogger';
+import { gridColumnPositionsSelector, gridVisibleColumnDefinitionsSelector } from '../columns/gridColumnsSelector';
+import { gridPageSelector, gridPageSizeSelector } from '../pagination/gridPaginationSelector';
+import { gridRowCountSelector } from '../rows/gridRowsSelector';
+import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { useGridNativeEventListener } from '../../utils/useGridNativeEventListener'; // Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js
+// Similar to https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
+
+function scrollIntoView(dimensions) {
+  var clientHeight = dimensions.clientHeight,
+      scrollTop = dimensions.scrollTop,
+      offsetHeight = dimensions.offsetHeight,
+      offsetTop = dimensions.offsetTop;
+  var elementBottom = offsetTop + offsetHeight;
+
+  if (elementBottom - clientHeight > scrollTop) {
+    return elementBottom - clientHeight;
+  }
+
+  if (offsetTop < scrollTop) {
+    return offsetTop;
+  }
+
+  return undefined;
+}
+/**
+ * @requires useGridPagination (state) - can be after, async only
+ * @requires useGridColumns (state) - can be after, async only
+ * @requires useGridRows (state) - can be after, async only
+ * @requires useGridRowsMeta (state) - can be after, async only
+ */
+
+
+export var useGridScroll = function useGridScroll(apiRef, props) {
+  var logger = useGridLogger(apiRef, 'useGridScroll');
+  var colRef = apiRef.current.columnHeadersElementRef;
+  var windowRef = apiRef.current.windowRef;
+  var scrollToIndexes = React.useCallback(function (params) {
+    var totalRowCount = gridRowCountSelector(apiRef);
+    var visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+
+    if (totalRowCount === 0 || visibleColumns.length === 0) {
+      return false;
+    }
+
+    logger.debug("Scrolling to cell at row ".concat(params.rowIndex, ", col: ").concat(params.colIndex, " "));
+    var scrollCoordinates = {};
+
+    if (params.colIndex != null) {
+      var columnPositions = gridColumnPositionsSelector(apiRef);
+      scrollCoordinates.left = scrollIntoView({
+        clientHeight: windowRef.current.clientWidth,
+        scrollTop: windowRef.current.scrollLeft,
+        offsetHeight: visibleColumns[params.colIndex].computedWidth,
+        offsetTop: columnPositions[params.colIndex]
+      });
+    }
+
+    if (params.rowIndex != null) {
+      var rowsMeta = gridRowsMetaSelector(apiRef.current.state);
+      var page = gridPageSelector(apiRef);
+      var pageSize = gridPageSizeSelector(apiRef);
+      var elementIndex = !props.pagination ? params.rowIndex : params.rowIndex - page * pageSize;
+      var targetOffsetHeight = rowsMeta.positions[elementIndex + 1] ? rowsMeta.positions[elementIndex + 1] - rowsMeta.positions[elementIndex] : rowsMeta.currentPageTotalHeight - rowsMeta.positions[elementIndex];
+      scrollCoordinates.top = scrollIntoView({
+        clientHeight: windowRef.current.clientHeight,
+        scrollTop: windowRef.current.scrollTop,
+        offsetHeight: targetOffsetHeight,
+        offsetTop: rowsMeta.positions[elementIndex]
+      });
+    }
+
+    scrollCoordinates = apiRef.current.unstable_applyPreProcessors('scrollToIndexes', scrollCoordinates, params);
+
+    if (_typeof(scrollCoordinates.left) !== undefined || _typeof(scrollCoordinates.top) !== undefined) {
+      apiRef.current.scroll(scrollCoordinates);
+      return true;
+    }
+
+    return false;
+  }, [logger, apiRef, windowRef, props.pagination]);
+  var scroll = React.useCallback(function (params) {
+    if (windowRef.current && params.left != null && colRef.current) {
+      colRef.current.scrollLeft = params.left;
+      windowRef.current.scrollLeft = params.left;
+      logger.debug("Scrolling left: ".concat(params.left));
+    }
+
+    if (windowRef.current && params.top != null) {
+      windowRef.current.scrollTop = params.top;
+      logger.debug("Scrolling top: ".concat(params.top));
+    }
+
+    logger.debug("Scrolling, updating container, and viewport");
+  }, [windowRef, colRef, logger]);
+  var getScrollPosition = React.useCallback(function () {
+    if (!(windowRef != null && windowRef.current)) {
+      return {
+        top: 0,
+        left: 0
+      };
+    }
+
+    return {
+      top: windowRef.current.scrollTop,
+      left: windowRef.current.scrollLeft
+    };
+  }, [windowRef]);
+  var scrollApi = {
+    scroll: scroll,
+    scrollToIndexes: scrollToIndexes,
+    getScrollPosition: getScrollPosition
+  };
+  useGridApiMethod(apiRef, scrollApi, 'GridScrollApi');
+  var preventScroll = React.useCallback(function (event) {
+    event.target.scrollLeft = 0;
+    event.target.scrollTop = 0;
+  }, []);
+  useGridNativeEventListener(apiRef, function () {
+    var _apiRef$current, _apiRef$current$rende, _apiRef$current$rende2;
+
+    return (_apiRef$current = apiRef.current) == null ? void 0 : (_apiRef$current$rende = _apiRef$current.renderingZoneRef) == null ? void 0 : (_apiRef$current$rende2 = _apiRef$current$rende.current) == null ? void 0 : _apiRef$current$rende2.parentElement;
+  }, 'scroll', preventScroll);
+};

package/legacy/hooks/features/selection/gridSelectionSelector.js

@@ -0,0 +1,19 @@
+import { createSelector } from '../../../utils/createSelector';
+import { gridRowsLookupSelector } from '../rows/gridRowsSelector';
+export var gridSelectionStateSelector = function gridSelectionStateSelector(state) {
+  return state.selection;
+};
+export var selectedGridRowsCountSelector = createSelector(gridSelectionStateSelector, function (selection) {
+  return selection.length;
+});
+export var selectedGridRowsSelector = createSelector(gridSelectionStateSelector, gridRowsLookupSelector, function (selectedRows, rowsLookup) {
+  return new Map(selectedRows.map(function (id) {
+    return [id, rowsLookup[id]];
+  }));
+});
+export var selectedIdsLookupSelector = createSelector(gridSelectionStateSelector, function (selection) {
+  return selection.reduce(function (lookup, rowId) {
+    lookup[rowId] = rowId;
+    return lookup;
+  }, {});
+});

package/legacy/hooks/features/selection/index.js

@@ -0,0 +1 @@
+export * from './gridSelectionSelector';