@material-ui/core#TextFieldProps TypeScript Examples

export default function ConnectServiceSelect({
  value = [],
  className,
  TextFieldProps = {},
  ...props
}: IConnectServiceSelectProps) {
  const classes = useStyles();

  const sanitisedValue = Array.isArray(value) ? value : [];

  return (
    <TextField
      label=""
      hiddenLabel
      variant={"filled" as any}
      select
      value={sanitisedValue}
      className={clsx(classes.root, className)}
      {...TextFieldProps}
      SelectProps={{
        renderValue: (value) => `${(value as any[]).length} selected`,
        displayEmpty: true,
        classes: { root: classes.selectRoot },
        ...TextFieldProps.SelectProps,
        // Must have this set to prevent MUI transforming `value`
        // prop for this component to a comma-separated string
        MenuProps: {
          classes: { paper: classes.paper, list: classes.menuChild },
          MenuListProps: { disablePadding: true },
          getContentAnchorEl: null,
          anchorOrigin: { vertical: "bottom", horizontal: "center" },
          transformOrigin: { vertical: "top", horizontal: "center" },
          ...TextFieldProps.SelectProps?.MenuProps,
        },
      }}
    >
      <ErrorBoundary>
        <Suspense fallback={<Loading />}>
          <PopupContents value={sanitisedValue} {...props} />
        </Suspense>
      </ErrorBoundary>
    </TextField>
  );
}

export default function ConnectServiceSelect({
  value = [],
  className,
  TextFieldProps = {},
  disabled,
  ...props
}: IConnectServiceSelectProps) {
  const classes = useStyles();

  const sanitisedValue = Array.isArray(value) ? value : [];

  return (
    <TextField
      label=""
      hiddenLabel
      variant={"filled" as any}
      select
      value={sanitisedValue}
      className={clsx(classes.root, className)}
      {...TextFieldProps}
      SelectProps={{
        renderValue: (value) => `${(value as any[]).length} selected`,
        displayEmpty: true,
        classes: { root: classes.selectRoot },
        ...TextFieldProps.SelectProps,
        // Must have this set to prevent MUI transforming `value`
        // prop for this component to a comma-separated string
        MenuProps: {
          classes: { paper: classes.paper, list: classes.menuChild },
          MenuListProps: { disablePadding: true },
          getContentAnchorEl: null,
          anchorOrigin: { vertical: "bottom", horizontal: "center" },
          transformOrigin: { vertical: "top", horizontal: "center" },
          ...TextFieldProps.SelectProps?.MenuProps,
        },
      }}
      disabled={disabled}
    >
      <ErrorBoundary>
        <Suspense fallback={<Loading />}>
          <PopupContents value={sanitisedValue} {...props} />
        </Suspense>
      </ErrorBoundary>
    </TextField>
  );
}

SearchField = forwardRef(
  (
    {
      // important this isn't called `value` since this would confuse <Select/>
      // the main purpose of wrapping this text-field is for this very purpose.
      search,
      setSearch,
    }: {
      search: string;
      setSearch: (val: string) => void;
    },
    ref: TextFieldProps['ref'],
  ) => {
    const styles = useStyles();
    return (
      <TextField
        ref={ref}
        onKeyDown={e => e.stopPropagation()}
        className={styles.searchField}
        value={search}
        onChange={e => {
          setSearch(e.target.value);
          // when something is selected, and the user tries to search, this field deselects for some reason,
          // thus reselect on change. Important to capture target as it's null inside timeout.
          const { target } = e;
          setTimeout(() => {
            target.focus();
          }, TIMEOUT_ANIMATION_DELAY);
        }}
        InputProps={{
          startAdornment: (
            <InputAdornment position="end">
              <Search />
            </InputAdornment>
          ),
        }}
      />
    );
  },
)

