without react terminal updating

This commit is contained in:
Vladimir Polyakov 2015-11-29 23:29:39 +03:00
parent e9a1be2e6d
commit 45aac65a3c
2 changed files with 38 additions and 7 deletions

View File

@ -1,6 +1,3 @@
.terminal
pre.terminal_code(ref="code")
each row, index in this.state.data
Row(row=row, key=index)
.terminal(ref="code")
pre.terminal_code
.terminal_footer(style={height: '30px'})

View File

@ -24,14 +24,20 @@ define([
mixins: [Reflux.ListenerMixin],
shouldScrollBottom: true,
ignoreScrollEvent: false,
linesCount: 0,
componentDidMount: function() {
console.log('did mount');
this.listenTo(terminalStore, this.updateItems);
var node = this.refs.code.getDOMNode();
this.initialScrollPosition = node.getBoundingClientRect().top;
},
prepareRow: function(row) {
return ansiUp.ansi_to_html(row.replace('\r', ''));
},
prepareOutput: function(output) {
var self = this;
return output.map(function(row) {
return ansiUp.ansi_to_html(row.replace('\r', ''));
return self.prepareRow(row);
});
},
componentWillUpdate: function() {
@ -47,12 +53,40 @@ define([
body.scrollTop = this.initialScrollPosition + node.offsetHeight;
}
},
makeCodeLineContent: function(line) {
return '<span class="code-line_counter">' + '</span>' +
'<div class="code-line_body">' + this.prepareRow(line) + '</div>';
},
makeCodeLine: function(line, index) {
return '<div class="code-line" data-number="' + index + '">' +
this.makeCodeLineContent(line) + '</div>';
},
updateItems: function(build) {
// listen just our console update
if (build.buildId === this.props.build) {
this.setState({data: this.prepareOutput(build.data)});
var currentLinesCount = build.data.length,
terminal = $('.terminal_code'),
rows = terminal.children();
if (rows.length) {
// replace our last node
var index = this.linesCount - 1;
$(rows[index]).html(this.makeCodeLineContent(build.data[index]));
}
var self = this;
terminal.append(
_(build.data.slice(this.linesCount)).map(function(line, index) {
return self.makeCodeLine(line, self.linesCount + index);
})
);
this.linesCount = currentLinesCount;
}
},
shouldComponentUpdate: function() {
return false;
},
render: template,
getInitialState: function() {
return {