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={{mt: 0, mb: 0}} />;
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;