reactstrap#ButtonGroup TypeScript Examples
The following examples show how to use
reactstrap#ButtonGroup.
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: Toolbar.tsx From atorch-console with MIT License | 6 votes |
|
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>
);
})
Example #2
| Source File: TutorPanelSignup.tsx From TutorBase with MIT License | 4 votes |
|
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>
);
}
Example #3
| Source File: index.tsx From mops-vida-pm-watchdog with MIT License | 4 votes |
|
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>
);
}
Example #4
| Source File: Buttons.tsx From opensaas with MIT License | 4 votes |
|
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>
);
}
