dockview/dist/esm/dockview/components/tab/defaultTab.js

Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support

import { CompositeDisposable, MutableDisposable } from '../../../lifecycle';
import { addDisposableListener } from '../../../events';
import { toggleClass } from '../../../dom';
export class WrappedTab {
    constructor(renderer) {
        this.renderer = renderer;
        this._element = document.createElement('element');
        this.show();
    }
    get innerRenderer() {
        return this.renderer;
    }
    get element() {
        return this._element;
    }
    get id() {
        return this.renderer.id;
    }
    show() {
        if (!this.renderer.element.parentElement) {
            this._element.appendChild(this.renderer.element);
        }
    }
    hide() {
        if (this.renderer.element.parentElement) {
            this.renderer.element.remove();
        }
    }
    layout(width, height) {
        this.renderer.layout(width, height);
    }
    update(event) {
        this.renderer.update(event);
    }
    toJSON() {
        return this.renderer.toJSON();
    }
    focus() {
        this.renderer.focus();
    }
    init(parameters) {
        this.renderer.init(parameters);
    }
    updateParentGroup(group, isPanelVisible) {
        this.renderer.updateParentGroup(group, isPanelVisible);
    }
    dispose() {
        this.renderer.dispose();
    }
}
export class DefaultTab extends CompositeDisposable {
    constructor() {
        super();
        this._isPanelVisible = false;
        this._isGroupActive = false;
        //
        this.params = {};
        //
        this.isDirtyDisposable = new MutableDisposable();
        this.addDisposables(this.isDirtyDisposable);
        this._element = document.createElement('div');
        this._element.className = 'default-tab';
        //
        this._content = document.createElement('div');
        this._content.className = 'tab-content';
        //
        this._actionContainer = document.createElement('div');
        this._actionContainer.className = 'action-container';
        //
        this._list = document.createElement('ul');
        this._list.className = 'tab-list';
        //
        this.action = document.createElement('a');
        this.action.className = 'tab-action';
        //
        this._element.appendChild(this._content);
        this._element.appendChild(this._actionContainer);
        this._actionContainer.appendChild(this._list);
        this._list.appendChild(this.action);
        //
        this.addDisposables(addDisposableListener(this._actionContainer, 'mousedown', (ev) => {
            ev.preventDefault();
        }));
        this.render();
    }
    get element() {
        return this._element;
    }
    get id() {
        return '__DEFAULT_TAB__';
    }
    update(event) {
        this.params = Object.assign(Object.assign({}, this.params), event.params);
        this.render();
    }
    toJSON() {
        return { id: this.id };
    }
    focus() {
        //noop
    }
    init(params) {
        this.params = params;
        this._content.textContent = params.title;
        this.isDirtyDisposable.value = this.params.api.onDidDirtyChange((event) => {
            const isDirty = event;
            toggleClass(this.action, 'dirty', isDirty);
        });
        if (!this.params.suppressClosable) {
            addDisposableListener(this.action, 'click', (ev) => {
                ev.preventDefault(); //
                this.params.api.close();
            });
        }
        else {
            this.action.classList.add('disable-close');
        }
    }
    updateParentGroup(group, isPanelVisible) {
        this._isPanelVisible = isPanelVisible;
        this._isGroupActive = group.isActive;
        this.render();
    }
    layout(width, height) {
        // noop
    }
    render() {
        this._content.textContent = this.params.title;
    }
}