@material-ui/icons#MenuBook JavaScript Examples

The following examples show how to use @material-ui/icons#MenuBook. 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: MenuPopupButton.js    From git-brunching with GNU General Public License v3.0 5 votes vote down vote up 
MenuPopupButton = (props) => {
    const { restaurant, toBooking, isLoading, getRestaurantMenu, menus } = props;
    const [open, setOpen] = React.useState(false);
    const restaurantName = restaurant.Name;
    const currentRestaurantID = restaurant.ID;

    // Show popup
    const handleClickOpen = (e) => {
      getRestaurantMenu(currentRestaurantID);
      // Prevent click from propagating to restaurant card and going straight to booking
      e.stopPropagation();
      setOpen(true);
    }
  
    // Hide popup
    const handleClose = (e) => {
      // Prevent click from propagating to restaurant card when exiting popup
      e.stopPropagation();
      setOpen(false);
    };

    const handlePopupClick = (e) => {
      e.stopPropagation();
    } 

    // Takes user to the restaurant's website in a new tab
    const handleWebsiteButtonClick = (e) => {
      const restaurantWebsite = "https://www.kfc.co.nz/";
      window.open(restaurantWebsite, "_blank"); //opens the restaurant's website, currently a dummy link
    }
  
    return (
      <>
        <IconButton
            className={style.menuButton}
            onClick={(e) => handleClickOpen(e)}>
            <MenuBook className={style.menuIcon}/> 
        </IconButton>
        <Dialog fullWidth={true} maxWidth="sm"
        open={open} onClose={(e) => handleClose(e)} onClick={handlePopupClick}>
            <DialogTitle>
              <Typography className={style.menuPopupTitle}>
                {restaurantName}
                <IconButton
                  className={style.websiteButton}
                  onClick={handleWebsiteButtonClick}>
                  <Language className={style.menuIcon}/>
                </IconButton>
              </Typography>

            </DialogTitle>
            <DialogContent>
              <Menu menus={menus} isLoading={isLoading}/>
            </DialogContent>
            <div className={style.menuButtonsContainer}>
                <Button variant="outlined" className={style.primaryButton} onClick={handleClose}>Cancel</Button>
                <Button variant="outlined" className={style.secondaryButton} onClick={() => toBooking(restaurant)}>Make Booking</Button>
            </div>
        </Dialog>
      </>
    );
  }