@material-ui/core#ButtonBase JavaScript Examples

export default function CoinButton(props) {
  const { coinName, coinAbbr, onClick, ...other } = props;
  const classes = useStyles();

  return (
    <ButtonBase focusRipple className={classes.button} onClick={onClick}>
      <Grid container direction="column">
        <Typography variant="h6">{coinAbbr}</Typography>
        <Typography variant="body2" className={classes.coinName}>
          {coinName}
        </Typography>
      </Grid>
    </ButtonBase>
  );
}

export default function ProjectCard ({ pub, is_review }) {
  const classes = useStyles()
  return (
    <>
      <Card>
        <ButtonBase
          target="_blank"
          component={RouterLink}
          to={'/project?save_id=' + pub.save_id + '&version=' + pub.active_version + '&branch=' + pub.active_branch + '&project_id=' + pub.project_id}
          style={{ width: '100%' }}>
          <CardActionArea>
            <CardHeader title={pub.title} />
            <CardMedia
              className={classes.media}
              image={pub.active_save.base64_image} />
            <CardContent>
              <Typography variant="body2" component="p" noWrap={true}>
                {pub.description}
              </Typography>
              <br/>
              <Typography variant='body2' color='textSecondary' component='p'>
              Status: {pub.status_name}
              </Typography>
              {/* <Typography variant='body2' component='p' color='textSecondary' style={{ margin: '5px 0px 0px 0px' }}>
              Updated at {timeSince(pub.save_time)} ago...
            </Typography> */}
            </CardContent>
          </CardActionArea>
        </ButtonBase>
      </Card>
    </>
  )
}

Header = ({ title, hierarchy }) => {
  const { page, standalone, queenBindings, quit, setPage, currentPage } = useContext(
    OrchestratorContext
  );
  const classes = useStyles({ standalone });
  const setToFirstPage = useCallback(() => setPage('1'), [setPage]);
  const quitButtonRef = useRef();

  const utilInfo = type => {
    return {
      ...SIMPLE_CLICK_EVENT,
      idParadataObject: `${type}-button`,
      page: currentPage,
    };
  };
  const { sequence, subSequence } = hierarchy || {};

  const sequenceBinded = {
    ...sequence,
    label: lunatic.interpret(['VTL'])(queenBindings)(sequence?.label),
  };

  const subSequenceBinded = subSequence
    ? {
        ...subSequence,
        label: lunatic.interpret(['VTL'])(queenBindings)(subSequence?.label),
      }
    : null;

  const quitShortCut = () => {
    if (quitButtonRef && quitButtonRef.current) quitButtonRef.current.focus();
    quit();
  };

  return (
    <div className={classes.root}>
      <Navigation className={classes.headerItemNavigation} title={title} />
      <div className="header-item">
        <ButtonBase
          focusRipple
          onClick={setToFirstPage}
          aria-label={D.backToBeginning}
          title={D.backToBeginning}
        >
          <img id="logo" src={insee} alt="Logo de L'Insee" className={classes.headerLogo} />
        </ButtonBase>
      </div>
      <div className={classes.headerTitle}>
        <span className={classes.questionnaireTitle}>{title}</span>
        {sequence && (
          <BreadcrumbQueen
            sequence={sequenceBinded}
            subsequence={subSequenceBinded}
            currentPage={page}
          />
        )}
      </div>
      {!standalone && (
        <>
          <div className={classes.headerClose}>
            <IconButton
              ref={quitButtonRef}
              title={D.simpleQuit}
              className={classes.closeIcon}
              onClick={paradataHandler(quit)(utilInfo('end-survey'))}
            >
              <ExitToApp htmlColor={'#000000'} />
            </IconButton>
          </div>
          <KeyboardEventHandler
            handleKeys={['alt+q']}
            onKeyEvent={paradataHandler(quitShortCut)(utilInfo('end-survey'))}
            handleFocusableElements
          />
        </>
      )}
    </div>
  );
}

