Updated with latest version of react boilerplate
This commit is contained in:
Christian Alfoni
55
app/App.js
55
app/App.js
@@ -1,22 +1,55 @@
|
||||
/** @jsx React.DOM */
|
||||
var React = require('react');
|
||||
var Checkboxes = require('./components/Checkboxes.js');
|
||||
var NameThrower = require('./components/NameThrower.js');
|
||||
|
||||
var Store = require('./Store.js');
|
||||
var actions = require('./actions.js');
|
||||
|
||||
var App = React.createClass({
|
||||
getInitialState: function () {
|
||||
return {
|
||||
messages: Store.getMessages(),
|
||||
newMessage: ''
|
||||
};
|
||||
},
|
||||
componentWillMount: function () {
|
||||
Store.addChangeListener(this.changeState);
|
||||
},
|
||||
componentWillUnmount: function () {
|
||||
Store.removeChangeListener(this.changeState);
|
||||
},
|
||||
changeState: function () {
|
||||
this.setState({
|
||||
messages: Store.getMessages()
|
||||
});
|
||||
},
|
||||
addMessage: function (event) {
|
||||
event.preventDefault();
|
||||
var input = this.refs.newMessage.getDOMNode();
|
||||
actions.addMessage(input.value);
|
||||
this.setState({
|
||||
newMessage: ''
|
||||
});
|
||||
},
|
||||
updateNewMessage: function (event) {
|
||||
this.setState({
|
||||
newMessage: event.target.value
|
||||
});
|
||||
},
|
||||
renderMessages: function (message) {
|
||||
return (
|
||||
<div>{message}</div>
|
||||
);
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<div>
|
||||
<h1>Hello world!</h1>
|
||||
<div>
|
||||
<Checkboxes/>
|
||||
</div>
|
||||
<div>
|
||||
<NameThrower/>
|
||||
</div>
|
||||
</div>
|
||||
{this.state.messages.map(this.renderMessages)}
|
||||
<form onSubmit={this.addMessage}>
|
||||
<input ref="newMessage" type="text" value={this.state.newMessage} onChange={this.updateNewMessage}/>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
module.exports = App;
|
||||
|
||||
18
app/Store.js
Normal file
18
app/Store.js
Normal file
@@ -0,0 +1,18 @@
|
||||
var flux = require('flux-react');
|
||||
var actions = require('./actions.js');
|
||||
|
||||
module.exports = flux.createStore({
|
||||
messages: [],
|
||||
actions: [
|
||||
actions.addMessage
|
||||
],
|
||||
addMessage: function (message) {
|
||||
this.messages.push(message);
|
||||
this.emitChange();
|
||||
},
|
||||
exports: {
|
||||
getMessages: function () {
|
||||
return this.messages;
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -1,5 +1,5 @@
|
||||
var flux = require('flux-react');
|
||||
|
||||
module.exports = flux.createActions([
|
||||
'checkAll',
|
||||
'uncheckAll',
|
||||
'check'
|
||||
'addMessage'
|
||||
]);
|
||||
@@ -1,59 +0,0 @@
|
||||
/** @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({
|
||||
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 (
|
||||
<div>
|
||||
<div>
|
||||
{checkboxes}
|
||||
</div>
|
||||
<div>
|
||||
<button onClick={this.checkAll}>Check all</button>
|
||||
<button onClick={this.uncheckAll}>Uncheck all</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
module.exports = Checkboxes;
|
||||
@@ -1,24 +0,0 @@
|
||||
/** @jsx React.DOM */
|
||||
var React = require('react');
|
||||
|
||||
var ColoredCheckbox = React.createClass({
|
||||
changeColor: function () {
|
||||
this.props.onChange(this.props.color);
|
||||
},
|
||||
render: function() {
|
||||
var style = {
|
||||
backgroundColor: this.props.color,
|
||||
padding: '5px'
|
||||
};
|
||||
return (
|
||||
<span key={this.props.key} style={style}>
|
||||
<input type="checkbox"
|
||||
onChange={this.changeColor}
|
||||
checked={this.props.checked}/>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
module.exports = ColoredCheckbox;
|
||||
@@ -1,48 +0,0 @@
|
||||
/** @jsx React.DOM */
|
||||
var React = require('react');
|
||||
var CheckboxStore = require('../stores/CheckboxStore.js');
|
||||
|
||||
var NameThrower = React.createClass({
|
||||
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 <div key={index} style={style}>{this.state.name}</div>
|
||||
},
|
||||
render: function() {
|
||||
var names = this.state.colors.map(this.renderColors);
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<input type="text" value={this.state.name} onChange={this.updateName}/>
|
||||
</div>
|
||||
<div>
|
||||
{names}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
module.exports = NameThrower;
|
||||
@@ -1,8 +1,4 @@
|
||||
/** @jsx React.DOM */
|
||||
var React = require('react');
|
||||
var flux = require('flux-react');
|
||||
var App = require('./App.js');
|
||||
|
||||
flux.debug();
|
||||
|
||||
React.renderComponent(<App/>, document.body);
|
||||
React.render(<App/>, document.body);
|
||||
@@ -1,60 +0,0 @@
|
||||
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;
|
||||
Reference in New Issue
Block a user