cuz
Version:
Front-end modular development kit.
67 lines (58 loc) • 1.35 kB
JavaScript
import React, { cloneElement } from 'react';
import {utils} from 'react-bootstrap';
function getDataFromChild(children) {
const data = [];
utils.ValidComponentChildren.forEach(children, (child) => {
if (child.props.checked === true) {
data.push(child.props.value);
}
});
return {data};
}
const CheckboxGroup = React.createClass({
propTypes: {
max: React.PropTypes.number,
onSelect: React.PropTypes.func,
children: React.PropTypes.any,
},
getDefaultProps() {
return {
data: []
};
},
getInitialState() {
return getDataFromChild(this.props.children);
},
onSelect(event, value) {
const { onSelect } = this.props;
const checked = event.target.checked;
const data = this.state.data.concat();
const index = data.indexOf(value);
if (checked && index === -1) {
data.push(value);
}
if (!checked && index !== -1) {
data.splice(index, 1);
}
this.setState({
data
});
if (onSelect) onSelect(data);
},
renderCheckbox(child) {
return cloneElement(
child,
{
onSelect: this.onSelect
}
);
},
render() {
return (
<div className="form-inline">
{utils.ValidComponentChildren.map(this.props.children, this.renderCheckbox)}
</div>
);
}
});
export default CheckboxGroup;