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

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

import * as React from 'react';
import { DockviewComponent } from '../../dockview/dockviewComponent';
import { ReactPanelContentPart } from './reactContentPart';
import { ReactPanelHeaderPart } from './reactHeaderPart';
import { ReactPanelDeserialzier } from '../deserializer';
import { usePortalsLifecycle } from '../react';
import { DockviewApi } from '../../api/component.api';
import { ReactWatermarkPart } from './reactWatermarkPart';
import { watchElementResize } from '../../dom';
export const DockviewReact = React.forwardRef((props, ref) => {
    const domRef = React.useRef(null);
    const dockviewRef = 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 = dockviewRef.current) === null || _a === void 0 ? void 0 : _a.layout(width, height);
        });
        return () => {
            watcher.dispose();
        };
    }, [props.disableAutoResizing]);
    React.useEffect(() => {
        var _a;
        const factory = {
            content: {
                createComponent: (id, componentId, component) => {
                    return new ReactPanelContentPart(componentId, component, {
                        addPortal,
                    });
                },
            },
            tab: {
                createComponent: (id, componentId, component) => {
                    return new ReactPanelHeaderPart(componentId, component, {
                        addPortal,
                    });
                },
            },
            watermark: {
                createComponent: (id, componentId, component) => {
                    return new ReactWatermarkPart(componentId, component, {
                        addPortal,
                    });
                },
            },
        };
        const element = document.createElement('div');
        const dockview = new DockviewComponent(element, {
            frameworkComponentFactory: factory,
            frameworkComponents: props.components,
            frameworkTabComponents: props.tabComponents,
            tabHeight: props.tabHeight,
            debug: props.debug,
            enableExternalDragEvents: props.enableExternalDragEvents,
            watermarkFrameworkComponent: props.watermarkComponent,
            styles: props.hideBorders
                ? { separatorBorder: 'transparent' }
                : undefined,
        });
        (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(dockview.element);
        dockview.deserializer = new ReactPanelDeserialzier(dockview);
        const { clientWidth, clientHeight } = domRef.current;
        dockview.layout(clientWidth, clientHeight);
        if (props.onReady) {
            props.onReady({ api: new DockviewApi(dockview) });
        }
        dockviewRef.current = dockview;
        return () => {
            dockview.dispose();
        };
    }, []);
    React.useEffect(() => {
        if (!props.onTabContextMenu || !dockviewRef.current) {
            return () => {
                //noop
            };
        }
        const disposable = dockviewRef.current.onTabContextMenu((event) => {
            if (props.onTabContextMenu) {
                props.onTabContextMenu(event);
            }
        });
        return () => {
            disposable.dispose();
        };
    }, [props.onTabContextMenu]);
    return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
});
DockviewReact.displayName = 'DockviewComponent';