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';
class CheckBox extends React.Component {
constructor(props) {
super(props);
this.state = {
pressed: 'false',
};
if (props.checked === 'true') {
this.state = {
pressed: props.checked,
checked: true,
};
} else {
this.state = {
pressed: props.checked,
checked: false,
};
}
}
handleClick() {
if (this.state.pressed === 'true') {
this.setState({
pressed: 'false',
checked: false,
});
} else {
this.setState({
pressed: 'true',
checked: true,
});
}
if (this.props.fun) {
this.props.fun();
}
}
......@@ -32,14 +45,15 @@ class CheckBox extends React.Component {
<form>
<label htmlFor={props.checkLabel} className="form-check-label">
<input
name={props.name}
type="checkbox"
defaultChecked={this.state.checked}
className="form-check-input"
name={props.name}
aria-describedby={props.describedby}
aria-checked={this.state.pressed}
tabIndex="0"
onClick={() => this.handleClick()}
disabled={props.disabled}
disabled={props.disable}
/>
{props.checkLabel}
</label>
......
......@@ -133,6 +133,7 @@ storiesOf('CheckBox', module)
label="CheckBox"
describedBy="checkbox"
checkLabel="check me out!"
checked="false"
/>
))
.add('disabled', () => (
......@@ -141,6 +142,16 @@ storiesOf('CheckBox', module)
label="CheckBox"
describedBy="checkbox"
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