@mui/x-data-grid
Version:
The Community plan edition of the MUI X Data Grid components.
173 lines • 8.35 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import { styled } from '@mui/material/styles';
import composeClasses from '@mui/utils/composeClasses';
import clsx from 'clsx';
import { LayoutDataGrid, Virtualization } from '@mui/x-virtualizer';
import { gridHasBottomFillerSelector, gridHasScrollXSelector, gridHasScrollYSelector } from "../../hooks/features/dimensions/gridDimensionsSelectors.mjs";
import { gridRowTreeSelector } from "../../hooks/features/rows/index.mjs";
import { GridScrollArea } from "../GridScrollArea.mjs";
import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.mjs";
import { useGridSelector } from "../../hooks/utils/useGridSelector.mjs";
import { getDataGridUtilityClass, gridClasses } from "../../constants/gridClasses.mjs";
import { useGridOverlays } from "../../hooks/features/overlays/useGridOverlays.mjs";
import { GridHeaders } from "../GridHeaders.mjs";
import { GridMainContainer as Container } from "./GridMainContainer.mjs";
import { GridTopContainer as TopContainer } from "./GridTopContainer.mjs";
import { GridVirtualScrollerContent as Content } from "./GridVirtualScrollerContent.mjs";
import { GridVirtualScrollerFiller as SpaceFiller } from "./GridVirtualScrollerFiller.mjs";
import { GridVirtualScrollerRenderZone as RenderZone } from "./GridVirtualScrollerRenderZone.mjs";
import { GridVirtualScrollbar as Scrollbar, ScrollbarCorner } from "./GridVirtualScrollbar.mjs";
import { GridScrollShadows as ScrollShadows } from "../GridScrollShadows.mjs";
import { GridOverlayWrapper } from "../base/GridOverlays.mjs";
import { useGridVirtualizer } from "../../hooks/core/useGridVirtualizer.mjs";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const useUtilityClasses = ownerState => {
const {
classes,
hasScrollX,
hasPinnedRight,
loadingOverlayVariant,
overlayType
} = ownerState;
const hideContent = loadingOverlayVariant === 'skeleton' || overlayType === 'noColumnsOverlay';
const slots = {
root: ['main', hasPinnedRight && 'main--hasPinnedRight', hideContent && 'main--hiddenContent'],
scroller: ['virtualScroller', hasScrollX && 'virtualScroller--hasScrollX']
};
return composeClasses(slots, getDataGridUtilityClass, classes);
};
const Scroller = styled('div', {
name: 'MuiDataGrid',
slot: 'VirtualScroller',
overridesResolver: (props, styles) => {
const {
ownerState
} = props;
return [styles.virtualScroller, ownerState.hasScrollX && styles['virtualScroller--hasScrollX']];
}
})({
position: 'relative',
height: '100%',
flexGrow: 1,
overflow: 'scroll',
display: 'flex',
flexDirection: 'column',
scrollbarWidth: 'none' /* Firefox */,
'&::-webkit-scrollbar': {
display: 'none' /* Safari and Chrome */
},
'@media print': {
overflow: 'hidden'
},
// See https://github.com/mui/mui-x/issues/10547
zIndex: 0
});
const Viewport = styled('div', {
slot: 'internal',
shouldForwardProp: undefined
})({
display: 'contents',
[`.${gridClasses['virtualizer--layoutControlled']} &`]: {
display: 'inline-block',
position: 'sticky',
top: 0,
left: 0,
overflow: 'hidden'
}
});
const hasPinnedRightSelector = apiRef => apiRef.current.state.dimensions.rightPinnedWidth > 0;
function GridVirtualScroller(props) {
const apiRef = useGridPrivateApiContext();
const rootProps = useGridRootProps();
const hasScrollY = useGridSelector(apiRef, gridHasScrollYSelector);
const hasScrollX = useGridSelector(apiRef, gridHasScrollXSelector);
const hasPinnedRight = useGridSelector(apiRef, hasPinnedRightSelector);
const hasBottomFiller = useGridSelector(apiRef, gridHasBottomFillerSelector);
const {
overlayType,
loadingOverlayVariant
} = useGridOverlays(apiRef, rootProps);
const Overlay = rootProps.slots?.[overlayType];
const ownerState = {
classes: rootProps.classes,
hasScrollX,
hasPinnedRight,
overlayType,
loadingOverlayVariant
};
const classes = useUtilityClasses(ownerState);
const virtualizer = useGridVirtualizer();
const layoutMode = virtualizer.store.use(Virtualization.selectors.layoutMode);
const hasContentFiller = layoutMode === 'uncontrolled' && loadingOverlayVariant !== 'skeleton';
const containerProps = virtualizer.store.use(LayoutDataGrid.selectors.containerProps);
const scrollerProps = virtualizer.store.use(LayoutDataGrid.selectors.scrollerProps);
const scrollerContentProps = virtualizer.store.use(LayoutDataGrid.selectors.scrollerContentProps);
const viewportProps = virtualizer.store.use(LayoutDataGrid.selectors.viewportProps);
const contentProps = virtualizer.store.use(LayoutDataGrid.selectors.contentProps);
const positionerProps = virtualizer.store.use(LayoutDataGrid.selectors.positionerProps);
const scrollbarVerticalProps = virtualizer.store.use(LayoutDataGrid.selectors.scrollbarVerticalProps);
const scrollbarHorizontalProps = virtualizer.store.use(LayoutDataGrid.selectors.scrollbarHorizontalProps);
const scrollAreaProps = virtualizer.store.use(LayoutDataGrid.selectors.scrollAreaProps);
const containerVerticalProps = virtualizer.store.use(LayoutDataGrid.selectors.containerVerticalProps);
const rows = virtualizer.api.getters.getRows(undefined, gridRowTreeSelector(apiRef));
return /*#__PURE__*/_jsxs(Container, _extends({
className: clsx(classes.root, layoutMode === 'controlled' && gridClasses['virtualizer--layoutControlled'])
}, containerProps, {
ownerState: ownerState,
children: [/*#__PURE__*/_jsx(GridScrollArea, _extends({
scrollDirection: "left"
}, scrollAreaProps)), /*#__PURE__*/_jsx(GridScrollArea, _extends({
scrollDirection: "right"
}, scrollAreaProps)), /*#__PURE__*/_jsx(GridScrollArea, _extends({
scrollDirection: "up"
}, scrollAreaProps)), /*#__PURE__*/_jsx(GridScrollArea, _extends({
scrollDirection: "down"
}, scrollAreaProps)), /*#__PURE__*/_jsx(Scroller, _extends({
className: classes.scroller
}, scrollerProps, {
ownerState: ownerState,
children: /*#__PURE__*/_jsx(Content, _extends({}, scrollerContentProps, {
children: /*#__PURE__*/_jsxs(Viewport, _extends({}, viewportProps, {
children: [/*#__PURE__*/_jsxs(TopContainer, _extends({}, containerVerticalProps, {
children: [!rootProps.listView && /*#__PURE__*/_jsx(GridHeaders, {}), /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
position: "top"
})]
})), overlayType && /*#__PURE__*/_jsx(GridOverlayWrapper, {
overlayType: overlayType,
loadingOverlayVariant: loadingOverlayVariant,
children: /*#__PURE__*/_jsx(Overlay, _extends({}, rootProps.slotProps?.[overlayType]))
}), /*#__PURE__*/_jsxs(RenderZone, _extends({
role: "rowgroup"
}, positionerProps, {
children: [rows, /*#__PURE__*/_jsx(rootProps.slots.detailPanels, {})]
})), hasContentFiller && /*#__PURE__*/_jsx("div", _extends({
className: gridClasses.contentFiller
}, contentProps)), hasBottomFiller && /*#__PURE__*/_jsx(SpaceFiller, {
rowsLength: rows.length
}), /*#__PURE__*/_jsx(rootProps.slots.bottomContainer, _extends({}, containerVerticalProps, {
children: /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
position: "bottom"
})
}))]
}))
}))
})), hasScrollX && /*#__PURE__*/_jsxs(React.Fragment, {
children: [rootProps.pinnedColumnsSectionSeparator?.endsWith('shadow') && /*#__PURE__*/_jsx(ScrollShadows, {
position: "horizontal"
}), /*#__PURE__*/_jsx(Scrollbar, _extends({
position: "horizontal"
}, scrollbarHorizontalProps))]
}), hasScrollY && /*#__PURE__*/_jsxs(React.Fragment, {
children: [rootProps.pinnedRowsSectionSeparator?.endsWith('shadow') && /*#__PURE__*/_jsx(ScrollShadows, {
position: "vertical"
}), /*#__PURE__*/_jsx(Scrollbar, _extends({
position: "vertical"
}, scrollbarVerticalProps))]
}), hasScrollX && hasScrollY && /*#__PURE__*/_jsx(ScrollbarCorner, {
"aria-hidden": "true"
}), props.children]
}));
}
export { GridVirtualScroller };