reactstrap#ButtonGroup TypeScript Examples

Toolbar = React.memo<Props>(({ type }) => {
  const dispatch = useDispatch();
  const btnFn: Record<string, () => Buffer> = {
    'Setup': CommandSet.setup.bind(null, type),
    '\u2795': CommandSet.setPlus.bind(null, type),
    '\u2796': CommandSet.setMinus.bind(null, type),
    'Enter': CommandSet.enter.bind(null, type),
    'Reset All': CommandSet.resetAll.bind(null, type),
  };
  const makeCommand = (cb: () => Buffer | undefined) => () => {
    dispatch(sendCommand(cb()));
  };
  return (
    <ButtonGroup>
      {_.map(btnFn, (builder, text) => (
        <Button key={text} outline onClick={makeCommand(builder)}>
          {text}
        </Button>
      ))}
    </ButtonGroup>
  );
})

Panel = (props: IProps) => {
    let dispatch = useDispatch();
    let id = useSelector(selectClientData).clientId;
    const [modalOpen, setModalOpen] = useState(false);
    let params : string = useLocation().pathname;
    const [selectedSubjects, setSelectedSubjects] = useState(new Set<string>());
    const [RIN, setRIN] = useState("");
    const [validRIN, setValidRIN] = useState(false);
    const [cohort, setCohort] = useState("");
    const [comments, setComments] = useState("");
    const [footerMessage, setFooterMessage] = useState("");
    const [rate, setRate] = useState(0);
    let subjects = [];
    let selectedSubjectsOutput = [];
    const [subjectsList, setSubjectsList] = useState(new Array<Subject>());
    function checkRIN(value: string) {
        if (value.length !== 9) {
            setValidRIN(false);
        }
        else {
            setValidRIN(true); 
        }
        setRIN(value);

    }
    function submit() {
        if (!validRIN
            || cohort === ""
            || cohort === "Select"
            || selectedSubjects.size === 0) {
                setFooterMessage("Please complete required fields.");
                return;
        }
        let subs: Array<String> = Array.from(selectedSubjects.keys());
        api.TutorSignup(id, RIN, subs, comments, rate).then(res =>{
            res ?
            setFooterMessage("Application submitted.")
            : setFooterMessage("Error submitting. Please try again.");
            }).catch(err => {
                setFooterMessage("Error submitting. Please try again.")
            });
    }
    
    useEffect(() => {
        // Get all avaliable subjects from API
        const getSubjects = async () => {
            return (await api.GetSubjects()).data;
        }

        getSubjects().then(value => {
                setSubjectsList(value);
            }
        )
    }, []);
    for (let i = 0; i < subjectsList.length; i++) {
        let name: string = subjectsList[i].id;
        let color = SubjectToColor(name);
        subjects.push(
            (<Button
                style={{background: color}}
                onClick={() => setSelectedSubjects(SelectedSubjectsHandler(selectedSubjects, name))}
            >
                {name}
            </Button>
            )
            );
    }
    let selectedSubs:Array<string> = Array.from(selectedSubjects.keys());
    for (let i = 0; i < selectedSubs.length; i++) {
        let name: string = selectedSubs[i];
        let color = SubjectToColor(name);
        selectedSubjectsOutput.push(
            (
               
                    <Badge
                    style={{
                        backgroundColor: color,
                        cursor:'default',
                        color: "black",
                        minWidth: '6em',
                        display: "flex",
                        flexDirection:'row',
                        alignItems: 'center',
                        marginRight: '0.5em'
                    }}
                    pill
                >
                    <div style={{
                        display: "flex",
                        flex: '50%',
                    }}>
                        {name + ' '}
                    </div> 
                    <Button 
                    close 
                    style={{
                        display: "flex",
                        flex: '50%',
                        alignItems: 'center'
                    }}
                    onClick={() => setSelectedSubjects(SelectedSubjectsHandler(selectedSubjects, name))} /> 
                    
                </Badge>
            )
        );
    }
    return (
        <div id="panel-wrapper">
            <Navbar className={classNames("navbar-expand-lg", "navbar-light", "bg-light", "border-bottom", "shadow")}>
                <Button className="btn-red" id="menu-toggle" onClick={() => {
                    dispatch(actions.toggleSidebar());
                }}>☰</Button>
            </Navbar>

            <Container fluid className="background" style={{marginBottom:'10em'}}>
                <hr></hr>
                <Row xs="2" className="parent">

                </Row>
                <div style={{display:'flex', flexDirection:'column', flexWrap:'wrap', alignContent:'center'}}>
                    {props.isLoading ? (
                        <div style={{display:'flex', flexDirection:'row', flex:'1 1 0px', flexWrap:'wrap', justifyContent:'center', marginTop:'10em'}}>
                            <Spinner style={{color:'#E66064'}}></Spinner>
                        </div>) 
                    : (
                    <div>
                        <div style={{display:'flex', flexDirection:'row', flex:'1 1 0px', flexWrap:'wrap', justifyContent:'center', marginTop:'10em'}}>
                            <h5>You are not currently signed up as a tutor. This dashboard is for tutors only. You can apply to be a TutorBase tutor below!
                            </h5></div>
                            
                            <div style={{display:'flex', flexDirection:'row', flex:'1 1 0px', flexWrap:'wrap', justifyContent:'center', marginTop:'1em'}}>
                            <Button 
                                className="btn-red" 
                                style={{height:'4em', width:'10em', borderRadius:'20em'}}
                                onClick={() => setModalOpen(true)}
                            >
                                Sign up as tutor
                            </Button>
                            <Modal
                                centered={true}
                                scrollable={true}
                                isOpen={modalOpen}
                            >
                                <ModalHeader toggle={() => setModalOpen(!modalOpen)}>
                                    Tutor Application Form
                                </ModalHeader>
                                <ModalBody>
                                <h5>RIN</h5>
                                <Input 
                                    defaultValue={RIN}
                                    onChange={(e) => checkRIN(e.target.value)}
                                    valid={validRIN}
                                    invalid={!validRIN}
                                    />
                                <p />
                                <h5>Cohort</h5>
                                <Input 
                                type="select"
                                    onChange={(e) => setCohort(e.target.value)}
                                    initialValue="Select"
                                    invalid={cohort === "" || cohort === "Select"}>
                                        <option>
                                        Select
                                    </option>
                                    <option>
                                        Freshman
                                    </option>
                                    <option>
                                        Sophomore
                                    </option>
                                    <option>
                                        Junior
                                    </option>
                                    <option>
                                        Senior
                                    </option>
                                    <option>
                                        Graduate
                                    </option>
                                    </Input>
                                <p />
                                <h5>Select Subjects to tutor</h5>
                                <ButtonGroup>
                                    {subjects}
                                    
                                </ButtonGroup>
                                <p>
                                    Selected:
                                    <Card
                                    outline={selectedSubjects.size === 0}
                                    color= {selectedSubjects.size === 0 ? "danger" : ""}>
                                <CardBody 
                                    style={{
                                        display: "flex",
                                        background: "lightgray",
                                        minHeight: "4em",
                                        flexWrap: 'wrap'
                                    }}>
                                {selectedSubjectsOutput}


                            </CardBody></Card>
                            </p>
                            <p>
                                <h5>Hourly Rate ($) (optional)</h5>
                                <Input
                                type="number"
                                    onChange={(e) => setRate(+(e.target.value))} />
                                </p>
                                <h5>Comments (optional)</h5>
                                <Input 
                                    type="textarea"
                                    onChange={(e) => setComments(e.target.value)} />

                                </ModalBody>
                                <ModalFooter>
                                <p style={{color: footerMessage === "Application submitted." ? 'green' : 'red'}}>
                                    {footerMessage}
                                </p>

                                <Button
                                    color="primary"
                                    onClick={() => submit()}
                                >
                                    Submit
                                </Button>
                                {' '}
                                <Button onClick={() => setModalOpen(false)}>
                                    Cancel
                                </Button>
                                </ModalFooter>
                            </Modal>
                        </div>
                    </div>
                    )}
                </div>
            </Container>
        </div>
    );
}

