@material-ui/icons#Create TypeScript Examples

PointSelector = ({
  siteId,
  pointOptions,
  point,
  pointId,
  editSurveyPointNameDraft,
  isSiteAdmin,
  editSurveyPointNameLoading,
  onChangeSurveyPointName,
  handlePointChange,
  enableeditSurveyPointName,
  disableeditSurveyPointName,
  submitSurveyPointNameUpdate,
  onDeleteButtonClick,
}: PointSelectorProps) => {
  const classes = useStyles();
  const [editDialogOpen, setEditDialogOpen] = useState(false);
  const [editSurveyPoint, seteditSurveyPoint] = useState<SurveyPoints>();
  const errored =
    !editSurveyPointNameDraft ||
    editSurveyPointNameDraft.length > maxLengths.SURVEY_POINT_NAME;

  const onEditDialogClose = () => {
    disableeditSurveyPointName();
    seteditSurveyPoint(undefined);
    setEditDialogOpen(false);
  };

  const onEditSurveyPointSubmit = () => {
    if (editSurveyPoint) {
      submitSurveyPointNameUpdate(editSurveyPoint.id);
    }
  };

  const getHelperText = () => {
    switch (true) {
      case !editSurveyPointNameDraft:
        return "Cannot be empty";
      case editSurveyPointNameDraft &&
        editSurveyPointNameDraft.length > maxLengths.SURVEY_POINT_NAME:
        return `Must not exceed ${maxLengths.SURVEY_POINT_NAME} characters`;
      default:
        return "";
    }
  };

  useEffect(() => {
    if (!editSurveyPointNameLoading) {
      seteditSurveyPoint(undefined);
      setEditDialogOpen(false);
    }
  }, [editSurveyPointNameLoading]);

  const editDialogActions: Action[] = [
    {
      size: "small",
      variant: "contained",
      color: "secondary",
      text: "Close",
      action: onEditDialogClose,
    },
    {
      size: "small",
      variant: "contained",
      color: "primary",
      text: editSurveyPointNameLoading ? "Updating..." : "Save",
      action: onEditSurveyPointSubmit,
      disabled: editSurveyPointNameLoading || (editSurveyPoint && errored),
    },
  ];

  return (
    <>
      {editSurveyPoint && (
        <EditDialog
          actions={editDialogActions}
          open={editDialogOpen}
          header={editSurveyPoint.name || ""}
          onClose={onEditDialogClose}
          content={
            <TextField
              variant="outlined"
              autoFocus
              className={classes.editSurveyPointTextField}
              fullWidth
              value={editSurveyPointNameDraft}
              onChange={onChangeSurveyPointName}
              error={errored}
              helperText={getHelperText()}
            />
          }
        />
      )}
      <Grid container alignItems="center" item md={12} lg={5} spacing={1}>
        <Grid item>
          <Typography variant="h6" className={classes.subTitle}>
            Survey Point:
          </Typography>
        </Grid>
        <Grid item className={classes.selectorWrapper}>
          <Grid container alignItems="center">
            <Grid item>
              <Select
                className={classes.selector}
                labelId="survey-point"
                id="survey-point"
                name="survey-point"
                value={
                  pointOptions.some((item) => item.name === point)
                    ? point
                    : "All"
                }
                onChange={handlePointChange}
                onClose={() => disableeditSurveyPointName()}
                renderValue={(selected) => selected as string}
              >
                <MenuItem value="All">
                  <Typography className={classes.menuItem} variant="h6">
                    All
                  </Typography>
                </MenuItem>
                {pointOptions.map(
                  (item) =>
                    item.name !== null && (
                      <MenuItem
                        className={classes.menuItem}
                        value={item.name}
                        key={item.id}
                      >
                        <Grid
                          container
                          alignItems="center"
                          justify="space-between"
                          spacing={1}
                        >
                          <Grid className={classes.itemName} item>
                            {item.name}
                          </Grid>
                          <Grid item>
                            <Grid container item spacing={1}>
                              <Grid item>
                                <CustomLink
                                  to={`/sites/${siteId}/points/${item.id}`}
                                  isIcon
                                  tooltipTitle="View survey point"
                                />
                              </Grid>
                              {isSiteAdmin && (
                                <>
                                  <Grid item>
                                    <Tooltip
                                      title="Edit survey point name"
                                      placement="top"
                                      arrow
                                    >
                                      <IconButton
                                        className={classes.menuButton}
                                        onClick={(event) => {
                                          enableeditSurveyPointName(item.id);
                                          setEditDialogOpen(true);
                                          seteditSurveyPoint(item);
                                          event.stopPropagation();
                                        }}
                                      >
                                        <Create color="primary" />
                                      </IconButton>
                                    </Tooltip>
                                  </Grid>
                                  <Grid item>
                                    <Tooltip
                                      title="Delete survey point"
                                      placement="top"
                                      arrow
                                    >
                                      <IconButton
                                        className={classes.menuButton}
                                        onClick={(event) => {
                                          onDeleteButtonClick(item.id);
                                          event.stopPropagation();
                                        }}
                                      >
                                        <DeleteOutline color="primary" />
                                      </IconButton>
                                    </Tooltip>
                                  </Grid>
                                </>
                              )}
                            </Grid>
                          </Grid>
                        </Grid>
                      </MenuItem>
                    )
                )}
              </Select>
            </Grid>
            {pointId !== -1 && (
              <Grid item>
                <Hidden smUp>
                  <CustomLink
                    to={`/sites/${siteId}/points/${pointId}`}
                    isIcon
                    tooltipTitle="View survey point"
                  />
                </Hidden>
                <Hidden xsDown>
                  <Button
                    variant="outlined"
                    color="primary"
                    size="small"
                    component={Link}
                    to={`/sites/${siteId}/points/${pointId}`}
                  >
                    View Survey Point
                  </Button>
                </Hidden>
              </Grid>
            )}
          </Grid>
        </Grid>
      </Grid>
    </>
  );
}