@material-ui/icons#DeleteOutlineOutlined TypeScript Examples

The following examples show how to use @material-ui/icons#DeleteOutlineOutlined. 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: MediaCard.tsx    From aqualink-app with MIT License 4 votes vote down vote up 
MediaCard = ({
  preview,
  surveyPoint,
  siteId,
  observation,
  comments,
  surveyPointOptions,
  index,
  file,
  featuredFile,
  handleSurveyPointOptionAdd,
  deleteCard,
  setFeatured,
  handleCommentsChange,
  handleObservationChange,
  handleSurveyPointChange,
  classes,
}: MediaCardProps) => {
  const size = (file && file.size && file.size / 1000000)?.toFixed(2);
  const [addSurveyPointDialogOpen, setAddSurveyPointDialogOpen] =
    useState<boolean>(false);

  const onImageClick = useCallback(() => {
    setFeatured(index);
  }, [index, setFeatured]);

  return (
    <>
      <NewSurveyPointDialog
        siteId={siteId}
        open={addSurveyPointDialogOpen}
        onClose={() => setAddSurveyPointDialogOpen(false)}
        onSuccess={handleSurveyPointOptionAdd}
      />
      <Grid style={{ marginTop: "2rem" }} container item xs={12}>
        <Paper elevation={0} className={classes.mediaCardWrapper}>
          <Grid
            style={{ height: "100%" }}
            container
            alignItems="center"
            justify="space-between"
            item
            xs={12}
          >
            <Grid style={{ height: "100%" }} item xs={3}>
              <CardMedia className={classes.cardImage} image={preview}>
                {size && (
                  <Grid
                    className={classes.mediaSizeWrapper}
                    container
                    item
                    xs={12}
                    alignItems="flex-end"
                    justify="flex-end"
                  >
                    <Grid
                      className={classes.mediaSize}
                      container
                      alignItems="center"
                      justify="center"
                      item
                      xs={3}
                    >
                      <Typography variant="subtitle2">{size} MB</Typography>
                    </Grid>
                  </Grid>
                )}
              </CardMedia>
            </Grid>
            <Grid container justify="center" item xs={3}>
              <Grid style={{ marginBottom: "1rem" }} item xs={10}>
                <Typography color="textSecondary" variant="h6">
                  Survey Point
                </Typography>
              </Grid>
              <Grid style={{ marginBottom: "2rem" }} item xs={10}>
                <TextField
                  className={classes.textField}
                  select
                  id="surveyPoint"
                  name="surveyPoint"
                  onChange={handleSurveyPointChange}
                  value={surveyPoint}
                  fullWidth
                  variant="outlined"
                  inputProps={{
                    className: classes.textField,
                  }}
                >
                  {surveyPointOptions.map((item) => (
                    <MenuItem
                      className={classNames(
                        classes.textField,
                        classes.menuItem
                      )}
                      value={item.id}
                      key={item.id}
                    >
                      {item.name}
                    </MenuItem>
                  ))}
                  <MenuItem className={classes.textField}>
                    <AddIcon />
                    <Button
                      style={{ color: "black" }}
                      onClick={() => setAddSurveyPointDialogOpen(true)}
                    >
                      Add new survey point
                    </Button>
                  </MenuItem>
                </TextField>
              </Grid>

              <Grid style={{ marginBottom: "1rem" }} item xs={10}>
                <Typography color="textSecondary" variant="h6">
                  Observation
                </Typography>
              </Grid>
              <Grid style={{ marginBottom: "2rem" }} item xs={10}>
                <TextField
                  className={classes.textField}
                  select
                  id="observation"
                  name="observation"
                  onChange={handleObservationChange}
                  value={observation}
                  placeholder="Select One"
                  fullWidth
                  variant="outlined"
                  inputProps={{
                    className: classes.textField,
                  }}
                >
                  {observationOptions.map((item) => (
                    <MenuItem
                      className={classes.textField}
                      value={item.key}
                      key={item.key}
                    >
                      {item.value}
                    </MenuItem>
                  ))}
                </TextField>
              </Grid>
            </Grid>
            <Grid container justify="center" item xs={5}>
              <Grid style={{ marginBottom: "1rem" }} item xs={12}>
                <Typography color="textSecondary" variant="h6">
                  Comments
                </Typography>
              </Grid>
              <Grid style={{ marginBottom: "2rem" }} item xs={12}>
                <TextField
                  className={classes.textField}
                  variant="outlined"
                  multiline
                  name="comments"
                  placeholder="Comments"
                  onChange={handleCommentsChange}
                  value={comments}
                  rows="8"
                  fullWidth
                  inputProps={{
                    className: classes.textField,
                  }}
                />
              </Grid>
            </Grid>
            <Grid style={{ height: "100%" }} container item xs={1}>
              <Grid
                container
                item
                alignContent="space-between"
                justify="flex-end"
                xs={12}
              >
                <IconButton onClick={onImageClick}>
                  <Tooltip
                    title={
                      index === featuredFile
                        ? "Featured image"
                        : "Set this image as featured"
                    }
                  >
                    <StarIcon
                      fill={index === featuredFile ? "#168dbd" : "#939393"}
                      className={classes.starIcon}
                    />
                  </Tooltip>
                </IconButton>
                <IconButton onClick={() => deleteCard(index)}>
                  <DeleteOutlineOutlined />
                </IconButton>
              </Grid>
            </Grid>
          </Grid>
        </Paper>
      </Grid>
    </>
  );
}