dockview-solid/dist/esm/dockview/solid.jsx

Zero dependency layout manager supporting tabs, grids and splitviews

import { onMount, onCleanup, createEffect } from "solid-js";
import { createDockview, PROPERTY_KEYS_DOCKVIEW, } from "dockview-core";
import { SolidHeaderActionsRendererPart } from "./solidHeaderActionsRendererPart";
import { SolidPanelContentPart } from "./solidContentPart";
import { SolidPanelHeaderPart } from "./solidHeaderPart";
import { SolidWatermarkPart } from "./solidWatermarkPart";
const DEFAULT_SOLID_TAB = "props.defaultTabComponent";
function createGroupControlPart(component) {
    return component
        ? (groupPanel) => {
            return new SolidHeaderActionsRendererPart(component, groupPanel);
        }
        : undefined;
}
function extractCoreOptions(props) {
    const coreOptions = {};
    PROPERTY_KEYS_DOCKVIEW.forEach((key) => {
        if (key in props) {
            coreOptions[key] = props[key];
        }
    });
    return coreOptions;
}
export const DockviewSolid = (props) => {
    let container;
    let api;
    onMount(() => {
        if (!container)
            return;
        const frameworkTabComponents = props.tabComponents || {};
        if (props.defaultTabComponent) {
            frameworkTabComponents[DEFAULT_SOLID_TAB] = props.defaultTabComponent;
        }
        const frameworkOptions = {
            createLeftHeaderActionComponent: createGroupControlPart(props.leftHeaderActionsComponent),
            createRightHeaderActionComponent: createGroupControlPart(props.rightHeaderActionsComponent),
            createPrefixHeaderActionComponent: createGroupControlPart(props.prefixHeaderActionsComponent),
            createComponent: (options) => new SolidPanelContentPart(options.id, props.components[options.name]),
            createTabComponent: (options) => new SolidPanelHeaderPart(options.id, frameworkTabComponents[options.name]),
            createWatermarkComponent: props.watermarkComponent
                ? () => new SolidWatermarkPart("watermark", props.watermarkComponent)
                : undefined,
            defaultTabComponent: props.defaultTabComponent
                ? DEFAULT_SOLID_TAB
                : undefined,
        };
        api = createDockview(container, Object.assign(Object.assign({}, extractCoreOptions(props)), frameworkOptions));
        api.layout(container.clientWidth, container.clientHeight);
        props.onReady({ api });
    });
    onCleanup(() => {
        if (api)
            api.dispose();
    });
    createEffect(() => {
        if (!api)
            return;
        const frameworkTabComponents = props.tabComponents || {};
        if (props.defaultTabComponent) {
            frameworkTabComponents[DEFAULT_SOLID_TAB] = props.defaultTabComponent;
        }
        api.updateOptions({
            createTabComponent: (options) => new SolidPanelHeaderPart(options.id, frameworkTabComponents[options.name]),
            defaultTabComponent: props.defaultTabComponent
                ? DEFAULT_SOLID_TAB
                : undefined,
        });
    });
    createEffect(() => {
        if (api) {
            const changes = {};
            PROPERTY_KEYS_DOCKVIEW.forEach((key) => {
                if (key in props) {
                    // cast changes to any to allow dynamic property assignment
                    changes[key] = props[key];
                }
            });
            api.updateOptions(changes);
        }
    });
    createEffect(() => {
        if (api && props.onDidDrop) {
            const disp = api.onDidDrop((event) => props.onDidDrop(event));
            onCleanup(() => disp.dispose());
        }
    });
    createEffect(() => {
        if (api && props.onWillDrop) {
            const disp = api.onWillDrop((event) => props.onWillDrop(event));
            onCleanup(() => disp.dispose());
        }
    });
    return (<div style={{ height: "100%", width: "100%" }} ref={(el) => (container = el)}/>);
};
export default DockviewSolid;