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

Zero dependency layout manager supporting tabs, grids and splitviews

import { onMount, onCleanup, createEffect } from 'solid-js';
import { createPaneview, PROPERTY_KEYS_PANEVIEW, } from 'dockview-core';
import { SolidPanePanelSection } from './view';
export const PaneviewSolid = (props) => {
    let container;
    let api;
    onMount(() => {
        const headerComponents = props.headerComponents || {};
        const frameworkOptions = {
            createComponent: (options) => new SolidPanePanelSection(options.id, props.components[options.name]),
            createHeaderComponent: (options) => new SolidPanePanelSection(options.id, headerComponents[options.name]),
        };
        const coreOptions = {};
        PROPERTY_KEYS_PANEVIEW.forEach((key) => {
            if (key in props) {
                coreOptions[key] = props[key];
            }
        });
        api = createPaneview(container, Object.assign(Object.assign({}, coreOptions), frameworkOptions));
        api.layout(container.clientWidth, container.clientHeight);
        props.onReady({ api });
    });
    onCleanup(() => {
        if (api)
            api.dispose();
    });
    createEffect(() => {
        if (api) {
            const changes = {};
            PROPERTY_KEYS_PANEVIEW.forEach((key) => {
                if (key in props) {
                    changes[key] = props[key];
                }
            });
            api.updateOptions(changes);
        }
    });
    createEffect(() => {
        if (api && props.onDidDrop) {
            const disp = api.onDidDrop((event) => props.onDidDrop(event));
            onCleanup(() => disp.dispose());
        }
    });
    return <div style={{ height: '100%', width: '100%' }} ref={(el) => (container = el)}/>;
};