52 lines
1.2 KiB
JavaScript
52 lines
1.2 KiB
JavaScript
|
/** @jsx React.DOM */
|
||
|
|
var React = require('flux-react');
|
||
|
|
var Constants = require('../Constants.js');
|
||
|
|
var ColoredCheckbox = require('./Checkboxes/ColoredCheckbox.js');
|
||
|
|
var CheckboxActions = require('../actions/CheckboxActions.js');
|
||
|
|
var CheckboxStore = require('../stores/CheckboxStore.js');
|
||
|
|
|
||
|
|
var Checkboxes = React.createClass({
|
||
|
|
stores: [CheckboxStore],
|
||
|
|
getInitialState: function () {
|
||
|
|
return {
|
||
|
|
checkboxes: CheckboxStore.getCheckboxes()
|
||
|
|
};
|
||
|
|
},
|
||
|
|
storesDidUpdate: function () {
|
||
|
|
this.setState({
|
||
|
|
checkboxes: CheckboxStore.getCheckboxes()
|
||
|
|
});
|
||
|
|
},
|
||
|
|
check: function (color) {
|
||
|
|
React.dispatch({
|
||
|
|
type: CheckboxActions.CHECK,
|
||
|
|
color: color
|
||
|
|
})
|
||
|
|
},
|
||
|
|
checkAll: function () {
|
||
|
|
React.dispatch({
|
||
|
|
type: CheckboxActions.CHECK_ALL
|
||
|
|
});
|
||
|
|
},
|
||
|
|
uncheckAll: function () {
|
||
|
|
React.dispatch({
|
||
|
|
type: CheckboxActions.UNCHECK_ALL
|
||
|
|
});
|
||
|
|
},
|
||
|
|
render: function() {
|
||
|
|
var checkboxes = this.state.checkboxes.map(function (checkbox, index) {
|
||
|
|
return <ColoredCheckbox key={index} color={checkbox.color} checked={checkbox.checked} onChange={this.check}/>
|
||
|
|
}, this);
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
{checkboxes}
|
||
|
|
<button onClick={this.checkAll}>Check all</button>
|
||
|
|
<button onClick={this.uncheckAll}>Uncheck all</button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
module.exports = Checkboxes;
|