1import {ReactNode} from 'react';
 2import Divider from '@material-ui/core/Divider';
 3import Typography from '@material-ui/core/Typography';
 4import MenuItem from '@material-ui/core/MenuItem';
 5import {makeStyles} from '@material-ui/core/styles';
 6
 7type ActionType = {
 8  divider?: boolean;
 9  isComponentLabel?: boolean;
10  label: ReactNode | string;
11  id: string;
12  onClick: () => void;
13};
14
15interface Props {
16  action: ActionType;
17}
18
19const Action = (props: Props) => {
20  const {action} = props;
21  const {
22    divider,
23    onClick,
24    id,
25    label,
26    isComponentLabel,
27    ...menuItemProps
28  } = action;
29  const classes = useStyles();
30
31  if (divider)
32    return <Divider variant="fullWidth" className={classes.divider} />;
33  else if (isComponentLabel) return action.label;
34  else if (onClick)
35    return (
36      <MenuItem id={id} onClick={onClick} {...menuItemProps}>
37        {label}
38      </MenuItem>
39    );
40  else
41    return (
42      <Typography variant="body1" id={id} className={classes.textItem}>
43        {label}
44      </Typography>
45    );
46};
47
48const useStyles = makeStyles(theme => ({
49  divider: {
50    margin: theme.spacing(1, 0),
51  },
52  textItem: {
53    margin: theme.spacing(1, 2),
54    '&:focus': {outline: 0},
55  },
56}));
57
58export default Action;