142 lines
4.2 KiB
JavaScript
142 lines
4.2 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
import { forwardRef } from 'react';
|
|
|
|
// material-ui
|
|
import { useTheme } from '@mui/material/styles';
|
|
import { Card, CardContent, CardHeader, Divider, Typography } from '@mui/material';
|
|
|
|
// project-imports
|
|
import { ThemeMode } from 'config';
|
|
|
|
// ==============================|| CUSTOM - MAIN CARD ||============================== //
|
|
|
|
const MainCard = forwardRef(
|
|
(
|
|
{
|
|
border = true,
|
|
boxShadow,
|
|
children,
|
|
subheader,
|
|
content = true,
|
|
contentSX = {},
|
|
headerSX,
|
|
darkTitle,
|
|
divider = true,
|
|
elevation,
|
|
secondary,
|
|
shadow,
|
|
sx = {},
|
|
title,
|
|
modal = false,
|
|
...others
|
|
},
|
|
ref
|
|
) => {
|
|
const theme = useTheme();
|
|
boxShadow = theme.palette.mode === ThemeMode.DARK ? boxShadow || true : boxShadow;
|
|
|
|
return (
|
|
<Card
|
|
elevation={elevation || 0}
|
|
ref={ref}
|
|
{...others}
|
|
sx={{
|
|
position: 'relative',
|
|
border: border ? '1px solid' : 'none',
|
|
borderRadius: 1,
|
|
borderColor: theme.palette.mode === ThemeMode.DARK ? theme.palette.divider : theme.palette.grey.A800,
|
|
boxShadow: boxShadow && (!border || theme.palette.mode === ThemeMode.DARK) ? shadow || theme.customShadows.z1 : 'inherit',
|
|
':hover': {
|
|
boxShadow: boxShadow ? shadow || theme.customShadows.z1 : 'inherit'
|
|
},
|
|
...(modal && {
|
|
position: 'absolute',
|
|
top: '50%',
|
|
left: '50%',
|
|
transform: 'translate(-50%, -50%)',
|
|
width: { xs: `calc( 100% - 50px)`, sm: 'auto' },
|
|
'& .MuiCardContent-root': {
|
|
overflowY: 'auto',
|
|
minHeight: 'auto',
|
|
maxHeight: `calc(100vh - 200px)`
|
|
}
|
|
}),
|
|
...sx
|
|
}}
|
|
>
|
|
{/* card header and action */}
|
|
{/* {!darkTitle && title && ( */}
|
|
{!darkTitle && (
|
|
<CardHeader
|
|
sx={{ p: 0, '& .MuiCardHeader-action': { m: '0px auto', alignSelf: 'center' }, ...headerSX }}
|
|
titleTypographyProps={{ variant: 'subtitle1' }}
|
|
title={title}
|
|
action={secondary}
|
|
subheader={subheader}
|
|
/>
|
|
)}
|
|
{darkTitle && title && (
|
|
<CardHeader
|
|
sx={{ p: 1, '& .MuiCardHeader-action': { m: '0px auto', alignSelf: 'center' }, ...headerSX }}
|
|
title={<Typography variant="h4">{title || ''}</Typography>}
|
|
action={secondary}
|
|
/>
|
|
)}
|
|
|
|
{/* content & header divider */}
|
|
{title && divider && <Divider />}
|
|
|
|
{/* card content */}
|
|
{content && (
|
|
<CardContent
|
|
sx={{
|
|
overflow: 'auto',
|
|
'&::-webkit-scrollbar': {
|
|
width: '12px', // scroll bar width
|
|
cursor: 'pointer'
|
|
},
|
|
'&::-webkit-scrollbar-thumb': {
|
|
backgroundColor: theme.palette.primary.main, // thumb color
|
|
borderRadius: '8px',
|
|
cursor: 'pointer'
|
|
},
|
|
'&::-webkit-scrollbar-thumb:hover': {
|
|
backgroundColor: theme.palette.primary.dark, // hover color
|
|
cursor: 'pointer'
|
|
},
|
|
'&::-webkit-scrollbar-track': {
|
|
backgroundColor: theme.palette.primary.lighter,
|
|
cursor: 'pointer'
|
|
},
|
|
...contentSX
|
|
}}
|
|
>
|
|
{children}
|
|
</CardContent>
|
|
)}
|
|
{!content && children}
|
|
</Card>
|
|
);
|
|
}
|
|
);
|
|
|
|
MainCard.propTypes = {
|
|
border: PropTypes.bool,
|
|
boxShadow: PropTypes.bool,
|
|
children: PropTypes.node,
|
|
subheader: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
|
|
content: PropTypes.bool,
|
|
contentClass: PropTypes.string,
|
|
contentSX: PropTypes.object,
|
|
darkTitle: PropTypes.bool,
|
|
divider: PropTypes.bool,
|
|
elevation: PropTypes.number,
|
|
secondary: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.object]),
|
|
shadow: PropTypes.string,
|
|
sx: PropTypes.object,
|
|
title: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.object]),
|
|
modal: PropTypes.bool
|
|
};
|
|
|
|
export default MainCard;
|