Commit da8908e5 by Sarah Fischmann

setting up checkbox, cleaning up code

parent a6b371b2
import React from 'react'; import React from 'react';
import { Input } from 'reactstrap';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import asInput, { inputProps } from './utils/asInput'; import { inputProps } from './utils/asInput';
class CheckBox extends React.Component { class CheckBox extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
pressed: "false" pressed: 'false',
}; };
} }
handleClick() { handleClick() {
if (this.state.pressed == "true") { if (this.state.pressed === 'true') {
this.setState({ this.setState({
pressed: "false", pressed: 'false',
}) } else { });
} else {
this.setState({ this.setState({
pressed: "true" pressed: 'true',
}); });
} }
} }
render() { render() {
const props = {...this.props}; const props = { ...this.props };
return ( return (
<form> <form>
<label class="form-check-label"> <label htmlFor={props.checkLabel} className="form-check-label">
<input <input
type="checkbox" type="checkbox"
class="form-check-input" className="form-check-input"
name={props.name} name={props.name}
aria-descrivedby={props.describedby} aria-describedby={props.describedby}
aria-checked={this.state.pressed} aria-checked={this.state.pressed}
tabindex="0" tabIndex="0"
onClick={() => this.handleClick()} onClick={() => this.handleClick()}
/> />
{props.checkLabel} {props.checkLabel}
</label> </label>
</form> </form>
...@@ -48,7 +49,7 @@ class CheckBox extends React.Component { ...@@ -48,7 +49,7 @@ class CheckBox extends React.Component {
CheckBox.propTypes = { CheckBox.propTypes = {
...inputProps, ...inputProps,
checkLabel : PropTypes.string.isRequired checkLabel: PropTypes.string.isRequired,
}; };
export default CheckBox; export default CheckBox;
...@@ -4,7 +4,7 @@ import { storiesOf, linkTo } from '@kadira/storybook'; ...@@ -4,7 +4,7 @@ import { storiesOf, linkTo } from '@kadira/storybook';
import TextInput from '../src/TextInput'; import TextInput from '../src/TextInput';
import SelectInput from '../src/SelectInput'; import SelectInput from '../src/SelectInput';
import CheckBox from '../src/CheckBox' import CheckBox from '../src/CheckBox';
import Welcome from './Welcome'; import Welcome from './Welcome';
storiesOf('Welcome', module) storiesOf('Welcome', module)
...@@ -126,12 +126,12 @@ storiesOf('SelectInput', module) ...@@ -126,12 +126,12 @@ storiesOf('SelectInput', module)
/> />
)); ));
storiesOf('CheckBox', module) storiesOf('CheckBox', module)
.add('basic usage', () => ( .add('basic usage', () => (
<CheckBox <CheckBox
name="checkbox" name="checkbox"
label="CheckBox" label="CheckBox"
describedBy="checkbox" describedBy="checkbox"
checkLabel="check me out" checkLabel="check me out"
/> />
)); ));
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment