dockview/dist/esm/react/paneview/paneview.js

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

import * as React from 'react';
import { PaneviewComponent, } from '../../paneview/paneviewComponent';
import { usePortalsLifecycle } from '../react';
import { PaneviewApi } from '../../api/component.api';
import { PanePanelSection } from './view';
import { watchElementResize } from '../../dom';
export const PaneviewReact = React.forwardRef((props, ref) => {
    const domRef = React.useRef(null);
    const paneviewRef = 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 = paneviewRef.current) === null || _a === void 0 ? void 0 : _a.layout(width, height);
        });
        return () => {
            watcher.dispose();
        };
    }, [props.disableAutoResizing]);
    React.useEffect(() => {
        const createComponent = (id, componentId, component) => new PanePanelSection(id, component, {
            addPortal,
        });
        const paneview = new PaneviewComponent(domRef.current, {
            frameworkComponents: props.components,
            components: {},
            headerComponents: {},
            disableDnd: props.disableDnd,
            headerframeworkComponents: props.headerComponents,
            frameworkWrapper: {
                header: {
                    createComponent,
                },
                body: {
                    createComponent,
                },
            },
        });
        const api = new PaneviewApi(paneview);
        const { clientWidth, clientHeight } = domRef.current;
        paneview.layout(clientWidth, clientHeight);
        if (props.onReady) {
            props.onReady({ api });
        }
        paneviewRef.current = paneview;
        return () => {
            paneview.dispose();
        };
    }, []);
    React.useEffect(() => {
        var _a;
        (_a = paneviewRef.current) === null || _a === void 0 ? void 0 : _a.updateOptions({
            frameworkComponents: props.components,
        });
    }, [props.components]);
    React.useEffect(() => {
        var _a;
        (_a = paneviewRef.current) === null || _a === void 0 ? void 0 : _a.updateOptions({
            headerframeworkComponents: props.headerComponents,
        });
    }, [props.headerComponents]);
    React.useEffect(() => {
        if (!paneviewRef.current) {
            return () => {
                //
            };
        }
        const paneview = paneviewRef.current;
        const disposable = paneview.onDidDrop((event) => {
            if (props.onDidDrop) {
                props.onDidDrop(Object.assign(Object.assign({}, event), { api: new PaneviewApi(paneview) }));
            }
        });
        return () => {
            disposable.dispose();
        };
    }, [props.onDidDrop]);
    return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
});
PaneviewReact.displayName = 'PaneviewComponent';