192 lines
10 KiB
JavaScript
192 lines
10 KiB
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 _platform = require("@mui/x-internals/platform");
|
|
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 */
|
|
},
|
|
// [iOS-scrollbar-swap]
|
|
// On iOS, virtual scrollbars do not show a thumb unless the user scrolls the element directly:
|
|
// https://github.com/mui/mui-x/issues/22386
|
|
// So keep this scroller's own native scrollbars and hide the ones in `GridVirtualScrollbar`
|
|
// instead to avoid a duplicate thumb.
|
|
[_platform.iOSMediaQuery]: {
|
|
scrollbarWidth: 'auto',
|
|
'&::-webkit-scrollbar': {
|
|
display: 'block'
|
|
}
|
|
},
|
|
'@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'
|
|
}
|
|
});
|
|
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 containerProps = virtualizer.store.use(_xVirtualizer.LayoutDataGrid.selectors.containerProps);
|
|
const scrollerProps = virtualizer.store.use(_xVirtualizer.LayoutDataGrid.selectors.scrollerProps);
|
|
const scrollerContentProps = virtualizer.store.use(_xVirtualizer.LayoutDataGrid.selectors.scrollerContentProps);
|
|
const viewportProps = virtualizer.store.use(_xVirtualizer.LayoutDataGrid.selectors.viewportProps);
|
|
const contentProps = virtualizer.store.use(_xVirtualizer.LayoutDataGrid.selectors.contentProps);
|
|
const positionerProps = virtualizer.store.use(_xVirtualizer.LayoutDataGrid.selectors.positionerProps);
|
|
const scrollbarVerticalProps = virtualizer.store.use(_xVirtualizer.LayoutDataGrid.selectors.scrollbarVerticalProps);
|
|
const scrollbarHorizontalProps = virtualizer.store.use(_xVirtualizer.LayoutDataGrid.selectors.scrollbarHorizontalProps);
|
|
const scrollAreaProps = virtualizer.store.use(_xVirtualizer.LayoutDataGrid.selectors.scrollAreaProps);
|
|
const containerVerticalProps = virtualizer.store.use(_xVirtualizer.LayoutDataGrid.selectors.containerVerticalProps);
|
|
const rows = virtualizer.api.getters.getRows(undefined, (0, _rows.gridRowTreeSelector)(apiRef));
|
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridMainContainer.GridMainContainer, (0, _extends2.default)({
|
|
className: (0, _clsx.default)(classes.root, layoutMode === 'controlled' && _gridClasses.gridClasses['virtualizer--layoutControlled'])
|
|
}, containerProps, {
|
|
ownerState: ownerState,
|
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, (0, _extends2.default)({
|
|
scrollDirection: "left"
|
|
}, scrollAreaProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, (0, _extends2.default)({
|
|
scrollDirection: "right"
|
|
}, scrollAreaProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, (0, _extends2.default)({
|
|
scrollDirection: "up"
|
|
}, scrollAreaProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, (0, _extends2.default)({
|
|
scrollDirection: "down"
|
|
}, scrollAreaProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(Scroller, (0, _extends2.default)({
|
|
className: classes.scroller
|
|
}, scrollerProps, {
|
|
ownerState: ownerState,
|
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerContent.GridVirtualScrollerContent, (0, _extends2.default)({}, scrollerContentProps, {
|
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Viewport, (0, _extends2.default)({}, viewportProps, {
|
|
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"
|
|
}, positionerProps, {
|
|
children: [rows, /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.detailPanels, {})]
|
|
})), hasContentFiller && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
|
|
className: _gridClasses.gridClasses.contentFiller
|
|
}, contentProps)), 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"
|
|
}, scrollbarHorizontalProps))]
|
|
}), 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"
|
|
}, scrollbarVerticalProps))]
|
|
}), hasScrollX && hasScrollY && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.ScrollbarCorner, {
|
|
"aria-hidden": "true"
|
|
}), props.children]
|
|
}));
|
|
} |