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

Zero dependency layout manager supporting tabs, grids and splitviews

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