@elacity-js/uikit
Version:
React / Material UI Design kit for Elacity project
43 lines (40 loc) • 1.46 kB
JavaScript
import { __rest } from '../node_modules/tslib/tslib.es6.js';
import { jsx } from 'react/jsx-runtime';
import SimpleBarReact from 'simplebar-react';
import { styled, alpha } from '@mui/material/styles';
import { Box } from '@mui/material';
const RootStyle = styled('div')({
flexGrow: 1,
height: '100%',
overflow: 'hidden',
});
const SimpleBarStyle = styled(SimpleBarReact)(({ theme }) => ({
maxHeight: '100%',
'& .simplebar-scrollbar': {
'&:before': {
backgroundColor: alpha(theme.palette.grey[600], 0.48),
},
'&.simplebar-visible:before': {
opacity: 1,
},
},
'& .simplebar-track.simplebar-vertical': {
width: 10,
},
'& .simplebar-track.simplebar-horizontal .simplebar-scrollbar': {
height: 6,
},
'& .simplebar-mask': {
zIndex: 'inherit',
},
}));
function Scrollbar(_a) {
var { children, sx } = _a, other = __rest(_a, ["children", "sx"]);
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (isMobile) {
return (jsx(Box, Object.assign({ sx: Object.assign({ overflowX: 'auto' }, sx) }, other, { children: children })));
}
return (jsx(RootStyle, { children: jsx(SimpleBarStyle, Object.assign({ timeout: 500, clickOnTrack: false, sx: sx }, other, { children: children })) }));
}
export { Scrollbar as default };
//# sourceMappingURL=Scrollbar.js.map