@mui/x-data-grid
Version:
The community edition of the data grid component (MUI X).
114 lines • 6.37 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import PropTypes from 'prop-types';
import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
import { useGridSelector } from '../../hooks/utils/useGridSelector';
import { GridMainContainer } from '../containers/GridMainContainer';
import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
import { gridColumnPositionsSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector } from '../../hooks/features/columns/gridColumnsSelector';
import { gridFilterActiveItemsLookupSelector } from '../../hooks/features/filter/gridFilterSelector';
import { gridSortColumnLookupSelector } from '../../hooks/features/sorting/gridSortingSelector';
import { gridTabIndexColumnHeaderSelector, gridTabIndexCellSelector, gridFocusColumnHeaderSelector, unstable_gridTabIndexColumnGroupHeaderSelector, unstable_gridFocusColumnGroupHeaderSelector } from '../../hooks/features/focus/gridFocusStateSelector';
import { gridDensityFactorSelector } from '../../hooks/features/density/densitySelector';
import { gridColumnGroupsHeaderMaxDepthSelector, gridColumnGroupsHeaderStructureSelector } from '../../hooks/features/columnGrouping/gridColumnGroupsSelector';
import { gridColumnMenuSelector } from '../../hooks/features/columnMenu/columnMenuSelector';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
function GridBody(props) {
var VirtualScrollerComponent = props.VirtualScrollerComponent,
ColumnHeadersProps = props.ColumnHeadersProps,
children = props.children;
var apiRef = useGridPrivateApiContext();
var rootProps = useGridRootProps();
var rootRef = React.useRef(null);
var visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
var filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector);
var sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector);
var columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
var columnHeaderTabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
var cellTabIndexState = useGridSelector(apiRef, gridTabIndexCellSelector);
var columnGroupHeaderTabIndexState = useGridSelector(apiRef, unstable_gridTabIndexColumnGroupHeaderSelector);
var columnHeaderFocus = useGridSelector(apiRef, gridFocusColumnHeaderSelector);
var columnGroupHeaderFocus = useGridSelector(apiRef, unstable_gridFocusColumnGroupHeaderSelector);
var densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
var headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
var columnMenuState = useGridSelector(apiRef, gridColumnMenuSelector);
var columnVisibility = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
var columnGroupsHeaderStructure = useGridSelector(apiRef, gridColumnGroupsHeaderStructureSelector);
var hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
useEnhancedEffect(function () {
apiRef.current.computeSizeAndPublishResizeEvent();
var elementToObserve = rootRef.current;
if (typeof ResizeObserver === 'undefined') {
return function () {};
}
var animationFrame;
var observer = new ResizeObserver(function () {
// See https://github.com/mui/mui-x/issues/8733
animationFrame = requestAnimationFrame(function () {
apiRef.current.computeSizeAndPublishResizeEvent();
});
});
if (elementToObserve) {
observer.observe(elementToObserve);
}
return function () {
if (animationFrame) {
window.cancelAnimationFrame(animationFrame);
}
if (elementToObserve) {
observer.unobserve(elementToObserve);
}
};
}, [apiRef]);
var columnHeadersRef = React.useRef(null);
var columnsContainerRef = React.useRef(null);
var virtualScrollerRef = React.useRef(null);
apiRef.current.register('private', {
columnHeadersContainerElementRef: columnsContainerRef,
columnHeadersElementRef: columnHeadersRef,
virtualScrollerRef: virtualScrollerRef,
mainElementRef: rootRef
});
var hasDimensions = !!apiRef.current.getRootDimensions();
return /*#__PURE__*/_jsxs(GridMainContainer, {
ref: rootRef,
children: [/*#__PURE__*/_jsx(rootProps.slots.columnHeaders, _extends({
ref: columnsContainerRef,
innerRef: columnHeadersRef,
visibleColumns: visibleColumns,
filterColumnLookup: filterColumnLookup,
sortColumnLookup: sortColumnLookup,
columnPositions: columnPositions,
columnHeaderTabIndexState: columnHeaderTabIndexState,
columnGroupHeaderTabIndexState: columnGroupHeaderTabIndexState,
columnHeaderFocus: columnHeaderFocus,
columnGroupHeaderFocus: columnGroupHeaderFocus,
densityFactor: densityFactor,
headerGroupingMaxDepth: headerGroupingMaxDepth,
columnMenuState: columnMenuState,
columnVisibility: columnVisibility,
columnGroupsHeaderStructure: columnGroupsHeaderStructure,
hasOtherElementInTabSequence: hasOtherElementInTabSequence
}, ColumnHeadersProps)), hasDimensions && /*#__PURE__*/_jsx(VirtualScrollerComponent
// The content is only rendered after dimensions are computed because
// the lazy-loading hook is listening to `renderedRowsIntervalChange`,
// but only does something if the dimensions are also available.
// If this event is published while dimensions haven't been computed,
// the `onFetchRows` prop won't be called during mount.
, {
ref: virtualScrollerRef
}), children]
});
}
process.env.NODE_ENV !== "production" ? GridBody.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the TypeScript types and run "yarn proptypes" |
// ----------------------------------------------------------------------
children: PropTypes.node,
ColumnHeadersProps: PropTypes.object,
VirtualScrollerComponent: PropTypes.elementType.isRequired
} : void 0;
export { GridBody };