@material-ui/core#ButtonProps TypeScript Examples

ModalRegister = forwardRef<HTMLButtonElement, ButtonProps>(
  (props, ref) => {
    const [display, setDisplay] = useState(false)

    useImperativeHandle(ref, (): any => {
      return {
        openModal: () => open(),
        close: () => close()
      }
    })

    const open = () => {
      setDisplay(true)
    }

    const close = () => {
      setDisplay(false)
    }

    if (display) {
      return ReactDOM.createPortal(
        <div className={'modal-content'}>
          <div onClick={close} className={'modal-backdrop'}></div>
          <DisplayContext.Provider value={setDisplay}>
            <div className={'modal-box'}>{props.children}</div>
          </DisplayContext.Provider>
        </div>,
        document.getElementById('modal-root')
      )
    }
    return null
  }
)

ModalRegisterDone = forwardRef<HTMLButtonElement, ButtonProps>(
  (props, ref) => {
    const [displayTwo, setDisplaytwo] = useState(true)

    useImperativeHandle(ref, (): any => {
      return {
        openModalDone: () => open(),
        close: () => close()
      }
    })

    const open = () => {
      setDisplaytwo(true)
    }

    const close = () => {
      setDisplaytwo(false)
    }

    if (displayTwo) {
      return ReactDOM.createPortal(
        <div className={'modal-content'}>
          <div onClick={close} className={'modal-backdrop'}></div>
          <div className={'modal-box'}>{props.children}</div>
        </div>,
        document.getElementById('modal-root')
      )
    }
    return null
  }
)

ButtonExt = ({
  children,
  startIcon = <ForumIcon />,
  variant = 'contained',
  disableElevation = true,
  href = 'https://github.com/paritytech/parity-bridges-ui/issues',
  ...props
}: ButtonProps) => {
  const classes = useStyles();
  const openInNewTab = (url: string): void => {
    const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
    if (newWindow) newWindow.opener = null;
  };
  return (
    <Button
      className={classes.contact}
      variant={variant}
      startIcon={startIcon}
      disableElevation={disableElevation}
      onClick={() => openInNewTab(href)}
      {...props}
    >
      {children}
    </Button>
  );
}

ButtonInstallExtension = ({ children, color = 'secondary', fullWidth = true, ...props }: ButtonProps) => {
  const classes = useStyles();
  const openInNewTab = (): void => {
    const newWindow = window.open('https://polkadot.js.org/extension/', '_blank', 'noopener,noreferrer');
    if (newWindow) newWindow.opener = null;
  };
  return (
    <Button
      className={classes.installExtension}
      color={color}
      fullWidth={fullWidth}
      onClick={() => openInNewTab()}
      {...props}
    >
      <Box display="flex" justifyContent="space-between" width="100%">
        <span>{children}</span>
        <Web3Icon backgroundColor="#f29135" color="white">
          polkadot
        </Web3Icon>
      </Box>
    </Button>
  );
}

ButtonSubmit = ({
  children,
  color = 'primary',
  variant = 'contained',
  fullWidth = true,
  ...props
}: ButtonProps) => {
  const classes = useStyles();
  return (
    <Box mt={2} mb={2}>
      <Button
        id="test-button-submit"
        className={classes.submit}
        color={color}
        variant={variant}
        fullWidth={fullWidth}
        {...props}
      >
        {children}
      </Button>
    </Box>
  );
}

SaveToFile = (props: PropsWithChildren<ButtonProps>): ReactElement => {
  const dispatch = useDispatch()

  const { children, ...rest } = props

  const onClick = () => dispatch(fsPersist())

  return (
    <Button {...rest} onClick={onClick}>
      {children}
    </Button>
  )
}

LoadRaw = (
  props: PropsWithChildren<LoadProps<string> & Accept & ButtonProps>
): ReactElement => {
  const { children, handleData, accept = '.*,text', ...rest } = props

  const onClick = async (e: ChangeEvent<HTMLInputElement>): Promise<void> => {
    e.preventDefault()
    const files = e.target.files
    if (files === null || files.length < 1) {
      return
    }
    const file = files[0]

    handleData(await loadFile(file))
  }

  return (
    <Button {...{ ...rest, component: 'label' }}>
      {children}
      <input
        type="file"
        hidden
        accept={accept}
        onChange={intentionallyFloat(onClick)}
      />
    </Button>
  )
}

Load = <S,>(
  props: PropsWithChildren<LoadProps<S> & ButtonProps & Accept>
): ReactElement => {
  const { children, handleData, ...rest } = props

  return (
    <LoadRaw
      {...rest}
      handleData={(contents: string) => handleData(JSON.parse(contents) as S)}
    >
      {children}
    </LoadRaw>
  )
}

ButtonDrawerMenu = ({ children, color = 'secondary', fullWidth = true, ...props }: ButtonProps) => {
  const classes = useStyles();
  return (
    <Button className={classes.drawerMenu} color={color} fullWidth={fullWidth} {...props}>
      {children}
    </Button>
  );
}

ButtonSwitchMode = ({ children, color = 'secondary', ...props }: ButtonProps) => {
  const classes = useStyles();
  return (
    <Button className={classes.switchMode} color={color} {...props}>
      {children}
    </Button>
  );
}

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