diff options
Diffstat (limited to 'front/odiparpack/app/components/Header/UserMenu.js')
| -rw-r--r-- | front/odiparpack/app/components/Header/UserMenu.js | 177 |
1 files changed, 177 insertions, 0 deletions
diff --git a/front/odiparpack/app/components/Header/UserMenu.js b/front/odiparpack/app/components/Header/UserMenu.js new file mode 100644 index 0000000..3ec891e --- /dev/null +++ b/front/odiparpack/app/components/Header/UserMenu.js @@ -0,0 +1,177 @@ +import React, { useState } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import { Link } from 'react-router-dom'; +import Avatar from '@material-ui/core/Avatar'; +import IconButton from '@material-ui/core/IconButton'; +import Button from '@material-ui/core/Button'; +import Info from '@material-ui/icons/Info'; +import Warning from '@material-ui/icons/Warning'; +import Check from '@material-ui/icons/CheckCircle'; +import Error from '@material-ui/icons/RemoveCircle'; +import ExitToApp from '@material-ui/icons/ExitToApp'; +import Badge from '@material-ui/core/Badge'; +import Divider from '@material-ui/core/Divider'; +import Menu from '@material-ui/core/Menu'; +import MenuItem from '@material-ui/core/MenuItem'; +import ListItemIcon from '@material-ui/core/ListItemIcon'; +import ListItemText from '@material-ui/core/ListItemText'; +import ListItemAvatar from '@material-ui/core/ListItemAvatar'; +import Notification from '@material-ui/icons/Notifications'; +import dummy from 'ba-api/dummyContents'; +import messageStyles from 'ba-styles/Messages.scss'; +import avatarApi from 'ba-api/avatars'; +import link from 'ba-api/link'; +import styles from './header-jss'; + +function UserMenu(props) { + const { classes, dark } = props; + const [anchorEl, setAnchorEl] = useState(null); + const [openMenu, setOpenMenu] = useState(null); + + const handleMenu = menu => (event) => { + setOpenMenu(openMenu === menu ? null : menu); + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setOpenMenu(null); + setAnchorEl(null); + }; + + return ( + <div> + <IconButton + aria-haspopup="true" + onClick={handleMenu('notification')} + color="inherit" + className={classNames(classes.notifIcon, dark ? classes.dark : classes.light)} + > + <Badge className={classes.badge} badgeContent={4} color="secondary"> + <Notification /> + </Badge> + </IconButton> + <Menu + id="menu-notification" + anchorEl={anchorEl} + anchorOrigin={{ + vertical: 'top', + horizontal: 'right', + }} + transformOrigin={{ + vertical: 'top', + horizontal: 'right', + }} + className={classes.notifMenu} + PaperProps={{ + style: { + width: 350, + }, + }} + open={openMenu === 'notification'} + onClose={handleClose} + > + <MenuItem onClick={handleClose}> + <div className={messageStyles.messageInfo}> + <ListItemAvatar> + <Avatar alt="User Name" src={avatarApi[0]} /> + </ListItemAvatar> + <ListItemText primary={dummy.text.subtitle} className={classes.textNotif} secondary={dummy.text.date} /> + </div> + </MenuItem> + <Divider variant="inset" /> + <MenuItem onClick={handleClose}> + <div className={messageStyles.messageInfo}> + <ListItemAvatar> + <Avatar className={messageStyles.icon}> + <Info /> + </Avatar> + </ListItemAvatar> + <ListItemText primary={dummy.text.sentences} className={classes.textNotif} secondary={dummy.text.date} /> + </div> + </MenuItem> + <Divider variant="inset" /> + <MenuItem onClick={handleClose}> + <div className={messageStyles.messageSuccess}> + <ListItemAvatar> + <Avatar className={messageStyles.icon}> + <Check /> + </Avatar> + </ListItemAvatar> + <ListItemText primary={dummy.text.subtitle} className={classes.textNotif} secondary={dummy.text.date} /> + </div> + </MenuItem> + <Divider variant="inset" /> + <MenuItem onClick={handleClose}> + <div className={messageStyles.messageWarning}> + <ListItemAvatar> + <Avatar className={messageStyles.icon}> + <Warning /> + </Avatar> + </ListItemAvatar> + <ListItemText primary={dummy.text.subtitle} className={classes.textNotif} secondary={dummy.text.date} /> + </div> + </MenuItem> + <Divider variant="inset" /> + <MenuItem onClick={handleClose}> + <div className={messageStyles.messageError}> + <ListItemAvatar> + <Avatar className={messageStyles.icon}> + <Error /> + </Avatar> + </ListItemAvatar> + <ListItemText primary="Suspendisse pharetra pulvinar sollicitudin. Aenean ut orci eu odio cursus lobortis eget tempus velit. " className={classes.textNotif} secondary="Jan 9, 2016" /> + </div> + </MenuItem> + </Menu> + <Button onClick={handleMenu('user-setting')}> + <Avatar + alt={dummy.user.name} + src={dummy.user.avatar} + /> + </Button> + <Menu + id="menu-appbar" + anchorEl={anchorEl} + anchorOrigin={{ + vertical: 'top', + horizontal: 'right', + }} + transformOrigin={{ + vertical: 'top', + horizontal: 'right', + }} + open={openMenu === 'user-setting'} + onClose={handleClose} + > + <MenuItem onClick={handleClose} component={Link} to={link.profile}>My Profile</MenuItem> + <MenuItem onClick={handleClose} component={Link} to={link.calendar}>My Calendar</MenuItem> + <MenuItem onClick={handleClose} component={Link} to={link.email}> + My Inbox + <ListItemIcon> + <Badge className={classNames(classes.badge, classes.badgeMenu)} badgeContent={2} color="secondary" /> + </ListItemIcon> + </MenuItem> + <Divider /> + <MenuItem onClick={handleClose} component={Link} to="/"> + <ListItemIcon> + <ExitToApp /> + </ListItemIcon> + Log Out + </MenuItem> + </Menu> + </div> + ); +} + +UserMenu.propTypes = { + classes: PropTypes.object.isRequired, + dark: PropTypes.bool, +}; + +UserMenu.defaultProps = { + dark: false +}; + +export default withStyles(styles)(UserMenu); |