@theia/core
Version:
Theia is a cloud & desktop IDE framework implemented in TypeScript.
162 lines • 6.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.BreadcrumbsRendererFactory = exports.BreadcrumbsRenderer = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const inversify_1 = require("inversify");
const widgets_1 = require("../widgets");
const breadcrumbs_service_1 = require("./breadcrumbs-service");
const breadcrumb_renderer_1 = require("./breadcrumb-renderer");
const perfect_scrollbar_1 = require("perfect-scrollbar");
const common_1 = require("../../common");
const core_preferences_1 = require("../../common/core-preferences");
const breadcrumbs_constants_1 = require("./breadcrumbs-constants");
const label_provider_1 = require("../label-provider");
let BreadcrumbsRenderer = class BreadcrumbsRenderer extends widgets_1.ReactRenderer {
constructor() {
super(...arguments);
this.onDidChangeActiveStateEmitter = new common_1.Emitter();
this.breadcrumbs = [];
this.refreshCancellationMarker = { canceled: true };
this.togglePopup = (breadcrumb, event) => {
event.stopPropagation();
event.preventDefault();
let openPopup = true;
if (this.popup?.isOpen) {
this.popup.dispose();
// There is a popup open. If the popup is the popup that belongs to the currently clicked breadcrumb
// just close the popup. If another breadcrumb was clicked, open the new popup immediately.
openPopup = this.popup.breadcrumbId !== breadcrumb.id;
}
else {
this.popup = undefined;
}
if (openPopup) {
const { currentTarget } = event;
const breadcrumbElement = currentTarget.closest(`.${breadcrumbs_constants_1.Styles.BREADCRUMB_ITEM}`);
if (breadcrumbElement) {
const { left: x, bottom: y } = breadcrumbElement.getBoundingClientRect();
this.breadcrumbsService.openPopup(breadcrumb, { x, y }).then(popup => { this.popup = popup; });
}
}
};
}
get onDidChangeActiveState() {
return this.onDidChangeActiveStateEmitter.event;
}
get active() {
return !!this.breadcrumbs.length;
}
get breadCrumbsContainer() {
return this.host.firstElementChild ?? undefined;
}
init() {
this.toDispose.push(this.onDidChangeActiveStateEmitter);
this.toDispose.push(this.breadcrumbsService.onDidChangeBreadcrumbs(uri => {
if (this.uri?.isEqual(uri)) {
this.refresh(this.uri);
}
}));
this.toDispose.push(this.corePreferences.onPreferenceChanged(change => {
if (change.preferenceName === 'breadcrumbs.enabled') {
this.refresh(this.uri);
}
}));
this.toDispose.push(this.labelProvider.onDidChange(() => this.refresh(this.uri)));
}
dispose() {
super.dispose();
this.toDispose.dispose();
if (this.popup) {
this.popup.dispose();
}
if (this.scrollbar) {
this.scrollbar.destroy();
this.scrollbar = undefined;
}
}
async refresh(uri) {
this.uri = uri;
this.refreshCancellationMarker.canceled = true;
const currentCallCanceled = { canceled: false };
this.refreshCancellationMarker = currentCallCanceled;
let breadcrumbs;
if (uri && this.corePreferences['breadcrumbs.enabled']) {
breadcrumbs = await this.breadcrumbsService.getBreadcrumbs(uri);
}
else {
breadcrumbs = [];
}
if (currentCallCanceled.canceled) {
return;
}
const wasActive = this.active;
this.breadcrumbs = breadcrumbs;
const isActive = this.active;
if (wasActive !== isActive) {
this.onDidChangeActiveStateEmitter.fire(isActive);
}
this.update();
}
update() {
this.render();
if (!this.scrollbar) {
this.createScrollbar();
}
else {
this.scrollbar.update();
}
this.scrollToEnd();
}
createScrollbar() {
const { breadCrumbsContainer } = this;
if (breadCrumbsContainer) {
this.scrollbar = new perfect_scrollbar_1.default(breadCrumbsContainer, {
handlers: ['drag-thumb', 'keyboard', 'wheel', 'touch'],
useBothWheelAxes: true,
scrollXMarginOffset: 4,
suppressScrollY: true
});
}
}
scrollToEnd() {
const { breadCrumbsContainer } = this;
if (breadCrumbsContainer) {
breadCrumbsContainer.scrollLeft = breadCrumbsContainer.scrollWidth;
}
}
doRender() {
return (0, jsx_runtime_1.jsx)("ul", { className: breadcrumbs_constants_1.Styles.BREADCRUMBS, children: this.renderBreadcrumbs() });
}
renderBreadcrumbs() {
return this.breadcrumbs.map(breadcrumb => this.breadcrumbRenderer.render(breadcrumb, this.togglePopup));
}
};
exports.BreadcrumbsRenderer = BreadcrumbsRenderer;
tslib_1.__decorate([
(0, inversify_1.inject)(breadcrumbs_service_1.BreadcrumbsService),
tslib_1.__metadata("design:type", breadcrumbs_service_1.BreadcrumbsService)
], BreadcrumbsRenderer.prototype, "breadcrumbsService", void 0);
tslib_1.__decorate([
(0, inversify_1.inject)(breadcrumb_renderer_1.BreadcrumbRenderer),
tslib_1.__metadata("design:type", Object)
], BreadcrumbsRenderer.prototype, "breadcrumbRenderer", void 0);
tslib_1.__decorate([
(0, inversify_1.inject)(core_preferences_1.CorePreferences),
tslib_1.__metadata("design:type", Object)
], BreadcrumbsRenderer.prototype, "corePreferences", void 0);
tslib_1.__decorate([
(0, inversify_1.inject)(label_provider_1.LabelProvider),
tslib_1.__metadata("design:type", label_provider_1.LabelProvider)
], BreadcrumbsRenderer.prototype, "labelProvider", void 0);
tslib_1.__decorate([
(0, inversify_1.postConstruct)(),
tslib_1.__metadata("design:type", Function),
tslib_1.__metadata("design:paramtypes", []),
tslib_1.__metadata("design:returntype", void 0)
], BreadcrumbsRenderer.prototype, "init", null);
exports.BreadcrumbsRenderer = BreadcrumbsRenderer = tslib_1.__decorate([
(0, inversify_1.injectable)()
], BreadcrumbsRenderer);
exports.BreadcrumbsRendererFactory = Symbol('BreadcrumbsRendererFactory');
//# sourceMappingURL=breadcrumbs-renderer.js.map