@material-ui/core#MenuList JavaScript Examples
The following examples show how to use
@material-ui/core#MenuList.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: JoinDropdown.jsx From frontend with MIT License | 5 votes |
|
export default function JoinDropdown({ toggleVolunteerModal, toggleOrganizationModal }) {
const classes = useStyles();
const [open, setOpen] = React.useState(false);
const anchorRef = React.useRef(null);
const handleToggle = () => {
setOpen((prevOpen) => !prevOpen);
};
const handleClose = (event) => {
if (anchorRef.current && anchorRef.current.contains(event.target)) {
return;
}
setOpen(false);
};
const handleCloseAndVolunteerModal = (event) => {
handleClose(event);
toggleVolunteerModal();
}
const handleCloseAndOrganizationModal = (event) => {
handleClose(event);
toggleOrganizationModal();
}
function handleListKeyDown(event) {
if (event.key === 'Tab') {
event.preventDefault();
setOpen(false);
}
}
// Return focus to the button when we transitioned from !open -> open.
const prevOpen = React.useRef(open);
React.useEffect(() => {
if (prevOpen.current === true && open === false) {
anchorRef.current.focus();
}
prevOpen.current = open;
}, [open]);
return (
<div>
<Button
ref={anchorRef}
aria-controls={open ? 'menu-list-grow' : undefined}
aria-haspopup="true"
onClick={handleToggle}
>
{plusIcon}
<span className="joinDropdownTitle">{title}</span>
</Button>
<Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>
{({ TransitionProps, placement }) => (
<Grow
{...TransitionProps}
style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
>
<Paper>
<ClickAwayListener onClickAway={handleClose}>
<MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}>
<MenuItem onClick={handleCloseAndOrganizationModal}>{options[0]}</MenuItem>
<MenuItem onClick={handleCloseAndVolunteerModal}>{options[1]}</MenuItem>
</MenuList>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
</div>
);
}
Example #2
| Source File: sidelist.js From Codelabz with Apache License 2.0 | 5 votes |
|
SideList = (props) => {
const useStyles = makeStyles((theme) => ({
icons: {
width: "20px",
height: "20px",
},
listIcon: {
minWidth: "30px"
},
paper: {
display: "flex",
minWidth: "100%",
border: "none",
backgrounColor: "transparent",
boxShadow: "none"
},
navLink: {
display: "flex",
flexDirection: "row",
alignItems: "center"
},
menuList: {
border: "none", boxShadow: "none"
},
paper:{
maxWidth: '100%', border: "none", boxShadow: "none"
}
}));
const classes = useStyles();
return (
<Paper className={classes.paper}>
<MenuList className={classes.menuList}>
{props.menuItems.map(function (item, index) {
return (
<>
{
item.link && <MenuItem key={item.link}>
<NavLink to={item.link} className={classes.navLink }>
{item.img && <ListItemIcon className={classes.listIcon}>
<img src={item.img} className={classes.icons} />
</ListItemIcon>}
<ListItemText>{item.name}</ListItemText>
</NavLink>
</MenuItem>
}
{
!item.link && !item.onClick &&<MenuItem key={item.name}>
{item.img && <ListItemIcon className={classes.listIcon}>
<img src={item.img} className={classes.icons} />
</ListItemIcon>}
<ListItemText>{item.name}</ListItemText>
</MenuItem>
}
{
!item.link && item.onClick && <MenuItem key={item.name} onClick={()=>item.onClick}>
{item.img && <ListItemIcon className={classes.listIcon}>
<img src={item.img} className={classes.icons} />
</ListItemIcon>}
<ListItemText>{item.name}</ListItemText>
</MenuItem>
}
</>
)})}
</MenuList>
</Paper>
);
}
Example #3
| Source File: ShareQueue.jsx From simplQ-frontend with GNU General Public License v3.0 | 4 votes |
|
ShareQueue = ({ queueName, tourTag }) => {
const [open, setOpen] = useState(false);
const anchorRef = useRef(null);
const handleToggle = () => {
setOpen((prevOpen) => !prevOpen);
};
const handleClose = (event) => {
if (anchorRef.current && anchorRef.current.contains(event.target)) {
return;
}
setOpen(false);
};
const link = `${window.location.origin}/j/${queueName}`;
const quote = `Hi! Use ${link} to join my queue and get live updates.`;
return (
<div className={styles['share']}>
<ButtonGroup
reactour-selector={tourTag}
variant="contained"
className={styles['button-background']}
ref={anchorRef}
aria-label="split button"
>
<CopyButton {...{ link }} />
<Button
className={styles['button-background']}
color="primary"
size="small"
onClick={handleToggle}
>
<ArrowDropDownIcon />
</Button>
</ButtonGroup>
<Popper
className={styles['popper']}
open={open}
anchorEl={anchorRef.current}
transition
disablePortal
placement="bottom-end"
>
{({ TransitionProps, placement }) => (
<Grow
in={TransitionProps?.in}
onEnter={TransitionProps?.onEnter}
onExited={TransitionProps?.onExited}
style={{
transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom',
}}
>
<Paper>
<ClickAwayListener onClickAway={handleClose}>
<MenuList>
<Typography>
<b>Share</b>
</Typography>
<Divider />
<MenuItem>
<FacebookShareButton
url={link}
quote={quote}
className={styles['share-button']}
>
<FacebookIcon size={24} round className={styles['share-icon']} />
<Typography>Facebook</Typography>
</FacebookShareButton>
</MenuItem>
<Divider />
<MenuItem>
<TwitterShareButton url={link} title={quote} className={styles['share-button']}>
<TwitterIcon size={24} round className={styles['share-icon']} />
<Typography>Twitter</Typography>
</TwitterShareButton>
</MenuItem>
<Divider />
<MenuItem>
<WhatsappShareButton
url={link}
title={quote}
className={styles['share-button']}
>
<WhatsappIcon size={24} round className={styles['share-icon']} />
<Typography>Whatsapp</Typography>
</WhatsappShareButton>
</MenuItem>
</MenuList>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
</div>
);
}
Example #4
| Source File: OftadehAvatarMenu.jsx From oftadeh-react-admin with MIT License | 4 votes |
|
OftadehAvatarMenu = props => {
const classes = useStyles(props);
const [open, setOpen] = React.useState(false);
const anchorRef = React.useRef(null);
const handleToggle = () => {
setOpen(prevOpen => !prevOpen);
};
const handleClose = event => {
if (anchorRef.current && anchorRef.current.contains(event.target)) {
return;
}
setOpen(false);
};
return (
<>
<ListItem
button
ref={anchorRef}
aria-controls={open ? "menu-list-grow" : undefined}
aria-haspopup="true"
onClick={handleToggle}
alignItems="flex-start"
className={classes.paddingRightZero}
>
<ListItemAvatar>
<OftadehAvatarBadge
overlap="circle"
anchorOrigin={{
vertical: "bottom",
horizontal: "right"
}}
variant="dot"
>
<Avatar
alt="Mohammad Oftadeh"
src="https://lh5.googleusercontent.com/-WqhFe4eMggE/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rdFUa5CK9Wi6g5qd8ZUt6apKFYSwA/photo.jpg?sz=328"
/>
</OftadehAvatarBadge>
</ListItemAvatar>
<Hidden implementation="css" smDown>
<ListItemText
primary={
<React.Fragment>
<Typography component="span" variant="subtitle2">
Mohammad Oftadeh
</Typography>
</React.Fragment>
}
secondary={
<React.Fragment>
<Typography
component="span"
variant="caption"
className={classes.inline}
color="textPrimary"
>
Admin
</Typography>
</React.Fragment>
}
/>
</Hidden>
</ListItem>
<Popper
open={open}
anchorEl={anchorRef.current}
role={undefined}
transition
disablePortal
>
{({ TransitionProps, placement }) => (
<Grow
{...TransitionProps}
style={{
transformOrigin:
placement === "bottom" ? "center top" : "center bottom"
}}
>
<Paper>
<ClickAwayListener onClickAway={handleClose}>
<MenuList autoFocusItem={open} id="menu-list-grow">
<MenuItem onClick={handleClose}>
<ListItemIcon className={classes.menuIcon}>
<AccountCircle fontSize="small" />
</ListItemIcon>
Profile
</MenuItem>
<MenuItem onClick={handleClose}>
<ListItemIcon className={classes.menuIcon}>
<Settings fontSize="small" />
</ListItemIcon>
settings
</MenuItem>
<MenuItem onClick={handleClose}>
<ListItemIcon className={classes.menuIcon}>
<ExitToApp fontSize="small" />
</ListItemIcon>
Logout
</MenuItem>
</MenuList>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
</>
);
}
Example #5
| Source File: ActionCardContainer.js From mui-storyblok with MIT License | 4 votes |
|
ActionCardContainer = ({
rootClass,
menuName,
actionCards,
height,
width,
dataBlokC,
dataBlokUid,
storyblokClass,
}) => {
const [open, setOpen] = useState(false);
const anchorRef = useRef(null);
const defaultStyling = {
padding: '20px 10%',
marginTop: '10px',
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-evenly',
outline: 'none',
};
const styles = StoryBlok.arrayToMuiStyles(rootClass, { ...defaultStyling });
const handleToggle = () => {
setOpen(prevOpen => !prevOpen);
};
const handleClose = (event) => {
if (anchorRef.current && anchorRef.current.contains(event.target)) {
return;
}
setOpen(false);
};
return (
<div
className={`${styles.root} ${storyblokClass}`}
data-blok-c={dataBlokC}
data-blok-uid={dataBlokUid}
>
<Button
ref={anchorRef}
aria-controls={open ? 'menu-list-grow' : undefined}
aria-haspopup="true"
onClick={handleToggle}
data-testid="menuButton"
>
<Typography {...menuName[0]} />
</Button>
<Popper
open={open}
anchorEl={anchorRef.current}
role={undefined}
transition
disablePortal
>
{({ TransitionProps }) => (
<Grow
{...TransitionProps}
style={{ transformOrigin: 'center top' }}
>
<Paper style={{ minWidth: '100vw', height: '100%' }} id="paper-test">
<ClickAwayListener onClickAway={handleClose}>
<MenuList
autoFocusItem={open}
id="menu-list-grow"
className={styles.root}
>
{actionCards.map((card, index) => (
<MuiActionCard
{...card}
key={index}
height={height}
width={width}
/>
))}
</MenuList>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
</div>
);
}
Example #6
| Source File: NavUserMenuBtn.js From youtube-clone with MIT License | 4 votes |
|
NavUserMenuBtn = () => {
const dispatch = useDispatch();
const image = useSelector(({ channel }) => channel.image);
const name = useSelector(({ channel }) => channel.name);
const email = useSelector(({ channel }) => channel.email);
const id = useSelector(({ channel }) => channel.id);
const classes = useStyles();
const [open, setOpen] = React.useState(false);
const anchorRef = React.useRef(null);
const handleToggle = () => {
setOpen((prevOpen) => !prevOpen);
};
const handleClose = (event) => {
if (anchorRef.current && anchorRef.current.contains(event.target)) {
return;
}
setOpen(false);
};
function handleListKeyDown(event) {
if (event.key === "Tab") {
event.preventDefault();
setOpen(false);
}
}
return (
<>
<IconButton
ref={anchorRef}
aria-controls={open ? "menu-list-grow" : undefined}
aria-haspopup="true"
onClick={handleToggle}
className={classes.iconButton}
>
<Avatar alt="Channel Image" src={image} />
</IconButton>
<Popper
open={open}
anchorEl={anchorRef.current}
role={undefined}
transition
disablePortal
>
<Paper>
<ClickAwayListener onClickAway={handleClose}>
<MenuList
autoFocusItem={open}
style={{ width: "350px" }}
id="menu-list-grow"
onKeyDown={handleListKeyDown}
>
<Grid
container
spacing={1}
alignItems="center"
wrap="nowrap"
style={{ padding: "12px 24px" }}
>
<Grid item>
<Avatar alt="Profile Image" src={image} size="large" />
</Grid>
<Grid item>
<Grid container style={{ overflow: "hidden" }}>
<Grid item xs={12}>
<strong>{name}</strong>
</Grid>{" "}
<Grid item>{email}</Grid>
</Grid>
</Grid>
</Grid>
<Divider />
<List component="nav" aria-labelledby="nested-list-subheader">
<NavItem
to={`/channel/${id}`}
title={"Your Channel"}
icon={ExitToAppIcon}
onClick={handleClose}
/>
<NavItem
title={"Sign Out"}
icon={ExitToAppIcon}
onClick={(e) => {
handleClose(e);
dispatch(logoutChannel());
}}
/>
</List>
<Divider />
</MenuList>
</ClickAwayListener>
</Paper>
</Popper>
</>
);
}
Example #7
| Source File: NavVidMenuBtn.js From youtube-clone with MIT License | 4 votes |
|
NavVideoMenuBtn = () => {
const dispatch = useDispatch();
const isModalOpen = useSelector(({ upload }) => upload.isOpen);
const isAuth = useSelector(({ channel }) => channel.isAuth);
const classes = useStyles();
const [open, setOpen] = React.useState(false);
const anchorBtnRef = React.useRef(null);
const handleToggle = () => {
setOpen((prevOpen) => !prevOpen);
};
const handleClose = (event) => {
if (anchorBtnRef.current && anchorBtnRef.current.contains(event.target)) {
return;
}
setOpen(false);
};
const handleUploadClick = () => {
handleToggle();
if (isAuth) {
dispatch(setModal(true));
} else {
window.location.assign(urlJoin(BACKEND_URL, "/api/auth/google"));
}
};
const handleModalClose = (event) => {
dispatch(setModal(false));
// dispatch(resetUpload());
};
function handleListKeyDown(event) {
if (event.key === "Tab") {
event.preventDefault();
setOpen(false);
}
}
return (
<>
<IconButton
ref={anchorBtnRef}
aria-controls={open ? "menu-list-grow" : undefined}
aria-haspopup="true"
className={classes.iconButton}
onClick={handleToggle}
>
<VideoIcon />
</IconButton>
{isModalOpen && (
<UploadModal isOpen={isModalOpen} handleClose={handleModalClose} />
)}
(
<Popper
open={open}
anchorEl={anchorBtnRef.current}
role={undefined}
transition
disablePortal
>
<Paper>
<ClickAwayListener onClickAway={handleClose}>
<MenuList
autoFocusItem={open}
id="menu-list-grow"
onKeyDown={handleListKeyDown}
>
<List component="nav" aria-labelledby="nested-list-subheader">
<NavItem
title="Upload"
icon={TVIcon}
onClick={handleUploadClick}
/>
<NavItem
to="/live"
title="Go live"
icon={LiveIcon}
onClick={handleClose}
/>
</List>
<Divider />
</MenuList>
</ClickAwayListener>
</Paper>
</Popper>
)}
</>
);
}
