Commit 8009d271 by Sarah Fischmann

added ability to set the start state and pass in a callback function

parent 047f9fc6
...@@ -7,21 +7,34 @@ import { inputProps } from './utils/asInput'; ...@@ -7,21 +7,34 @@ 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 = { if (props.checked === 'true') {
pressed: 'false', this.state = {
}; pressed: props.checked,
checked: true,
};
} else {
this.state = {
pressed: props.checked,
checked: false,
};
}
} }
handleClick() { handleClick() {
if (this.state.pressed === 'true') { if (this.state.pressed === 'true') {
this.setState({ this.setState({
pressed: 'false', pressed: 'false',
checked: false,
}); });
} else { } else {
this.setState({ this.setState({
pressed: 'true', pressed: 'true',
checked: true,
}); });
} }
if (this.props.fun) {
this.props.fun();
}
} }
...@@ -32,14 +45,15 @@ class CheckBox extends React.Component { ...@@ -32,14 +45,15 @@ class CheckBox extends React.Component {
<form> <form>
<label htmlFor={props.checkLabel} className="form-check-label"> <label htmlFor={props.checkLabel} className="form-check-label">
<input <input
name={props.name}
type="checkbox" type="checkbox"
defaultChecked={this.state.checked}
className="form-check-input" className="form-check-input"
name={props.name}
aria-describedby={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()}
disabled={props.disabled} disabled={props.disable}
/> />
{props.checkLabel} {props.checkLabel}
</label> </label>
......
...@@ -133,6 +133,7 @@ storiesOf('CheckBox', module) ...@@ -133,6 +133,7 @@ storiesOf('CheckBox', module)
label="CheckBox" label="CheckBox"
describedBy="checkbox" describedBy="checkbox"
checkLabel="check me out!" checkLabel="check me out!"
checked="false"
/> />
)) ))
.add('disabled', () => ( .add('disabled', () => (
...@@ -141,6 +142,16 @@ storiesOf('CheckBox', module) ...@@ -141,6 +142,16 @@ storiesOf('CheckBox', module)
label="CheckBox" label="CheckBox"
describedBy="checkbox" describedBy="checkbox"
checkLabel="you cannot check me out" checkLabel="you cannot check me out"
disabled="true" checked="false"
disable="true"
/>
))
.add('default checked', () => (
<CheckBox
name="checkbox"
label="CheckBox"
describedBy="checkbox"
checkLabel="(un)check me out"
checked="true"
/> />
)); ));
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