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;