import * as React from 'react';
|
import { ReactElement, ReactNode } from 'react';
|
import {
|
Box,
|
List,
|
MenuItem,
|
ListItemIcon,
|
Typography,
|
Collapse,
|
Tooltip,
|
} from '@mui/material';
|
import ExpandMore from '@mui/icons-material/ExpandMore';
|
import { useTranslate, useSidebarState } from 'react-admin';
|
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
|
const SubMenu = (props) => {
|
const { handleToggle, isOpen, name, icon, children, dense } = props;
|
const translate = useTranslate();
|
const [sidebarIsOpen] = useSidebarState();
|
|
const header = (
|
<MenuItem dense={dense} onClick={handleToggle} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
<Box sx={{ display: 'flex', alignItems: 'center', flex: 1 }}>
|
<ListItemIcon sx={{ minWidth: 40, color: 'text.secondary', display: 'flex', alignItems: 'center' }}>
|
{icon}
|
</ListItemIcon>
|
<Typography variant="inherit" color="textSecondary" sx={{ ml: 1, display: 'flex', alignItems: 'center' }}>
|
{translate(name)}
|
</Typography>
|
</Box>
|
<Box sx={{ display: 'flex', alignItems: 'center', minWidth: 24 }}>
|
{isOpen ? <KeyboardArrowDownIcon fontSize="small" sx={{color: 'text.secondary'}} /> : <KeyboardArrowRightIcon fontSize="small" sx={{color: 'text.secondary'}} />}
|
</Box>
|
</MenuItem>
|
);
|
|
return (
|
<div>
|
{sidebarIsOpen || isOpen ? (
|
header
|
) : (
|
<Tooltip title={translate(name)} placement="right">
|
{header}
|
</Tooltip>
|
)}
|
<Collapse in={isOpen} timeout="auto" unmountOnExit>
|
<List
|
dense={dense}
|
component="div"
|
disablePadding
|
// sx={{
|
// '& .MuiMenuItem-root': {
|
// transition:
|
// 'padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms',
|
// paddingLeft: theme =>
|
// sidebarIsOpen
|
// ? theme.spacing(4)
|
// : theme.spacing(2),
|
// },
|
// // 显示二级菜单的icon
|
// '& .RaMenuItemLink-icon': {
|
// visibility: 'visible !important',
|
// minWidth: '24px'
|
// }
|
// }}
|
>
|
{children}
|
</List>
|
</Collapse>
|
</div>
|
);
|
};
|
|
export default SubMenu;
|