SensorConsole: React.FC = () => {
  const dispatch = useDispatch();
  const connected = useSelector((state) => state.report.connected);
  const shuttingdown = useSelector((state) => state.report.shuttingdown);
  const latest = useSelector((state) => state.report.latest);
  const onConnect = async () => {
    if (connected) {
      await dispatch(disconnect());
    } else {
      await dispatch(requestDevice());
      await dispatch(connect());
    }
  };
  const onShutdown = () => dispatch(shutdown());
  const onReadHistory = () => dispatch(readHistory());
  return (
    <Container className={locals.container}>
      <Row>
        <ButtonGroup>
          <Button color={connected ? 'success' : 'primary'} onClick={onConnect}>
            {connected ? 'Disconnect' : 'Connect'}
          </Button>
          <Button disabled={!connected} color={connected ? 'danger' : undefined} onClick={onShutdown}>
            {shuttingdown ? 'Shutting down' : 'Shutdown'}
          </Button>
          <Button disabled={!connected} color={connected ? 'info' : undefined} onClick={onReadHistory}>
            Read history (one-time)
          </Button>
        </ButtonGroup>
      </Row>
      <Row>
        <h1>Real-time</h1>
        <Table className={locals.table} responsive borderless>
          <thead>
            <tr>
              <th className={locals.field}>#</th>
              <th>Value</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                PM <sub>2.5</sub>
              </td>
              <td className='text-monospace'>
                <FormattedPM25 value={latest.pm25} />
              </td>
            </tr>
            <tr>
              <td>Battery</td>
              <td>
                <Progress value={latest.batteryCapacity ?? 0}>
                  {latest.batteryCapacity ? `${latest.batteryCapacity}%` : 'N/A'} {latest.batteryCharging ? '(Charging)' : '(Discharge)'}
                </Progress>
              </td>
            </tr>
            <tr>
              <td>Record date</td>
              <td className='text-monospace'>
                <RecordDate value={latest.recordDate} />
              </td>
            </tr>
            <tr>
              <td>Runtime</td>
              <td className='text-monospace'>{latest.runTime ? prettyDuration(latest.runTime * 1000) : 'N/A'}</td>
            </tr>
            <tr>
              <td>Boot time</td>
              <td className='text-monospace'>{latest.bootTime ? prettyDuration(latest.bootTime * 1000) : 'N/A'}</td>
            </tr>
            <tr>
              <td>Measurement Interval</td>
              <td className='text-monospace'>
                <MeasurementInterval />
              </td>
            </tr>
            <tr>
              <td>Firmare Version</td>
              <td className='text-monospace'>{latest.version ?? 'N/A'}</td>
            </tr>
          </tbody>
        </Table>
      </Row>
      <History />
    </Container>
  );
}

