@material-ui/lab#ToggleButtonGroup TypeScript Examples

PullRequestBoardOptions: FunctionComponent<Props> = (props: Props) => {
  const { value, onClickOption, options } = props;
  return (
    <ToggleButtonGroup
      size="small"
      value={value}
      onChange={(_event, selectedOptions) => onClickOption(selectedOptions)}
      aria-label="Pull Request board settings"
    >
      {options.map(({ icon, value: toggleValue, ariaLabel }, index) => (
        <ToggleButton
          value={toggleValue}
          aria-label={ariaLabel}
          key={`${ariaLabel}-${index}`}
        >
          <Tooltip title={ariaLabel}>
            <Box display="flex" justifyContent="center" alignItems="center">
              {icon}
            </Box>
          </Tooltip>
        </ToggleButton>
      ))}
    </ToggleButtonGroup>
  );
}

render() {
    return (
      <div>
        {/* <Typography variant='caption' display='block'>Platform</Typography>
        <ToggleButtonGroup
          {...{ size: 'small' }}
          value={this.state.device}
          exclusive
          className={this.props.classes.toggleButtonGroup}
          onChange={(e, val) => {
            switch (val) {
              case 'mobile':
                this.setState({ device: Device.Mobile });
                this.props.onboardingDemoRef.current
                  && this.props.onboardingDemoRef.current.onDeviceChange
                  && this.props.onboardingDemoRef.current.onDeviceChange(Device.Mobile);
                break;
              case 'desktop':
                this.setState({ device: Device.Desktop });
                this.props.onboardingDemoRef.current
                  && this.props.onboardingDemoRef.current.onDeviceChange
                  && this.props.onboardingDemoRef.current.onDeviceChange(Device.Desktop);
                break;
            }
          }}
        >
          <ToggleButton value='desktop'>Desktop</ToggleButton>
          <ToggleButton value='mobile'>Mobile</ToggleButton>
        </ToggleButtonGroup> */}
        <Typography variant='caption' display='block'>Signup methods</Typography>
        <ToggleButtonGroup
          size='small'
          value={this.state.signupMethods}
          className={this.props.classes.toggleButtonGroup}
          onChange={(e, val) => {
            const signupMethods = val as SignupMethods[];
            this.setState({ signupMethods: signupMethods });
            setSignupMethodsTemplate(this.props.templater, signupMethods);
          }}
        >
          {/* <ToggleButton
            disabled={this.state.device === Device.Desktop}
            value={SignupMethods.Mobile}>Mobile</ToggleButton> */}
          <ToggleButton
            disabled={this.state.device === Device.Mobile}
            value={SignupMethods.Web}>Web</ToggleButton>
          <ToggleButton value={SignupMethods.Email}>Email</ToggleButton>
          <ToggleButton value={SignupMethods.Anonymous}>Anon</ToggleButton>
          <ToggleButton value={SignupMethods.Sso}>SSO</ToggleButton>
          <ToggleButton value={SignupMethods.Oauth}>OAuth</ToggleButton>
        </ToggleButtonGroup>
        {this.props.showDisplayNameControls && (
          <>
            <Typography variant='caption' display='block'>Display name</Typography>
            <ToggleButtonGroup
              {...{ size: 'small' }}
              value={this.state.collectDisplayName}
              exclusive
              className={this.props.classes.toggleButtonGroup}
              onChange={(e, val) => {
                if (!val) return;
                const displayName = val as Client.AccountFieldsDisplayNameEnum;
                this.setState({ collectDisplayName: displayName });
                this.props.templater.usersOnboardingDisplayName(displayName);
              }}
            >
              <ToggleButton value={Client.AccountFieldsDisplayNameEnum.None}>None</ToggleButton>
              <ToggleButton value={Client.AccountFieldsDisplayNameEnum.Optional}>Opt</ToggleButton>
              <ToggleButton value={Client.AccountFieldsDisplayNameEnum.Required}>Req</ToggleButton>
            </ToggleButtonGroup>
          </>
        )}
      </div>
    );
  }

