You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
2.5 KiB
120 lines
2.5 KiB
import { Box, BoxProps, GlobalStyles, PaperProps, styled } from '@mui/material'; |
|
import { FC } from 'react'; |
|
|
|
import { |
|
BORDER_RADIUS, |
|
PANEL_BACKGROUND, |
|
TEXT, |
|
} from '../../lib/consts/DEFAULT_THEME'; |
|
|
|
const PREFIX = 'Panel'; |
|
|
|
const classes = { |
|
paper: `${PREFIX}-paper`, |
|
square: `${PREFIX}-square`, |
|
topSquare: `${PREFIX}-topSquare`, |
|
bottomSquare: `${PREFIX}-bottomSquare`, |
|
}; |
|
|
|
const StyledBox = styled(Box)(() => ({ |
|
margin: '1em', |
|
position: 'relative', |
|
|
|
[`& .${classes.paper}`]: { |
|
backgroundColor: PANEL_BACKGROUND, |
|
height: '100%', |
|
opacity: 0.8, |
|
padding: '2.1em', |
|
position: 'relative', |
|
width: '100%', |
|
zIndex: 10, |
|
}, |
|
|
|
[`& .${classes.square}`]: { |
|
content: '""', |
|
position: 'absolute', |
|
width: '2.1em', |
|
height: '2.1em', |
|
border: '1px', |
|
borderColor: TEXT, |
|
borderWidth: '1px', |
|
borderRadius: BORDER_RADIUS, |
|
borderStyle: 'solid', |
|
padding: 0, |
|
margin: 0, |
|
}, |
|
|
|
[`& .${classes.topSquare}`]: { |
|
top: '-.3em', |
|
left: '-.3em', |
|
}, |
|
|
|
[`& .${classes.bottomSquare}`]: { |
|
bottom: '-.3em', |
|
right: '-.3em', |
|
}, |
|
})); |
|
|
|
type PanelOptionalPropsWithDefault = { |
|
paperProps?: BoxProps; |
|
}; |
|
|
|
type PanelOptionalProps = PanelOptionalPropsWithDefault; |
|
|
|
type PanelProps = PaperProps & PanelOptionalProps; |
|
|
|
const PANEL_DEFAULT_PROPS: Required<PanelOptionalPropsWithDefault> = { |
|
paperProps: {}, |
|
}; |
|
|
|
const styledScrollbars = ( |
|
<GlobalStyles |
|
styles={{ |
|
'*::-webkit-scrollbar': { |
|
width: '.6em', |
|
}, |
|
'*::-webkit-scrollbar-track': { |
|
backgroundColor: PANEL_BACKGROUND, |
|
}, |
|
'*::-webkit-scrollbar-thumb': { |
|
backgroundColor: TEXT, |
|
outline: '1px solid transparent', |
|
borderRadius: BORDER_RADIUS, |
|
}, |
|
}} |
|
/> |
|
); |
|
|
|
const Panel: FC<PanelProps> = ({ |
|
children, |
|
classes: rootClasses, |
|
className: rootClassName, |
|
paperProps: { |
|
className: paperClassName, |
|
...restPaperProps |
|
} = PANEL_DEFAULT_PROPS.paperProps, |
|
sx: rootSx, |
|
...restRootProps |
|
}) => ( |
|
<StyledBox |
|
{...{ |
|
classes: rootClasses, |
|
className: rootClassName, |
|
sx: rootSx, |
|
...restRootProps, |
|
}} |
|
> |
|
{styledScrollbars} |
|
<Box className={`${classes.square} ${classes.topSquare}`} /> |
|
<Box className={`${classes.square} ${classes.bottomSquare}`} /> |
|
<Box {...restPaperProps} className={`${classes.paper} ${paperClassName}`}> |
|
{children} |
|
</Box> |
|
</StyledBox> |
|
); |
|
|
|
Panel.defaultProps = PANEL_DEFAULT_PROPS; |
|
|
|
export { classes as panelClasses }; |
|
|
|
export default Panel;
|
|
|