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