// Card displaying overview of gallery sample schematics.
function SchematicCard ({ sch }) {
  const classes = useStyles()
  const auth = useSelector(state => state.authReducer)
  const dispatch = useDispatch()
  const [snacOpen, setSnacOpen] = React.useState(false)

  const handleSnacClick = () => {
    setSnacOpen(true)
  }
  const handleSnacClose = (event, reason) => {
    if (reason === 'clickaway') {
      return
    }
    setSnacOpen(false)
  }
  useEffect(() => {
    dispatch(fetchRole())
  }, [dispatch])

  return (
    <>
      <Card>
        <ButtonBase
          target="_blank"
          component={RouterLink}
          to={'/editor?id=' + sch.save_id}
          style={{ width: '100%' }}
        >
          <CardActionArea>
            <CardMedia
              className={classes.media}
              image={sch.media}
              title={sch.name}
            />
            <CardContent>
              <Typography gutterBottom variant="h5" component="h2">
                {sch.name}
              </Typography>
              <Typography variant="body2" component="p">
                {sch.description}
              </Typography>
            </CardContent>
          </CardActionArea>
        </ButtonBase>

        <CardActions>
          <Button
            target="_blank"
            component={RouterLink}
            to={'/editor?id=' + sch.save_id}
            size="small"
            color="primary"
          >
            Launch in Editor
          </Button>
          {console.log(auth.roles)}
          {auth.roles && auth.roles.is_type_staff &&
            <Button onClick={() => { handleSnacClick() }}>
              <Tooltip title="Delete" placement="bottom" arrow>
                <DeleteIcon
                  color="secondary"
                  fontSize="small"
                />
              </Tooltip>
            </Button>}
          <SimpleSnackbar open={snacOpen} close={handleSnacClose} sch={sch} confirmation={deleteGallerySch} />
        </CardActions>
      </Card>
    </>
  )
}

export default function Device(props) {
  const classes = useStyles();
  const {
    name,
    ip,
    mac,
    selected,
    model,
    manufacturer,
    handleClick,
    disabled,
    handleChange,
    temperature,
    humidity,
  } = props;
  return (
    <ButtonBase onClick={handleClick} disableRipple disabled={disabled}>
      <Card className={selected ? classes.selectedRoot : classes.root}>
        <CardContent>
          <Grid container direction="row" justify="flex-end"></Grid>
          <InputBase
            className={classes.margin}
            defaultValue={name || 'Room'}
            inputProps={{
              'aria-label': 'naked',
              min: 0,
              style: { textAlign: 'center', fontSize: 24 },
            }}
            rows={1}
            onChange={handleChange}
            disabled={disabled}
          />
          {temperature && (
            <Typography variant="body2" component="p">
              {temperature}°
            </Typography>
          )}
          {humidity && (
            <Typography variant="body2" component="p">
              {humidity} RH
            </Typography>
          )}

          <Typography className={classes.pos} color="textSecondary">
            {manufacturer}
          </Typography>
          <Typography className={classes.pos} color="textSecondary">
            {model}
          </Typography>
          <Typography variant="body2" component="p">
            {ip}
          </Typography>
          <Typography variant="body2" component="p">
            {mac}
          </Typography>
        </CardContent>
      </Card>
    </ButtonBase>
  );
}

// Card displaying overview of onCloud saved schematic.
export default function SchematicCard ({ sch }) {
  const classes = useStyles()
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(fetchSchematics())
  }, [dispatch])

  // To handle delete schematic snackbar
  const [snacOpen, setSnacOpen] = React.useState(false)

  const handleSnacClick = () => {
    setSnacOpen(true)
  }
  const handleSnacClose = (event, reason) => {
    if (reason === 'clickaway') {
      return
    }
    setSnacOpen(false)
  }
  const clickViewProject = () => {
    const win = window.open()
    win.location.href = '/eda/#/project?save_id=' + sch.save_id + '&version=' + sch.project_version + '&branch=' + sch.project_branch + '&project_id=' + sch.project_id
    win.focus()
  }

  const clickViewLTI = () => {
    const win = window.open()
    win.location.href = `/eda/#/lti?id=${sch.save_id}&version=${sch.version}&branch=${sch.branch}`
  }

  return (
    <>
      {/* User saved Schematic Overview Card */}

      <Card>
        <ButtonBase
          target="_blank"
          component={RouterLink}
          to={sch.lti_id ? `/editor?id=${sch.save_id}&version=${sch.version}&lti_id=${sch.lti_id}&branch=${sch.branch}` : `/editor?id=${sch.save_id}&version=${sch.version}&branch=${sch.branch}`}
          // to={'/editor?id=' + sch.save_id + '&version=' + sch.version + '&branch=' + sch.branch}
          style={{ width: '100%' }}
        >
          <CardActionArea>
            <CardHeader
              title={sch.name}
              subheader={'Created On ' + getDate(sch.create_time)}
              action={sch.project_id && sch.is_reported === true && <Tooltip title='Project is reported!' arrow><ReportProblemIcon style={{ color: 'red' }} /></Tooltip>}
            />
            <CardMedia
              className={classes.media}
              image={sch.base64_image}
              title={sch.name}
            />
            <CardContent>
              <Typography variant="body2" component="p">
                {sch.description}
              </Typography>
              {/* Display updated status */}
              <Typography variant="body2" color="textSecondary" component="p" style={{ margin: '5px 0px 0px 0px' }}>

              </Typography>
            </CardContent>
          </CardActionArea>
        </ButtonBase>
        <CardActions>
          <Chip color='primary' variant='outlined' label={`Updated ${timeSince(sch.save_time)} ago...`} />
          {sch.project_id && <Chip variant='outlined' clickable={true} onClick={clickViewProject} label='Project' />}
          {sch.lti_id && <Chip variant='outlined' clickable={true} onClick={clickViewLTI} label='LTI' />}
          {/* Display create LTI app option  */}
          {!sch.lti_id && <Tooltip title='Create LTI app' placement="bottom" arrow>
            <IconButton
              component={RouterLink}
              color='secondary'
              // style={{ marginLeft: 'auto' }}
              // fontSize="small"
              to={`/lti?id=${sch.save_id}&version=${sch.version}&branch=${sch.branch}`} >
              <ScreenShareRoundedIcon fontSize="small" />
            </IconButton>
          </Tooltip>}
          {/* Display delete option */}
          {!sch.project_id &&
          <Button onClick={() => { handleSnacClick() }}>
            <Tooltip title="Delete" placement="bottom" arrow>
              <DeleteIcon
                color="secondary"
                fontSize="small"
              // style={{ marginLeft: 'auto' }}
              />
            </Tooltip>
          </Button>}
          <SimpleSnackbar open={snacOpen} close={handleSnacClose} sch={sch} confirmation={deleteSchematic} />

          {/* Display share status */}
          <Tooltip
            title={!sch.shared ? 'SHARE OFF' : 'SHARE ON'}
            placement="bottom"
            arrow
          >
            <ShareIcon
              color={!sch.shared ? 'disabled' : 'primary'}
              fontSize="small"
              style={{ marginRight: '10px' }}
            />
          </Tooltip>
        </CardActions>
      </Card>

    </>
  )
}

