How to use @hpcc-js/phosphor-shim - 5 common examples

// import { Persist } from "@hpcc-js/other";
import { DockLayout, DockPanel, each, TabBar, Widget } from "@hpcc-js/phosphor-shim";
import { WidgetAdapter } from "./WidgetAdapter";

export class PRenderer extends DockPanel.Renderer {
    _owner: PDockPanel;

    constructor() {
        super();
    }

    createTabBar(): TabBar {
        const bar = super.createTabBar();
        bar.tabsMovable = this._owner.tabsMovable;
        return bar;
    }
}

export class PDockPanel extends DockPanel {
    private _tabsMovable: boolean;
    get tabsMovable(): boolean {

protected onActivateRequest(msg: Message): void {
        super.onActivateRequest(msg);
        if (this._widget) {
            this.resizeAndRender();
        }
        if (this._owner) {
            MessageLoop.postMessage(this._owner, new Msg.WAActivateRequest(this));
        }
    }

constructor(orientation: "horizontal" | "vertical" = "vertical") {
        super();
        this._split = new PSplitPanel({ orientation });
        this._tag = "div";
        this._split.id = "p" + this.id();
    }

enter(domNode, element) {
        super.enter(domNode, element);
        PWidget.attach(this._split, domNode);
    }

set tabsMovable(value: boolean) {
        this._tabsMovable = value;
        each(this.tabBars(), tabbar => tabbar.tabsMovable = value);
    }