dockview 1.6.0 → 1.7.0

package/dist/esm/paneview/paneview.js

@@ -1,145 +1,98 @@
-import { Splitview, Orientation, } from '../splitview/core/splitview';
-import { CompositeDisposable } from '../lifecycle';
-import { Emitter } from '../events';
-import { addClasses, removeClasses } from '../dom';
-export class Paneview extends CompositeDisposable {
-    get onDidAddView() {
-        return this.splitview.onDidAddView;
-    }
-    get onDidRemoveView() {
-        return this.splitview.onDidRemoveView;
-    }
-    get minimumSize() {
-        return this.splitview.minimumSize;
-    }
-    get maximumSize() {
-        return this.splitview.maximumSize;
-    }
-    get orientation() {
-        return this.splitview.orientation;
-    }
-    get size() {
-        return this.splitview.size;
-    }
-    get orthogonalSize() {
-        return this.splitview.orthogonalSize;
-    }
-    constructor(container, options) {
-        var _a;
-        super();
-        this.paneItems = [];
-        this.skipAnimation = false;
-        this._onDidChange = new Emitter();
-        this.onDidChange = this._onDidChange.event;
-        this._orientation = (_a = options.orientation) !== null && _a !== void 0 ? _a : Orientation.VERTICAL;
-        this.element = document.createElement('div');
-        this.element.className = 'pane-container';
-        container.appendChild(this.element);
-        this.splitview = new Splitview(this.element, {
-            orientation: this._orientation,
-            proportionalLayout: false,
-            descriptor: options.descriptor,
-        });
-        // if we've added views from the descriptor we need to
-        // add the panes to our Pane array and setup animation
-        this.getPanes().forEach((pane) => {
-            const disposable = new CompositeDisposable(pane.onDidChangeExpansionState(() => {
-                this.setupAnimation();
-                this._onDidChange.fire(undefined);
-            }));
-            const paneItem = {
-                pane,
-                disposable: {
-                    dispose: () => {
-                        disposable.dispose();
-                    },
-                },
+import * as React from 'react';
+import { PaneviewComponent, PaneviewApi, watchElementResize, } from 'dockview-core';
+import { usePortalsLifecycle } from '../react';
+import { PanePanelSection } from './view';
+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 () => {
+                //
             };
-            this.paneItems.push(paneItem);
-            pane.orthogonalSize = this.splitview.orthogonalSize;
+        }
+        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);
         });
-        this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => {
-            this._onDidChange.fire(undefined);
-        }), this.splitview.onDidAddView(() => {
-            this._onDidChange.fire();
-        }), this.splitview.onDidRemoveView(() => {
-            this._onDidChange.fire();
-        }));
-    }
-    addPane(pane, size, index = this.splitview.length, skipLayout = false) {
-        const disposable = pane.onDidChangeExpansionState(() => {
-            this.setupAnimation();
-            this._onDidChange.fire(undefined);
+        return () => {
+            watcher.dispose();
+        };
+    }, [props.disableAutoResizing]);
+    React.useEffect(() => {
+        const createComponent = (id, _componentId, component) => new PanePanelSection(id, component, {
+            addPortal,
         });
-        const paneItem = {
-            pane,
-            disposable: {
-                dispose: () => {
-                    disposable.dispose();
+        const paneview = new PaneviewComponent(domRef.current, {
+            frameworkComponents: props.components,
+            components: {},
+            headerComponents: {},
+            disableDnd: props.disableDnd,
+            headerframeworkComponents: props.headerComponents,
+            frameworkWrapper: {
+                header: {
+                    createComponent,
+                },
+                body: {
+                    createComponent,
                 },
             },
-        };
-        this.paneItems.splice(index, 0, paneItem);
-        pane.orthogonalSize = this.splitview.orthogonalSize;
-        this.splitview.addView(pane, size, index, skipLayout);
-    }
-    getViewSize(index) {
-        return this.splitview.getViewSize(index);
-    }
-    getPanes() {
-        return this.splitview.getViews();
-    }
-    removePane(index, options = { skipDispose: false }) {
-        const paneItem = this.paneItems.splice(index, 1)[0];
-        this.splitview.removeView(index);
-        if (!options.skipDispose) {
-            paneItem.disposable.dispose();
-            paneItem.pane.dispose();
+            showDndOverlay: props.showDndOverlay,
+        });
+        const api = new PaneviewApi(paneview);
+        const { clientWidth, clientHeight } = domRef.current;
+        paneview.layout(clientWidth, clientHeight);
+        if (props.onReady) {
+            props.onReady({ api });
         }
-        return paneItem;
-    }
-    moveView(from, to) {
-        if (from === to) {
+        paneviewRef.current = paneview;
+        return () => {
+            paneview.dispose();
+        };
+    }, []);
+    React.useEffect(() => {
+        if (!paneviewRef.current) {
             return;
         }
-        const view = this.removePane(from, { skipDispose: true });
-        this.skipAnimation = true;
-        try {
-            this.addPane(view.pane, view.pane.size, to, false);
-        }
-        finally {
-            this.skipAnimation = false;
-        }
-    }
-    layout(size, orthogonalSize) {
-        this.splitview.layout(size, orthogonalSize);
-    }
-    setupAnimation() {
-        if (this.skipAnimation) {
+        paneviewRef.current.updateOptions({
+            frameworkComponents: props.components,
+        });
+    }, [props.components]);
+    React.useEffect(() => {
+        if (!paneviewRef.current) {
             return;
         }
-        if (this.animationTimer) {
-            clearTimeout(this.animationTimer);
-            this.animationTimer = undefined;
+        paneviewRef.current.updateOptions({
+            headerframeworkComponents: props.headerComponents,
+        });
+    }, [props.headerComponents]);
+    React.useEffect(() => {
+        if (!paneviewRef.current) {
+            return () => {
+                //
+            };
         }
-        addClasses(this.element, 'animated');
-        this.animationTimer = setTimeout(() => {
-            this.animationTimer = undefined;
-            removeClasses(this.element, 'animated');
-        }, 200);
-    }
-    dispose() {
-        super.dispose();
-        if (this.animationTimer) {
-            clearTimeout(this.animationTimer);
-            this.animationTimer = undefined;
+        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]);
+    React.useEffect(() => {
+        if (!paneviewRef.current) {
+            return;
         }
-        this.paneItems.forEach((paneItem) => {
-            paneItem.disposable.dispose();
-            paneItem.pane.dispose();
+        paneviewRef.current.updateOptions({
+            showDndOverlay: props.showDndOverlay,
         });
-        this.paneItems = [];
-        this.splitview.dispose();
-        this.element.remove();
-    }
-}
+    }, [props.showDndOverlay]);
+    return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+});
+PaneviewReact.displayName = 'PaneviewComponent';

package/dist/esm/{react/paneview → paneview}/view.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { PanelUpdateEvent } from '../../panel/types';
-import { IPaneBodyPart, PanePanelComponentInitParameter } from '../../paneview/paneviewPanel';
+import { PanelUpdateEvent, IPaneBodyPart, PanePanelComponentInitParameter } from 'dockview-core';
 import { ReactPortalStore } from '../react';
 import { IPaneviewPanelProps } from './paneview';
 export declare class PanePanelSection implements IPaneBodyPart {

package/dist/{cjs/react → esm}/react.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { IDisposable } from '../lifecycle';
-import { IFrameworkPart } from '../panel/types';
+import { IFrameworkPart, IDockviewDisposable } from 'dockview-core';
 export interface ReactPortalStore {
-    addPortal: (portal: React.ReactPortal) => IDisposable;
+    addPortal: (portal: React.ReactPortal) => IDockviewDisposable;
 }
 export declare const ReactPartContext: React.Context<{}>;
 export declare class ReactPart<P extends object, C extends object = {}> implements IFrameworkPart {
@@ -24,7 +23,7 @@ export declare class ReactPart<P extends object, C extends object = {}> implemen
 }
 type PortalLifecycleHook = () => [
     React.ReactPortal[],
-    (portal: React.ReactPortal) => IDisposable
+    (portal: React.ReactPortal) => IDockviewDisposable
 ];
 /**
  * A React Hook that returns an array of portals to be rendered by the user of this hook

package/dist/esm/{react/react.js → react.js}

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { sequentialNumberGenerator } from '../math';
 /**
  * This component is intended to interface between vanilla-js and React hence we need to be
  * creative in how we update props.
@@ -32,7 +31,10 @@ ReactComponentBridge.displayName = 'DockviewReactJsBridge';
  * require a key property like any other React element rendered in an array
  * to prevent excessive re-rendering
  */
-const uniquePortalKeyGenerator = sequentialNumberGenerator();
+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) {

package/dist/{cjs/react → esm}/splitview/splitview.d.ts

@@ -1,7 +1,5 @@
 import * as React from 'react';
-import { SplitviewApi } from '../../api/component.api';
-import { SplitviewPanelApi } from '../../api/splitviewPanelApi';
-import { Orientation } from '../../splitview/core/splitview';
+import { SplitviewApi, SplitviewPanelApi, Orientation } from 'dockview-core';
 import { PanelCollection, PanelParameters } from '../types';
 export interface SplitviewReadyEvent {
     api: SplitviewApi;

package/dist/esm/{react/splitview → splitview}/splitview.js

@@ -1,10 +1,7 @@
 import * as React from 'react';
-import { SplitviewApi } from '../../api/component.api';
-import { SplitviewComponent, } from '../../splitview/splitviewComponent';
-import { Orientation } from '../../splitview/core/splitview';
+import { SplitviewApi, SplitviewComponent, Orientation, watchElementResize, } from 'dockview-core';
 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();

package/dist/{cjs/react → esm}/splitview/view.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { SplitviewPanel } from '../../splitview/splitviewPanel';
+import { SplitviewPanel } from 'dockview-core';
 import { ReactPart, ReactPortalStore } from '../react';
 import { ISplitviewPanelProps } from './splitview';
 export declare class ReactPanelView extends SplitviewPanel {
     private readonly reactComponent;
     private readonly reactPortalStore;
     constructor(id: string, component: string, reactComponent: React.FunctionComponent<ISplitviewPanelProps>, reactPortalStore: ReactPortalStore);
-    getComponent(): ReactPart<ISplitviewPanelProps<any>, {}>;
+    getComponent(): ReactPart<ISplitviewPanelProps>;
 }

package/dist/esm/{react/splitview → splitview}/view.js

@@ -1,5 +1,4 @@
-import { SplitviewApi } from '../../api/component.api';
-import { SplitviewPanel } from '../../splitview/splitviewPanel';
+import { SplitviewApi, SplitviewPanel, } from 'dockview-core';
 import { ReactPart } from '../react';
 export class ReactPanelView extends SplitviewPanel {
     constructor(id, component, reactComponent, reactPortalStore) {

package/dist/esm/svg.d.ts

@@ -1,3 +1,3 @@
-export declare const createCloseButton: () => SVGSVGElement;
-export declare const createExpandMoreButton: () => SVGSVGElement;
-export declare const createChevronRightButton: () => SVGSVGElement;
+/// <reference types="react" />
+export declare const CloseButton: () => JSX.Element;
+export declare const ExpandMore: () => JSX.Element;

package/dist/esm/svg.js

@@ -1,31 +1,7 @@
-const createSvgElementFromPath = (params) => {
-    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    svg.setAttributeNS(null, 'height', params.height);
-    svg.setAttributeNS(null, 'width', params.width);
-    svg.setAttributeNS(null, 'viewBox', params.viewbox);
-    svg.setAttributeNS(null, 'aria-hidden', 'false');
-    svg.setAttributeNS(null, 'focusable', 'false');
-    svg.classList.add('dockview-svg');
-    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-    path.setAttributeNS(null, 'd', params.path);
-    svg.appendChild(path);
-    return svg;
+import * as React from 'react';
+export const CloseButton = () => (React.createElement("svg", { height: "11", width: "11", viewBox: "0 0 28 28", "aria-hidden": 'false', focusable: false, className: "dockview-svg" },
+    React.createElement("path", { d: "M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z" })));
+export const ExpandMore = () => {
+    return (React.createElement("svg", { width: "11", height: "11", viewBox: "0 0 24 15", "aria-hidden": 'false', focusable: false, className: "dockview-svg" },
+        React.createElement("path", { d: "M12 14.15L0 2.15L2.15 0L12 9.9L21.85 0.0499992L24 2.2L12 14.15Z" })));
 };
-export const createCloseButton = () => createSvgElementFromPath({
-    width: '11',
-    height: '11',
-    viewbox: '0 0 28 28',
-    path: 'M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z',
-});
-export const createExpandMoreButton = () => createSvgElementFromPath({
-    width: '11',
-    height: '11',
-    viewbox: '0 0 24 15',
-    path: 'M12 14.15L0 2.15L2.15 0L12 9.9L21.85 0.0499992L24 2.2L12 14.15Z',
-});
-export const createChevronRightButton = () => createSvgElementFromPath({
-    width: '11',
-    height: '11',
-    viewbox: '0 0 15 25',
-    path: 'M2.15 24.1L0 21.95L9.9 12.05L0 2.15L2.15 0L14.2 12.05L2.15 24.1Z',
-});

package/dist/esm/types.d.ts

@@ -1,8 +1,7 @@
-export interface Constructor<T> {
-    new (): T;
+import * as React from 'react';
+export interface PanelCollection<T extends object> {
+    [name: string]: React.FunctionComponent<T>;
 }
-export interface FrameworkFactory<T> {
-    createComponent: (id: string, componentId: string, component: any) => T;
+export interface PanelParameters<T extends {} = Record<string, any>> {
+    params: T;
 }
-export type FunctionOrValue<T> = (() => T) | T;
-export declare function isBooleanValue(value: any): value is boolean;

package/dist/esm/types.js

@@ -1,3 +1 @@
-export function isBooleanValue(value) {
-    return typeof value === 'boolean';
-}
+export {};