@material-ui/lab#SpeedDialIcon JavaScript Examples

The following examples show how to use @material-ui/lab#SpeedDialIcon. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: SpeedDial.js    From personal-website-react with MIT License 5 votes vote down vote up 
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>
        </>
    );
}
Example #2
Source File: GraphDashboard.js    From Interceptor with MIT License 5 votes vote down vote up 
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>
    );
  }
Example #3
Source File: Joystick.js    From Interceptor with MIT License 4 votes vote down vote up 
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>
    );
  }