OverclockingCard: React.FC = () => {
    const classes = useStyles();
    const dispatch = useDispatch();
    const overclockLevel = useSelector((state: RootState) => state.overclock.level);
    const { enabled } = useSelector((state: RootState) => state.overclock);

    const [rebootRequired, setRebootRequired] = React.useState(false);
    const [enableDialogOpen, setEnableDialogOpen] = React.useState(false);
    const [infoDialogOpen, setInfoDialogOpen] = React.useState(false);

    const handleLevelSelect = (_event: React.MouseEvent<HTMLElement>, level: OverclockLevel | null) => {
        if (level !== null) {
            dispatch(setOverclockLevel(level));
            flushStore();

            if (level !== overclockLevel) {
                setTimeout(() => {
                    setRebootRequired(true);
                }, 1000);
            }
        }
    }

    const openInfoDialog = () => {
        setInfoDialogOpen(true);
    };

    const openEnableDialog = () => {
        setEnableDialogOpen(true);
    }

    const closeEnableDialog = (confirmed: boolean) => {
        if (confirmed) { dispatch(enableOverclocking()); }
        setEnableDialogOpen(false);
    }

    const closeInfoDialog = () => {
        setInfoDialogOpen(false);
    }

    const triggerReboot = () => {
        const msg: CommandMessage = {
            command: Command.Reboot
        };

        daemon.next(msg);
    }


    const cardActions = (
        <Tooltip title="About overclocking" placement="left">
            <IconButton aria-label="delete" color="default" onClick={openInfoDialog}>
                <HelpOutlineIcon />
            </IconButton>
        </Tooltip>
    );

    const rebootButton = (
        <ButtonGroup className={classes.rebootButtonGroup}>
            <Box flexShrink={1}>
                <Tooltip title="Go back" placement="bottom">
                    <Button
                        className={classes.rebootButton}
                        variant="contained"
                        onClick={(_e) => setRebootRequired(false)}
                        size="large">
                        <ArrowBackIcon />
                    </Button>
                </Tooltip>
            </Box>
            <Button
                className={classes.rebootButton}
                variant="contained"
                startIcon={<PowerSettingsNewIcon />}
                onClick={triggerReboot}
                size="large">
                Reboot Pi now
	</Button>
        </ButtonGroup>
    );

    const enableButton = (
        <Button
            className={classes.enableButton}
            variant="contained"
            color="primary"
            startIcon={<SpeedIcon />}
            onClick={openEnableDialog}
            size="large">
            Enable overclocking
	</Button>
    );

    const overclockLevels = [
        OverclockLevel.BaseClock,
        OverclockLevel.Level1,
        OverclockLevel.Level2,
        OverclockLevel.Level3
    ];

    const tooltipTitle = (level: OverclockLevel) => {
        return formatLevelValues(level).map((s, index) => {
            return <span key={index}>{s}<br /></span>;
        });
    };

    const overclockButtons = overclockLevels.map((level, index) => (
        <ToggleButton key={index} value={level} className={classes.toggleButton}>
            <Tooltip title={
                <Typography variant="caption">
                    {tooltipTitle(level)}
                </Typography>
            }
                placement="bottom" enterDelay={1000}>
                <Typography className={classes.buttonLabels}>
                    {levelToString(level)}
                </Typography>
            </Tooltip>
        </ToggleButton>
    ));

    const overclockButtonGroup = (
        <ToggleButtonGroup
            value={overclockLevel}
            exclusive={true}
            className={classes.buttonGroup}
            onChange={handleLevelSelect}>

            {overclockButtons}
        </ToggleButtonGroup>
    );


    return (
        <MainCard title="Overclocking" actions={cardActions}>
            <EnableOverclockingDialog
                open={enableDialogOpen}
                onClose={closeEnableDialog} />
            <OverclockingDialog
                open={infoDialogOpen}
                onClose={closeInfoDialog} />
            <Box display="flex" justifyContent="space-between">
                {!enabled ? enableButton : (rebootRequired ? rebootButton : overclockButtonGroup)}
            </Box>
        </MainCard >
    );
}

function Main() {
  const classes = useStyles();
  const { actions, action, setAction, isBridged, setBridged } = useGUIContext();
  const { dispatchTransaction } = useUpdateTransactionContext();
  const { transactionRunning, action: transactionContextAction } = useTransactionContext();

  const handleOnSwitch = useCallback(
    (event: React.MouseEvent<HTMLElement>, isBridged: boolean) => {
      if (!isNull(isBridged)) {
        setBridged(isBridged);
        dispatchTransaction(
          TransactionActionCreators.setTransferType(
            isBridged ? TransactionTypes.TRANSFER : TransactionTypes.INTERNAL_TRANSFER
          )
        );
      }
    },
    [dispatchTransaction, setBridged]
  );

  const form = action === TransactionTypes.TRANSFER ? classes.transactionFormHeight : classes.formHeight;

  return (
    <>
      <BoxSidebar>
        <div>
          <Typography variant="button" color="secondary">
            Bridges UI
          </Typography>
          <NetworkSides />
          <BridgedLocalWrapper blurred>
            <NetworkStats />
          </BridgedLocalWrapper>
        </div>
        <ButtonExt> Help & Feedback </ButtonExt>
      </BoxSidebar>

      <Container className={classes.ui}>
        {!transactionRunning ? (
          <Paper elevation={24} className={form}>
            <Grid item spacing={6}>
              <Box component="div" display="flex" marginY={2} textAlign="left" width="100%">
                <MenuAction actions={actions} action={action} changeMenu={setAction} />
                {action === TransactionTypes.TRANSFER && (
                  <ToggleButtonGroup
                    size="small"
                    value={isBridged}
                    exclusive
                    onChange={handleOnSwitch}
                    classes={{ root: classes.root }}
                  >
                    <ToggleButton value={false}>Internal</ToggleButton>
                    <ToggleButton value={true}>Bridge</ToggleButton>
                  </ToggleButtonGroup>
                )}
              </Box>
              <ExtensionAccountCheck component={<Sender />} />
              <Box marginY={2} textAlign="center" width="100%">
                <ArrowDownwardIcon fontSize="large" color="primary" />
              </Box>
              <Box>
                <>{ActionComponents[action]}</>
              </Box>
            </Grid>
          </Paper>
        ) : (
          <Paper elevation={24} className={form}>
            <Box className={classes.transactionSubmited}>
              <Check style={{ fontSize: 150 }} color="primary" />
              <Typography color="primary">Transaction Submited</Typography>
            </Box>
          </Paper>
        )}
        <Grid item spacing={6} className={classes.transactions}>
          <Transactions type={transactionContextAction ? transactionContextAction : action} />
        </Grid>
      </Container>
      <SnackBar />
    </>
  );
}