diff --git a/src/js/app/index.js b/src/js/app/index.js index ff1ba727..cb4bd5f1 100644 --- a/src/js/app/index.js +++ b/src/js/app/index.js @@ -1,10 +1,12 @@ var _ = require('underscore'); var Backbone = require('backbone'); +var React = require('react'); var util = require('../util'); var intl = require('../intl'); var LocaleStore = require('../stores/LocaleStore'); var LocaleActions = require('../actions/LocaleActions'); +var Dialog = require('../react_views/TestView.jsx').Dialog; /** * Globals @@ -214,6 +216,12 @@ var initDemo = function(sandbox) { "levels" ]; } + if (params.hasOwnProperty('STARTREACT')) { + React.render( + React.createElement(Dialog, {}), + document.getElementById(params['STARTREACT']) + ); + } if (commands) { sandbox.mainVis.customEvents.on('gitEngineReady', function() { eventBaton.trigger('commandSubmitted', commands.join('')); diff --git a/src/js/react_views/TestView.jsx b/src/js/react_views/TestView.jsx index 8a230ed0..89593fc0 100644 --- a/src/js/react_views/TestView.jsx +++ b/src/js/react_views/TestView.jsx @@ -1,11 +1,71 @@ var React = require('react'); -var MyComponent = React.createClass({ +var reactUtil = require('../util/reactUtil'); +var keyMirror = require('react/lib/keyMirror'); + +var STATUSES = keyMirror({ + IN_QUEUE: null, + PROCESSING: null, + FINISHED: null +}); + +var STATUS_TO_CLASS = {}; +STATUS_TO_CLASS[STATUSES.IN_QUEUE] = 'inqueue'; +STATUS_TO_CLASS[STATUSES.PROCESSING] = 'processing'; +STATUS_TO_CLASS[STATUSES.FINISHED] = 'finished'; + +var CommandView = React.createClass({ + + getInitialState: function() { + return { + status: STATUSES.IN_QUEUE, + rawStr: 'git commit', + resultType: '', + result: '', + formattedWarnings: '' + }; + }, + render: function() { + var commandClass = reactUtil.joinClasses([ + STATUS_TO_CLASS[this.state.status], + 'commandLine', + 'transitionBackground' + ]); + + // TODO add 0px 5px margin to icons + return ( -
Howdy
++ {'$'} + {' ' + this.state.rawStr} + + + + + + +
+ +