dockview 2.1.4 → 3.0.0

package/dist/cjs/dockview/dockview.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { DockviewWillDropEvent, DockviewDidDropEvent, IWatermarkPanelProps, IDockviewHeaderActionsProps, IDockviewPanelHeaderProps, IDockviewPanelProps, DockviewOptions, DockviewReadyEvent } from 'dockview-core';
 export interface IDockviewReactProps extends DockviewOptions {
-    className?: string;
     tabComponents?: Record<string, React.FunctionComponent<IDockviewPanelHeaderProps>>;
     components: Record<string, React.FunctionComponent<IDockviewPanelProps>>;
     watermarkComponent?: React.FunctionComponent<IWatermarkPanelProps>;

package/dist/cjs/dockview/dockview.js

@@ -47,7 +47,7 @@ function createGroupControlElement(component, store) {
 }
 var DEFAULT_REACT_TAB = 'props.defaultTabComponent';
 function extractCoreOptions(props) {
-    var coreOptions = dockview_core_1.PROPERTY_KEYS.reduce(function (obj, key) {
+    var coreOptions = dockview_core_1.PROPERTY_KEYS_DOCKVIEW.reduce(function (obj, key) {
         if (key in props) {
             obj[key] = props[key];
         }
@@ -63,7 +63,7 @@ exports.DockviewReact = react_1.default.forwardRef(function (props, ref) {
     var prevProps = react_1.default.useRef({});
     react_1.default.useEffect(function () {
         var changes = {};
-        dockview_core_1.PROPERTY_KEYS.forEach(function (propKey) {
+        dockview_core_1.PROPERTY_KEYS_DOCKVIEW.forEach(function (propKey) {
             var key = propKey;
             var propValue = props[key];
             if (key in props && propValue !== prevProps.current[key]) {
@@ -77,7 +77,7 @@ exports.DockviewReact = react_1.default.forwardRef(function (props, ref) {
             // not yet fully initialized
         }
         prevProps.current = props;
-    }, dockview_core_1.PROPERTY_KEYS.map(function (key) { return props[key]; }));
+    }, dockview_core_1.PROPERTY_KEYS_DOCKVIEW.map(function (key) { return props[key]; }));
     react_1.default.useEffect(function () {
         var _a;
         if (!domRef.current) {

package/dist/cjs/dockview/headerActionsRenderer.js

@@ -10,7 +10,7 @@ var ReactHeaderActionsRendererPart = /** @class */ (function () {
         this._group = _group;
         this.mutableDisposable = new dockview_core_1.DockviewMutableDisposable();
         this._element = document.createElement('div');
-        this._element.className = 'dockview-react-part';
+        this._element.className = 'dv-react-part';
         this._element.style.height = '100%';
         this._element.style.width = '100%';
     }

package/dist/cjs/dockview/reactContentPart.js

@@ -13,7 +13,7 @@ var ReactPanelContentPart = /** @class */ (function () {
         this._onDidBlur = new dockview_core_1.DockviewEmitter();
         this.onDidBlur = this._onDidBlur.event;
         this._element = document.createElement('div');
-        this._element.className = 'dockview-react-part';
+        this._element.className = 'dv-react-part';
         this._element.style.height = '100%';
         this._element.style.width = '100%';
     }

package/dist/cjs/dockview/reactHeaderPart.js

@@ -8,7 +8,7 @@ var ReactPanelHeaderPart = /** @class */ (function () {
         this.component = component;
         this.reactPortalStore = reactPortalStore;
         this._element = document.createElement('div');
-        this._element.className = 'dockview-react-part';
+        this._element.className = 'dv-react-part';
         this._element.style.height = '100%';
         this._element.style.width = '100%';
     }

package/dist/cjs/dockview/reactWatermarkPart.js

@@ -8,7 +8,7 @@ var ReactWatermarkPart = /** @class */ (function () {
         this.component = component;
         this.reactPortalStore = reactPortalStore;
         this._element = document.createElement('div');
-        this._element.className = 'dockview-react-part';
+        this._element.className = 'dv-react-part';
         this._element.style.height = '100%';
         this._element.style.width = '100%';
     }

package/dist/cjs/gridview/gridview.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { GridviewPanelApi, Orientation, GridviewApi } from 'dockview-core';
+import { GridviewPanelApi, GridviewApi, GridviewOptions } from 'dockview-core';
 import { PanelParameters } from '../types';
 export interface GridviewReadyEvent {
     api: GridviewApi;
@@ -10,13 +10,8 @@ export interface IGridviewPanelProps<T extends {
     api: GridviewPanelApi;
     containerApi: GridviewApi;
 }
-export interface IGridviewReactProps {
-    orientation?: Orientation;
+export interface IGridviewReactProps extends GridviewOptions {
     onReady: (event: GridviewReadyEvent) => void;
     components: Record<string, React.FunctionComponent<IGridviewPanelProps>>;
-    hideBorders?: boolean;
-    className?: string;
-    proportionalLayout?: boolean;
-    disableAutoResizing?: boolean;
 }
 export declare const GridviewReact: React.ForwardRefExoticComponent<IGridviewReactProps & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/gridview/gridview.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -24,37 +35,51 @@ var react_1 = __importDefault(require("react"));
 var dockview_core_1 = require("dockview-core");
 var view_1 = require("./view");
 var react_2 = require("../react");
+function extractCoreOptions(props) {
+    var coreOptions = dockview_core_1.PROPERTY_KEYS_GRIDVIEW.reduce(function (obj, key) {
+        if (key in props) {
+            obj[key] = props[key];
+        }
+        return obj;
+    }, {});
+    return coreOptions;
+}
 exports.GridviewReact = react_1.default.forwardRef(function (props, ref) {
     var domRef = react_1.default.useRef(null);
     var gridviewRef = react_1.default.useRef();
     var _a = __read((0, react_2.usePortalsLifecycle)(), 2), portals = _a[0], addPortal = _a[1];
     react_1.default.useImperativeHandle(ref, function () { return domRef.current; }, []);
+    var prevProps = react_1.default.useRef({});
+    react_1.default.useEffect(function () {
+        var changes = {};
+        dockview_core_1.PROPERTY_KEYS_GRIDVIEW.forEach(function (propKey) {
+            var key = propKey;
+            var 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;
+    }, dockview_core_1.PROPERTY_KEYS_GRIDVIEW.map(function (key) { return props[key]; }));
     react_1.default.useEffect(function () {
-        var _a;
         if (!domRef.current) {
             return function () {
                 // noop
             };
         }
-        var api = (0, dockview_core_1.createGridview)(domRef.current, {
-            disableAutoResizing: props.disableAutoResizing,
-            proportionalLayout: typeof props.proportionalLayout === 'boolean'
-                ? props.proportionalLayout
-                : true,
-            orientation: (_a = props.orientation) !== null && _a !== void 0 ? _a : dockview_core_1.Orientation.HORIZONTAL,
-            frameworkComponents: props.components,
-            frameworkComponentFactory: {
-                createComponent: function (id, componentId, component) {
-                    return new view_1.ReactGridPanelView(id, componentId, component, {
-                        addPortal: addPortal,
-                    });
-                },
+        var frameworkOptions = {
+            createComponent: function (options) {
+                return new view_1.ReactGridPanelView(options.id, options.name, props.components[options.name], { addPortal: addPortal });
             },
-            styles: props.hideBorders
-                ? { separatorBorder: 'transparent' }
-                : undefined,
-        });
-        var _b = domRef.current, clientWidth = _b.clientWidth, clientHeight = _b.clientHeight;
+        };
+        var api = (0, dockview_core_1.createGridview)(domRef.current, __assign(__assign({}, extractCoreOptions(props)), frameworkOptions));
+        var _a = domRef.current, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight;
         api.layout(clientWidth, clientHeight);
         if (props.onReady) {
             props.onReady({ api: api });
@@ -69,7 +94,9 @@ exports.GridviewReact = react_1.default.forwardRef(function (props, ref) {
             return;
         }
         gridviewRef.current.updateOptions({
-            frameworkComponents: props.components,
+            createComponent: function (options) {
+                return new view_1.ReactGridPanelView(options.id, options.name, props.components[options.name], { addPortal: addPortal });
+            },
         });
     }, [props.components]);
     return (react_1.default.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));

package/dist/cjs/paneview/paneview.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PaneviewPanelApi, PaneviewDndOverlayEvent, PaneviewApi, PaneviewDropEvent } from 'dockview-core';
+import { PaneviewPanelApi, PaneviewApi, PaneviewDropEvent, PaneviewOptions } from 'dockview-core';
 import { PanelParameters } from '../types';
 export interface PaneviewReadyEvent {
     api: PaneviewApi;
@@ -11,14 +11,10 @@ export interface IPaneviewPanelProps<T extends {
     containerApi: PaneviewApi;
     title: string;
 }
-export interface IPaneviewReactProps {
+export interface IPaneviewReactProps extends PaneviewOptions {
     onReady: (event: PaneviewReadyEvent) => void;
     components: Record<string, React.FunctionComponent<IPaneviewPanelProps>>;
     headerComponents?: Record<string, React.FunctionComponent<IPaneviewPanelProps>>;
-    className?: string;
-    disableAutoResizing?: boolean;
-    disableDnd?: boolean;
-    showDndOverlay?: (event: PaneviewDndOverlayEvent) => boolean;
     onDidDrop?(event: PaneviewDropEvent): void;
 }
 export declare const PaneviewReact: React.ForwardRefExoticComponent<IPaneviewReactProps & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/paneview/paneview.js

@@ -35,35 +35,56 @@ var react_1 = __importDefault(require("react"));
 var dockview_core_1 = require("dockview-core");
 var react_2 = require("../react");
 var view_1 = require("./view");
+function extractCoreOptions(props) {
+    var coreOptions = dockview_core_1.PROPERTY_KEYS_PANEVIEW.reduce(function (obj, key) {
+        if (key in props) {
+            obj[key] = props[key];
+        }
+        return obj;
+    }, {});
+    return coreOptions;
+}
 exports.PaneviewReact = react_1.default.forwardRef(function (props, ref) {
     var domRef = react_1.default.useRef(null);
     var paneviewRef = react_1.default.useRef();
     var _a = __read((0, react_2.usePortalsLifecycle)(), 2), portals = _a[0], addPortal = _a[1];
     react_1.default.useImperativeHandle(ref, function () { return domRef.current; }, []);
+    var prevProps = react_1.default.useRef({});
     react_1.default.useEffect(function () {
-        var createComponent = function (id, _componentId, component) {
-            return new view_1.PanePanelSection(id, component, {
-                addPortal: addPortal,
-            });
-        };
-        var api = (0, dockview_core_1.createPaneview)(domRef.current, {
-            disableAutoResizing: props.disableAutoResizing,
-            frameworkComponents: props.components,
-            components: {},
-            headerComponents: {},
-            disableDnd: props.disableDnd,
-            headerframeworkComponents: props.headerComponents,
-            frameworkWrapper: {
-                header: {
-                    createComponent: createComponent,
-                },
-                body: {
-                    createComponent: createComponent,
-                },
-            },
-            showDndOverlay: props.showDndOverlay,
+        var changes = {};
+        dockview_core_1.PROPERTY_KEYS_PANEVIEW.forEach(function (propKey) {
+            var key = propKey;
+            var propValue = props[key];
+            if (key in props && propValue !== prevProps.current[key]) {
+                changes[key] = propValue;
+            }
         });
-        var _a = domRef.current, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight;
+        if (paneviewRef.current) {
+            paneviewRef.current.updateOptions(changes);
+        }
+        else {
+            // not yet fully initialized
+        }
+        prevProps.current = props;
+    }, dockview_core_1.PROPERTY_KEYS_PANEVIEW.map(function (key) { return props[key]; }));
+    react_1.default.useEffect(function () {
+        var _a;
+        if (!domRef.current) {
+            return function () {
+                // noop
+            };
+        }
+        var headerComponents = (_a = props.headerComponents) !== null && _a !== void 0 ? _a : {};
+        var frameworkOptions = {
+            createComponent: function (options) {
+                return new view_1.PanePanelSection(options.id, props.components[options.name], { addPortal: addPortal });
+            },
+            createHeaderComponent: function (options) {
+                return new view_1.PanePanelSection(options.id, headerComponents[options.name], { addPortal: addPortal });
+            },
+        };
+        var api = (0, dockview_core_1.createPaneview)(domRef.current, __assign(__assign({}, extractCoreOptions(props)), frameworkOptions));
+        var _b = domRef.current, clientWidth = _b.clientWidth, clientHeight = _b.clientHeight;
         api.layout(clientWidth, clientHeight);
         if (props.onReady) {
             props.onReady({ api: api });
@@ -78,41 +99,38 @@ exports.PaneviewReact = react_1.default.forwardRef(function (props, ref) {
             return;
         }
         paneviewRef.current.updateOptions({
-            frameworkComponents: props.components,
+            createComponent: function (options) {
+                return new view_1.PanePanelSection(options.id, props.components[options.name], { addPortal: addPortal });
+            },
         });
     }, [props.components]);
     react_1.default.useEffect(function () {
+        var _a;
         if (!paneviewRef.current) {
             return;
         }
+        var headerComponents = (_a = props.headerComponents) !== null && _a !== void 0 ? _a : {};
         paneviewRef.current.updateOptions({
-            headerframeworkComponents: props.headerComponents,
+            createHeaderComponent: function (options) {
+                return new view_1.PanePanelSection(options.id, headerComponents[options.name], { addPortal: addPortal });
+            },
         });
     }, [props.headerComponents]);
     react_1.default.useEffect(function () {
         if (!paneviewRef.current) {
             return function () {
-                //
+                // noop
             };
         }
-        var api = paneviewRef.current;
-        var disposable = api.onDidDrop(function (event) {
+        var disposable = paneviewRef.current.onDidDrop(function (event) {
             if (props.onDidDrop) {
-                props.onDidDrop(__assign(__assign({}, event), { api: api }));
+                props.onDidDrop(event);
             }
         });
         return function () {
             disposable.dispose();
         };
     }, [props.onDidDrop]);
-    react_1.default.useEffect(function () {
-        if (!paneviewRef.current) {
-            return;
-        }
-        paneviewRef.current.updateOptions({
-            showDndOverlay: props.showDndOverlay,
-        });
-    }, [props.showDndOverlay]);
     return (react_1.default.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
 });
 exports.PaneviewReact.displayName = 'PaneviewComponent';

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { PanelUpdateEvent, IPaneBodyPart, PanePanelComponentInitParameter } from 'dockview-core';
+import { PanelUpdateEvent, IPanePart, PanePanelComponentInitParameter } from 'dockview-core';
 import { ReactPortalStore } from '../react';
 import { IPaneviewPanelProps } from './paneview';
-export declare class PanePanelSection implements IPaneBodyPart {
+export declare class PanePanelSection implements IPanePart {
     readonly id: string;
     private readonly component;
     private readonly reactPortalStore;

package/dist/cjs/splitview/splitview.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SplitviewApi, SplitviewPanelApi, Orientation } from 'dockview-core';
+import { SplitviewApi, SplitviewPanelApi, SplitviewOptions } from 'dockview-core';
 import { PanelParameters } from '../types';
 export interface SplitviewReadyEvent {
     api: SplitviewApi;
@@ -10,13 +10,8 @@ export interface ISplitviewPanelProps<T extends {
     api: SplitviewPanelApi;
     containerApi: SplitviewApi;
 }
-export interface ISplitviewReactProps {
-    orientation?: Orientation;
+export interface ISplitviewReactProps extends SplitviewOptions {
     onReady: (event: SplitviewReadyEvent) => void;
     components: Record<string, React.FunctionComponent<ISplitviewPanelProps>>;
-    proportionalLayout?: boolean;
-    hideBorders?: boolean;
-    className?: string;
-    disableAutoResizing?: boolean;
 }
 export declare const SplitviewReact: React.ForwardRefExoticComponent<ISplitviewReactProps & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/splitview/splitview.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -24,32 +35,51 @@ var react_1 = __importDefault(require("react"));
 var dockview_core_1 = require("dockview-core");
 var react_2 = require("../react");
 var view_1 = require("./view");
+function extractCoreOptions(props) {
+    var coreOptions = dockview_core_1.PROPERTY_KEYS_SPLITVIEW.reduce(function (obj, key) {
+        if (key in props) {
+            obj[key] = props[key];
+        }
+        return obj;
+    }, {});
+    return coreOptions;
+}
 exports.SplitviewReact = react_1.default.forwardRef(function (props, ref) {
     var domRef = react_1.default.useRef(null);
     var splitviewRef = react_1.default.useRef();
     var _a = __read((0, react_2.usePortalsLifecycle)(), 2), portals = _a[0], addPortal = _a[1];
     react_1.default.useImperativeHandle(ref, function () { return domRef.current; }, []);
+    var prevProps = react_1.default.useRef({});
     react_1.default.useEffect(function () {
-        var _a;
-        var api = (0, dockview_core_1.createSplitview)(domRef.current, {
-            disableAutoResizing: props.disableAutoResizing,
-            orientation: (_a = props.orientation) !== null && _a !== void 0 ? _a : dockview_core_1.Orientation.HORIZONTAL,
-            frameworkComponents: props.components,
-            frameworkWrapper: {
-                createComponent: function (id, componentId, component) {
-                    return new view_1.ReactPanelView(id, componentId, component, {
-                        addPortal: addPortal,
-                    });
-                },
-            },
-            proportionalLayout: typeof props.proportionalLayout === 'boolean'
-                ? props.proportionalLayout
-                : true,
-            styles: props.hideBorders
-                ? { separatorBorder: 'transparent' }
-                : undefined,
+        var changes = {};
+        dockview_core_1.PROPERTY_KEYS_SPLITVIEW.forEach(function (propKey) {
+            var key = propKey;
+            var propValue = props[key];
+            if (key in props && propValue !== prevProps.current[key]) {
+                changes[key] = propValue;
+            }
         });
-        var _b = domRef.current, clientWidth = _b.clientWidth, clientHeight = _b.clientHeight;
+        if (splitviewRef.current) {
+            splitviewRef.current.updateOptions(changes);
+        }
+        else {
+            // not yet fully initialized
+        }
+        prevProps.current = props;
+    }, dockview_core_1.PROPERTY_KEYS_SPLITVIEW.map(function (key) { return props[key]; }));
+    react_1.default.useEffect(function () {
+        if (!domRef.current) {
+            return function () {
+                // noop
+            };
+        }
+        var frameworkOptions = {
+            createComponent: function (options) {
+                return new view_1.ReactPanelView(options.id, options.name, props.components[options.name], { addPortal: addPortal });
+            },
+        };
+        var api = (0, dockview_core_1.createSplitview)(domRef.current, __assign(__assign({}, extractCoreOptions(props)), frameworkOptions));
+        var _a = domRef.current, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight;
         api.layout(clientWidth, clientHeight);
         if (props.onReady) {
             props.onReady({ api: api });
@@ -64,7 +94,9 @@ exports.SplitviewReact = react_1.default.forwardRef(function (props, ref) {
             return;
         }
         splitviewRef.current.updateOptions({
-            frameworkComponents: props.components,
+            createComponent: function (options) {
+                return new view_1.ReactPanelView(options.id, options.name, props.components[options.name], { addPortal: addPortal });
+            },
         });
     }, [props.components]);
     return (react_1.default.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));