76 lines
1.6 KiB
JavaScript
76 lines
1.6 KiB
JavaScript
|
import * as React from 'react';
|
||
|
|
import IconButton from '@mui/material/IconButton';
|
||
|
|
import Box from '@mui/material/Box';
|
||
|
|
import Menu from '@mui/material/Menu';
|
||
|
|
import MenuItem from '@mui/material/MenuItem';
|
||
|
|
import MoreVertIcon from '@mui/icons-material/MoreVert';
|
||
|
|
|
||
|
|
const options = [
|
||
|
|
'None',
|
||
|
|
'Atria',
|
||
|
|
'Callisto',
|
||
|
|
'Dione',
|
||
|
|
'Ganymede',
|
||
|
|
'Hangouts Call',
|
||
|
|
'Luna',
|
||
|
|
'Oberon',
|
||
|
|
'Phobos',
|
||
|
|
'Pyxis',
|
||
|
|
'Sedna',
|
||
|
|
'Titania',
|
||
|
|
'Triton',
|
||
|
|
'Umbriel',
|
||
|
|
];
|
||
|
|
|
||
|
|
const ITEM_HEIGHT = 48;
|
||
|
|
|
||
|
|
class LongMenu extends React.Component {
|
||
|
|
buttonRef = React.createRef();
|
||
|
|
|
||
|
|
state = {
|
||
|
|
anchorEl: null,
|
||
|
|
};
|
||
|
|
|
||
|
|
componentDidMount() {
|
||
|
|
this.setState({ anchorEl: this.buttonRef.current });
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const { anchorEl } = this.state;
|
||
|
|
const open = Boolean(anchorEl);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box sx={{ m: '200px 0 200px', background: 'papayawhip', p: '0 100px' }}>
|
||
|
|
<IconButton
|
||
|
|
ref={this.buttonRef}
|
||
|
|
aria-label="more"
|
||
|
|
aria-owns={open ? 'long-menu' : undefined}
|
||
|
|
aria-haspopup="true"
|
||
|
|
onClick={this.handleClick}
|
||
|
|
>
|
||
|
|
<MoreVertIcon />
|
||
|
|
</IconButton>
|
||
|
|
<Menu
|
||
|
|
id="long-menu"
|
||
|
|
anchorEl={anchorEl}
|
||
|
|
open={open}
|
||
|
|
PaperProps={{
|
||
|
|
style: {
|
||
|
|
maxHeight: ITEM_HEIGHT * 4.5,
|
||
|
|
width: 200,
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{options.map((option) => (
|
||
|
|
<MenuItem key={option} selected={option === 'Pyxis'}>
|
||
|
|
{option}
|
||
|
|
</MenuItem>
|
||
|
|
))}
|
||
|
|
</Menu>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default LongMenu;
|