frontend/containers/GenericMenu/Action.tsx (view raw)
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(action.label)) return action.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;