1import React from 'react';
 2
 3import IconButton, { IconButtonProps } from '@material-ui/core/IconButton';
 4import Menu from '@material-ui/core/Menu';
 5import MenuItem from '@material-ui/core/MenuItem';
 6import HistoryIcon from '@material-ui/icons/History';
 7
 8const options = [
 9  'None',
10  'Atria',
11  'Callisto',
12  'Dione',
13  'Ganymede',
14  'Hangouts Call',
15  'Luna',
16  'Oberon',
17  'Phobos',
18  'Pyxis',
19  'Sedna',
20  'Titania',
21  'Triton',
22  'Umbriel',
23];
24
25const ITEM_HEIGHT = 48;
26
27type Props = {
28  iconBtnProps?: IconButtonProps;
29};
30function EditHistoryMenu({ iconBtnProps }: Props) {
31  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
32  const open = Boolean(anchorEl);
33
34  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
35    setAnchorEl(event.currentTarget);
36  };
37
38  const handleClose = () => {
39    setAnchorEl(null);
40  };
41
42  return (
43    <div>
44      <IconButton
45        aria-label="more"
46        aria-controls="long-menu"
47        aria-haspopup="true"
48        onClick={handleClick}
49        {...iconBtnProps}
50      >
51        <HistoryIcon />
52      </IconButton>
53      <Menu
54        id="long-menu"
55        anchorEl={anchorEl}
56        keepMounted
57        open={open}
58        onClose={handleClose}
59        PaperProps={{
60          style: {
61            maxHeight: ITEM_HEIGHT * 4.5,
62            width: '20ch',
63          },
64        }}
65      >
66        {options.map((option) => (
67          <MenuItem
68            key={option}
69            selected={option === 'Pyxis'}
70            onClick={handleClose}
71          >
72            {option}
73          </MenuItem>
74        ))}
75      </Menu>
76    </div>
77  );
78}
79
80export default EditHistoryMenu;