dockview/dist/esm/react/splitview/splitview.js

Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support

import * as React from 'react';
import { SplitviewApi } from '../../api/component.api';
import { SplitviewComponent, } from '../../splitview/splitviewComponent';
import { usePortalsLifecycle } from '../react';
import { ReactPanelView } from './view';
import { watchElementResize } from '../../dom';
export const SplitviewReact = React.forwardRef((props, ref) => {
    const domRef = React.useRef(null);
    const splitviewRef = React.useRef();
    const [portals, addPortal] = usePortalsLifecycle();
    React.useImperativeHandle(ref, () => domRef.current, []);
    React.useEffect(() => {
        if (props.disableAutoResizing) {
            return () => {
                //
            };
        }
        const watcher = watchElementResize(domRef.current, (entry) => {
            var _a;
            const { width, height } = entry.contentRect;
            (_a = splitviewRef.current) === null || _a === void 0 ? void 0 : _a.layout(width, height);
        });
        return () => {
            watcher.dispose();
        };
    }, [props.disableAutoResizing]);
    React.useEffect(() => {
        const splitview = new SplitviewComponent(domRef.current, {
            orientation: props.orientation,
            frameworkComponents: props.components,
            frameworkWrapper: {
                createComponent: (id, componentId, component) => {
                    return new ReactPanelView(id, componentId, component, {
                        addPortal,
                    });
                },
            },
            proportionalLayout: props.proportionalLayout,
            styles: props.hideBorders
                ? { separatorBorder: 'transparent' }
                : undefined,
        });
        const { clientWidth, clientHeight } = domRef.current;
        splitview.layout(clientWidth, clientHeight);
        if (props.onReady) {
            props.onReady({ api: new SplitviewApi(splitview) });
        }
        splitviewRef.current = splitview;
        return () => {
            splitview.dispose();
        };
    }, []);
    return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
});
SplitviewReact.displayName = 'SplitviewComponent';