alm
Version:
The best IDE for TypeScript
227 lines (226 loc) • 12.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 });
var utils = require("../common/utils");
var styles = require("./styles/styles");
var React = require("react");
var csx = require("./base/csx");
var ui_1 = require("./ui");
var ui = require("./ui");
var commands = require("./commands/commands");
var types = require("../common/types");
var clipboard_1 = require("./components/clipboard");
var icon_1 = require("./components/icon");
var buttons_1 = require("./components/buttons");
var inputs_1 = require("./components/inputs");
var DraggableCore = ui.DraggableCore;
var react_redux_1 = require("react-redux");
var state_1 = require("./state/state");
var state = require("./state/state");
var gotoHistory = require("./gotoHistory");
var appTabsContainer_1 = require("./tabs/v2/appTabsContainer");
var settings = require("./state/settings");
var globalErrorCacheClient_1 = require("./globalErrorCacheClient");
var notificationKeyboardStyle = {
border: '2px solid',
borderRadius: '6px',
display: 'inline-block',
padding: '5px',
background: 'grey',
};
var resizerWidth = 5;
var resizerStyle = {
background: 'radial-gradient(#444,transparent)',
height: resizerWidth + 'px',
cursor: 'ns-resize',
color: '#666',
};
var MainPanel = /** @class */ (function (_super) {
__extends(MainPanel, _super);
function MainPanel(props) {
var _this = _super.call(this, props) || this;
_this.toggleErrors = function () {
if (_this.props.errorsExpanded) {
state_1.collapseErrors({});
}
else {
state_1.expandErrors({});
}
};
_this.openErrorLocation = function (error) {
gotoHistory.gotoError(error);
};
_this.openFile = function (filePath) {
commands.doOpenOrFocusFile.emit({ filePath: filePath });
};
_this.handleDrag = function (evt, ui) {
_this.setState({ height: utils.rangeLimited({ num: _this.state.height - ui.deltaY, min: 100, max: window.innerHeight - 100 }) });
};
_this.handleStop = function () {
var height = _this.state.height;
settings.mainPanelHeight.set(height);
};
_this.state = {
height: 250,
};
return _this;
}
MainPanel.prototype.componentDidMount = function () {
var _this = this;
settings.mainPanelHeight.get().then(function (res) {
var height = res || _this.state.height;
height = Math.min(window.innerHeight - 100, height);
_this.setState({ height: height });
});
this.disposible.add(commands.toggleMessagePanel.on(function () {
state.getState().errorsExpanded ? state.collapseErrors({}) : state.expandErrors({});
}));
this.disposible.add(appTabsContainer_1.tabStateChanged.on(function () {
_this.forceUpdate();
}));
this.disposible.add(globalErrorCacheClient_1.errorsCache.errorsDelta.on(function () {
_this.forceUpdate();
}));
};
MainPanel.prototype.render = function () {
var errorsUpdate = globalErrorCacheClient_1.errorsCache.getErrorsLimited();
var errorPanel = undefined;
if (this.props.errorsExpanded) {
errorPanel = React.createElement("div", null,
React.createElement(DraggableCore, { onDrag: this.handleDrag, onStop: this.handleStop },
React.createElement("div", { style: csx.extend(csx.flexRoot, csx.centerCenter, resizerStyle) },
React.createElement(icon_1.Icon, { name: "ellipsis-h" }))),
React.createElement("div", { style: csx.extend(styles.errorsPanel.main, { height: this.state.height }) },
React.createElement("div", { style: styles.errorsPanel.headerSection },
React.createElement("div", { style: csx.horizontal },
React.createElement("div", { style: csx.extend(csx.horizontal, csx.flex, csx.center, { marginRight: '10px' }) },
React.createElement(buttons_1.ButtonBlack, { text: "Show All", onClick: function () { return state.setErrorsDisplayMode(types.ErrorsDisplayMode.all); }, isActive: this.props.errorsDisplayMode == types.ErrorsDisplayMode.all }),
React.createElement(buttons_1.ButtonBlack, { text: "Show Only Open Files", onClick: function () { return state.setErrorsDisplayMode(types.ErrorsDisplayMode.openFiles); }, isActive: this.props.errorsDisplayMode == types.ErrorsDisplayMode.openFiles }),
React.createElement("label", { style: { marginLeft: '10px' } }, "Filter:"),
React.createElement(inputs_1.InputBlack, { style: { marginRight: '10px', maxWidth: '200px' }, onChange: function (value) { return state.setErrorsFilter(value); }, value: this.props.errorsFilter }),
React.createElement(buttons_1.ButtonBlack, { text: "Clear", disabled: !this.props.errorsFilter.trim(), onClick: function () { return state.setErrorsFilter(''); } })),
errorsUpdate.tooMany
&& React.createElement("div", { style: styles.errorsPanel.tooMany, className: "hint--bottom-left hint--info", "data-hint": "We only sync the top 50 per file with a limit of 250. That ensures that live linting doesn't slow anything else down." },
errorsUpdate.totalCount,
" total. Showing top ",
errorsUpdate.syncCount,
"."))),
errorsUpdate.totalCount
? this.renderErrors()
: React.createElement("div", { style: styles.errorsPanel.success }, "No Errors \u2764")));
}
return (React.createElement("div", { style: { zIndex: 6 /* force over golden-layout */ } }, errorPanel));
};
MainPanel.prototype.renderErrors = function () {
var errorsToRender = appTabsContainer_1.tabState.errorsByFilePathFiltered().errorsByFilePath;
return (React.createElement("div", { style: { overflow: 'auto' } }, Object.keys(errorsToRender)
.filter(function (filePath) { return !!errorsToRender[filePath].length; })
.map(function (filePath, i) {
var errors = errorsToRender[filePath];
return React.createElement(ErrorRenders.ErrorsForFilePath, { key: i, errors: errors, filePath: filePath });
})));
};
MainPanel.prototype.componentWillUpdate = function (nextProps, nextState) {
if (nextState.height !== this.state.height
|| nextProps.errorsExpanded !== this.props.errorsExpanded) {
appTabsContainer_1.tabState.debouncedResize();
}
};
MainPanel = __decorate([
react_redux_1.connect(function (state) {
return {
errorsExpanded: state.errorsExpanded,
activeProject: state.activeProject,
activeProjectFiles: state.activeProjectFilePathTruthTable,
socketConnected: state.socketConnected,
errorsDisplayMode: state.errorsDisplayMode,
errorsFilter: state.errorsFilter,
};
}),
__metadata("design:paramtypes", [Object])
], MainPanel);
return MainPanel;
}(ui_1.BaseComponent));
exports.MainPanel = MainPanel;
/**
* Pure components for rendering errors
*/
var ErrorRenders;
(function (ErrorRenders) {
var openErrorLocation = function (error) {
gotoHistory.gotoError(error);
};
var ErrorsForFilePath = /** @class */ (function (_super) {
__extends(ErrorsForFilePath, _super);
function ErrorsForFilePath() {
return _super !== null && _super.apply(this, arguments) || this;
}
ErrorsForFilePath.prototype.render = function () {
var _this = this;
var codeErrors = this.props.errors;
var errors = codeErrors.filter(function (x) { return x.level === 'error'; });
var warnings = codeErrors.filter(function (x) { return x.level === 'warning'; });
var errorsRendered =
// error before warning
errors.concat(warnings)
.map(function (e, j) { return (React.createElement(SingleError, { key: "" + j, error: e })); });
return React.createElement("div", null,
React.createElement("div", { style: styles.errorsPanel.filePath, onClick: function () { return openErrorLocation(_this.props.errors[0]); } },
React.createElement(icon_1.Icon, { name: "file-code-o", style: { fontSize: '.8rem' } }),
"\u00A0",
this.props.filePath,
"(",
!!errors.length && React.createElement("span", { style: { color: styles.errorColor } }, errors.length),
!!(errors.length && warnings.length) && ',',
!!warnings.length && React.createElement("span", { style: { color: styles.warningColor } }, warnings.length),
")"),
React.createElement("div", { style: styles.errorsPanel.perFileList }, errorsRendered));
};
return ErrorsForFilePath;
}(React.PureComponent));
ErrorRenders.ErrorsForFilePath = ErrorsForFilePath;
var SingleError = /** @class */ (function (_super) {
__extends(SingleError, _super);
function SingleError() {
return _super !== null && _super.apply(this, arguments) || this;
}
SingleError.prototype.render = function () {
var e = this.props.error;
var style = e.level === 'error'
? styles.errorsPanel.errorDetailsContainer
: styles.errorsPanel.warningDetailsContainer;
return (React.createElement("div", { style: style, onClick: function () { return openErrorLocation(e); } },
React.createElement("div", { style: styles.errorsPanel.errorDetailsContent },
React.createElement("div", { style: styles.errorsPanel.errorMessage },
"\uD83D\uDC1B(",
e.from.line + 1,
": ",
e.from.ch + 1,
") ",
e.message,
' ',
React.createElement(clipboard_1.Clipboard, { text: e.filePath + ":" + (e.from.line + 1) + " " + e.message })),
e.preview ? React.createElement("div", { style: styles.errorsPanel.errorPreview }, e.preview) : '')));
};
return SingleError;
}(React.PureComponent));
ErrorRenders.SingleError = SingleError;
})(ErrorRenders || (ErrorRenders = {}));