Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 2x 2x 2x 2x | import { forwardRef, memo } from "react";
import Box from "@mui/material/Box";
import SimpleBar from "simplebar-react";
import { alpha, styled } from "@mui/material/styles";
const StyledRootScrollbar = styled("div")(() => ({
flexGrow: 1,
height: "100%",
overflow: "hidden",
}));
const StyledScrollbar = styled(SimpleBar)(({ theme }) => ({
maxHeight: "100%",
"& .simplebar-scrollbar": {
"&:before": {
backgroundColor: alpha(theme.palette.grey[600], 0.48),
},
"&.simplebar-visible:before": {
opacity: 1,
},
},
"& .simplebar-mask": {
zIndex: "inherit",
},
}));
const Scrollbar = forwardRef(({ children, sx, ...other }, ref) => {
const userAgent = typeof navigator === "undefined" ? "SSR" : navigator.userAgent;
const mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
if (mobile) {
return (
<Box ref={ref} sx={{ overflow: "auto", ...sx }} {...other}>
{children}
</Box>
);
}
return (
<StyledRootScrollbar>
<StyledScrollbar
scrollableNodeProps={{
ref,
}}
clickOnTrack={false}
sx={sx}
{...other}
>
{children}
</StyledScrollbar>
</StyledRootScrollbar>
);
});
Scrollbar.displayName = "Scrollbar";
export default memo(Scrollbar);
|