dockview-react 6.6.0 → 7.0.2

package/dist/esm/splitview/splitview.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { createSplitview, PROPERTY_KEYS_SPLITVIEW, } from 'dockview';
+import { usePortalsLifecycle } from '../react';
+import { ReactPanelView } from './view';
+function extractCoreOptions(props) {
+    const coreOptions = PROPERTY_KEYS_SPLITVIEW.reduce((obj, key) => {
+        if (key in props) {
+            obj[key] = props[key];
+        }
+        return obj;
+    }, {});
+    return coreOptions;
+}
+export const SplitviewReact = React.forwardRef((props, ref) => {
+    const domRef = React.useRef(null);
+    const splitviewRef = React.useRef(undefined);
+    const [portals, addPortal] = usePortalsLifecycle();
+    React.useImperativeHandle(ref, () => domRef.current, []);
+    const prevProps = React.useRef({});
+    React.useEffect(() => {
+        const changes = {};
+        PROPERTY_KEYS_SPLITVIEW.forEach((propKey) => {
+            const key = propKey;
+            const 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;
+    }, PROPERTY_KEYS_SPLITVIEW.map((key) => props[key]));
+    React.useEffect(() => {
+        if (!domRef.current) {
+            return () => {
+                // noop
+            };
+        }
+        const frameworkOptions = {
+            createComponent: (options) => {
+                return new ReactPanelView(options.id, options.name, props.components[options.name], { addPortal });
+            },
+        };
+        const api = createSplitview(domRef.current, Object.assign(Object.assign({}, extractCoreOptions(props)), frameworkOptions));
+        const { clientWidth, clientHeight } = domRef.current;
+        api.layout(clientWidth, clientHeight);
+        if (props.onReady) {
+            props.onReady({ api });
+        }
+        splitviewRef.current = api;
+        return () => {
+            splitviewRef.current = undefined;
+            api.dispose();
+        };
+    }, []);
+    React.useEffect(() => {
+        if (!splitviewRef.current) {
+            return;
+        }
+        splitviewRef.current.updateOptions({
+            createComponent: (options) => {
+                return new ReactPanelView(options.id, options.name, props.components[options.name], { addPortal });
+            },
+        });
+    }, [props.components]);
+    return (React.createElement("div", { style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+});
+SplitviewReact.displayName = 'SplitviewComponent';

package/dist/esm/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/esm/splitview/view.js

@@ -0,0 +1,17 @@
+import { SplitviewApi, SplitviewPanel, } from 'dockview';
+import { ReactPart } from '../react';
+export class ReactPanelView extends SplitviewPanel {
+    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,
+            containerApi: new SplitviewApi(this._params.accessor),
+        });
+    }
+}

package/dist/esm/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/esm/svg.js

@@ -0,0 +1,7 @@
+import React from 'react';
+export const CloseButton = () => (React.createElement("svg", { height: "11", width: "11", viewBox: "0 0 28 28", "aria-hidden": 'false', focusable: false, className: "dv-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: "dv-svg" },
+        React.createElement("path", { d: "M12 14.15L0 2.15L2.15 0L12 9.9L21.85 0.0499992L24 2.2L12 14.15Z" })));
+};

package/dist/esm/types.d.ts

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

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};