dockview-react 6.6.0 → 7.0.2

package/dist/esm/dockview/reactTabGroupChipPart.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ReactPortalStore } from '../react';
+import { ITabGroupChipRenderer, ITabGroup, DockviewApi } from 'dockview';
+export interface IDockviewTabGroupChipProps {
+    tabGroup: ITabGroup;
+    api: DockviewApi;
+}
+export declare class ReactTabGroupChipPart implements ITabGroupChipRenderer {
+    private readonly component;
+    private readonly reactPortalStore;
+    private readonly _element;
+    private part?;
+    get element(): HTMLElement;
+    constructor(component: React.FunctionComponent<IDockviewTabGroupChipProps>, reactPortalStore: ReactPortalStore);
+    init(params: {
+        tabGroup: ITabGroup;
+        api: DockviewApi;
+    }): void;
+    update(params: {
+        tabGroup: ITabGroup;
+    }): void;
+    dispose(): void;
+}

package/dist/esm/dockview/reactTabGroupChipPart.js

@@ -0,0 +1,27 @@
+import { ReactPart } from '../react';
+export class ReactTabGroupChipPart {
+    get element() {
+        return this._element;
+    }
+    constructor(component, reactPortalStore) {
+        this.component = component;
+        this.reactPortalStore = reactPortalStore;
+        this._element = document.createElement('div');
+        this._element.className = 'dv-react-part';
+        this._element.style.display = 'inline-flex';
+    }
+    init(params) {
+        this.part = new ReactPart(this._element, this.reactPortalStore, this.component, {
+            tabGroup: params.tabGroup,
+            api: params.api,
+        });
+    }
+    update(params) {
+        var _a;
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ tabGroup: params.tabGroup });
+    }
+    dispose() {
+        var _a;
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
+    }
+}

package/dist/esm/dockview/reactWatermarkPart.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ReactPortalStore } from '../react';
+import { PanelUpdateEvent, IWatermarkRenderer, WatermarkRendererInitParameters, IWatermarkPanelProps } from 'dockview';
+export declare class ReactWatermarkPart implements IWatermarkRenderer {
+    readonly id: string;
+    private readonly component;
+    private readonly reactPortalStore;
+    private readonly _element;
+    private part?;
+    private readonly parameters;
+    get element(): HTMLElement;
+    constructor(id: string, component: React.FunctionComponent<IWatermarkPanelProps>, reactPortalStore: ReactPortalStore);
+    init(parameters: WatermarkRendererInitParameters): void;
+    focus(): void;
+    update(params: PanelUpdateEvent): void;
+    layout(_width: number, _height: number): void;
+    dispose(): void;
+}

package/dist/esm/dockview/reactWatermarkPart.js

@@ -0,0 +1,38 @@
+import { ReactPart } from '../react';
+export class ReactWatermarkPart {
+    get element() {
+        return this._element;
+    }
+    constructor(id, component, reactPortalStore) {
+        this.id = id;
+        this.component = component;
+        this.reactPortalStore = reactPortalStore;
+        this._element = document.createElement('div');
+        this._element.className = 'dv-react-part';
+        this._element.style.height = '100%';
+        this._element.style.width = '100%';
+    }
+    init(parameters) {
+        this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
+            group: parameters.group,
+            containerApi: parameters.containerApi,
+        });
+    }
+    focus() {
+        // noop
+    }
+    update(params) {
+        var _a, _b, _c;
+        if (this.parameters) {
+            this.parameters.params = params.params;
+        }
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ params: (_c = (_b = this.parameters) === null || _b === void 0 ? void 0 : _b.params) !== null && _c !== void 0 ? _c : {} });
+    }
+    layout(_width, _height) {
+        // noop - retrieval from api
+    }
+    dispose() {
+        var _a;
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
+    }
+}

package/dist/esm/gridview/gridview.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { GridviewPanelApi, GridviewApi, GridviewOptions } from 'dockview';
+import { PanelParameters } from '../types';
+export interface GridviewReadyEvent {
+    api: GridviewApi;
+}
+export interface IGridviewPanelProps<T extends {
+    [index: string]: any;
+} = any> extends PanelParameters<T> {
+    api: GridviewPanelApi;
+    containerApi: GridviewApi;
+}
+export interface IGridviewReactProps extends GridviewOptions {
+    onReady: (event: GridviewReadyEvent) => void;
+    components: Record<string, React.FunctionComponent<IGridviewPanelProps>>;
+}
+export declare const GridviewReact: React.ForwardRefExoticComponent<IGridviewReactProps & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/gridview/gridview.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { createGridview, PROPERTY_KEYS_GRIDVIEW, } from 'dockview';
+import { ReactGridPanelView } from './view';
+import { usePortalsLifecycle } from '../react';
+function extractCoreOptions(props) {
+    const coreOptions = PROPERTY_KEYS_GRIDVIEW.reduce((obj, key) => {
+        if (key in props) {
+            obj[key] = props[key];
+        }
+        return obj;
+    }, {});
+    return coreOptions;
+}
+export const GridviewReact = React.forwardRef((props, ref) => {
+    const domRef = React.useRef(null);
+    const gridviewRef = React.useRef(undefined);
+    const [portals, addPortal] = usePortalsLifecycle();
+    React.useImperativeHandle(ref, () => domRef.current, []);
+    const prevProps = React.useRef({});
+    React.useEffect(() => {
+        const changes = {};
+        PROPERTY_KEYS_GRIDVIEW.forEach((propKey) => {
+            const key = propKey;
+            const propValue = props[key];
+            if (key in props && propValue !== prevProps.current[key]) {
+                changes[key] = propValue;
+            }
+        });
+        if (gridviewRef.current) {
+            gridviewRef.current.updateOptions(changes);
+        }
+        else {
+            // not yet fully initialized
+        }
+        prevProps.current = props;
+    }, PROPERTY_KEYS_GRIDVIEW.map((key) => props[key]));
+    React.useEffect(() => {
+        if (!domRef.current) {
+            return () => {
+                // noop
+            };
+        }
+        const frameworkOptions = {
+            createComponent: (options) => {
+                return new ReactGridPanelView(options.id, options.name, props.components[options.name], { addPortal });
+            },
+        };
+        const api = createGridview(domRef.current, Object.assign(Object.assign({}, extractCoreOptions(props)), frameworkOptions));
+        const { clientWidth, clientHeight } = domRef.current;
+        api.layout(clientWidth, clientHeight);
+        if (props.onReady) {
+            props.onReady({ api });
+        }
+        gridviewRef.current = api;
+        return () => {
+            gridviewRef.current = undefined;
+            api.dispose();
+        };
+    }, []);
+    React.useEffect(() => {
+        if (!gridviewRef.current) {
+            return;
+        }
+        gridviewRef.current.updateOptions({
+            createComponent: (options) => {
+                return new ReactGridPanelView(options.id, options.name, props.components[options.name], { addPortal });
+            },
+        });
+    }, [props.components]);
+    return (React.createElement("div", { style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+});
+GridviewReact.displayName = 'GridviewComponent';

package/dist/esm/gridview/view.d.ts

@@ -0,0 +1,9 @@
+import { GridviewPanel, IFrameworkPart } from 'dockview';
+import { ReactPortalStore } from '../react';
+import { IGridviewPanelProps } from './gridview';
+export declare class ReactGridPanelView extends GridviewPanel {
+    private readonly reactComponent;
+    private readonly reactPortalStore;
+    constructor(id: string, component: string, reactComponent: React.FunctionComponent<IGridviewPanelProps>, reactPortalStore: ReactPortalStore);
+    getComponent(): IFrameworkPart;
+}

package/dist/esm/gridview/view.js

@@ -0,0 +1,19 @@
+import { GridviewApi, GridviewPanel, } from 'dockview';
+import { ReactPart } from '../react';
+export class ReactGridPanelView extends GridviewPanel {
+    constructor(id, component, reactComponent, reactPortalStore) {
+        super(id, component);
+        this.reactComponent = reactComponent;
+        this.reactPortalStore = reactPortalStore;
+    }
+    getComponent() {
+        var _a, _b;
+        return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
+            params: (_b = (_a = this._params) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _b : {},
+            api: this.api,
+            // TODO: fix casting hack
+            containerApi: new GridviewApi(this._params
+                .accessor),
+        });
+    }
+}

package/dist/esm/index.d.ts

@@ -1 +1,10 @@
 export * from 'dockview';
+export * from './dockview/dockview';
+export * from './dockview/defaultTab';
+export { IDockviewTabGroupChipProps } from './dockview/reactTabGroupChipPart';
+export { IDockviewGroupDragGhostProps } from './dockview/reactGroupDragGhostPart';
+export * from './splitview/splitview';
+export * from './gridview/gridview';
+export * from './paneview/paneview';
+export * from './types';
+export * from './react';

package/dist/esm/index.js

@@ -1 +1,8 @@
 export * from 'dockview';
+export * from './dockview/dockview';
+export * from './dockview/defaultTab';
+export * from './splitview/splitview';
+export * from './gridview/gridview';
+export * from './paneview/paneview';
+export * from './types';
+export * from './react';

package/dist/esm/paneview/paneview.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PaneviewPanelApi, PaneviewApi, PaneviewDidDropEvent, PaneviewOptions } from 'dockview';
+import { PanelParameters } from '../types';
+export interface PaneviewReadyEvent {
+    api: PaneviewApi;
+}
+export interface IPaneviewPanelProps<T extends {
+    [index: string]: any;
+} = any> extends PanelParameters<T> {
+    api: PaneviewPanelApi;
+    containerApi: PaneviewApi;
+    title: string;
+}
+export interface IPaneviewReactProps extends PaneviewOptions {
+    onReady: (event: PaneviewReadyEvent) => void;
+    components: Record<string, React.FunctionComponent<IPaneviewPanelProps>>;
+    headerComponents?: Record<string, React.FunctionComponent<IPaneviewPanelProps>>;
+    onDidDrop?(event: PaneviewDidDropEvent): void;
+}
+export declare const PaneviewReact: React.ForwardRefExoticComponent<IPaneviewReactProps & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/paneview/paneview.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import { createPaneview, PROPERTY_KEYS_PANEVIEW, } from 'dockview';
+import { usePortalsLifecycle } from '../react';
+import { PanePanelSection } from './view';
+function extractCoreOptions(props) {
+    const coreOptions = PROPERTY_KEYS_PANEVIEW.reduce((obj, key) => {
+        if (key in props) {
+            obj[key] = props[key];
+        }
+        return obj;
+    }, {});
+    return coreOptions;
+}
+export const PaneviewReact = React.forwardRef((props, ref) => {
+    const domRef = React.useRef(null);
+    const paneviewRef = React.useRef(undefined);
+    const [portals, addPortal] = usePortalsLifecycle();
+    React.useImperativeHandle(ref, () => domRef.current, []);
+    const prevProps = React.useRef({});
+    React.useEffect(() => {
+        const changes = {};
+        PROPERTY_KEYS_PANEVIEW.forEach((propKey) => {
+            const key = propKey;
+            const propValue = props[key];
+            if (key in props && propValue !== prevProps.current[key]) {
+                changes[key] = propValue;
+            }
+        });
+        if (paneviewRef.current) {
+            paneviewRef.current.updateOptions(changes);
+        }
+        else {
+            // not yet fully initialized
+        }
+        prevProps.current = props;
+    }, PROPERTY_KEYS_PANEVIEW.map((key) => props[key]));
+    React.useEffect(() => {
+        var _a;
+        if (!domRef.current) {
+            return () => {
+                // noop
+            };
+        }
+        const headerComponents = (_a = props.headerComponents) !== null && _a !== void 0 ? _a : {};
+        const frameworkOptions = {
+            createComponent: (options) => {
+                return new PanePanelSection(options.id, props.components[options.name], { addPortal });
+            },
+            createHeaderComponent: (options) => {
+                return new PanePanelSection(options.id, headerComponents[options.name], { addPortal });
+            },
+        };
+        const api = createPaneview(domRef.current, Object.assign(Object.assign({}, extractCoreOptions(props)), frameworkOptions));
+        const { clientWidth, clientHeight } = domRef.current;
+        api.layout(clientWidth, clientHeight);
+        if (props.onReady) {
+            props.onReady({ api });
+        }
+        paneviewRef.current = api;
+        return () => {
+            paneviewRef.current = undefined;
+            api.dispose();
+        };
+    }, []);
+    React.useEffect(() => {
+        if (!paneviewRef.current) {
+            return;
+        }
+        paneviewRef.current.updateOptions({
+            createComponent: (options) => {
+                return new PanePanelSection(options.id, props.components[options.name], { addPortal });
+            },
+        });
+    }, [props.components]);
+    React.useEffect(() => {
+        var _a;
+        if (!paneviewRef.current) {
+            return;
+        }
+        const headerComponents = (_a = props.headerComponents) !== null && _a !== void 0 ? _a : {};
+        paneviewRef.current.updateOptions({
+            createHeaderComponent: (options) => {
+                return new PanePanelSection(options.id, headerComponents[options.name], { addPortal });
+            },
+        });
+    }, [props.headerComponents]);
+    React.useEffect(() => {
+        if (!paneviewRef.current) {
+            return () => {
+                // noop
+            };
+        }
+        const disposable = paneviewRef.current.onDidDrop((event) => {
+            if (props.onDidDrop) {
+                props.onDidDrop(event);
+            }
+        });
+        return () => {
+            disposable.dispose();
+        };
+    }, [props.onDidDrop]);
+    return (React.createElement("div", { style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+});
+PaneviewReact.displayName = 'PaneviewComponent';

package/dist/esm/paneview/view.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { PanelUpdateEvent, IPanePart, PanePanelComponentInitParameter } from 'dockview';
+import { ReactPortalStore } from '../react';
+import { IPaneviewPanelProps } from './paneview';
+export declare class PanePanelSection implements IPanePart {
+    readonly id: string;
+    private readonly component;
+    private readonly reactPortalStore;
+    private readonly _element;
+    private part?;
+    get element(): HTMLElement;
+    constructor(id: string, component: React.FunctionComponent<IPaneviewPanelProps>, reactPortalStore: ReactPortalStore);
+    init(parameters: PanePanelComponentInitParameter): void;
+    toJSON(): {
+        id: string;
+    };
+    update(params: PanelUpdateEvent): void;
+    dispose(): void;
+}

package/dist/esm/paneview/view.js

@@ -0,0 +1,35 @@
+import { ReactPart } from '../react';
+export class PanePanelSection {
+    get element() {
+        return this._element;
+    }
+    constructor(id, component, reactPortalStore) {
+        this.id = id;
+        this.component = component;
+        this.reactPortalStore = reactPortalStore;
+        this._element = document.createElement('div');
+        this._element.style.height = '100%';
+        this._element.style.width = '100%';
+    }
+    init(parameters) {
+        this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
+            params: parameters.params,
+            api: parameters.api,
+            title: parameters.title,
+            containerApi: parameters.containerApi,
+        });
+    }
+    toJSON() {
+        return {
+            id: this.id,
+        };
+    }
+    update(params) {
+        var _a;
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update(params.params);
+    }
+    dispose() {
+        var _a;
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
+    }
+}

package/dist/esm/react.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { IFrameworkPart, DockviewIDisposable } from 'dockview';
+export interface ReactPortalStore {
+    addPortal: (portal: React.ReactPortal) => DockviewIDisposable;
+}
+export declare const ReactPartContext: React.Context<{}>;
+export declare class ReactPart<P extends object, C extends object = {}> implements IFrameworkPart {
+    private readonly parent;
+    private readonly portalStore;
+    private readonly component;
+    private readonly parameters;
+    private readonly context?;
+    private _initialProps;
+    private componentInstance?;
+    private ref?;
+    private disposed;
+    constructor(parent: HTMLElement, portalStore: ReactPortalStore, component: React.FunctionComponent<P>, parameters: P, context?: C | undefined);
+    update(props: {
+        [index: string]: any;
+    }): void;
+    private createPortal;
+    dispose(): void;
+}
+type PortalLifecycleHook = () => [
+    React.ReactPortal[],
+    (portal: React.ReactPortal) => DockviewIDisposable
+];
+/**
+ * A React Hook that returns an array of portals to be rendered by the user of this hook
+ * and a disposable function to add a portal. Calling dispose removes this portal from the
+ * portal array
+ */
+export declare const usePortalsLifecycle: PortalLifecycleHook;
+export declare function isReactComponent(component: any): boolean;
+export {};

package/dist/esm/react.js

@@ -0,0 +1,134 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { DockviewDisposable, } from 'dockview';
+/**
+ * This component is intended to interface between vanilla-js and React hence we need to be
+ * creative in how we update props.
+ * A ref of the component is exposed with an update method; which when called stores the props
+ * as a ref within this component and forcefully triggers a re-render of the component using
+ * the ref of props we just set on the renderered component as the props passed to the inner
+ * component
+ */
+const ReactComponentBridge = (props, ref) => {
+    const [, triggerRender] = React.useState(0);
+    const _props = React.useRef(props.componentProps);
+    React.useImperativeHandle(ref, () => ({
+        update: (componentProps) => {
+            _props.current = Object.assign(Object.assign({}, _props.current), componentProps);
+            /**
+             * setting a arbitrary piece of state within this component will
+             * trigger a re-render.
+             * we use this rather than updating through a prop since we can
+             * pass a ref into the vanilla-js world.
+             *
+             * Use a monotonic counter rather than `Date.now()` so two
+             * updates within the same millisecond still produce distinct
+             * state values and avoid React's bailout.
+             */
+            triggerRender((n) => n + 1);
+        },
+    }), []);
+    return React.createElement(props.component, _props.current);
+};
+ReactComponentBridge.displayName = 'DockviewReactJsBridge';
+/**
+ * Since we are storing the React.Portal references in a rendered array they
+ * require a key property like any other React element rendered in an array
+ * to prevent excessive re-rendering
+ */
+const uniquePortalKeyGenerator = (() => {
+    let value = 1;
+    return { next: () => `dockview_react_portal_key_${(value++).toString()}` };
+})();
+export const ReactPartContext = React.createContext({});
+export class ReactPart {
+    constructor(parent, portalStore, component, parameters, context) {
+        this.parent = parent;
+        this.portalStore = portalStore;
+        this.component = component;
+        this.parameters = parameters;
+        this.context = context;
+        this._initialProps = {};
+        this.disposed = false;
+        this.createPortal();
+    }
+    update(props) {
+        if (this.disposed) {
+            throw new Error('invalid operation: resource is already disposed');
+        }
+        if (!this.componentInstance) {
+            // if the component is yet to be mounted store the props
+            this._initialProps = Object.assign(Object.assign({}, this._initialProps), props);
+        }
+        else {
+            this.componentInstance.update(props);
+        }
+    }
+    createPortal() {
+        if (this.disposed) {
+            throw new Error('invalid operation: resource is already disposed');
+        }
+        if (!isReactComponent(this.component)) {
+            /**
+             * we know this isn't a React.FunctionComponent so throw an error here.
+             * if we do not intercept then React library will throw a very obsure error
+             * for the same reason... at least at this point we will emit a sensible stacktrace.
+             */
+            throw new Error('Dockview: Only React.memo(...), React.ForwardRef(...) and functional components are accepted as components');
+        }
+        const bridgeComponent = React.createElement(React.forwardRef(ReactComponentBridge), {
+            component: this
+                .component,
+            componentProps: this.parameters,
+            ref: (element) => {
+                this.componentInstance = element;
+                if (Object.keys(this._initialProps).length > 0) {
+                    this.componentInstance.update(this._initialProps);
+                    this._initialProps = {}; // don't keep a reference to the users object once no longer required
+                }
+            },
+        });
+        const node = this.context
+            ? React.createElement(ReactPartContext.Provider, { value: this.context }, bridgeComponent)
+            : bridgeComponent;
+        const portal = ReactDOM.createPortal(node, this.parent, uniquePortalKeyGenerator.next());
+        this.ref = {
+            portal,
+            disposable: this.portalStore.addPortal(portal),
+        };
+    }
+    dispose() {
+        var _a;
+        (_a = this.ref) === null || _a === void 0 ? void 0 : _a.disposable.dispose();
+        this.disposed = true;
+    }
+}
+/**
+ * A React Hook that returns an array of portals to be rendered by the user of this hook
+ * and a disposable function to add a portal. Calling dispose removes this portal from the
+ * portal array
+ */
+export const usePortalsLifecycle = () => {
+    const [portals, setPortals] = React.useState([]);
+    React.useDebugValue(`Portal count: ${portals.length}`);
+    const addPortal = React.useCallback((portal) => {
+        setPortals((existingPortals) => [...existingPortals, portal]);
+        let disposed = false;
+        return DockviewDisposable.from(() => {
+            if (disposed) {
+                throw new Error('invalid operation: resource already disposed');
+            }
+            disposed = true;
+            setPortals((existingPortals) => existingPortals.filter((p) => p !== portal));
+        });
+    }, []);
+    return [portals, addPortal];
+};
+export function isReactComponent(component) {
+    /**
+     * Yes, we could use "react-is" but that would introduce an unwanted peer dependency
+     * so for now we will check in a rather crude fashion...
+     */
+    return (typeof component === 'function' /** Functional Componnts */ ||
+        !!(component === null || component === void 0 ? void 0 : component.$$typeof) /** React.memo(...) Components */);
+}

package/dist/esm/splitview/splitview.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SplitviewApi, SplitviewPanelApi, SplitviewOptions } from 'dockview';
+import { PanelParameters } from '../types';
+export interface SplitviewReadyEvent {
+    api: SplitviewApi;
+}
+export interface ISplitviewPanelProps<T extends {
+    [index: string]: any;
+} = any> extends PanelParameters<T> {
+    api: SplitviewPanelApi;
+    containerApi: SplitviewApi;
+}
+export interface ISplitviewReactProps extends SplitviewOptions {
+    onReady: (event: SplitviewReadyEvent) => void;
+    components: Record<string, React.FunctionComponent<ISplitviewPanelProps>>;
+}
+export declare const SplitviewReact: React.ForwardRefExoticComponent<ISplitviewReactProps & React.RefAttributes<HTMLDivElement>>;