@lunit/oui
Version:
Lunit Oncology UI components
30 lines (29 loc) • 1.21 kB
JavaScript
import { Drawer as MuiDrawer, paperClasses } from '@mui/material';
import { styled } from '@mui/material/styles';
const DEFAULT_CLOSED_WIDTH = '52px';
const DEFAULT_OPEN_WIDTH = '240px';
const DEFAULT_WIDE_WIDTH = '280px';
const WIDTH_TRANSITION = 'width 0.2s';
const FORWARDED_EXCLUDES = ['wide', 'closedWidth', 'openWidth', 'wideWidth'];
const BaseDrawer = styled(MuiDrawer, {
shouldForwardProp: (prop) => !FORWARDED_EXCLUDES.includes(prop.toString()),
})(({ theme, open, wide, closedWidth, openWidth, wideWidth }) => {
const resolvedClosed = closedWidth ?? DEFAULT_CLOSED_WIDTH;
const resolvedOpen = openWidth ?? DEFAULT_OPEN_WIDTH;
const resolvedWide = wideWidth ?? DEFAULT_WIDE_WIDTH;
const width = !open ? resolvedClosed : wide ? resolvedWide : resolvedOpen;
return {
width,
background: theme.palette.neutralGrey[90],
boxSizing: 'border-box',
transition: WIDTH_TRANSITION,
[`& .${paperClasses.root}`]: {
width,
background: theme.palette.neutralGrey[90],
boxSizing: 'border-box',
transition: WIDTH_TRANSITION,
overflowY: 'hidden',
},
};
});
export default BaseDrawer;