diff --git a/examples/web-analytics/dashboard-app/src/components/DotsMenu.js b/examples/web-analytics/dashboard-app/src/components/DotsMenu.js index a732eeeeae1c3..7620c27a610d0 100644 --- a/examples/web-analytics/dashboard-app/src/components/DotsMenu.js +++ b/examples/web-analytics/dashboard-app/src/components/DotsMenu.js @@ -4,11 +4,6 @@ import Menu from '@material-ui/core/Menu'; import MenuItem from '@material-ui/core/MenuItem'; import MoreVertIcon from '@material-ui/icons/MoreVert'; -const options = [ - 'Edit', - 'Delete' -]; - const ITEM_HEIGHT = 48; export default function DotsMenu({ options }) { @@ -21,7 +16,7 @@ export default function DotsMenu({ options }) { const handleClose = (callback) => { setAnchorEl(null); - callback(); + callback && callback(); }; return ( @@ -39,7 +34,7 @@ export default function DotsMenu({ options }) { anchorEl={anchorEl} keepMounted open={open} - onClose={handleClose} + onClose={() => handleClose() } PaperProps={{ style: { maxHeight: ITEM_HEIGHT * 4.5, diff --git a/examples/web-analytics/dashboard-app/src/components/Dropdown.js b/examples/web-analytics/dashboard-app/src/components/Dropdown.js new file mode 100644 index 0000000000000..e8f5870543aad --- /dev/null +++ b/examples/web-analytics/dashboard-app/src/components/Dropdown.js @@ -0,0 +1,54 @@ +import React from 'react'; +import Button from '@material-ui/core/Button'; +import Menu from '@material-ui/core/Menu'; +import MenuItem from '@material-ui/core/MenuItem'; +import MoreVertIcon from '@material-ui/icons/MoreVert'; +import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + +const ITEM_HEIGHT = 48; + +export default function Dropdown({ value, options }) { + const [anchorEl, setAnchorEl] = React.useState(null); + const open = Boolean(anchorEl); + + const handleClick = event => { + setAnchorEl(event.currentTarget); + }; + + const handleClose = (callback) => { + setAnchorEl(null); + callback && callback(); + }; + + return ( +