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

Zero dependency layout manager supporting tabs, grids and splitviews

import { onMount, onCleanup, createEffect } from 'solid-js';
import { createSplitview, PROPERTY_KEYS_SPLITVIEW, } from 'dockview-core';
import { SolidSplitPanelView } from './view';
export const SplitviewSolid = (props) => {
    let container;
    let api;
    onMount(() => {
        const frameworkOptions = {
            createComponent: (options) => new SolidSplitPanelView(options.id, options.name, props.components[options.name]),
        };
        const coreOptions = {};
        PROPERTY_KEYS_SPLITVIEW.forEach((key) => {
            if (key in props) {
                coreOptions[key] = props[key];
            }
        });
        api = createSplitview(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_SPLITVIEW.forEach((key) => {
                if (key in props) {
                    changes[key] = props[key];
                }
            });
            api.updateOptions(changes);
        }
    });
    return <div style={{ height: '100%', width: '100%' }} ref={(el) => (container = el)}/>;
};