function Playlist({
  playlist,
  setQueue,
  setNowPlaying,
  nowPlaying,
  queue,
  addSongToQueue,
}) {
  const classes = useStyles();

  function handlePlaylistClick() {
    setQueue(playlist.queue);
    setNowPlaying(playlist.queue[0]);
  }

  function handleAddToQueueClick() {
    const currentQids = queue.map((song) => song.qid);

    const songsNotAlreadyInQueue = playlist.queue.filter((song) => {
      return !currentQids.includes(song.qid);
    });

    setQueue([...queue, ...songsNotAlreadyInQueue]);
  }

  function handleStopSong(e) {
    e.stopPropagation();
    setNowPlaying({});
  }

  function UncollapsedPlaylist() {
    return playlist.queue.map((song) => {
      return (
        <PlaylistItem
          key={song.qid}
          {...{
            song,
            handleStopSong,
            nowPlaying,
            setNowPlaying,
            addSongToQueue,
          }}
        />
      );
    });
  }

  const duration = getDurationFromQueue(playlist.queue);

  return (
    <Grid
      key={playlist.id}
      container
      item
      className={classes.playlist}
      data-playlist_id={playlist.id}
    >
      <Grid item xs={12}>
        <Box align="center" p={3} borderRadius={16}>
          <ButtonBase onClick={handlePlaylistClick}>
            <img className={classes.img} alt="complex" src={playlist.image} />
          </ButtonBase>
        </Box>
      </Grid>
      <Grid item xs container spacing={2} alignContent="center">
        <Grid item xs={12}>
          <Box pl={2}>
            <Typography gutterBottom>
              <Link
                color="textPrimary"
                component="button"
                variant="h4"
                onClick={handlePlaylistClick}
              >
                {playlist.name}
              </Link>
            </Typography>
          </Box>
        </Grid>

        <Grid item xs={6}>
          <Box pl={2}>
            <Typography color="textSecondary">
              {playlist.queue.length} songs, {duration}
            </Typography>
          </Box>
        </Grid>
        <Grid item xs={6}>
          <Box align="right">
            <IconButton title="play playlist" onClick={handlePlaylistClick}>
              <PlayArrowIcon />
            </IconButton>
            <IconButton title="add playlist to queue" onClick={handleAddToQueueClick}>
              <AddToPhotosIcon />
            </IconButton>
          </Box>
        </Grid>
        <Grid item xs={12}>
          <List>
            <UncollapsedPlaylist />

            <ListItem key="link" component="a" href="https://hitmanhunna.com" button>
              <ListItemText
                primary={
                  <Typography color="secondary" align="center">
                    hitmanhunna.com
                  </Typography>
                }
              />
            </ListItem>
          </List>
        </Grid>
      </Grid>
    </Grid>
  );
}

