dockview-react 6.6.0 → 7.0.2

package/dist/cjs/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/cjs/react.js

@@ -0,0 +1,183 @@
+"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;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePortalsLifecycle = exports.ReactPart = exports.ReactPartContext = void 0;
+exports.isReactComponent = isReactComponent;
+var react_1 = __importDefault(require("react"));
+var react_dom_1 = __importDefault(require("react-dom"));
+var dockview_1 = require("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
+ */
+var ReactComponentBridge = function (props, ref) {
+    var _a = __read(react_1.default.useState(0), 2), triggerRender = _a[1];
+    var _props = react_1.default.useRef(props.componentProps);
+    react_1.default.useImperativeHandle(ref, function () { return ({
+        update: function (componentProps) {
+            _props.current = __assign(__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(function (n) { return n + 1; });
+        },
+    }); }, []);
+    return react_1.default.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
+ */
+var uniquePortalKeyGenerator = (function () {
+    var value = 1;
+    return { next: function () { return "dockview_react_portal_key_".concat((value++).toString()); } };
+})();
+exports.ReactPartContext = react_1.default.createContext({});
+var ReactPart = /** @class */ (function () {
+    function ReactPart(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();
+    }
+    ReactPart.prototype.update = function (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 = __assign(__assign({}, this._initialProps), props);
+        }
+        else {
+            this.componentInstance.update(props);
+        }
+    };
+    ReactPart.prototype.createPortal = function () {
+        var _this = this;
+        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');
+        }
+        var bridgeComponent = react_1.default.createElement(react_1.default.forwardRef(ReactComponentBridge), {
+            component: this
+                .component,
+            componentProps: this.parameters,
+            ref: function (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
+                }
+            },
+        });
+        var node = this.context
+            ? react_1.default.createElement(exports.ReactPartContext.Provider, { value: this.context }, bridgeComponent)
+            : bridgeComponent;
+        var portal = react_dom_1.default.createPortal(node, this.parent, uniquePortalKeyGenerator.next());
+        this.ref = {
+            portal: portal,
+            disposable: this.portalStore.addPortal(portal),
+        };
+    };
+    ReactPart.prototype.dispose = function () {
+        var _a;
+        (_a = this.ref) === null || _a === void 0 ? void 0 : _a.disposable.dispose();
+        this.disposed = true;
+    };
+    return ReactPart;
+}());
+exports.ReactPart = ReactPart;
+/**
+ * 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
+ */
+var usePortalsLifecycle = function () {
+    var _a = __read(react_1.default.useState([]), 2), portals = _a[0], setPortals = _a[1];
+    react_1.default.useDebugValue("Portal count: ".concat(portals.length));
+    var addPortal = react_1.default.useCallback(function (portal) {
+        setPortals(function (existingPortals) { return __spreadArray(__spreadArray([], __read(existingPortals), false), [portal], false); });
+        var disposed = false;
+        return dockview_1.DockviewDisposable.from(function () {
+            if (disposed) {
+                throw new Error('invalid operation: resource already disposed');
+            }
+            disposed = true;
+            setPortals(function (existingPortals) {
+                return existingPortals.filter(function (p) { return p !== portal; });
+            });
+        });
+    }, []);
+    return [portals, addPortal];
+};
+exports.usePortalsLifecycle = usePortalsLifecycle;
+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/cjs/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>>;

package/dist/cjs/splitview/splitview.js

@@ -0,0 +1,105 @@
+"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;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SplitviewReact = void 0;
+var react_1 = __importDefault(require("react"));
+var dockview_1 = require("dockview");
+var react_2 = require("../react");
+var view_1 = require("./view");
+function extractCoreOptions(props) {
+    var coreOptions = dockview_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(undefined);
+    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_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;
+            }
+        });
+        if (splitviewRef.current) {
+            splitviewRef.current.updateOptions(changes);
+        }
+        else {
+            // not yet fully initialized
+        }
+        prevProps.current = props;
+    }, dockview_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_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 });
+        }
+        splitviewRef.current = api;
+        return function () {
+            splitviewRef.current = undefined;
+            api.dispose();
+        };
+    }, []);
+    react_1.default.useEffect(function () {
+        if (!splitviewRef.current) {
+            return;
+        }
+        splitviewRef.current.updateOptions({
+            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", { style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+});
+exports.SplitviewReact.displayName = 'SplitviewComponent';

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

@@ -0,0 +1,9 @@
+import { SplitviewPanel } from 'dockview';
+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>;
+}

package/dist/cjs/splitview/view.js

@@ -0,0 +1,39 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactPanelView = void 0;
+var dockview_1 = require("dockview");
+var react_1 = require("../react");
+var ReactPanelView = /** @class */ (function (_super) {
+    __extends(ReactPanelView, _super);
+    function ReactPanelView(id, component, reactComponent, reactPortalStore) {
+        var _this = _super.call(this, id, component) || this;
+        _this.reactComponent = reactComponent;
+        _this.reactPortalStore = reactPortalStore;
+        return _this;
+    }
+    ReactPanelView.prototype.getComponent = function () {
+        var _a, _b;
+        return new react_1.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,
+            containerApi: new dockview_1.SplitviewApi(this._params.accessor),
+        });
+    };
+    return ReactPanelView;
+}(dockview_1.SplitviewPanel));
+exports.ReactPanelView = ReactPanelView;

package/dist/cjs/svg.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const CloseButton: () => React.JSX.Element;
+export declare const ExpandMore: () => React.JSX.Element;

package/dist/cjs/svg.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpandMore = exports.CloseButton = void 0;
+var react_1 = __importDefault(require("react"));
+var CloseButton = function () { return (react_1.default.createElement("svg", { height: "11", width: "11", viewBox: "0 0 28 28", "aria-hidden": 'false', focusable: false, className: "dv-svg" },
+    react_1.default.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" }))); };
+exports.CloseButton = CloseButton;
+var ExpandMore = function () {
+    return (react_1.default.createElement("svg", { width: "11", height: "11", viewBox: "0 0 24 15", "aria-hidden": 'false', focusable: false, className: "dv-svg" },
+        react_1.default.createElement("path", { d: "M12 14.15L0 2.15L2.15 0L12 9.9L21.85 0.0499992L24 2.2L12 14.15Z" })));
+};
+exports.ExpandMore = ExpandMore;

package/dist/cjs/types.d.ts

@@ -0,0 +1,4 @@
+import { Parameters } from 'dockview';
+export interface PanelParameters<T extends {} = Parameters> {
+    params: T;
+}

package/dist/cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });