From c5b771b87b92260e19f0c43ed83151c8e3d49f73 Mon Sep 17 00:00:00 2001 From: ilyayudovin <ilyayudovin123@gmail.com> Date: Fri, 26 Jun 2020 02:49:13 +0300 Subject: feat: add more menu button to profile --- src/pages/ProfilePage/MoreMenu.tsx | 66 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 src/pages/ProfilePage/MoreMenu.tsx (limited to 'src/pages/ProfilePage/MoreMenu.tsx') diff --git a/src/pages/ProfilePage/MoreMenu.tsx b/src/pages/ProfilePage/MoreMenu.tsx new file mode 100644 index 0000000..a4bc993 --- /dev/null +++ b/src/pages/ProfilePage/MoreMenu.tsx @@ -0,0 +1,66 @@ +import React from 'react'; +import IconButton from '@material-ui/core/IconButton'; +import Menu from '@material-ui/core/Menu'; +import MenuItem from '@material-ui/core/MenuItem'; +import MoreHorizIcon from '@material-ui/icons/MoreHoriz'; +import {makeStyles} from "@material-ui/core"; + +interface PropTypes { + logOut: () => void; +} + +const ITEM_HEIGHT = 48; + +const useStyles = makeStyles({ + moreMenu: { + position: 'absolute', + right: 10, + zIndex: 100 + } +}); + +const MoreMenu: React.FC<PropTypes> = ({ logOut }) => { + const classes = useStyles(); + const [anchorEl, setAnchorEl] = React.useState(null); + const open = Boolean(anchorEl); + + const handleClick = (event: any) => { + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + + return ( + <div className={classes.moreMenu}> + <div> + <IconButton + aria-label="more" + aria-controls="long-menu" + aria-haspopup="true" + onClick={handleClick} + > + <MoreHorizIcon/> + </IconButton> + <Menu + id="long-menu" + anchorEl={anchorEl} + keepMounted + open={open} + onClose={handleClose} + PaperProps={{ + style: { + maxHeight: ITEM_HEIGHT * 4.5, + width: '20ch', + }, + }} + > + <MenuItem onClick={logOut}>Log out</MenuItem> + </Menu> + </div> + </div> + ); +}; + +export default MoreMenu; -- cgit v1.2.3 From 5b08023e0aa0e626264673ebb86dc82299a3b54b Mon Sep 17 00:00:00 2001 From: eug-vs <eug-vs@keemail.me> Date: Sat, 27 Jun 2020 19:15:41 +0300 Subject: style: fix ALL linting errors --- src/pages/ProfilePage/MoreMenu.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'src/pages/ProfilePage/MoreMenu.tsx') diff --git a/src/pages/ProfilePage/MoreMenu.tsx b/src/pages/ProfilePage/MoreMenu.tsx index a4bc993..bf3347b 100644 --- a/src/pages/ProfilePage/MoreMenu.tsx +++ b/src/pages/ProfilePage/MoreMenu.tsx @@ -3,7 +3,7 @@ import IconButton from '@material-ui/core/IconButton'; import Menu from '@material-ui/core/Menu'; import MenuItem from '@material-ui/core/MenuItem'; import MoreHorizIcon from '@material-ui/icons/MoreHoriz'; -import {makeStyles} from "@material-ui/core"; +import { makeStyles } from '@material-ui/core'; interface PropTypes { logOut: () => void; @@ -21,10 +21,10 @@ const useStyles = makeStyles({ const MoreMenu: React.FC<PropTypes> = ({ logOut }) => { const classes = useStyles(); - const [anchorEl, setAnchorEl] = React.useState(null); + const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null); const open = Boolean(anchorEl); - const handleClick = (event: any) => { + const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => { setAnchorEl(event.currentTarget); }; @@ -41,7 +41,7 @@ const MoreMenu: React.FC<PropTypes> = ({ logOut }) => { aria-haspopup="true" onClick={handleClick} > - <MoreHorizIcon/> + <MoreHorizIcon /> </IconButton> <Menu id="long-menu" @@ -52,8 +52,8 @@ const MoreMenu: React.FC<PropTypes> = ({ logOut }) => { PaperProps={{ style: { maxHeight: ITEM_HEIGHT * 4.5, - width: '20ch', - }, + width: '20ch' + } }} > <MenuItem onClick={logOut}>Log out</MenuItem> -- cgit v1.2.3