NewSurveyPointDialog = ({
  open,
  siteId,
  onClose,
  onSuccess,
}: NewSurveyPointDialogProps) => {
  const classes = useStyles();
  const dispatch = useDispatch();
  const user = useSelector(userInfoSelector);
  const [pointName, setPointName] = useState("");
  const [newPointError, setNewPointError] = useState<string>();
  const [newPointLoading, setNewPointLoading] = useState(false);
  const isNameErrored = pointName.length > 100;
  const isSaveButtonDisabled =
    isNameErrored || pointName.length === 0 || newPointLoading;

  const handleNameChange: TextFieldProps["onChange"] = (event) =>
    setPointName(event.target.value);

  const onDialogClose = () => {
    setNewPointError(undefined);
    setNewPointLoading(false);
    setPointName("");
    onClose();
  };

  const onPointSave = async (
    e: React.MouseEvent<HTMLButtonElement, MouseEvent>
  ) => {
    e.preventDefault();
    setNewPointError(undefined);
    setNewPointLoading(true);
    try {
      await surveyServices.addNewPoi(siteId, pointName, user?.token);
      const { data: newPoints } = await siteServices.getSiteSurveyPoints(
        siteId.toString()
      );
      const resultingPoints = newPoints.map(({ id, name }) => ({
        id,
        name,
        polygon: null,
      }));
      dispatch(setSiteSurveyPoints(resultingPoints));
      if (onSuccess) {
        onSuccess(pointName, resultingPoints);
      }
      onClose();
    } catch (err) {
      setNewPointError(getAxiosErrorMessage(err));
    } finally {
      setNewPointLoading(false);
    }
  };

  const helperText = () => {
    switch (true) {
      case isNameErrored:
        return `Name must not exceed ${maxLengths.SURVEY_POINT_NAME} characters`;
      case !!newPointError:
        return newPointError;
      default:
        return "";
    }
  };

  return (
    <Dialog maxWidth="sm" fullWidth onClose={onDialogClose} open={open}>
      <DialogTitle disableTypography className={classes.dialogTitle}>
        <Typography color="textSecondary" variant="h4">
          New Survey Point
        </Typography>
        <IconButton disabled={newPointLoading} onClick={onDialogClose}>
          <CloseIcon />
        </IconButton>
      </DialogTitle>
      <form>
        <DialogContent className={classes.dialogContent}>
          <TextField
            autoFocus
            variant="outlined"
            fullWidth
            label="Survey Point Name"
            onChange={handleNameChange}
            error={isNameErrored || !!newPointError}
            helperText={helperText()}
          />
        </DialogContent>
        <DialogActions>
          <Button
            size="small"
            variant="outlined"
            color="primary"
            onClick={onDialogClose}
            disabled={newPointLoading}
          >
            Cancel
          </Button>
          <Button
            type="submit"
            size="small"
            variant="outlined"
            color="primary"
            disabled={isSaveButtonDisabled}
            onClick={(e) => onPointSave(e)}
          >
            {newPointLoading ? "Saving..." : "Save"}
          </Button>
        </DialogActions>
      </form>
    </Dialog>
  );
}

