' + i + this.get('warnings').join('
' + i) + '
'; - }, - parseOrCatch: function() { this.expandShortcuts(this.get('rawStr')); try { @@ -253,7 +246,7 @@ var Command = Backbone.Model.extend({ }, formatError: function() { - this.set('result', this.get('error').toResult()); + this.set('result', this.get('error').getMsg()); }, expandShortcuts: function(str) { diff --git a/src/js/react_views/CommandView.jsx b/src/js/react_views/CommandView.jsx new file mode 100644 index 00000000..6b17f516 --- /dev/null +++ b/src/js/react_views/CommandView.jsx @@ -0,0 +1,114 @@ +var React = require('react'); + +var reactUtil = require('../util/reactUtil'); +var keyMirror = require('react/lib/keyMirror'); + +var STATUSES = keyMirror({ + inqueue: null, + processing: null, + finished: null +}); + +var CommandView = React.createClass({ + + propTypes: { + // the backbone command model + command: React.PropTypes.object.isRequired + }, + + componentDidMount: function() { + this.props.command.on('change', this.updateStateFromModel, this); + this.updateStateFromModel(); + }, + + componentWillUnmount: function() { + this.props.command.off('change', this.updateStateFromModel, this); + }, + + updateStateFromModel: function() { + var commandJSON = this.props.command.toJSON(); + this.setState({ + status: commandJSON.status, + rawStr: commandJSON.rawStr, + warnings: commandJSON.warnings, + result: commandJSON.result + }); + }, + + getInitialState: function() { + return { + status: STATUSES.inqueue, + rawStr: 'git commit', + warnings: [], + result: '' + }; + }, + + render: function() { + var commandClass = reactUtil.joinClasses([ + this.state.status, + 'commandLine', + 'transitionBackground' + ]); + + return ( ++ {'$'} + {' ' + this.state.rawStr} + + + + + + +
+ {this.renderResult()} ++ + {warnings[i]} +
+ ); + } + return result; + } +}); + +module.exports = CommandView; diff --git a/src/js/react_views/TestView.jsx b/src/js/react_views/TestView.jsx deleted file mode 100644 index 89593fc0..00000000 --- a/src/js/react_views/TestView.jsx +++ /dev/null @@ -1,71 +0,0 @@ -var React = require('react'); - -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 ( -- {'$'} - {' ' + this.state.rawStr} - - - - - - -
- -' + this.get('msg').replace(/\n/g, '
') + '
'; } }); diff --git a/src/js/views/commandViews.js b/src/js/views/commandViews.js index 494678e0..8e867df7 100644 --- a/src/js/views/commandViews.js +++ b/src/js/views/commandViews.js @@ -1,10 +1,12 @@ var _ = require('underscore'); var Backbone = require('backbone'); +var React = require('react'); var Main = require('../app'); var Command = require('../models/commandModel').Command; var CommandLineStore = require('../stores/CommandLineStore'); var CommandLineActions = require('../actions/CommandLineActions'); +var CommandView = require('../react_views/CommandView.jsx'); var Errors = require('../util/errors'); var Warning = Errors.Warning; @@ -203,75 +205,6 @@ var CommandPromptView = Backbone.View.extend({ } }); -// This is the view for all commands -- it will represent -// their status (inqueue, processing, finished, error), -// their value ("git commit --amend"), -// and the result (either errors or warnings or whatever) -var CommandView = Backbone.View.extend({ - tagName: 'div', - model: Command, - template: _.template($('#command-template').html()), - - events: { - 'click': 'clicked' - }, - - clicked: function(e) { - }, - - initialize: function() { - this.model.bind('change', this.wasChanged, this); - this.model.bind('destroy', this.remove, this); - }, - - wasChanged: function(model, changeEvent) { - // for changes that are just comestic, we actually only want to toggle classes - // with jquery rather than brutally delete a html. doing so allows us - // to nicely fade things - var changes = changeEvent.changes || {}; - var changeKeys = Object.keys(changes); - if (_.difference(changeKeys, ['status']).length === 0) { - this.updateStatus(); - } else { - this.render(); - } - }, - - updateStatus: function() { - var statuses = ['inqueue', 'processing', 'finished']; - var toggleMap = {}; - _.each(statuses, function(status) { - toggleMap[status] = false; - }); - toggleMap[this.model.get('status')] = true; - - var query = this.$('p.commandLine'); - - _.each(toggleMap, function(value, key) { - query.toggleClass(key, value); - }); - }, - - render: function() { - var json = _.extend( - { - resultType: '', - result: '', - formattedWarnings: this.model.getFormattedWarnings() - }, - this.model.toJSON() - ); - - this.$el.html(this.template(json)); - return this; - }, - - remove: function() { - $(this.el).hide(); - } -}); - - var CommandLineHistoryView = Backbone.View.extend({ initialize: function(options) { this.collection = options.collection; @@ -331,10 +264,13 @@ var CommandLineHistoryView = Backbone.View.extend({ }, addOne: function(command) { - var view = new CommandView({ - model: command - }); - this.$('#commandDisplay').append(view.render().el); + var div = document.createElement('div'); + div.id = command.cid; + React.render( + React.createElement(CommandView, {command: command}), + div + ); + this.$('#commandDisplay').append(div); this.scrollDown(); }, diff --git a/src/template.index.html b/src/template.index.html index 92351dbc..71c8cc84 100644 --- a/src/template.index.html +++ b/src/template.index.html @@ -101,27 +101,6 @@ - -