frontend/containers/GenericMenu/Action.tsx (view raw)
1import {isValidElement} from 'react';
2import {styled} from '@mui/material/styles';
3import Divider from '@mui/material/Divider';
4import Typography from '@mui/material/Typography';
5import MenuItem from '@mui/material/MenuItem';
6const PREFIX = 'Action';
7
8const classes = {
9 divider: `${PREFIX}-divider`,
10 textItem: `${PREFIX}-textItem`,
11};
12
13export type ActionType = {
14 divider?: boolean;
15 label: JSX.Element | string;
16 id: string;
17 onClick?: () => void;
18};
19
20interface Props {
21 action: ActionType;
22}
23
24const Action = (props: Props): JSX.Element => {
25 const {action} = props;
26 const {divider, onClick, id, label, ...menuItemProps} = action;
27
28 if (divider) return <Divider variant="fullWidth" sx={{my: 1}} />;
29 else if (isValidElement(label)) return label;
30 else if (onClick)
31 return (
32 <MenuItem id={id} onClick={onClick} {...menuItemProps}>
33 {label}
34 </MenuItem>
35 );
36 else
37 return (
38 <StyledTypography variant="body1" id={id} className={classes.textItem}>
39 {label}
40 </StyledTypography>
41 );
42};
43
44const StyledTypography = styled(Typography)(({theme}) => ({
45 [`&.${classes.textItem}`]: {
46 margin: theme.spacing(1, 2),
47 '&:focus': {outline: 0},
48 },
49}));
50
51export default Action;