senaduka/old-csveditor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New boilerplate

Browse Source
This commit is contained in:
Christian Alfoni
2014-10-27 15:28:16 +01:00
parent 54bbfd3ce2
commit 633e48461c
29 changed files with 2609 additions and 29544 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/.DS_Store vendored
View File

Binary file not shown.

10
app/App.js
View File

@@ -1,5 +1,5 @@
/** @jsx React.DOM */
var React = require('flux-react');
var React = require('react');
var Checkboxes = require('./components/Checkboxes.js');
var NameThrower = require('./components/NameThrower.js');
@@ -8,8 +8,12 @@ var App = React.createClass({
return (
<div>
<h1>Hello world!</h1>
<Checkboxes/>
<NameThrower/>
<div>
<Checkboxes/>
</div>
<div>
<NameThrower/>
</div>
</div>
);
}

3
app/Constants.js
View File

@@ -1,3 +0,0 @@
module.exports = {
EVENT_CHANGE: 'change'
};

5
app/actions.js Normal file
View File

@@ -0,0 +1,5 @@
module.exports = flux.createActions([
'checkAll',
'uncheckAll',
'check'
]);

5
app/actions/CheckboxActions.js
View File

@@ -1,5 +0,0 @@
module.exports = {
'CHECK_ALL': 'check all',
'UNCHECK_ALL': 'uncheck all',
'CHECK': 'check'
};

48
app/components/Checkboxes.js
View File

@@ -1,8 +1,8 @@
/** @jsx React.DOM */
var React = require('flux-react');
var Constants = require('../Constants.js');
var React = require('react');
var flux = require('flux-react');
var actions = require('./../actions.js');
var ColoredCheckbox = require('./Checkboxes/ColoredCheckbox.js');
var CheckboxActions = require('../actions/CheckboxActions.js');
var CheckboxStore = require('../stores/CheckboxStore.js');
var Checkboxes = React.createClass({
@@ -12,36 +12,44 @@ var Checkboxes = React.createClass({
checkboxes: CheckboxStore.getCheckboxes()
};
},
storesDidUpdate: function () {
componentWillMount: function () {
CheckboxStore.addChangeListener(this.update);
},
componentWillUnmount: function () {
CheckboxStore.removeChangeListener(this.update);
},
update: function () {
this.setState({
checkboxes: CheckboxStore.getCheckboxes()
});
},
check: function (color) {
React.dispatch({
type: CheckboxActions.CHECK,
color: color
})
actions.check(color);
},
checkAll: function () {
React.dispatch({
type: CheckboxActions.CHECK_ALL
});
actions.checkAll();
},
uncheckAll: function () {
React.dispatch({
type: CheckboxActions.UNCHECK_ALL
});
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(function (checkbox, index) {
return <ColoredCheckbox key={index} color={checkbox.color} checked={checkbox.checked} onChange={this.check}/>
}, this);
var checkboxes = this.state.checkboxes.map(this.renderCheckbox);
return (
<div>
{checkboxes}
<button onClick={this.checkAll}>Check all</button>
<button onClick={this.uncheckAll}>Uncheck all</button>
<div>
{checkboxes}
</div>
<div>
<button onClick={this.checkAll}>Check all</button>
<button onClick={this.uncheckAll}>Uncheck all</button>
</div>
</div>
);
}

7
app/components/Checkboxes/ColoredCheckbox.js
View File

@@ -1,7 +1,10 @@
/** @jsx React.DOM */
var React = require('flux-react');
var React = require('react');
var ColoredCheckbox = React.createClass({
changeColor: function () {
this.props.onChange(this.props.color);
},
render: function() {
var style = {
backgroundColor: this.props.color,
@@ -10,7 +13,7 @@ var ColoredCheckbox = React.createClass({
return (
<span key={this.props.key} style={style}>
<input type="checkbox"
onChange={this.props.onChange.bind(null, this.props.color)}
onChange={this.changeColor}
checked={this.props.checked}/>
</span>
);

31
app/components/NameThrower.js
View File

@@ -1,35 +1,44 @@
/** @jsx React.DOM */
var React = require('flux-react');
var Constants = require('../Constants.js');
var React = require('react');
var CheckboxStore = require('../stores/CheckboxStore.js');
var NameThrower = React.createClass({
stores: [CheckboxStore],
getInitialState: function () {
return {
name: '',
colors: CheckboxStore.getColors()
};
},
storesDidUpdate: function () {
componentWillMount: function () {
CheckboxStore.addChangeListener(this.update);
},
componentWillUnmount: function () {
CheckboxStore.removeChangeListener(this.update);
},
update: function () {
this.setState({
colors: CheckboxStore.getColors()
});
},
updateName: function () {
updateName: function (event) {
this.setState({
name: this.refs.input.getDOMNode().value
name: event.target.value
});
},
render: function() {
var names = this.state.colors.map(function (color, index) {
renderColors: function (color, index) {
var style = {color: color};
return <div key={index} style={style}>{this.state.name}</div>
}, this);
},
render: function() {
var names = this.state.colors.map(this.renderColors);
return (
<div>
<input ref="input" type="text" value={this.state.name} onChange={this.updateName}/>
{names}
<div>
<input type="text" value={this.state.name} onChange={this.updateName}/>
</div>
<div>
{names}
</div>
</div>
);
}

8
app/main.js
View File

@@ -1,6 +1,8 @@
/** @jsx React.DOM */
var React = require('flux-react');
React.debug();
var React = require('react');
var flux = require('flux-react');
var App = require('./App.js');
flux.debug();
React.renderComponent(<App/>, document.body);

99
app/stores/CheckboxStore.js
View File

@@ -1,63 +1,60 @@
var React = require('flux-react');
var merge = require('react/lib/merge');
var CheckboxActions = require('../actions/CheckboxActions.js');
var mergeInto = require('react/lib/mergeInto');
var Constants = require('../Constants.js');
var flux = require('flux-react');
var actions = require('./../actions.js');
var checkboxes = [{
color: 'red',
checked: false
}, {
color: 'blue',
checked: false
}, {
color: 'green',
checked: false
}];
var CheckboxStore = React.createStore({
getCheckboxes: function () {
return checkboxes.map(function (checkbox) {
var checkboxCopy = {};
mergeInto(checkboxCopy, checkbox); // Create a copy to make it impossible to mutate store
return checkboxCopy;
});
var CheckboxStore = flux.createStore({
getInitialState: function () {
return {
checkboxes: [{
color: 'red',
checked: false
}, {
color: 'blue',
checked: false
}, {
color: 'green',
checked: false
}]
};
},
getColors: function () {
return checkboxes.map(function (checkbox) {
if (checkbox.checked) {
return checkbox.color;
} else {
return 'black';
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();
},
dispatch: function (payload) {
switch (payload.type) {
case CheckboxActions.CHECK_ALL:
checkboxes.forEach(function (checkbox) {
checkbox.checked = true;
});
break;
case CheckboxActions.UNCHECK_ALL:
checkboxes.forEach(function (checkbox) {
checkbox.checked = false;
});
break;
case CheckboxActions.CHECK:
checkboxes.forEach(function (checkbox) {
if (checkbox.color === payload.color) {
checkbox.checked = !checkbox.checked;
exports: {
getCheckboxes: function () {
return this.checkboxes;
},
getColors: function () {
return this.checkboxes.map(function (checkbox) {
if (checkbox.checked) {
return checkbox.color;
} else {
return 'black';
}
});
break;
}
this.flush();
}
});
module.exports = CheckboxStore;