|
|
@ -1,5 +1,5 @@ |
|
|
|
|
|
|
|
import { Box, BoxProps, GlobalStyles, PaperProps, styled } from '@mui/material'; |
|
|
|
import { FC } from 'react'; |
|
|
|
import { FC } from 'react'; |
|
|
|
import { Box, GlobalStyles, PaperProps, styled } from '@mui/material'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import { |
|
|
|
import { |
|
|
|
BORDER_RADIUS, |
|
|
|
BORDER_RADIUS, |
|
|
@ -55,7 +55,17 @@ const StyledBox = styled(Box)(() => ({ |
|
|
|
}, |
|
|
|
}, |
|
|
|
})); |
|
|
|
})); |
|
|
|
|
|
|
|
|
|
|
|
type PanelProps = PaperProps; |
|
|
|
type PanelOptionalPropsWithDefault = { |
|
|
|
|
|
|
|
paperProps?: BoxProps; |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
type PanelOptionalProps = PanelOptionalPropsWithDefault; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
type PanelProps = PaperProps & PanelOptionalProps; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const PANEL_DEFAULT_PROPS: Required<PanelOptionalPropsWithDefault> = { |
|
|
|
|
|
|
|
paperProps: {}, |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const styledScrollbars = ( |
|
|
|
const styledScrollbars = ( |
|
|
|
<GlobalStyles |
|
|
|
<GlobalStyles |
|
|
@ -79,6 +89,10 @@ const Panel: FC<PanelProps> = ({ |
|
|
|
children, |
|
|
|
children, |
|
|
|
classes: rootClasses, |
|
|
|
classes: rootClasses, |
|
|
|
className: rootClassName, |
|
|
|
className: rootClassName, |
|
|
|
|
|
|
|
paperProps: { |
|
|
|
|
|
|
|
className: paperClassName, |
|
|
|
|
|
|
|
...restPaperProps |
|
|
|
|
|
|
|
} = PANEL_DEFAULT_PROPS.paperProps, |
|
|
|
sx: rootSx, |
|
|
|
sx: rootSx, |
|
|
|
...restRootProps |
|
|
|
...restRootProps |
|
|
|
}) => ( |
|
|
|
}) => ( |
|
|
@ -91,10 +105,14 @@ const Panel: FC<PanelProps> = ({ |
|
|
|
}} |
|
|
|
}} |
|
|
|
> |
|
|
|
> |
|
|
|
{styledScrollbars} |
|
|
|
{styledScrollbars} |
|
|
|
<div className={`${classes.square} ${classes.topSquare}`} /> |
|
|
|
<Box className={`${classes.square} ${classes.topSquare}`} /> |
|
|
|
<div className={`${classes.square} ${classes.bottomSquare}`} /> |
|
|
|
<Box className={`${classes.square} ${classes.bottomSquare}`} /> |
|
|
|
<div className={classes.paper}>{children}</div> |
|
|
|
<Box {...restPaperProps} className={`${classes.paper} ${paperClassName}`}> |
|
|
|
|
|
|
|
{children} |
|
|
|
|
|
|
|
</Box> |
|
|
|
</StyledBox> |
|
|
|
</StyledBox> |
|
|
|
); |
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Panel.defaultProps = PANEL_DEFAULT_PROPS; |
|
|
|
|
|
|
|
|
|
|
|
export default Panel; |
|
|
|
export default Panel; |
|
|
|