@mui/x-data-grid 7.0.0-beta.2 → 7.0.0-beta.4

package/legacy/hooks/features/dimensions/useGridDimensions.js

@@ -1,302 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { unstable_debounce as debounce, unstable_ownerDocument as ownerDocument, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback, unstable_ownerWindow as ownerWindow } from '@mui/utils';
-import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
-import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { useGridLogger } from '../../utils/useGridLogger';
-import { gridColumnsTotalWidthSelector, gridVisiblePinnedColumnDefinitionsSelector } from '../columns';
-import { gridDimensionsSelector } from './gridDimensionsSelectors';
-import { gridDensityFactorSelector } from '../density';
-import { gridRenderContextSelector } from '../virtualization';
-import { useGridSelector } from '../../utils';
-import { getVisibleRows } from '../../utils/useGridVisibleRows';
-import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
-import { calculatePinnedRowsHeight } from '../rows/gridRowsUtils';
-import { getTotalHeaderHeight } from '../columns/gridColumnsUtils';
-var EMPTY_SIZE = {
-  width: 0,
-  height: 0
-};
-var EMPTY_DIMENSIONS = {
-  isReady: false,
-  root: EMPTY_SIZE,
-  viewportOuterSize: EMPTY_SIZE,
-  viewportInnerSize: EMPTY_SIZE,
-  contentSize: EMPTY_SIZE,
-  minimumSize: EMPTY_SIZE,
-  hasScrollX: false,
-  hasScrollY: false,
-  scrollbarSize: 0,
-  headerHeight: 0,
-  rowWidth: 0,
-  rowHeight: 0,
-  columnsTotalWidth: 0,
-  leftPinnedWidth: 0,
-  rightPinnedWidth: 0,
-  headersTotalHeight: 0,
-  topContainerHeight: 0,
-  bottomContainerHeight: 0
-};
-export var dimensionsStateInitializer = function dimensionsStateInitializer(state) {
-  var dimensions = EMPTY_DIMENSIONS;
-  return _extends({}, state, {
-    dimensions: dimensions
-  });
-};
-export function useGridDimensions(apiRef, props) {
-  var logger = useGridLogger(apiRef, 'useResizeContainer');
-  var errorShown = React.useRef(false);
-  var rootDimensionsRef = React.useRef(EMPTY_SIZE);
-  var rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
-  var pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
-  var densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
-  var rowHeight = Math.floor(props.rowHeight * densityFactor);
-  var headerHeight = Math.floor(props.columnHeaderHeight * densityFactor);
-  var columnsTotalWidth = roundToDecimalPlaces(gridColumnsTotalWidthSelector(apiRef), 6);
-  // XXX: The `props as any` below is not resilient to change.
-  var hasHeaderFilters = Boolean(props.headerFilters);
-  var headersTotalHeight = getTotalHeaderHeight(apiRef, props.columnHeaderHeight) + Number(hasHeaderFilters) * headerHeight;
-  var leftPinnedWidth = pinnedColumns.left.reduce(function (w, col) {
-    return w + col.computedWidth;
-  }, 0);
-  var rightPinnedWidth = pinnedColumns.right.reduce(function (w, col) {
-    return w + col.computedWidth;
-  }, 0);
-  var _React$useState = React.useState(),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    savedSize = _React$useState2[0],
-    setSavedSize = _React$useState2[1];
-  var debouncedSetSavedSize = React.useMemo(function () {
-    return debounce(setSavedSize, 60);
-  }, []);
-  var previousSize = React.useRef();
-  var getRootDimensions = function getRootDimensions() {
-    return apiRef.current.state.dimensions;
-  };
-  var setDimensions = useEventCallback(function (dimensions) {
-    apiRef.current.setState(function (state) {
-      return _extends({}, state, {
-        dimensions: dimensions
-      });
-    });
-  });
-  var resize = React.useCallback(function () {
-    var _previousSize$current, _previousSize$current2;
-    var element = apiRef.current.mainElementRef.current;
-    if (!element) {
-      return;
-    }
-    var computedStyle = ownerWindow(element).getComputedStyle(element);
-    var height = parseFloat(computedStyle.height) || 0;
-    var width = parseFloat(computedStyle.width) || 0;
-    var hasHeightChanged = height !== ((_previousSize$current = previousSize.current) == null ? void 0 : _previousSize$current.height);
-    var hasWidthChanged = width !== ((_previousSize$current2 = previousSize.current) == null ? void 0 : _previousSize$current2.width);
-    if (!previousSize.current || hasHeightChanged || hasWidthChanged) {
-      var size = {
-        width: width,
-        height: height
-      };
-      apiRef.current.publishEvent('resize', size);
-      previousSize.current = size;
-    }
-  }, [apiRef]);
-  var getViewportPageSize = React.useCallback(function () {
-    var dimensions = gridDimensionsSelector(apiRef.current.state);
-    if (!dimensions.isReady) {
-      return 0;
-    }
-    var currentPage = getVisibleRows(apiRef, {
-      pagination: props.pagination,
-      paginationMode: props.paginationMode
-    });
-
-    // TODO: Use a combination of scrollTop, dimensions.viewportInnerSize.height and rowsMeta.possitions
-    // to find out the maximum number of rows that can fit in the visible part of the grid
-    if (props.getRowHeight) {
-      var renderContext = gridRenderContextSelector(apiRef);
-      var viewportPageSize = renderContext.lastRowIndex - renderContext.firstRowIndex;
-      return Math.min(viewportPageSize - 1, currentPage.rows.length);
-    }
-    var maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
-    return Math.min(maximumPageSizeWithoutScrollBar, currentPage.rows.length);
-  }, [apiRef, props.pagination, props.paginationMode, props.getRowHeight, rowHeight]);
-  var updateDimensions = React.useCallback(function () {
-    var _apiRef$current$updat, _apiRef$current;
-    var rootElement = apiRef.current.rootElementRef.current;
-    var pinnedRowsHeight = calculatePinnedRowsHeight(apiRef);
-    var scrollbarSize = measureScrollbarSize(rootElement, columnsTotalWidth, props.scrollbarSize);
-    var topContainerHeight = headersTotalHeight + pinnedRowsHeight.top;
-    var bottomContainerHeight = pinnedRowsHeight.bottom;
-    var contentSize = {
-      width: columnsTotalWidth,
-      height: rowsMeta.currentPageTotalHeight
-    };
-    var viewportOuterSize;
-    var viewportInnerSize;
-    var hasScrollX = false;
-    var hasScrollY = false;
-    if (props.autoHeight) {
-      hasScrollY = false;
-      hasScrollX = Math.round(columnsTotalWidth) > Math.round(rootDimensionsRef.current.width);
-      viewportOuterSize = {
-        width: rootDimensionsRef.current.width,
-        height: topContainerHeight + bottomContainerHeight + contentSize.height
-      };
-      viewportInnerSize = {
-        width: Math.max(0, viewportOuterSize.width - (hasScrollY ? scrollbarSize : 0)),
-        height: Math.max(0, viewportOuterSize.height - (hasScrollX ? scrollbarSize : 0))
-      };
-    } else {
-      viewportOuterSize = {
-        width: rootDimensionsRef.current.width,
-        height: rootDimensionsRef.current.height
-      };
-      viewportInnerSize = {
-        width: Math.max(0, viewportOuterSize.width - leftPinnedWidth - rightPinnedWidth),
-        height: Math.max(0, viewportOuterSize.height - topContainerHeight - bottomContainerHeight)
-      };
-      var content = contentSize;
-      var container = viewportInnerSize;
-      var hasScrollXIfNoYScrollBar = content.width > container.width;
-      var hasScrollYIfNoXScrollBar = content.height > container.height;
-      if (hasScrollXIfNoYScrollBar || hasScrollYIfNoXScrollBar) {
-        hasScrollY = hasScrollYIfNoXScrollBar;
-        hasScrollX = content.width + (hasScrollY ? scrollbarSize : 0) > container.width;
-
-        // We recalculate the scroll y to consider the size of the x scrollbar.
-        if (hasScrollX) {
-          hasScrollY = content.height + scrollbarSize > container.height;
-        }
-      }
-      if (hasScrollY) {
-        viewportInnerSize.width -= scrollbarSize;
-      }
-      if (hasScrollX) {
-        viewportInnerSize.height -= scrollbarSize;
-      }
-    }
-    var rowWidth = Math.max(viewportOuterSize.width, columnsTotalWidth + (hasScrollY ? scrollbarSize : 0));
-    var minimumSize = {
-      width: contentSize.width,
-      height: topContainerHeight + contentSize.height + bottomContainerHeight
-    };
-    var newDimensions = {
-      isReady: true,
-      root: rootDimensionsRef.current,
-      viewportOuterSize: viewportOuterSize,
-      viewportInnerSize: viewportInnerSize,
-      contentSize: contentSize,
-      minimumSize: minimumSize,
-      hasScrollX: hasScrollX,
-      hasScrollY: hasScrollY,
-      scrollbarSize: scrollbarSize,
-      headerHeight: headerHeight,
-      rowWidth: rowWidth,
-      rowHeight: rowHeight,
-      columnsTotalWidth: columnsTotalWidth,
-      leftPinnedWidth: leftPinnedWidth,
-      rightPinnedWidth: rightPinnedWidth,
-      headersTotalHeight: headersTotalHeight,
-      topContainerHeight: topContainerHeight,
-      bottomContainerHeight: bottomContainerHeight
-    };
-    var prevDimensions = apiRef.current.state.dimensions;
-    setDimensions(newDimensions);
-    if (newDimensions.viewportInnerSize.width !== prevDimensions.viewportInnerSize.width || newDimensions.viewportInnerSize.height !== prevDimensions.viewportInnerSize.height) {
-      apiRef.current.publishEvent('viewportInnerSizeChange', newDimensions.viewportInnerSize);
-    }
-    (_apiRef$current$updat = (_apiRef$current = apiRef.current).updateRenderContext) == null || _apiRef$current$updat.call(_apiRef$current);
-  }, [apiRef, setDimensions, props.scrollbarSize, props.autoHeight, rowsMeta.currentPageTotalHeight, rowHeight, headerHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
-  var apiPublic = {
-    resize: resize,
-    getRootDimensions: getRootDimensions
-  };
-  var apiPrivate = {
-    updateDimensions: updateDimensions,
-    getViewportPageSize: getViewportPageSize
-  };
-  useGridApiMethod(apiRef, apiPublic, 'public');
-  useGridApiMethod(apiRef, apiPrivate, 'private');
-  useEnhancedEffect(function () {
-    if (savedSize) {
-      updateDimensions();
-      apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
-    }
-  }, [apiRef, savedSize, updateDimensions]);
-  var root = apiRef.current.rootElementRef.current;
-  var dimensions = apiRef.current.state.dimensions;
-  useEnhancedEffect(function () {
-    if (!root) {
-      return;
-    }
-    var set = function set(k, v) {
-      return root.style.setProperty(k, v);
-    };
-    set('--DataGrid-width', "".concat(dimensions.viewportOuterSize.width, "px"));
-    set('--DataGrid-hasScrollX', "".concat(Number(dimensions.hasScrollX)));
-    set('--DataGrid-hasScrollY', "".concat(Number(dimensions.hasScrollY)));
-    set('--DataGrid-scrollbarSize', "".concat(dimensions.scrollbarSize, "px"));
-    set('--DataGrid-rowWidth', "".concat(dimensions.rowWidth, "px"));
-    set('--DataGrid-columnsTotalWidth', "".concat(dimensions.columnsTotalWidth, "px"));
-    set('--DataGrid-leftPinnedWidth', "".concat(dimensions.leftPinnedWidth, "px"));
-    set('--DataGrid-rightPinnedWidth', "".concat(dimensions.rightPinnedWidth, "px"));
-    set('--DataGrid-headerHeight', "".concat(dimensions.headerHeight, "px"));
-    set('--DataGrid-headersTotalHeight', "".concat(dimensions.headersTotalHeight, "px"));
-    set('--DataGrid-topContainerHeight', "".concat(dimensions.topContainerHeight, "px"));
-    set('--DataGrid-bottomContainerHeight', "".concat(dimensions.bottomContainerHeight, "px"));
-  }, [root, dimensions]);
-  var isFirstSizing = React.useRef(true);
-  var handleResize = React.useCallback(function (size) {
-    rootDimensionsRef.current = size;
-
-    // jsdom has no layout capabilities
-    var isJSDOM = /jsdom/.test(window.navigator.userAgent);
-    if (size.height === 0 && !errorShown.current && !props.autoHeight && !isJSDOM) {
-      logger.error(['The parent DOM element of the data grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
-      errorShown.current = true;
-    }
-    if (size.width === 0 && !errorShown.current && !isJSDOM) {
-      logger.error(['The parent DOM element of the data grid has an empty width.', 'Please make sure that this element has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
-      errorShown.current = true;
-    }
-    if (isFirstSizing.current) {
-      // We want to initialize the grid dimensions as soon as possible to avoid flickering
-      setSavedSize(size);
-      isFirstSizing.current = false;
-      return;
-    }
-    debouncedSetSavedSize(size);
-  }, [props.autoHeight, debouncedSetSavedSize, logger]);
-  useEnhancedEffect(updateDimensions, [updateDimensions]);
-  useGridApiOptionHandler(apiRef, 'sortedRowsSet', updateDimensions);
-  useGridApiOptionHandler(apiRef, 'paginationModelChange', updateDimensions);
-  useGridApiOptionHandler(apiRef, 'columnsChange', updateDimensions);
-  useGridApiEventHandler(apiRef, 'resize', handleResize);
-  useGridApiOptionHandler(apiRef, 'debouncedResize', props.onResize);
-}
-function measureScrollbarSize(rootElement, columnsTotalWidth, scrollbarSize) {
-  if (scrollbarSize !== undefined) {
-    return scrollbarSize;
-  }
-  if (rootElement === null || columnsTotalWidth === 0) {
-    return 0;
-  }
-  var doc = ownerDocument(rootElement);
-  var scrollDiv = doc.createElement('div');
-  scrollDiv.style.width = '99px';
-  scrollDiv.style.height = '99px';
-  scrollDiv.style.position = 'absolute';
-  scrollDiv.style.overflow = 'scroll';
-  scrollDiv.className = 'scrollDiv';
-  rootElement.appendChild(scrollDiv);
-  var size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-  rootElement.removeChild(scrollDiv);
-  return size;
-}
-
-// Get rid of floating point imprecision errors
-// https://github.com/mui/mui-x/issues/9550#issuecomment-1619020477
-function roundToDecimalPlaces(value, decimals) {
-  return Math.round(value * Math.pow(10, decimals)) / Math.pow(10, decimals);
-}

package/legacy/hooks/features/editing/gridEditingSelectors.js

@@ -1,4 +0,0 @@
-// TODO v6: rename to gridEditingStateSelector
-export var gridEditRowsStateSelector = function gridEditRowsStateSelector(state) {
-  return state.editRows;
-};