alm
Version:
The best IDE for TypeScript
149 lines (148 loc) • 6.17 kB
JavaScript
"use strict";
/**
* Use this as a template for creating a new tab type
*/
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
/** imports */
var ui = require("../../ui");
var csx = require("../../base/csx");
var React = require("react");
var socketClient_1 = require("../../../socket/socketClient");
var commands = require("../../commands/commands");
var utils = require("../../../common/utils");
var styles = require("../../styles/styles");
var ReactDOM = require("react-dom");
var indicator_1 = require("../../components/indicator");
var typestyle_1 = require("typestyle");
var LiveDemoView = /** @class */ (function (_super) {
__extends(LiveDemoView, _super);
function LiveDemoView(props) {
var _this = _super.call(this, props) || this;
_this.output = '';
_this.filePath = '';
_this.handleKey = function (e) {
var unicode = e.charCode;
if (String.fromCharCode(unicode).toLowerCase() === "r") {
}
};
_this.filter = function () {
// TODO:
};
/**
* TAB implementation
*/
_this.resize = function () {
// Not needed
};
_this.focus = function () {
ReactDOM.findDOMNode(_this).focus();
};
_this.save = function () {
};
_this.close = function () {
};
_this.gotoPosition = function (position) {
};
_this.search = {
doSearch: function (options) {
},
hideSearch: function () {
},
findNext: function (options) {
},
findPrevious: function (options) {
},
replaceNext: function (_a) {
var newText = _a.newText;
},
replacePrevious: function (_a) {
var newText = _a.newText;
},
replaceAll: function (_a) {
var newText = _a.newText;
}
};
_this.state = {
status: 'running'
};
_this.filePath = utils.getFilePathFromUrl(props.url);
return _this;
}
LiveDemoView.prototype.componentDidMount = function () {
var _this = this;
/**
* Initial load + load on project change
*/
socketClient_1.server.enableLiveDemo({ filePath: this.filePath });
this.disposible.add(socketClient_1.cast.liveDemoData.on(function (data) {
if (data.type === 'start') {
_this.output = '';
_this.setState({ status: 'running' });
}
else if (data.type === 'data') {
_this.output = _this.output + data.data;
_this.forceUpdate();
}
else if (data.type === 'end') {
_this.setState({ status: !data.code ? 'done' : 'error' });
}
else {
var _ensure = data;
}
}));
this.disposible.add(commands.ensureLiveDemoTab.on(function (_a) {
var filePath = _a.filePath;
_this.filePath = filePath;
socketClient_1.server.enableLiveDemo({ filePath: filePath });
}));
// Listen to tab events
var api = this.props.api;
this.disposible.add(api.resize.on(this.resize));
this.disposible.add(api.focus.on(this.focus));
this.disposible.add(api.save.on(this.save));
this.disposible.add(api.close.on(this.close));
this.disposible.add(api.gotoPosition.on(this.gotoPosition));
// Listen to search tab events
this.disposible.add(api.search.doSearch.on(this.search.doSearch));
this.disposible.add(api.search.hideSearch.on(this.search.hideSearch));
this.disposible.add(api.search.findNext.on(this.search.findNext));
this.disposible.add(api.search.findPrevious.on(this.search.findPrevious));
this.disposible.add(api.search.replaceNext.on(this.search.replaceNext));
this.disposible.add(api.search.replacePrevious.on(this.search.replacePrevious));
this.disposible.add(api.search.replaceAll.on(this.search.replaceAll));
};
LiveDemoView.prototype.render = function () {
var color = this.state.status === 'running'
? '#0f0'
: this.state.status === 'done'
? '#999'
/** Error */
: 'red';
return (React.createElement("div", { tabIndex: 0, style: csx.extend(csx.vertical, csx.flex, csx.newLayerParent, styles.someChildWillScroll, { color: styles.textColor }), onKeyPress: this.handleKey, onFocus: this.props.onFocused },
React.createElement("div", { style: { overflow: 'hidden', display: 'flex', padding: '10px', flexDirection: 'column', height: '100%' } },
React.createElement("div", { className: typestyle_1.style({ height: '30px' }, csx.horizontal, csx.content, csx.center, csx.Box.padding(5)) },
React.createElement("div", null,
React.createElement(indicator_1.Indicator, { color: color })),
React.createElement("div", { style: { color: '#999', marginLeft: '10px' } }, this.state.status)),
React.createElement("pre", { style: {
overflow: 'auto',
display: 'flex',
flex: '1',
margin: '0px',
padding: '5px',
border: '1px solid #333',
} }, this.output))));
};
return LiveDemoView;
}(ui.BaseComponent));
exports.LiveDemoView = LiveDemoView;