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
13const StyledTypography = styled(Typography)((
14 {
15 theme
16 }
17) => ({
18 [`& .${classes.divider}`]: {
19 margin: theme.spacing(1, 0),
20 },
21
22 [`&.${classes.textItem}`]: {
23 margin: theme.spacing(1, 2),
24 '&:focus': {outline: 0},
25 }
26}));
27
28export type ActionType = {
29 divider?: boolean;
30 label: JSX.Element | string;
31 id: string;
32 onClick?: () => void;
33};
34
35interface Props {
36 action: ActionType;
37}
38
39const Action = (props: Props): JSX.Element => {
40 const {action} = props;
41 const {divider, onClick, id, label, ...menuItemProps} = action;
42
43
44 if (divider)
45 return <Divider variant="fullWidth" className={classes.divider} />;
46 else if (isValidElement(label)) return label;
47 else if (onClick)
48 return (
49 <MenuItem id={id} onClick={onClick} {...menuItemProps}>
50 {label}
51 </MenuItem>
52 );
53 else
54 return (
55 <StyledTypography variant="body1" id={id} className={classes.textItem}>
56 {label}
57 </StyledTypography>
58 );
59};
60
61export default Action;