240 lines
18 KiB
JavaScript
240 lines
18 KiB
JavaScript
|
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({"./app/main.js":[function(require,module,exports){
|
||
|
|
/** @jsx React.DOM */
|
||
|
|
var React = require('react');
|
||
|
|
var flux = require('flux-react');
|
||
|
|
var App = require('./App.js');
|
||
|
|
|
||
|
|
flux.debug();
|
||
|
|
|
||
|
|
React.renderComponent(App(null), document.body);
|
||
|
|
},{"./App.js":"/Users/christianalfoni/Documents/dev/flux-react-boilerplate/app/App.js","flux-react":"flux-react","react":"react"}],"/Users/christianalfoni/Documents/dev/flux-react-boilerplate/app/App.js":[function(require,module,exports){
|
||
|
|
/** @jsx React.DOM */
|
||
|
|
var React = require('react');
|
||
|
|
var Checkboxes = require('./components/Checkboxes.js');
|
||
|
|
var NameThrower = require('./components/NameThrower.js');
|
||
|
|
|
||
|
|
var App = React.createClass({displayName: 'App',
|
||
|
|
render: function() {
|
||
|
|
return (
|
||
|
|
React.DOM.div(null,
|
||
|
|
React.DOM.h1(null, "Hello world!"),
|
||
|
|
React.DOM.div(null,
|
||
|
|
Checkboxes(null)
|
||
|
|
),
|
||
|
|
React.DOM.div(null,
|
||
|
|
NameThrower(null)
|
||
|
|
)
|
||
|
|
)
|
||
|
|
);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
module.exports = App;
|
||
|
|
|
||
|
|
},{"./components/Checkboxes.js":"/Users/christianalfoni/Documents/dev/flux-react-boilerplate/app/components/Checkboxes.js","./components/NameThrower.js":"/Users/christianalfoni/Documents/dev/flux-react-boilerplate/app/components/NameThrower.js","react":"react"}],"/Users/christianalfoni/Documents/dev/flux-react-boilerplate/app/actions.js":[function(require,module,exports){
|
||
|
|
module.exports = flux.createActions([
|
||
|
|
'checkAll',
|
||
|
|
'uncheckAll',
|
||
|
|
'check'
|
||
|
|
]);
|
||
|
|
},{}],"/Users/christianalfoni/Documents/dev/flux-react-boilerplate/app/components/Checkboxes.js":[function(require,module,exports){
|
||
|
|
/** @jsx React.DOM */
|
||
|
|
var React = require('react');
|
||
|
|
var flux = require('flux-react');
|
||
|
|
var actions = require('./../actions.js');
|
||
|
|
var ColoredCheckbox = require('./Checkboxes/ColoredCheckbox.js');
|
||
|
|
var CheckboxStore = require('../stores/CheckboxStore.js');
|
||
|
|
|
||
|
|
var Checkboxes = React.createClass({displayName: 'Checkboxes',
|
||
|
|
stores: [CheckboxStore],
|
||
|
|
getInitialState: function () {
|
||
|
|
return {
|
||
|
|
checkboxes: CheckboxStore.getCheckboxes()
|
||
|
|
};
|
||
|
|
},
|
||
|
|
componentWillMount: function () {
|
||
|
|
CheckboxStore.addChangeListener(this.update);
|
||
|
|
},
|
||
|
|
componentWillUnmount: function () {
|
||
|
|
CheckboxStore.removeChangeListener(this.update);
|
||
|
|
},
|
||
|
|
update: function () {
|
||
|
|
this.setState({
|
||
|
|
checkboxes: CheckboxStore.getCheckboxes()
|
||
|
|
});
|
||
|
|
},
|
||
|
|
check: function (color) {
|
||
|
|
actions.check(color);
|
||
|
|
},
|
||
|
|
checkAll: function () {
|
||
|
|
actions.checkAll();
|
||
|
|
},
|
||
|
|
uncheckAll: function () {
|
||
|
|
actions.uncheckAll();
|
||
|
|
},
|
||
|
|
renderCheckbox: function (checkbox, index) {
|
||
|
|
return ColoredCheckbox({
|
||
|
|
key: index,
|
||
|
|
color: checkbox.color,
|
||
|
|
checked: checkbox.checked,
|
||
|
|
onChange: this.check})
|
||
|
|
},
|
||
|
|
render: function() {
|
||
|
|
var checkboxes = this.state.checkboxes.map(this.renderCheckbox);
|
||
|
|
return (
|
||
|
|
React.DOM.div(null,
|
||
|
|
React.DOM.div(null,
|
||
|
|
checkboxes
|
||
|
|
),
|
||
|
|
React.DOM.div(null,
|
||
|
|
React.DOM.button({onClick: this.checkAll}, "Check all"),
|
||
|
|
React.DOM.button({onClick: this.uncheckAll}, "Uncheck all")
|
||
|
|
)
|
||
|
|
)
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
module.exports = Checkboxes;
|
||
|
|
|
||
|
|
},{"../stores/CheckboxStore.js":"/Users/christianalfoni/Documents/dev/flux-react-boilerplate/app/stores/CheckboxStore.js","./../actions.js":"/Users/christianalfoni/Documents/dev/flux-react-boilerplate/app/actions.js","./Checkboxes/ColoredCheckbox.js":"/Users/christianalfoni/Documents/dev/flux-react-boilerplate/app/components/Checkboxes/ColoredCheckbox.js","flux-react":"flux-react","react":"react"}],"/Users/christianalfoni/Documents/dev/flux-react-boilerplate/app/components/Checkboxes/ColoredCheckbox.js":[function(require,module,exports){
|
||
|
|
/** @jsx React.DOM */
|
||
|
|
var React = require('react');
|
||
|
|
|
||
|
|
var ColoredCheckbox = React.createClass({displayName: 'ColoredCheckbox',
|
||
|
|
changeColor: function () {
|
||
|
|
this.props.onChange(this.props.color);
|
||
|
|
},
|
||
|
|
render: function() {
|
||
|
|
var style = {
|
||
|
|
backgroundColor: this.props.color,
|
||
|
|
padding: '5px'
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
React.DOM.span({key: this.props.key, style: style},
|
||
|
|
React.DOM.input({type: "checkbox",
|
||
|
|
onChange: this.changeColor,
|
||
|
|
checked: this.props.checked})
|
||
|
|
)
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
module.exports = ColoredCheckbox;
|
||
|
|
|
||
|
|
},{"react":"react"}],"/Users/christianalfoni/Documents/dev/flux-react-boilerplate/app/components/NameThrower.js":[function(require,module,exports){
|
||
|
|
/** @jsx React.DOM */
|
||
|
|
var React = require('react');
|
||
|
|
var CheckboxStore = require('../stores/CheckboxStore.js');
|
||
|
|
|
||
|
|
var NameThrower = React.createClass({displayName: 'NameThrower',
|
||
|
|
getInitialState: function () {
|
||
|
|
return {
|
||
|
|
name: '',
|
||
|
|
colors: CheckboxStore.getColors()
|
||
|
|
};
|
||
|
|
},
|
||
|
|
componentWillMount: function () {
|
||
|
|
CheckboxStore.addChangeListener(this.update);
|
||
|
|
},
|
||
|
|
componentWillUnmount: function () {
|
||
|
|
CheckboxStore.removeChangeListener(this.update);
|
||
|
|
},
|
||
|
|
update: function () {
|
||
|
|
this.setState({
|
||
|
|
colors: CheckboxStore.getColors()
|
||
|
|
});
|
||
|
|
},
|
||
|
|
updateName: function (event) {
|
||
|
|
this.setState({
|
||
|
|
name: event.target.value
|
||
|
|
});
|
||
|
|
},
|
||
|
|
renderColors: function (color, index) {
|
||
|
|
var style = {color: color};
|
||
|
|
return React.DOM.div({key: index, style: style}, this.state.name)
|
||
|
|
},
|
||
|
|
render: function() {
|
||
|
|
var names = this.state.colors.map(this.renderColors);
|
||
|
|
return (
|
||
|
|
React.DOM.div(null,
|
||
|
|
React.DOM.div(null,
|
||
|
|
React.DOM.input({type: "text", value: this.state.name, onChange: this.updateName})
|
||
|
|
),
|
||
|
|
React.DOM.div(null,
|
||
|
|
names
|
||
|
|
)
|
||
|
|
)
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
module.exports = NameThrower;
|
||
|
|
|
||
|
|
},{"../stores/CheckboxStore.js":"/Users/christianalfoni/Documents/dev/flux-react-boilerplate/app/stores/CheckboxStore.js","react":"react"}],"/Users/christianalfoni/Documents/dev/flux-react-boilerplate/app/stores/CheckboxStore.js":[function(require,module,exports){
|
||
|
|
var flux = require('flux-react');
|
||
|
|
var actions = require('./../actions.js');
|
||
|
|
|
||
|
|
var CheckboxStore = flux.createStore({
|
||
|
|
getInitialState: function () {
|
||
|
|
return {
|
||
|
|
checkboxes: [{
|
||
|
|
color: 'red',
|
||
|
|
checked: false
|
||
|
|
}, {
|
||
|
|
color: 'blue',
|
||
|
|
checked: false
|
||
|
|
}, {
|
||
|
|
color: 'green',
|
||
|
|
checked: false
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
},
|
||
|
|
actions: [
|
||
|
|
actions.checkAll,
|
||
|
|
actions.uncheckAll,
|
||
|
|
actions.check
|
||
|
|
],
|
||
|
|
checkAll: function () {
|
||
|
|
this.state.checkboxes.forEach(function (checkbox) {
|
||
|
|
checkbox.checked = true;
|
||
|
|
});
|
||
|
|
this.emitChange();
|
||
|
|
},
|
||
|
|
uncheckAll: function () {
|
||
|
|
this.state.checkboxes.forEach(function (checkbox) {
|
||
|
|
checkbox.checked = false;
|
||
|
|
});
|
||
|
|
this.emitChange();
|
||
|
|
},
|
||
|
|
check: function (color) {
|
||
|
|
this.state.checkboxes.forEach(function (checkbox) {
|
||
|
|
if (checkbox.color === color) {
|
||
|
|
checkbox.checked = !checkbox.checked;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.emitChange();
|
||
|
|
},
|
||
|
|
exports: {
|
||
|
|
getCheckboxes: function () {
|
||
|
|
return this.checkboxes;
|
||
|
|
},
|
||
|
|
getColors: function () {
|
||
|
|
return this.checkboxes.map(function (checkbox) {
|
||
|
|
if (checkbox.checked) {
|
||
|
|
return checkbox.color;
|
||
|
|
} else {
|
||
|
|
return 'black';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
module.exports = CheckboxStore;
|
||
|
|
},{"./../actions.js":"/Users/christianalfoni/Documents/dev/flux-react-boilerplate/app/actions.js","flux-react":"flux-react"}]},{},["./app/main.js"])
|
||
|
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5vZGVfbW9kdWxlcy9icm93c2VyaWZ5L25vZGVfbW9kdWxlcy9icm93c2VyLXBhY2svX3ByZWx1ZGUuanMiLCIuL2FwcC9tYWluLmpzIiwiL1VzZXJzL2NocmlzdGlhbmFsZm9uaS9Eb2N1bWVudHMvZGV2L2ZsdXgtcmVhY3QtYm9pbGVycGxhdGUvYXBwL0FwcC5qcyIsIi9Vc2Vycy9jaHJpc3RpYW5hbGZvbmkvRG9jdW1lbnRzL2Rldi9mbHV4LXJlYWN0LWJvaWxlcnBsYXRlL2FwcC9hY3Rpb25zLmpzIiwiL1VzZXJzL2NocmlzdGlhbmFsZm9uaS9Eb2N1bWVudHMvZGV2L2ZsdXgtcmVhY3QtYm9pbGVycGxhdGUvYXBwL2NvbXBvbmVudHMvQ2hlY2tib3hlcy5qcyIsIi9Vc2Vycy9jaHJpc3RpYW5hbGZvbmkvRG9jdW1lbnRzL2Rldi9mbHV4LXJlYWN0LWJvaWxlcnBsYXRlL2FwcC9jb21wb25lbnRzL0NoZWNrYm94ZXMvQ29sb3JlZENoZWNrYm94LmpzIiwiL1VzZXJzL2NocmlzdGlhbmFsZm9uaS9Eb2N1bWVudHMvZGV2L2ZsdXgtcmVhY3QtYm9pbGVycGxhdGUvYXBwL2NvbXBvbmVudHMvTmFtZVRocm93ZXIuanMiLCIvVXNlcnMvY2hyaXN0aWFuYWxmb25pL0RvY3VtZW50cy9kZXYvZmx1eC1yZWFjdC1ib2lsZXJwbGF0ZS9hcHAvc3RvcmVzL0NoZWNrYm94U3RvcmUuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7QUNBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQ1BBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7O0FDdEJBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7O0FDSkE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQzNEQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTs7QUN4QkE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7O0FDaERBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSIsImZpbGUiOiJnZW5lcmF0ZWQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlc0NvbnRlbnQiOlsiKGZ1bmN0aW9uIGUodCxuLHIpe2Z1bmN0aW9uIHMobyx1KXtpZighbltvXSl7aWYoIXRbb10pe3ZhciBhPXR5cGVvZiByZXF1aXJlPT1cImZ1bmN0aW9uXCImJnJlcXVpcmU7aWYoIXUmJmEpcmV0dXJuIGEobywhMCk7aWYoaSlyZXR1cm4gaShvLCEwKTt2YXIgZj1uZXcgRXJyb3IoXCJDYW5ub3QgZmluZCBtb2R1bGUgJ1wiK28rXCInXCIpO3Rocm93IGYuY29kZT1cIk1PRFVMRV9OT1RfRk9VTkRcIixmfXZhciBsPW5bb109e2V4cG9ydHM6e319O3Rbb11bMF0uY2FsbChsLmV4cG9ydHMsZnVuY3Rpb24oZSl7dmFyIG49dFtvXVsxXVtlXTtyZXR1cm4gcyhuP246ZSl9LGwsbC5leHBvcnRzLGUsdCxuLHIpfXJldHVybiBuW29dLmV4cG9ydHN9dmFyIGk9dHlwZW9mIHJlcXVpcmU9PVwiZnVuY3Rpb25cIiYmcmVxdWlyZTtmb3IodmFyIG89MDtvPHIubGVuZ3RoO28rKylzKHJbb10pO3JldHVybiBzfSkiLCIvKiogQGpzeCBSZWFjdC5ET00gKi9cbnZhciBSZWFjdCA9IHJlcXVpcmUoJ3JlYWN0Jyk7XG52YXIgZmx1eCA9IHJlcXVpcmUoJ2ZsdXgtcmVhY3QnKTtcbnZhciBBcHAgPSByZXF1aXJlKCcuL0FwcC5qcycpO1xuXG5mbHV4LmRlYnVnKCk7XG5cblJlYWN0LnJlbmRlckNvbXBvbmVudChBcHAobnVsbCksIGRvY3VtZW50LmJvZHkpOyIsIi8qKiBAanN4IFJlYWN0LkRPTSAqL1xudmFyIFJlYWN0ID0gcmVxdWlyZSgncmVhY3QnKTtcbnZhciBDaGVja2JveGVzID0gcmVxdWlyZSgnLi9jb21wb25lbnRzL0NoZWNrYm94ZXMuanMnKTtcbnZhciBOYW1lVGhyb3dlciA9IHJlcXVpcmUoJy4vY29tcG9uZW50cy9OYW1lVGhyb3dlci5qcycpO1xuXHRcbnZhciBBcHAgPSBSZWFjdC5jcmVhdGVDbGFzcyh7ZGlzcGxheU5hbWU6ICdBcHAnLFxuXHRyZW5kZXI6IGZ1bmN0aW9uKCkge1xuXHRcdHJldHVybiAoXG5cdFx0XHRSZWFjdC5ET00uZGl2KG51bGwsIFxuXHRcdFx0XHRSZWFjdC5ET00uaDEobnVsbCwgXCJIZWxsbyB3b3JsZCFcIiksIFxuXHRcdFx0XHRSZWFjdC5ET00uZGl2KG51bGwsIFxuXHRcdFx0XHRcdENoZWNrYm94ZXMobnVsbClcblx0XHRcdFx0KSwgXG5cdFx0XHRcdFJlYWN0LkRPTS5kaXYobnVsbCwgXG5cdFx0XHRcdFx0TmFtZVRocm93ZXIobnVsbClcblx0XHRcdFx0KVxuXHRcdFx0KVxuXHRcdCk7XG5cdH1cbn0pO1xuX
|