alm
Version:
The best IDE for TypeScript
142 lines (141 loc) • 6.02 kB
JavaScript
;
/**
* 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 socketClient_1 = require("../../../socket/socketClient");
var utils = require("../../../common/utils");
var styles = require("../../styles/styles");
var ReactDOM = require("react-dom");
var React = require("react");
var types = require("../../../common/types");
var gls = require("../../base/gls");
var typestyle_1 = require("typestyle");
var buttons_1 = require("../../components/buttons");
var indicator_1 = require("../../components/indicator");
var LiveDemoReactView = /** @class */ (function (_super) {
__extends(LiveDemoReactView, _super);
function LiveDemoReactView(props) {
var _this = _super.call(this, props) || this;
_this.filePath = '';
_this.reload = function () {
// console.log("reload"); // DEBUG
if (_this.iframe)
_this.iframe.src = _this.getIframeUrl();
};
_this.getIframeUrl = function () {
return window.location.protocol + "//" + window.location.hostname + ":" + window.location.port + types.liveDemoMountUrl + "/";
};
_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: {
type: 'bundling'
}
};
_this.filePath = utils.getFilePathFromUrl(props.url);
return _this;
}
LiveDemoReactView.prototype.componentDidMount = function () {
var _this = this;
this.disposible.add(socketClient_1.cast.liveDemoBuildComplete.on(function (status) {
_this.setState({ status: status });
if (status.type === 'success') {
_this.reload();
}
}));
socketClient_1.server.enableLiveDemoReact({ filePath: this.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));
};
LiveDemoReactView.prototype.render = function () {
var _this = this;
var type = this.state.status.type;
var color = type === 'bundling'
? 'yellow'
: type === 'success'
? '#0f0'
: '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", { 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: '5px' } }, this.state.status.type),
React.createElement(gls.Flex, null),
React.createElement(buttons_1.ButtonBlack, { text: "reload", onClick: this.reload })),
React.createElement("iframe", { ref: function (ref) { return _this.iframe = ref; }, src: this.getIframeUrl(), style: {
height: 'calc(100% - 30px)',
width: '100%',
border: 'none',
backgroundColor: 'white',
} })));
};
return LiveDemoReactView;
}(ui.BaseComponent));
exports.LiveDemoReactView = LiveDemoReactView;