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

changed structure - now no longer using flux-react but flux and react separately

Browse Source
This commit is contained in:
Senad Uka
2014-12-21 09:05:40 +01:00
parent 8106a0f375
commit 7a7b14fba3
15 changed files with 91 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

2
README.md
View File

@@ -1,4 +1,4 @@
## CsvEditor based on FLUX React JS Boilerplate
## CsvEditor based on Flux-Chat example and some parts of FLUX React JS Boilerplate
Read more about FLUX over at [Facebook Flux Website](http://facebook.github.io/flux/)
Read more about RejactJS on [React JS Website](http://facebook.github.io/react/)

BIN
app/.DS_Store vendored
View File

Binary file not shown.

55
app/App.js
View File

@@ -1,55 +0,0 @@
/** @jsx React.DOM */
var React = require('react');
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>
{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
View File

@@ -1,18 +0,0 @@
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;
}
}
});

5
app/actions.js
View File

@@ -1,5 +0,0 @@
var flux = require('flux-react');
module.exports = flux.createActions([
'addMessage'
]);

BIN
app/actions/.DS_Store vendored Normal file
View File

Binary file not shown.

1
app/assets/index.html
View File

@@ -5,7 +5,6 @@
<link rel="stylesheet" href="main.css"/>
</head>
<body>
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
<script src="vendors.js"></script>
<script src="main.js"></script>
</body>

12
app/components/ChooseFile.react.js Normal file
View File

@@ -0,0 +1,12 @@
var React = require('react');
var ChooseFile = React.createClass({
render: function() {
return (
<button className="red-button">ChooseFile</button>
);
}
});
module.exports = ChooseFile;

17
app/components/SpreadSheet.react.js Normal file
View File

@@ -0,0 +1,17 @@
/** @jsx React.DOM */
var React = require('react');
var ChooseFile = require('./ChooseFile.react');
var SpreadSheet = React.createClass({
render: function() {
return (
<div className="spreadsheet">
<ChooseFile />
</div>
);
}
});
module.exports = SpreadSheet;

14
app/constants/CsvEditorConstants.js Normal file
View File

@@ -0,0 +1,14 @@
var keyMirror = require('keymirror');
module.exports = {
ActionTypes: keyMirror({
CREATE_MESSAGE: null
}),
PayloadSources: keyMirror({
BACKEND_ACTION: null,
VIEW_ACTION: null
})
};

32
app/dispatcher/CsvEditorDispatcher.js Normal file
View File

@@ -0,0 +1,32 @@
var Constants = require('../constants/CsvEditorConstants');
var CsvEditorDispatcher = assign(new Dispatcher(), {
/**
* @param {object} action The details of the action, including the action's
* type and additional data coming from the server.
*/
handleBackendAction: function(action) {
var payload = {
source: PayloadSources.BACKEND_ACTION,
action: action
};
this.dispatch(payload);
},
/**
* @param {object} action The details of the action, including the action's
* type and additional data coming from the view.
*/
handleViewAction: function(action) {
var payload = {
source: PayloadSources.VIEW_ACTION,
action: action
};
this.dispatch(payload);
}
});
module.exports = CsvEditorDispatcher;

4
app/main.js
View File

@@ -1,4 +1,4 @@
/** @jsx React.DOM */
var React = require('react');
var App = require('./App.js');
React.render(<App/>, document.body);
var SpreadSheet = require('./components/SpreadSheet.react');
React.render(<SpreadSheet/>, document.body);

4
package.json
View File

@@ -26,7 +26,9 @@
"gulp-connect": "~2.2.0"
},
"dependencies": {
"flux-react": "^2.6.0",
"flux": "^2.0.0",
"keymirror": "~0.1.0",
"object-assign": "^1.0.0",
"react": "^0.12.0"
}
}

9
styles/main.css
View File

@@ -1,3 +1,12 @@
body {
background-color: #EAEAEA;
}
.red-button {
background-color: white;
font-size: 2em;
font-color: red;
border-color: red;
border: 1px;
}