@material-ui/core#Grow JavaScript Examples

function CodeContainer({ getIsShown }) {
  const { state } = useState();
  const { nn_state } = useNNState();
  const {model_state} = useModelState();

  return (
    <Grow in={getIsShown()}>
      <div
        className={state.stepper_finish ? "codeOverflowFinish" : "codeOverflow"}
      >
        <SyntaxHighlighter language="python" style={monokaiSublime}>
          {CodeGen(state, nn_state, model_state)}
        </SyntaxHighlighter>
      </div>
    </Grow>
  );
}

export default function ToolboxContainer({ getIsShown }) {
  const classes = useStyles();
  const { state } = useState();
  return (
    <Grow in={getIsShown()}>
      <div
        className={
          state.stepper_state === StepperState.VISUALIZE
            ? classes.root
            : classes.dataRoot
        }
      >
        <Typography
          className={
            state.stepper_state === StepperState.VISUALIZE
              ? classes.headerText
              : classes.dataHeaderText
          }
          variant="h5"
        >
          {state.stepper_state === StepperState.VISUALIZE
            ? "Toolbox"
            : state.stepper_state === StepperState.DATASET &&
              state.sample_dataset != null
            ? "Dataset Preview - " + datasetMetadata[state.sample_dataset].title
            : null}
        </Typography>
        <Card className={classes.card} variant="outlined">
          <CardContent className={classes.cardContent}>
            {getToolboxContent(state)}
          </CardContent>
        </Card>
      </div>
    </Grow>
  );
}

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>
  );
}

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>
  );
}

function App(props) {
  let history = useHistory();
  toast.configure();

  const classes = useStyles();

  const dispatch = useDispatch();
  const [currentId, setCurrentId] = useState(null);
  const [userImg, setUserImg] = useState(noProfilePhoto);
  const [OpenSubscription, setOpenSubscription] = useState(false);
  const [openCreatePost, setOpenCreatePost] = useState(false);
  const classs = useStyl();
  const theme = useTheme();
  const [mobileOpen, setMobileOpen] = useState(false);
  const [pageName, setPageName] = useState("Home");

  const handleDrawerToggle = () => {
    setMobileOpen(!mobileOpen);
  };

  useEffect(() => {
    dispatch(getPosts());
  }, [dispatch]);

  useEffect(() => {
    if (!localStorage.getItem("token") && window.location.pathname === "/") {
      toast.info("Login before accesing home page!");
      history.push("/signin");
    }
  }, [history]);

  useEffect(() => {
    (async () => {
      try {
        const { data } = await api.verify({
          token: localStorage.getItem("token"),
        });
        const response = await api.getProfileById(data.id);
        setUserImg(response.data.user.img);
      } catch (error) {
        console.log(error);
        setUserImg(noProfilePhoto);
      }
    })();
  }, []);

  const [logout, setLogout] = useState(true);

  function logoutHandle() {
    SignOutGoogle(); //this is called when the user signs out from our website
    localStorage.removeItem("token");
    localStorage.removeItem("user");
    history.push("/signin");
    toast.success("Logged out successfully.");
  }

  // const toggleMenu = () => {
  //   document.querySelector("#menuBox").classList.toggle("active");
  // };

  return (
    <div>
      {!logout && (
        <AppBar
          className={classes.appBar}
          position="fixed"
          style={{ background: "#fff" }}
          color="inherit"
        >
          {logout && (
            <IconButton
              color="inherit"
              aria-label="open drawer"
              edge="start"
              onClick={handleDrawerToggle}
              className={classs.menuButton}
            >
              <MenuIcon />
            </IconButton>
          )}

          <Typography
            className={classes.heading}
            variant="h4"
            style={{ textAlign: "left" }}
          >
            Memories
          </Typography>
          <img
            className={classes.image}
            height="20"
            src={memories}
            alt="Memories"
          ></img>
        </AppBar>
      )}
      <div className={classs.root}>
        <CssBaseline />
        {logout && (
          <nav className={classs.drawer}>
            <AppBar
              position="fixed"
              className={classs.appBar}
              style={{ display: "flex", flexDirection: "row" }}
            >
              {logout && (
                <IconButton
                  color="inherit"
                  aria-label="open drawer"
                  edge="start"
                  onClick={handleDrawerToggle}
                  className={classs.menuButton}
                >
                  <MenuIcon />
                </IconButton>
              )}
              <Toolbar>
                <Typography variant="h6" noWrap>
                  {pageName}
                </Typography>
              </Toolbar>
            </AppBar>
            <Sidebar
              mobileOpen={mobileOpen}
              handleDrawerToggle={handleDrawerToggle}
              setPageName={setPageName}
              setOpenCreatePost={setOpenCreatePost}
              setOpenSubscription={setOpenSubscription}
              logoutHandle={logoutHandle}
            />
          </nav>
        )}
        <main className={classs.content}>
          <div className={classs.toolbar} />
          <Grow in>
            <div className={classs.growDiv}>
              <Suspense fallback={<CircularProgress />}>
                <Router>
                  <Switch>
                    <PrivateRoutes path="/" exact>
                      <Grid
                        container
                        className={classes.mainContainer}
                        justify="space-between"
                        alignItems="stretch"
                        spacing={3}
                      >
                        <Grid item xs={12} sm={12}>
                          <Posts
                            setCurrentId={setCurrentId}
                            setOpenCreatePost={setOpenCreatePost}
                          />
                        </Grid>
                      </Grid>
                    </PrivateRoutes>
                    <Route path="/signup" exact>
                      <SignUp setLogout={setLogout} />
                    </Route>
                    <Route path="/signin" exact>
                      <SignIn setLogout={setLogout} />
                    </Route>
                    <Route path="/forgot" exact>
                      <Forgot setLogout={setLogout} />
                    </Route>
                    <Route path="/resetPassword/:token" exact>
                      <ResetPassword setLogout={setLogout} />
                    </Route>
                    <PrivateRoutes path="/profile" exact>
                      <Profile />
                    </PrivateRoutes>
                    <Route component={Error404} />
                  </Switch>
                </Router>
              </Suspense>
            </div>
          </Grow>
        </main>
        <Dialog
          fullWidth={false}
          open={openCreatePost}
          maxWidth="xs"
          onClose={() => setOpenCreatePost(false)}
          aria-labelledby="responsive-dialog-title"
        >
          <div
            style={{
              background: "#gray",
              padding: "40px 20px 20px",
              backgroundColor: "white",
            }}
          >
            <CloseIcon
              onClick={() => setOpenCreatePost(false)}
              style={{
                fontSize: "2em",
                position: "absolute",
                right: "5px",
                top: "5px",
                cursor: "pointer",
              }}
            />
            <Form
              currentId={currentId}
              setCurrentId={setCurrentId}
              setOpenCreatePost={setOpenCreatePost}
            />
          </div>
        </Dialog>
        <Dialog
          fullWidth={true}
          open={OpenSubscription}
          maxWidth="sm"
          onClose={() => setOpenSubscription(false)}
          aria-labelledby="responsive-dialog-title"
        >
          <CloseIcon
            onClick={() => setOpenSubscription(false)}
            style={{
              fontSize: "2em",
              position: "absolute",
              right: "5px",
              top: "5px",
              cursor: "pointer",
            }}
          />
          <MailForm />
        </Dialog>
      </div>

      <Footer />
    </div>
  );
}

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>
    </>
  );
}

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>
  );
}