function Playlist({
  playlist,
  setQueue,
  setNowPlaying,
  nowPlaying,
  queue,
  addSongToQueue,
  editable,
}) {
  const classes = useStyles();
  const [collapsed, setCollapsed] = React.useState(true);

  function handleToggleCollapsed() {
    setCollapsed(!collapsed);
  }

  function handlePlaylistClick() {
    setQueue(playlist.queue);
    setNowPlaying(playlist.queue[0]);
  }

  function handleAddToQueueClick() {
    const currentQids = queue.map((song) => song.qid);

    const songsNotAlreadyInQueue = playlist.queue.filter((song) => {
      return !currentQids.includes(song.qid);
    });

    setQueue([...queue, ...songsNotAlreadyInQueue]);
  }

  function handleDeleteClick(playlistId) {
    removePlaylist(playlistId);
  }

  function handleStopSong(e) {
    e.stopPropagation();
    setNowPlaying({});
  }

  function CollapsedPlaylist() {
    return playlist.queue.slice(0, 4).map((song) => {
      return (
        <PlaylistItem
          key={song.qid}
          {...{ song, handleStopSong, nowPlaying, setNowPlaying, addSongToQueue }}
        />
      );
    });
  }

  function UncollapsedPlaylist() {
    return playlist.queue.map((song) => {
      return (
        <PlaylistItem
          key={song.qid}
          {...{ song, handleStopSong, nowPlaying, setNowPlaying, addSongToQueue }}
        />
      );
    });
  }

  const duration = getDurationFromQueue(playlist.queue);
  return (
    <Grid
      key={playlist.id}
      container
      alignItems="center"
      item
      className={classes.playlist}
      data-playlist_id={playlist.id}
    >
      {/* name column */}
      <Grid item xs={8}>
        <Typography gutterBottom align="center">
          <Link
            color="textPrimary"
            component="button"
            variant="h5"
            onClick={handlePlaylistClick}
          >
            {playlist.name}
          </Link>
        </Typography>

        {playlist.author && (
          <Typography variant="h6" align="center" color="textSecondary">
            {playlist.author}
          </Typography>
        )}

        <Typography color="textSecondary" align="center">
          {playlist.queue.length} songs, {duration}
        </Typography>
        <Typography color="textSecondary" align="center">
          {playlist.tags ? playlist.tags.toString().replace(/,/gi, " ") : ""}
        </Typography>
        <Box align="center">
          <IconButton title="play playlist" onClick={handlePlaylistClick}>
            <PlayArrowIcon />
          </IconButton>
          <IconButton title="add playlist to queue" onClick={handleAddToQueueClick}>
            <AddToPhotosIcon />
          </IconButton>

          {editable && (
            <>
              <IconButton
                title="delete playlist from storage"
                onClick={() => handleDeleteClick(playlist.id)}
              >
                <DeleteOutlineIcon />
              </IconButton>
            </>
          )}
        </Box>
      </Grid>

      {/* image column */}
      <Grid item xs={4}>
        <Box align="center">
          <ButtonBase onClick={handlePlaylistClick}>
            <img className={classes.img} alt="complex" src={playlist.image} />
          </ButtonBase>
        </Box>
      </Grid>

      <Grid item xs={12}>
        <List>
          {collapsed ? <CollapsedPlaylist /> : <UncollapsedPlaylist />}

          {playlist.queue.length > 4 && (
            <ListItem onClick={handleToggleCollapsed} key="collapseControl" button>
              <ListItemText
                disableTypography
                color="secondary"
                primary={
                  <Typography color="secondary" align="center">
                    {collapsed ? "...See More" : "See Less"}
                  </Typography>
                }
              />
            </ListItem>
          )}
        </List>
      </Grid>
    </Grid>
  );
}

