@mui/x-data-grid
Version:
The Community plan edition of the MUI X Data Grid components.
188 lines (187 loc) • 9.43 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.GridVirtualScroller = GridVirtualScroller;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _styles = require("@mui/material/styles");
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
var _clsx = _interopRequireDefault(require("clsx"));
var _xVirtualizer = require("@mui/x-virtualizer");
var _gridDimensionsSelectors = require("../../hooks/features/dimensions/gridDimensionsSelectors");
var _rows = require("../../hooks/features/rows");
var _GridScrollArea = require("../GridScrollArea");
var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
var _useGridSelector = require("../../hooks/utils/useGridSelector");
var _gridClasses = require("../../constants/gridClasses");
var _useGridOverlays = require("../../hooks/features/overlays/useGridOverlays");
var _GridHeaders = require("../GridHeaders");
var _GridMainContainer = require("./GridMainContainer");
var _GridTopContainer = require("./GridTopContainer");
var _GridVirtualScrollerContent = require("./GridVirtualScrollerContent");
var _GridVirtualScrollerFiller = require("./GridVirtualScrollerFiller");
var _GridVirtualScrollerRenderZone = require("./GridVirtualScrollerRenderZone");
var _GridVirtualScrollbar = require("./GridVirtualScrollbar");
var _GridScrollShadows = require("../GridScrollShadows");
var _GridOverlays = require("../base/GridOverlays");
var _useGridVirtualizer = require("../../hooks/core/useGridVirtualizer");
var _jsxRuntime = require("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 (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
};
const Scroller = (0, _styles.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 = (0, _styles.styled)('div', {
slot: 'internal',
shouldForwardProp: undefined
})({
display: 'contents',
[`.${_gridClasses.gridClasses['virtualizer--layoutControlled']} &`]: {
display: 'inline-block',
position: 'sticky',
top: 0,
left: 0,
overflow: 'hidden',
scrollbarWidth: 'none' /* Firefox */,
'&::-webkit-scrollbar': {
display: 'none' /* Safari and Chrome */
}
}
});
const hasPinnedRightSelector = apiRef => apiRef.current.state.dimensions.rightPinnedWidth > 0;
function GridVirtualScroller(props) {
const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
const rootProps = (0, _useGridRootProps.useGridRootProps)();
const hasScrollY = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHasScrollYSelector);
const hasScrollX = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHasScrollXSelector);
const hasPinnedRight = (0, _useGridSelector.useGridSelector)(apiRef, hasPinnedRightSelector);
const hasBottomFiller = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHasBottomFillerSelector);
const {
overlayType,
loadingOverlayVariant
} = (0, _useGridOverlays.useGridOverlays)(apiRef, rootProps);
const Overlay = rootProps.slots?.[overlayType];
const ownerState = {
classes: rootProps.classes,
hasScrollX,
hasPinnedRight,
overlayType,
loadingOverlayVariant
};
const classes = useUtilityClasses(ownerState);
const virtualizer = (0, _useGridVirtualizer.useGridVirtualizer)();
const layoutMode = virtualizer.store.use(_xVirtualizer.Virtualization.selectors.layoutMode);
const hasContentFiller = layoutMode === 'uncontrolled' && loadingOverlayVariant !== 'skeleton';
const {
getContainerProps,
getScrollerProps,
getScrollerContentProps,
getViewportProps,
getContentProps,
getPositionerProps,
getScrollbarVerticalProps,
getScrollbarHorizontalProps,
getRows,
getScrollAreaProps,
getContainerVerticalProps
} = virtualizer.api.getters;
const rows = getRows(undefined, (0, _rows.gridRowTreeSelector)(apiRef));
const containerVerticalProps = getContainerVerticalProps();
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridMainContainer.GridMainContainer, (0, _extends2.default)({
className: (0, _clsx.default)(classes.root, layoutMode === 'controlled' && _gridClasses.gridClasses['virtualizer--layoutControlled'])
}, getContainerProps(), {
ownerState: ownerState,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, (0, _extends2.default)({
scrollDirection: "left"
}, getScrollAreaProps())), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, (0, _extends2.default)({
scrollDirection: "right"
}, getScrollAreaProps())), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, (0, _extends2.default)({
scrollDirection: "up"
}, getScrollAreaProps())), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, (0, _extends2.default)({
scrollDirection: "down"
}, getScrollAreaProps())), /*#__PURE__*/(0, _jsxRuntime.jsx)(Scroller, (0, _extends2.default)({
className: classes.scroller
}, getScrollerProps(), {
ownerState: ownerState,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerContent.GridVirtualScrollerContent, (0, _extends2.default)({}, getScrollerContentProps(), {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Viewport, (0, _extends2.default)({}, getViewportProps(), {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridTopContainer.GridTopContainer, (0, _extends2.default)({}, containerVerticalProps, {
children: [!rootProps.listView && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridHeaders.GridHeaders, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pinnedRows, {
position: "top"
})]
})), overlayType && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlays.GridOverlayWrapper, {
overlayType: overlayType,
loadingOverlayVariant: loadingOverlayVariant,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Overlay, (0, _extends2.default)({}, rootProps.slotProps?.[overlayType]))
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridVirtualScrollerRenderZone.GridVirtualScrollerRenderZone, (0, _extends2.default)({
role: "rowgroup"
}, getPositionerProps(), {
children: [rows, /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.detailPanels, {})]
})), hasContentFiller && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
className: _gridClasses.gridClasses.contentFiller
}, getContentProps())), hasBottomFiller && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerFiller.GridVirtualScrollerFiller, {
rowsLength: rows.length
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.bottomContainer, (0, _extends2.default)({}, containerVerticalProps, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pinnedRows, {
position: "bottom"
})
}))]
}))
}))
})), hasScrollX && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
children: [rootProps.pinnedColumnsSectionSeparator?.endsWith('shadow') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollShadows.GridScrollShadows, {
position: "horizontal"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
position: "horizontal"
}, getScrollbarHorizontalProps()))]
}), hasScrollY && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
children: [rootProps.pinnedRowsSectionSeparator?.endsWith('shadow') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollShadows.GridScrollShadows, {
position: "vertical"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
position: "vertical"
}, getScrollbarVerticalProps()))]
}), hasScrollX && hasScrollY && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.ScrollbarCorner, {
"aria-hidden": "true"
}), props.children]
}));
}