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