alm
Version:
The best IDE for TypeScript
226 lines (225 loc) • 10.2 kB
JavaScript
;
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 __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
/**
* We thought a lot out how to expose *inline* information.
* There was no sane way of having that without keyboard shortcut or dialog overload
* We we have `docu`, the single point of useful inforation but only at the cursor location
*/
var ui = require("../../ui");
var csx = require("../../base/csx");
var React = require("react");
var state = require("../../state/state");
var react_redux_1 = require("react-redux");
var clipboard = require("../../components/clipboard");
var utils = require("../../../common/utils");
var socketClient_1 = require("../../../socket/socketClient");
var commands = require("../../commands/commands");
var monacoUtils = require("../monacoUtils");
var globalErrorCacheClient_1 = require("../../globalErrorCacheClient");
var typestyle = require("typestyle");
var docuClassName = typestyle.style(csx.newLayer, {
zIndex: 1,
color: '#DDD',
padding: '5px',
background: '#343333',
fontSize: '.8rem',
// Place to the right
right: '0px',
left: 'inherit',
// margin on all side to clear CM scroll bars and look good in general
margin: '12px',
// Overflow y and break in x
overflowY: 'auto',
wordWrap: 'break-word',
// Don't let it get too big
width: '30%',
maxWidth: '400px',
minWidth: '200px',
height: '30%',
maxHeight: '400px',
minHeight: '100px',
opacity: 0.7,
transition: 'opacity .2s',
$nest: {
'&:hover': {
opacity: 1
}
}
});
var docuOnTopStyle = {
top: '0px',
bottom: 'inherit'
};
var docuOnBottomStyle = {
top: 'inherit',
bottom: '0px'
};
var doctorRow = csx.extend({
paddingTop: '3px',
paddingBottom: '3px',
whiteSpace: 'pre',
flexShrink: '0'
}, csx.flexRoot, csx.center, csx.wrap);
var fileLinkStyle = {
textDecoration: 'underline',
cursor: 'pointer',
fontFamily: 'monospace',
margin: '0px 3px',
};
var Doctor = /** @class */ (function (_super) {
__extends(Doctor, _super);
function Doctor(props) {
var _this = _super.call(this, props) || this;
_this.handleCursorActivity = function () {
var cm = _this.props.cm;
if (!cm)
return; // Still loading
var selections = cm.getSelections();
if (selections.length !== 1) {
if (_this.state.singleCursor) {
_this.setState({ singleCursor: false });
}
return;
}
else if (!_this.state.singleCursor) {
_this.setState({ singleCursor: true });
}
var sel = cm.getSelection();
var cursor = { line: sel.startLineNumber - 1, ch: sel.startColumn - 1 };
var isCursorInTopHalf = monacoUtils.isCursorInTopHalf(cm);
if (isCursorInTopHalf) {
_this.setState({ onBottom: true, cursor: cursor, doctorInfo: null, searching: true });
}
else {
_this.setState({ onBottom: false, cursor: cursor, doctorInfo: null, searching: true });
}
_this.updateLazyInformation();
};
_this.updateLazyInformation = utils.debounce(function () {
if (_this.isUnmounted)
return;
if (!_this.props.showDoctor || !_this.state.singleCursor)
return;
if (!state.inActiveProjectFilePath(_this.props.filePath))
return;
var cm = _this.props.cm;
socketClient_1.server.getDoctorInfo({ filePath: _this.props.filePath, editorPosition: _this.state.cursor }).then(function (res) {
_this.setState({ doctorInfo: res, searching: false });
});
}, 1000);
_this.openLocation = function (filePath, editorPosition) {
commands.doOpenOrFocusFile.emit({ filePath: filePath, position: editorPosition });
};
_this.state = {};
return _this;
}
Doctor.prototype.componentWillUnmount = function () {
_super.prototype.componentWillUnmount.call(this);
};
Doctor.prototype.componentWillReceiveProps = function (props) {
if (props.showDoctor && !this.props.showDoctor) {
this.handleCursorActivity();
}
if (!this.props.cm && props.cm) {
this.disposible.add(props.cm.onDidChangeCursorPosition(this.handleCursorActivity));
}
};
Doctor.prototype.render = function () {
var _this = this;
if (!this.props.showDoctor || !this.state.singleCursor || !this.state.cursor) {
return React.createElement("div", null);
}
if (!state.inActiveProjectFilePath(this.props.filePath)) {
return React.createElement("div", null);
}
var rawErrors = globalErrorCacheClient_1.errorsCache.getErrorsForFilePath(this.props.filePath);
var errors = rawErrors.filter(function (re) { return re.from.line == _this.state.cursor.line; }).filter(function (re) { return re.from.ch <= _this.state.cursor.ch && _this.state.cursor.ch <= re.to.ch; });
var positionStyle = this.state.onBottom ? docuOnBottomStyle : docuOnTopStyle;
var doctorInfo = this.state.doctorInfo;
var typeInfo;
var comment;
var references;
var definitions;
if (doctorInfo && doctorInfo.quickInfo) {
typeInfo = React.createElement("div", { style: doctorRow },
React.createElement("strong", null, "SIG"),
"\u00A0",
React.createElement("strong", { style: { fontFamily: 'monospace' } }, doctorInfo.quickInfo.name));
comment = doctorInfo.quickInfo.comment &&
React.createElement("div", { style: doctorRow },
React.createElement("div", { style: { background: '#222', padding: '3px', fontFamily: 'monospace' } }, doctorInfo.quickInfo.comment));
}
if (doctorInfo && doctorInfo.references && doctorInfo.references.length) {
references = React.createElement("div", { style: doctorRow },
React.createElement("strong", null, "REF"),
' ',
doctorInfo.references.map(function (item) {
return (React.createElement("span", { style: fileLinkStyle, key: item.filePath + item.position.line, onClick: function () { return _this.openLocation(item.filePath, item.position); } }, utils.getFileName(item.filePath) + ":" + (item.position.line + 1)));
}));
}
if (doctorInfo && doctorInfo.definitions && doctorInfo.definitions.length) {
definitions = React.createElement("div", { style: doctorRow },
React.createElement("strong", null, "DEF"),
' ',
doctorInfo.definitions.map(function (item) {
return (React.createElement("span", { style: fileLinkStyle, key: item.filePath + item.position.line, onClick: function () { return _this.openLocation(item.filePath, item.position); } }, utils.getFileName(item.filePath) + ":" + (item.position.line + 1)));
}));
}
if (doctorInfo && doctorInfo.langHelp) {
definitions = React.createElement("div", { style: doctorRow },
React.createElement("strong", null, doctorInfo.langHelp.displayName),
' ',
React.createElement("span", { style: fileLinkStyle, onClick: function () { return window.open(doctorInfo.langHelp.help, '_blank'); } }, "More"));
}
return React.createElement("div", { className: docuClassName, style: csx.extend(positionStyle, csx.vertical) },
React.createElement("div", { style: csx.vertical },
errors.map(function (e) {
return React.createElement("div", { style: { padding: '5px' }, key: e.from.ch },
"\uD83D\uDC1B(",
e.from.line + 1,
":",
e.from.ch + 1,
") ",
e.message,
' ',
React.createElement(clipboard.Clipboard, { text: e.filePath + ":" + (e.from.line + 1) + " " + e.message }));
}),
typeInfo,
comment,
references,
definitions,
this.state.searching && React.createElement("i", null, "Searching..."),
this.state.doctorInfo && !this.state.doctorInfo.valid && React.createElement("i", null, "Nothing worthwhile")));
{
}
};
Doctor = __decorate([
react_redux_1.connect(function (state) {
return {
showDoctor: state.showDoctor,
};
}),
__metadata("design:paramtypes", [Object])
], Doctor);
return Doctor;
}(ui.BaseComponent));
exports.Doctor = Doctor;