function Room({ room }) {
  const { currentUser, changeRoom, event, setRoomInfo } = useContext(store);
  const [isMovingUser, setIsMovingUser] = useState(false);
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
  const { t } = useTranslation("translation");
  const [{ canDrop, isOver }, drop] = useDrop({
    accept: ItemTypes.USER,
    drop: () => {
      return { room };
    },
    collect: (monitor) => ({
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop(),
    }),
  });
  const { palette } = useTheme();
  const theme = {
    background: {
      default: palette.primary.main,
      active: palette.secondary.main,
      hover: palette.primary.main,
    },
    text: {
      default: palette.secondary.main,
      active: palette.primary.main,
      hover: palette.secondary.main,
    },
  };

  const changeRoomWithState = useCallback(
    async (userId, roomId) => {
      if (!isMovingUser) {
        setIsMovingUser(true);
        await changeRoom(userId, roomId);
        setIsMovingUser(false);
      }
    },
    [changeRoom, isMovingUser]
  );

  const isActive = canDrop && isOver;
  const isUserInThisRoom = currentUser.room.roomId === room.roomId;
  let activeClass = "default";
  if ((isUserInThisRoom && !canDrop) || isActive) {
    activeClass = "active";
  } else if (canDrop) {
    activeClass = "hover";
  }
  const orderedUsers = room.users.sort((a, b) =>
    a.userName > b.userName ? 1 : -1
  );
  return (
    <Paper
      ref={drop}
      style={{
        backgroundColor: theme.background[activeClass],
        padding: "15px",
        flexGrow: 1,
      }}
    >
      <EditRoomDialog
        isOpen={isEditDialogOpen}
        room={room}
        onClose={() => setIsEditDialogOpen(false)}
        onConfirm={async (roomName, imageUrl) => {
          if (roomName !== room.roomName || imageUrl !== room.imageUrl) {
            await setRoomInfo({ roomId: room.roomId, roomName, imageUrl });
          }
          setIsEditDialogOpen(false);
        }}
      ></EditRoomDialog>
      <Grid item xs container direction="row" spacing={2}>
        <Grid container spacing={2}>
          <Grid item>
            <ButtonBase
              disabled={!currentUser.isMentor}
              style={{
                width: 64,
                height: 64,
              }}
              onClick={() => setIsEditDialogOpen(true)}
            >
              <img
                style={{
                  margin: "auto",
                  display: "block",
                  maxWidth: "100%",
                  maxHeight: "100%",
                }}
                alt={`${room.roomName}`}
                src={room.imageUrl || defaultRoomImage}
              />
            </ButtonBase>
          </Grid>
          <Grid item xs>
            <Typography
              gutterBottom
              variant="subtitle1"
              style={{ color: theme.text[activeClass] }}
              noWrap={false}
            >
              {room.roomName}
            </Typography>
            <Grid item container xs={12} spacing={1}>
              <Grid item>
                <IconButton
                  aria-label="promote"
                  color={
                    currentUser.room.roomId === room.roomId
                      ? "primary"
                      : "secondary"
                  }
                  disabled={isMovingUser}
                  onClick={() => {
                    const el = document.createElement("textarea");
                    el.value = `${event.jitsiServer}/${room.roomId}`;
                    document.body.appendChild(el);
                    el.select();
                    document.execCommand("copy");
                    document.body.removeChild(el);
                  }}
                  style={{ padding: 0 }}
                >
                  <Tooltip title={"Copy Jitsi link"}>
                    <FileCopyIcon />
                  </Tooltip>
                </IconButton>
              </Grid>
              <Grid item>
                <IconButton
                  aria-label="promote"
                  color="secondary"
                  onClick={() =>
                    changeRoomWithState(currentUser.userId, room.roomId)
                  }
                  disabled={
                    isMovingUser ||
                    !event.hasFreeMovement ||
                    currentUser.room.roomId === room.roomId
                  }
                  style={{ padding: 0 }}
                >
                  <Tooltip
                    title={
                      currentUser.room.roomId === room.roomId
                        ? t("You are in this room")
                        : t("Explore Room")
                    }
                    placement="bottom"
                    key={currentUser.room.roomId === room.roomId}
                  >
                    {currentUser.room.roomId === room.roomId ? (
                      <ExploreOffIcon />
                    ) : (
                      <ExploreIcon />
                    )}
                  </Tooltip>
                </IconButton>
              </Grid>
              <Grid item>
                {isMovingUser && (
                  <CircularProgress
                    size={20}
                    color={
                      currentUser.room.roomId === room.roomId
                        ? "primary"
                        : "secondary"
                    }
                  />
                )}
              </Grid>
            </Grid>
          </Grid>
        </Grid>
        <Grid item container xs={12} spacing={1} alignItems={"flex-start"}>
          {orderedUsers.map((u) => (
            <User
              inRoom
              key={`${u.userId}${u.isMentor}`}
              avatarSize={orderedUsers.length > 20 ? "sm" : "md"}
              user={u}
              changeRoom={changeRoomWithState}
              dragDisabled={isMovingUser}
              currentUser={currentUser}
              avatarColor={{
                background: theme.text[activeClass],
                color: theme.background[activeClass],
              }}
            />
          ))}
        </Grid>
      </Grid>
    </Paper>
  );
}