Blog/Airframe-React
Template
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Init

Browse Source 
Preview: http://dashboards.webkom.co/react/airframe
This commit is contained in:
Tomasz Owczarczyk
2019-08-15 00:54:44 +02:00
parent f975443095
commit 37092d1d6c
626 changed files with 56691 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
app/routes/Forms/Toggles/Toggles.js Executable file
View File

@@ -0,0 +1,201 @@
import React from 'react';
import {
Row,
Col,
Table,
Container,
CustomInput
} from './../../../components';
import Toggle from 'react-toggle';
import { HeaderMain } from "../../components/HeaderMain";
import { HeaderDemo } from "../../components/HeaderDemo";
import classes from './Toggles.scss';
export class Toggles extends React.Component {
state = {
baconIsReady: true,
cheeseIsReady: false,
biscuitIsReady: false,
eggsAreReady: false,
milkIsReady: false,
toastIsReady: false,
soupIsReady: true,
tofuIsReady: false
}
render() {
return (
<Container>
<HeaderMain
title="Toggles"
className="mb-5 mt-4"
/>
<p className="mb-4">An elegant, accessible toggle component for React. Also a glorified checkbox.</p>
<Row>
<Col lg={ 6 }>
<Table>
<thead>
<tr>
<th>
Switch Name
</th>
<th className="text-right">
Switch Example
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<CustomInput
type="checkbox"
id="controlled-component-check"
checked={ this.state.milkIsReady }
onChange={ () => { this.setState({ milkIsReady: !this.state.milkIsReady }) } }
label="Controlled Component"
/>
</td>
<td className="text-right">
<Toggle
checked={ this.state.milkIsReady }
name='milkIsReady'
value='yes'
onChange={ () => { this.setState({ milkIsReady: !this.state.milkIsReady }) } }/>
</td>
</tr>
<tr>
<td>
<CustomInput
type="checkbox"
id="controlled-component-check-no-onchange"
checked={ this.state.toastIsReady }
onChange={ () => { this.setState({ toastIsReady: !this.state.toastIsReady }) } }
label="Controlled Component without onChange"
/>
</td>
<td className="text-right">
<Toggle
checked={ this.state.toastIsReady }
name='toastIsReady'
value='yes' />
</td>
</tr>
<tr>
<td className="text-inverse">
Diabled, Unchecked
</td>
<td className="text-right">
<Toggle
defaultChecked={false}
disabled={true} />
</td>
</tr>
<tr>
<td className="text-inverse">
Disabled, Checked
</td>
<td className="text-right">
<Toggle
defaultChecked={true}
disabled={true} />
</td>
</tr>
<tr>
<td className="text-inverse">
Custom className
</td>
<td className="text-right">
<Toggle
defaultChecked={this.state.aubergineIsReady}
className={ classes.switchCustomClass }
onChange={this.handleAubergineChange} />
</td>
</tr>
<tr>
<td className="text-inverse">
Custom Icons
</td>
<td className="text-right">
<Toggle
defaultChecked={this.state.soupIsReady}
icons={{
checked: <i className="fa fa-heart text-white" />,
unchecked: null,
}}
onChange={ () => { this.setState({ soupIsReady: !this.state.soupIsReady }) } } />
</td>
</tr>
<tr>
<td className="text-inverse">
No Icons
</td>
<td className="text-right">
<Toggle
defaultChecked={this.state.tofuIsReady}
icons={false}
onChange={() => { this.setState({ tofuIsReady: !this.state.tofuIsReady }) }} />
</td>
</tr>
</tbody>
</Table>
</Col>
<Col lg={ 6 }>
<Table className={ classes.singleTable }>
<thead>
<tr>
<th>
Switch Example
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label className="d-flex align-items-middle mb-0">
<Toggle
defaultChecked={this.state.baconIsReady}
onChange={() => { this.setState({baconIsReady: !this.state.baconIsReady}) }} />
<span className="ml-2 text-inverse">Wrapper label tag</span>
</label>
</td>
</tr>
<tr>
<td className="d-flex align-items-middle">
<Toggle
id='cheese-status'
defaultChecked={this.state.cheeseIsReady}
onChange={ () => { this.setState({cheeseIsReady: !this.state.cheeseIsReady}) } } />
<label htmlFor='cheese-status' className="ml-2 mb-0 text-inverse">Adjacent label tag</label>
</td>
</tr>
<tr>
<td className="d-flex align-items-middle">
<Toggle
id='biscuit-status'
defaultChecked={this.state.biscuitIsReady}
aria-labelledby='biscuit-label'
onChange={ () => { this.setState({biscuitIsReady: !this.state.biscuitIsReady}) } } />
<span id='biscuit-label' className="ml-2 text-inverse">Adjacent label, but not standard tag</span>
</td>
</tr>
<tr>
<td className="d-flex align-items-middle">
<Toggle
defaultChecked={this.state.eggsAreReady}
aria-label='No label tag'
onChange={ () => { this.setState({eggsAreReady: !this.state.eggsAreReady}) } } />
<span className="ml-2 text-inverse">No label tag</span>
</td>
</tr>
</tbody>
</Table>
</Col>
</Row>
</Container>
);
}
}