@material-ui/lab#SpeedDial JavaScript Examples

SpeedDials = () => {
    const classes = useStyles();

    const [open, setOpen] = React.useState(false);

    const handleClose = () => {
        setOpen(false);
    };

    const handleOpen = () => {
        setOpen(true);
    };

    const actionIcons = Resume.basics.profiles.map((action) => (
        <SpeedDialAction
            key={action.network.toLowerCase()}
            icon={<i className={`${action.x_icon} ${classes.iconColor}`}></i>}
            tooltipTitle={action.network}
            onClick={handleClose}
            href={action.url}
            target="_blank"
            rel="noopener noreferrer"
            underline="none"
            color="inherit"
        />
    ));

    return (
        <>
            <SpeedDial
                ariaLabel="SpeedDial"
                className={classes.speedDial}
                hidden={false}
                icon={<SpeedDialIcon />}
                onClose={handleClose}
                onOpen={handleOpen}
                open={open}
                direction="down"
            >
                {actionIcons}
            </SpeedDial>
        </>
    );
}

render() {
    //console.log("Rendering GraphDashboard");
    const { classes } = this.props;
    return (
      <Fragment>
        <Grid
          container
          direction="row"
          spacing={0}
          justify="flex-start"
          alignItems="flex-start"
        >
          {this.renderReadyPlots()}
        </Grid>
        {this.state.show_addlines ? (
          <AddLines
            setLogParams={event => { this.setState({ show_addlines: false }); this.selected = event }}
            show={this.state.show_addlines}
            prev_selection={this.selected}
          />
        ) : (null)}
        {this.state.show_addgraph ? (
          <AddGraph
            addplot={(plot_name, lines) => this.setState({ show_addgraph: false }, this.addUpdatePlots(plot_name, 0, lines))}
            show={this.state.show_addgraph}
            lines_available={Object.keys(this.lines)}
          />
        ) : (null)}
        {this.state.show_settings ? (
          <GraphSettings
            setSettings={(cols, rate, datapoints, webgl) => this.setState({ show_settings: false, layout_cols: cols, rateHz: rate, max_datapoints: datapoints, webgl: webgl })}
            show={this.state.show_settings}
            cols={this.state.layout_cols}
            rateHz={this.state.rateHz}
            max_datapoints={this.state.max_datapoints}
            webgl={this.state.webgl}
          />
        ) : (null)}
        <SpeedDial
          ariaLabel="SpeedDial tooltip example"
          className={classes.speedDial}
          icon={<SpeedDialIcon />}
          FabProps={{ size: 'small', color: "secondary" }}
          onClick={() => this.setState({ speeddial: !this.state.speeddial })}
          open={this.state.speeddial}
        >
          {this.actions.map((action) => (
            <SpeedDialAction
              key={action.name}
              icon={action.icon}
              tooltipTitle={action.name}
              tooltipOpen
              onClick={action.handler}
            />
          ))}
        </SpeedDial>
      </Fragment>
    );
  }

render() {
    //console.log("Rendering Joystick");
    const { classes } = this.props;
    return (
      <Fragment>
        <Grid
          className={classes.joystick}
          container
          spacing={0}
          direction="row"
          justify="center"
          alignItems="center"
        >
          <Grid item xs={6} align="center">
            <Typography variant="subtitle2">
              X:{this.joystick_msg.testJoystick.axes[0].toFixed(3)} /
              Y:{this.joystick_msg.testJoystick.axes[1].toFixed(3)}
            </Typography>
            {this.renderJoystick_0 ? (
              <ReactNipple
                options={{
                  mode: 'semi',
                  position: { top: '50%', left: '50%' },
                  color: 'red',
                  size: 200,
                  dynamicPage: true,
                  lockX: false,
                  lockY: false,
                  restJoystick: this.joy_finetune.restJoystick_0,
                  threshold: 0.06
                }}
                style={{
                  outline: '1px dashed grey',
                  height: '75vh',
                  position: 'relative'
                }}
                onMove={(evt, data) => this.virtualJoystick(0, data)}
                onEnd={() => { if (this.joy_finetune.restJoystick_0) this.virtualJoystick(0, 0) }} // Reseting to 0 on joystick rest (only when restJoystick: true)
              />) : (this.renderJoystick_0 = true, null)}
          </Grid>
          <Grid item xs={6} align="center">
            <Typography variant="subtitle2">
              X:{this.joystick_msg.testJoystick.axes[2].toFixed(3)} /
              Y:{this.joystick_msg.testJoystick.axes[3].toFixed(3)}
            </Typography>
            {this.renderJoystick_1 ? (
              <ReactNipple
                options={{
                  mode: 'semi',
                  position: { top: '50%', left: '50%' },
                  color: 'red',
                  size: 200,
                  dynamicPage: true,
                  lockX: false,
                  lockY: false,
                  restJoystick: this.joy_finetune.restJoystick_1,
                  threshold: 0.06
                }}
                style={{
                  outline: '1px dashed grey',
                  height: '75vh',
                  position: 'relative'
                }}
                onMove={(evt, data) => this.virtualJoystick(2, data)}
                onEnd={() => { if (this.joy_finetune.restJoystick_1) this.virtualJoystick(2, 0) }}
              />) : (this.renderJoystick_1 = true, null)}
          </Grid>
        </Grid>
        <SpeedDial
          ariaLabel="SpeedDial tooltip example"
          className={classes.speedDial}
          icon={<SpeedDialIcon />}
          FabProps={{ size: 'small', color: "secondary" }}
          onClick={() => this.setState({ speeddial: !this.state.speeddial })}
          open={this.state.speeddial}
        >
          <SpeedDialAction
            icon={this.state.enabled ? <SyncDisabledIcon /> : <SyncIcon />}
            tooltipTitle={this.state.enabled ? 'Disable' : 'Enable'}
            tooltipOpen
            onClick={() => this.setState({ enabled: !this.state.enabled }, this.resetMessage)}
          />
          <SpeedDialAction
            icon={<SettingsIcon />}
            tooltipTitle="Settings"
            tooltipOpen
            onClick={() => { this.setState({ show_settings: true }) }}
          />
        </SpeedDial>
        {this.state.show_settings ? (
          <JoystickSettings
            setSettings={
              (joy_finetune) => {
                this.setState({ show_settings: false });
                this.joy_finetune = joy_finetune;
                this.renderJoystick_0 = false;
                this.renderJoystick_1 = false;
              }
            }
            show={this.state.show_settings}
            joy_finetune={this.joy_finetune}
          />
        ) : (null)}
      </Fragment>
    );
  }