alm
Version:
The best IDE for TypeScript
145 lines (144 loc) • 5.96 kB
JavaScript
;
/**
* This tab is really a general purpose `filePath` tab
* Currently supports
* - code
* - images
*/
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 React = require("react");
var socketClient_1 = require("../../../socket/socketClient");
var utils = require("../../../common/utils");
var state_1 = require("../../state/state");
var react_redux_1 = require("react-redux");
var codeEditor_1 = require("../../monaco/editor/codeEditor");
var imageViewer_1 = require("../../imageViewer/imageViewer");
/**
* This is a thin wrapper around `CodeEditor` with the following key motivations
* - All server code must go through here
* - All tab type stuff must go through here
*/
var Code = /** @class */ (function (_super) {
__extends(Code, _super);
function Code(props) {
var _this = _super.call(this, props) || this;
_this.saved = true;
_this.resize = function () {
_this.refs.editor.resize();
};
_this.focus = function () {
_this.refs.editor.focus();
};
_this.save = function () {
socketClient_1.server.saveFile({ filePath: _this.filePath }).then(function () {
_this.saved = true;
_this.props.onSavedChanged(true);
});
};
_this.close = function () {
socketClient_1.server.closeFile({ filePath: _this.filePath });
};
_this.gotoPosition = function (position) {
_this.refs.editor.gotoPosition(position);
};
_this.willBlur = function () {
_this.refs.editor.willBlur();
};
_this.search = {
doSearch: function (options) {
_this.refs.editor.search(options);
},
hideSearch: function () {
_this.refs.editor.hideSearch();
},
findNext: function (options) {
_this.refs.editor.findNext(options);
},
findPrevious: function (options) {
_this.refs.editor.findPrevious(options);
},
replaceNext: function (_a) {
var newText = _a.newText;
_this.refs.editor.replaceNext(newText);
},
replacePrevious: function (_a) {
var newText = _a.newText;
_this.refs.editor.replacePrevious(newText);
},
replaceAll: function (_a) {
var newText = _a.newText;
_this.refs.editor.replaceAll(newText);
}
};
_this.filePath = utils.getFilePathFromUrl(props.url);
_this.isImage = utils.isImage(_this.filePath);
_this.state = {};
return _this;
}
Code.prototype.componentDidMount = function () {
var _this = this;
socketClient_1.server.getFileStatus({ filePath: this.filePath }).then(function (res) {
_this.saved = res.saved;
_this.props.onSavedChanged(res.saved);
});
this.disposible.add(socketClient_1.cast.didStatusChange.on(function (res) {
if (res.filePath == _this.filePath) {
_this.saved = res.saved;
_this.props.onSavedChanged(res.saved);
}
}));
/**
* Warning if you allow it to fall through
* beware of `this.refs.editor` and `undefined`
*/
if (this.isImage)
return;
this.props.setCodeEditor(this.refs.editor);
// 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));
this.disposible.add(api.willBlur.on(this.willBlur));
// 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));
};
Code.prototype.componentWillUnmount = function () {
this.disposible.dispose();
};
Code.prototype.render = function () {
var _this = this;
return (React.createElement(react_redux_1.Provider, { store: state_1.store }, this.isImage
? React.createElement(imageViewer_1.ImageViewer, { filePath: this.filePath, onClick: function () {
_this.props.onFocused();
} })
: React.createElement(codeEditor_1.CodeEditor, { ref: 'editor', filePath: this.filePath, onFocusChange: function (focus) {
/* Auto save on focus loss */
!focus && !_this.saved && _this.save();
/** Tell tab container of activation */
focus && _this.props.onFocused();
} })));
};
return Code;
}(ui.BaseComponent));
exports.Code = Code;