From c2224430ab16a6b51fec115b772c65ea3aaf58cf Mon Sep 17 00:00:00 2001 From: Senad Uka Date: Mon, 22 Dec 2014 10:58:42 +0100 Subject: [PATCH] started creating spreadsheet component --- .gitignore | 1 + app/actions/FIleActionsCreator.js | 17 ++++++++ app/components/Application.react.js | 24 +++++++++++ app/components/ChooseFile.react.js | 21 ++++++--- app/components/SpreadSheet.react.js | 38 ++++++++++++---- app/constants/CsvEditorConstants.js | 6 ++- app/dispatcher/CsvEditorDispatcher.js | 3 ++ app/main.js | 4 +- app/stores/LocalStore.js | 62 +++++++++++++++++++++++++++ 9 files changed, 160 insertions(+), 16 deletions(-) create mode 100644 app/actions/FIleActionsCreator.js create mode 100644 app/components/Application.react.js create mode 100644 app/stores/LocalStore.js diff --git a/.gitignore b/.gitignore index dd87e2d..d31e1cc 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ node_modules build +.idea diff --git a/app/actions/FIleActionsCreator.js b/app/actions/FIleActionsCreator.js new file mode 100644 index 0000000..921c5e0 --- /dev/null +++ b/app/actions/FIleActionsCreator.js @@ -0,0 +1,17 @@ +/** + * Created by senadu on 12/22/14. + */ + +var CsvEditorDispatcher = require('../dispatcher/CsvEditorDispatcher'); +var CsvEditorConstants = require('../constants/CsvEditorConstants'); + +var ActionTypes = CsvEditorConstants.ActionTypes; + +module.exports = { + chooseFile: function(fileInput) { + CsvEditorDispatcher.handleViewAction({ + type: ActionTypes.CHOOSE_FILE, + target: fileInput + }) + } +}; \ No newline at end of file diff --git a/app/components/Application.react.js b/app/components/Application.react.js new file mode 100644 index 0000000..b88c999 --- /dev/null +++ b/app/components/Application.react.js @@ -0,0 +1,24 @@ +/** @jsx React.DOM */ + +var React = require('react'); +var ChooseFile = require('./ChooseFile.react'); +var SpreadSheet = require('./SpreadSheet.react'); + +var Application = React.createClass({ + + render: function () { + return ( +
+
+ +
+
+ +
+
+ ); + } + +}); + +module.exports = Application; diff --git a/app/components/ChooseFile.react.js b/app/components/ChooseFile.react.js index 87403a0..5cacbac 100644 --- a/app/components/ChooseFile.react.js +++ b/app/components/ChooseFile.react.js @@ -1,12 +1,23 @@ +/** @jsx React.DOM */ + var React = require('react'); var ChooseFile = React.createClass({ - render: function() { - return ( - - ); - } + getInitialState: function () { + return {fileName: ""}; + }, + + render: function () { + if (this.state.fileName === "") { + return (); + } else + return (
Editing file.
); + }, + + _onChange: function(e) { + this.setState({fileName: e.target.value}) + } }); module.exports = ChooseFile; \ No newline at end of file diff --git a/app/components/SpreadSheet.react.js b/app/components/SpreadSheet.react.js index caba7ff..4b94c0b 100644 --- a/app/components/SpreadSheet.react.js +++ b/app/components/SpreadSheet.react.js @@ -1,16 +1,38 @@ /** @jsx React.DOM */ + var React = require('react'); -var ChooseFile = require('./ChooseFile.react'); +var LocalStore = require('../stores/LocalStore'); + + +var getStateFromStore = function () { + return { + columns: LocalStore.getColumns(), + data: LocalStore.getDataForColumns() + } +}; + var SpreadSheet = React.createClass({ - render: function() { - return ( -
- -
- ); - } + getInitialState: function() { + return getStateFromStore(); + }, + + render: function () { + + var columns = this.state.columns.map(function (column) { + return({column}); + }); + + + return ( + + + {columns} + +
+ ); + } }); diff --git a/app/constants/CsvEditorConstants.js b/app/constants/CsvEditorConstants.js index 6acea8d..6854776 100644 --- a/app/constants/CsvEditorConstants.js +++ b/app/constants/CsvEditorConstants.js @@ -3,12 +3,16 @@ var keyMirror = require('keymirror'); module.exports = { ActionTypes: keyMirror({ - CREATE_MESSAGE: null + CHOOSE_FILE: null }), PayloadSources: keyMirror({ BACKEND_ACTION: null, VIEW_ACTION: null + }), + + EventTypes: keyMirror({ + FILE_CHOSEN: null }) }; diff --git a/app/dispatcher/CsvEditorDispatcher.js b/app/dispatcher/CsvEditorDispatcher.js index 458f849..a1defd4 100644 --- a/app/dispatcher/CsvEditorDispatcher.js +++ b/app/dispatcher/CsvEditorDispatcher.js @@ -1,5 +1,8 @@ var Constants = require('../constants/CsvEditorConstants'); +var Dispatcher = require('flux').Dispatcher; +var assign = require('object-assign'); + var CsvEditorDispatcher = assign(new Dispatcher(), { diff --git a/app/main.js b/app/main.js index 6ceaaea..8bff2c8 100644 --- a/app/main.js +++ b/app/main.js @@ -1,4 +1,4 @@ /** @jsx React.DOM */ var React = require('react'); -var SpreadSheet = require('./components/SpreadSheet.react'); -React.render(, document.body); +var Application = require('./components/Application.react'); +React.render(, document.body); diff --git a/app/stores/LocalStore.js b/app/stores/LocalStore.js new file mode 100644 index 0000000..95d3ab5 --- /dev/null +++ b/app/stores/LocalStore.js @@ -0,0 +1,62 @@ +/** + * Created by senadu on 12/22/14. + */ + +var CsvEditorDispatcher = require('../dispatcher/CsvEditorDispatcher'); +var EventEmitter = require('events').EventEmitter; +var CsvEditorConstants = require('../constants/CsvEditorConstants'); +var assign = require('object-assign'); + + +var ActionTypes = CsvEditorConstants.ActionTypes; +var EventTypes = CsvEditorConstants.EventTypes; + + +var LocalStore = assign({}, EventEmitter.prototype, { + + emitFileLoadedEvent: function() { + this.emit(EventTypes.FILE_CHOSEN); + }, + + /** + * @param {function} callback + */ + addFileLoadedListener: function(callback) { + this.on(EventTypes.FILE_CHOSEN, callback); + }, + + removeFileLoadedListener: function(callback) { + this.removeListener(EventTypes.FILE_CHOSEN, callback); + }, + + + getColumns: function() { + return ["First", "Second", "Third"]; + }, + + getDataForColumns: function() { + return { + "First": [1,2,3,4,5], + "Second": [1.1,2.2,3.3,4.4,5.5], + "Third": ["Hamo", "Suljo","Aha", "Maha", "Vaha"] + } + } + +}); + + +LocalStore.dispatchToken = CsvEditorDispatcher.register(function(payload) { + var action = payload.action; + + switch(action.type) { + case ActionTypes.FILE_CHOSEN: + LocalStore.emitFileLoadedEvent(); + break; + default: + // do nothing + } +}); + + +module.exports = LocalStore; +