Buttons: React.FC = () => {
  return (
    <div className='relative'>
      <div className='text-xl font-bold'>Buttons</div>
      <Widget col className='w-100'>
        <div className='mb-3'>
          <div className='text-sm font-light text-grey-500'>Buttons</div>
          <div className='text-sm font-bold'>
            <span>Default button styles</span>
          </div>
        </div>
        <Row className='w-100 m-0'>
          <Button color='primary' className='rounded-0 mr-3'>
            Button
          </Button>
          <Button color='primary' className='rounded mr-3'>
            Button
          </Button>
          <CircleButton color='primary' className='w-8 h-8 mr-3'>
            1
          </CircleButton>
        </Row>
      </Widget>
      <Widget col className='w-100'>
        <div className='mb-3'>
          <div className='text-sm font-light text-grey-500'>Outlined buttons</div>
          <div className='text-sm font-bold'>
            <span>Outlined button styles</span>
          </div>
        </div>
        <Row className='m-0'>
          <Button
            color='primary'
            className='rounded-0 mr-3 focus:shadow-none'
            activeClassName='border-dark bg-dark text-white'
            hoverClassName='bg-warning border-warning text-muted'
            focusClassName='shadow-none'>
            Button
          </Button>
          <Button
            color='primary'
            activeClassName='border-dark bg-dark text-white'
            hoverClassName='bg-warning border-warning text-muted'
            focusClassName='shadow-none'
            className='rounded mr-3 focus:shadow-none'>
            Button
          </Button>
          <CircleButton
            color='primary'
            activeClassName='border-dark bg-dark text-color-light'
            hoverClassName='bg-warning border-warning text-muted'
            focusClassName='shadow-none'
            className='w-8 h-8 mr-3 focus:shadow-none'>
            1
          </CircleButton>
        </Row>
      </Widget>
      <Widget col className='w-100'>
        <div className='mb-3'>
          <div className='text-sm font-light text-grey-500'>Outlined buttons</div>
          <div className='text-sm font-bold'>
            <span>Outlined button styles</span>
          </div>
        </div>
        <Row className='m-0'>
          <OutlineButton color='primary' className='rounded-0 mr-3'>
            Button
          </OutlineButton>
          <OutlineButton color='primary' className='rounded mr-3'>
            Button
          </OutlineButton>
          <CircleButton outline color='primary' className='w-8 h-8 mr-3'>
            1
          </CircleButton>
        </Row>
      </Widget>
      <Widget col className='w-100'>
        <div className='mb-3'>
          <div className='text-sm font-light text-grey-500'>Flat buttons</div>
          <div className='text-sm font-bold'>
            <span>Flat button styles</span>
          </div>
        </div>
        <Row className='m-0'>
          <FlatButton onHoverStyle={onHoverStyle} className='rounded-0 mr-3'>
            Button
          </FlatButton>
          <FlatButton onHoverStyle={onHoverStyle} className='rounded mr-3'>
            Button
          </FlatButton>
          <CircleButton outline onHoverStyle={onHoverStyle} className='border-0 w-8 h-8 mr-3'>
            1
          </CircleButton>
        </Row>
      </Widget>
      <Widget col className='w-100'>
        <div className='mb-3'>
          <div className='text-sm font-light text-grey-500'>Raised buttons</div>
          <div className='text-sm font-bold'>
            <span>Raised button styles</span>
          </div>
        </div>
        <Row className='m-0'>
          <RaisedButton outline onHoverStyle={onHoverStyle} color='primary' className='rounded-0 mr-3'>
            Button
          </RaisedButton>
          <RaisedButton outline onHoverStyle={onHoverStyle} color='primary' className='rounded mr-3'>
            Button
          </RaisedButton>
          <CircleButton outline onHoverStyle={onHoverStyle} color='primary' className='border-0 shadow w-8 h-8 mr-3'>
            1
          </CircleButton>
        </Row>
      </Widget>
      <Widget col className='w-100 flex-wrap'>
        <div className='mb-3'>
          <div className='text-sm font-light text-grey-500'>Button groups</div>
          <div className='text-sm font-bold'>
            <span>Button group sizes</span>
          </div>
        </div>
        <Row className='m-0'>
          <ButtonGroup className='mb-3 mr-3'>
            <OutlineButton color='primary'>Left</OutlineButton>
            <OutlineButton color='primary'>Center</OutlineButton>
            <OutlineButton color='primary'>Right</OutlineButton>
          </ButtonGroup>
          <ButtonGroup className='mb-3 mr-3'>
            <Button color='primary'>Left</Button>
            <Button color='primary'>Center</Button>
            <Button color='primary'>Right</Button>
          </ButtonGroup>
          <ButtonGroup className='shadow mb-3 mr-3'>
            <FlatButton onHoverStyle={onHoverStyle} color='primary'>
              Left
            </FlatButton>
            <FlatButton onHoverStyle={onHoverStyle} color='primary'>
              Center
            </FlatButton>
            <FlatButton onHoverStyle={onHoverStyle} color='primary'>
              Right
            </FlatButton>
          </ButtonGroup>
        </Row>
      </Widget>
    </div>
  );
}