Selectors = ({
  site,
  onCompletedSelection,
  onSensorChange,
  onPointChange,
}: SelectorsProps) => {
  const classes = useStyles();
  const uploadsTarget = useSelector(uploadsTargetSelector);
  const pointOptions = site.surveyPoints;
  const [selectedPointIndex, setSelectedPointIndex] = useState<number>();
  const [selectedSensorIndex, setSelectedSensorIndex] = useState<number>();
  const [isNewPointDialogOpen, setIsNewPointDialogOpen] = useState(false);

  const pointSelectorValue =
    typeof selectedPointIndex === "number" ? selectedPointIndex : "";
  const sensorSelectorValue =
    typeof selectedSensorIndex === "number" ? selectedSensorIndex : "";

  const hasSelectedPoint = typeof selectedPointIndex === "number";
  const hasSelectedSensor = typeof selectedSensorIndex === "number";

  const isContinueDisabled = !hasSelectedPoint || !hasSelectedSensor;

  const selectProps: TextFieldProps["SelectProps"] = {
    MenuProps: {
      PaperProps: { className: classes.menuPaper },
      anchorOrigin: {
        vertical: "bottom",
        horizontal: "center",
      },
      transformOrigin: {
        vertical: "top",
        horizontal: "center",
      },
      getContentAnchorEl: null,
    },
  };

  const OptionsList = <T extends EnhancedSelectOption>(options: T[]) =>
    options.map(({ id, name, label, disabled }, index) =>
      name ? (
        <MenuItem
          disabled={disabled}
          key={id}
          value={index}
          className={classes.menuItem}
        >
          <Typography
            title={label || name}
            className={classes.itemName}
            color="textSecondary"
          >
            {label || name}
          </Typography>
          {disabled && (
            <Chip
              className={classes.comingSoonChip}
              label={
                <Typography
                  className={classes.comingSoonChipText}
                  variant="subtitle2"
                >
                  COMING SOON
                </Typography>
              }
            />
          )}
        </MenuItem>
      ) : null
    );

  const handleChange =
    (type: "point" | "sensor") =>
    (event: React.ChangeEvent<{ value: unknown }>) => {
      const value = event.target.value as number;

      switch (type) {
        case "point":
          setSelectedPointIndex(value);
          onPointChange(pointOptions[value].id);
          break;
        case "sensor":
          setSelectedSensorIndex(value);
          onSensorChange(SENSOR_TYPES[value].name as Sources);
          break;
        default:
          break;
      }
    };

  const handleNewPointDialogOpen: ButtonProps["onClick"] = (event) => {
    setIsNewPointDialogOpen(true);
    event.stopPropagation();
  };

  const handleNewPointDialogClose = () => setIsNewPointDialogOpen(false);

  useEffect(() => {
    if (uploadsTarget) {
      const newPointIndex = uploadsTarget.selectedPoint - 1;
      const newSensorIndex = SENSOR_TYPES.findIndex(
        (x) => x.name === uploadsTarget.selectedSensor
      );
      setSelectedPointIndex(newPointIndex);
      setSelectedSensorIndex(newSensorIndex);
    } else {
      setSelectedPointIndex(undefined);
      setSelectedSensorIndex(undefined);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [uploadsTarget]);

  return (
    <>
      <NewSurveyPointDialog
        open={isNewPointDialogOpen}
        siteId={site.id}
        onClose={handleNewPointDialogClose}
      />
      <Grid
        container
        className={classes.selectorsWrapper}
        spacing={3}
        justify="space-between"
      >
        <Grid item md={4} xs={12}>
          <TextField
            label="Site"
            fullWidth
            disabled
            variant="outlined"
            value={site.name || `Site ${site.id}`}
          />
        </Grid>
        <Grid item md={4} xs={12}>
          <TextField
            label="Survey point"
            value={pointSelectorValue}
            onChange={handleChange("point")}
            variant="outlined"
            fullWidth
            select
            SelectProps={selectProps}
          >
            {OptionsList(pointOptions)}
            <MenuItem className={classes.buttonMenuItem}>
              <Button
                onClick={handleNewPointDialogOpen}
                className={classes.newPointButton}
                startIcon={<AddIcon />}
                color="primary"
                size="small"
                fullWidth
              >
                ADD NEW SURVEY POINT
              </Button>
            </MenuItem>
          </TextField>
        </Grid>
        <Grid item md={4} xs={12}>
          <TextField
            label="Sensor type"
            value={sensorSelectorValue}
            onChange={handleChange("sensor")}
            variant="outlined"
            fullWidth
            select
            SelectProps={selectProps}
          >
            {OptionsList(SENSOR_TYPES)}
          </TextField>
        </Grid>
      </Grid>
      <Grid container spacing={2}>
        <Grid item>
          <Button
            component={Link}
            to={`/sites/${site.id}`}
            size="small"
            variant="outlined"
            color="primary"
          >
            Cancel
          </Button>
        </Grid>
        <Grid item>
          <Button
            onClick={onCompletedSelection}
            disabled={isContinueDisabled}
            size="small"
            variant="outlined"
            color="primary"
          >
            Continue to Upload
          </Button>
        </Grid>
      </Grid>
    </>
  );
}