}){kind=icon}
+ );
+};
+
+const JavascriptIcon = (props: { height: number; width: number }) => {
+ return (
+ }){kind=icon}
+ );
+};
+
+export const MultiFrameworkContainer = (props: {
+ react: React.FC;
+ typescript: (parent: HTMLElement) => { dispose: () => void };
+ sandboxId: string;
+ height?: number;
+}) => {
+ const ref = React.useRef
+ {animation && (
+
+
+
+ )}
+ {framework === 'React' &&
+
+
+ );
+};
diff --git a/packages/docs/src/components/ui/referenceTable.tsx b/packages/docs/src/components/ui/referenceTable.tsx
new file mode 100644
index 000000000..1423122cc
--- /dev/null
+++ b/packages/docs/src/components/ui/referenceTable.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+export interface ReferenceProps {
+ props: {
+ prop: string;
+ default?: string;
+ type: string;
+ }[];
+}
+
+export const ReferenceTable = (props: ReferenceProps) => {
+ return (
+
+ {framework === 'React' ? (
+
+
+ | Property | +Type | +Default | +
|---|---|---|
+ {property.prop}
+ |
+
+ {property.type}
+ |
+
+ {property.default !== undefined && (
+ {property.default}
+ )}
+ |
+
+
+
+
+
+
+ );
+};
diff --git a/packages/docs/static/img/js-icon.svg b/packages/docs/static/img/js-icon.svg
new file mode 100644
index 000000000..9650ca78e
--- /dev/null
+++ b/packages/docs/static/img/js-icon.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/packages/docs/static/img/react-icon.svg b/packages/docs/static/img/react-icon.svg
new file mode 100644
index 000000000..ea77a618d
--- /dev/null
+++ b/packages/docs/static/img/react-icon.svg
@@ -0,0 +1,9 @@
+
diff --git a/packages/docs/versioned_docs/version-1.7.2/components/dockview.mdx b/packages/docs/versioned_docs/version-1.7.2/components/dockview.mdx
index b6d1a3e46..8097910eb 100644
--- a/packages/docs/versioned_docs/version-1.7.2/components/dockview.mdx
+++ b/packages/docs/versioned_docs/version-1.7.2/components/dockview.mdx
@@ -24,7 +24,7 @@ import RenderingDockview from '@site/sandboxes/rendering-dockview/src/app';
import DockviewExternalDnd from '@site/sandboxes/externaldnd-dockview/src/app';
import DockviewResizeContainer from '@site/sandboxes/resizecontainer-dockview/src/app';
import DockviewTabheight from '@site/sandboxes/tabheight-dockview/src/app';
-import { attach as attachDockviewVanilla } from '@site/sandboxes/vanilla-dockview/src/app';
+import { attach as attachDockviewVanilla } from '@site/sandboxes/javascript/vanilla-dockview/src/app';
# Dockview
@@ -728,6 +728,6 @@ The core library is published as an independant package under the name `dockview
> `dockview-core` is a dependency of `dockview` and automatically installed during the installation process of `dockview` via `npm install dockview`.
+ +> You can access the panels associated group through the `panel.group` variable. +> The group will always be defined and will change if a panel is moved into another group. ## DockviewReact Component @@ -340,7 +351,9 @@ return ( ### Third Party Dnd Libraries -To be completed... +This shows a simple example of a third-party library used inside a panel that relies on drag +and drop functionalities. This examples serves to show that `dockview` doesn't interfer with +any drag and drop logic for other controls.
-
-
-## VanillaJS
+## Vanilla JS
> Note: This section is experimental and support for Vanilla JS is a work in progress.
@@ -728,6 +739,6 @@ The core library is published as an independant package under the name `dockview
> `dockview-core` is a dependency of `dockview` and automatically installed during the installation process of `dockview` via `npm install dockview`.
hello world
;
+ return (
+
+ {Object.keys(props.params).map((key) => {
+ return (
+
+ );
},
};
});
@@ -51,4 +61,84 @@ describe('gridview react', () => {
expect(api!.width).toBe(650);
expect(api!.height).toBe(450);
});
+
+ test('that the component can update parameters', async () => {
+ let api: DockviewApi;
+
+ const onReady = (event: DockviewReadyEvent) => {
+ api = event.api;
+ };
+
+ const wrapper = render(
+ {`key=${key},value=${props.params[key]}`}
+ );
+ })}
+ hello world
;
+ return (
+
+ {Object.keys(props.params).map((key) => {
+ return (
+
+ );
},
};
});
@@ -62,4 +72,88 @@ describe('gridview react', () => {
expect(api!.width).toBe(650);
expect(api!.height).toBe(450);
});
+
+ test('that the component can update parameters', async () => {
+ let api: GridviewApi;
+
+ const onReady = (event: GridviewReadyEvent) => {
+ api = event.api;
+ };
+
+ const wrapper = render(
+ {`key=${key},value=${props.params[key]}`}
+ );
+ })}
+ hello world
;
+ return (
+
+ {Object.keys(props.params).map((key) => {
+ return (
+
+ );
},
};
});
@@ -49,4 +59,85 @@ describe('gridview react', () => {
expect(api!.width).toBe(650);
expect(api!.height).toBe(450);
});
+
+ test('that the component can update parameters', async () => {
+ let api: PaneviewApi;
+
+ const onReady = (event: PaneviewReadyEvent) => {
+ api = event.api;
+ };
+
+ const wrapper = render(
+ {`key=${key},value=${props.params[key]}`}
+ );
+ })}
+ hello world
;
- },
- };
- });
-
- test('default', () => {
- let api: DockviewApi | undefined;
-
- const onReady = (event: DockviewReadyEvent) => {
- api = event.api;
- };
-
- render(hello world
;
- },
- };
- });
-
- test('default', () => {
- let api: GridviewApi | undefined;
-
- const onReady = (event: GridviewReadyEvent) => {
- api = event.api;
- };
-
- render(
- hello world
;
- },
- };
- });
-
- test('default', () => {
- let api: PaneviewApi | undefined;
-
- const onReady = (event: PaneviewReadyEvent) => {
- api = event.api;
- };
-
- render(
-
- );
-};
-
-const TestWrapper = (props: {
- component: React.FunctionComponent{props.valueA}
- {props.valueB}
- {portal}
;
-};
diff --git a/packages/dockview/src/__tests__/react/splitview/splitview.spec.tsx b/packages/dockview/src/__tests__/react/splitview/splitview.spec.tsx
deleted file mode 100644
index 9ffc01974..000000000
--- a/packages/dockview/src/__tests__/react/splitview/splitview.spec.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { SplitviewApi, Orientation } from 'dockview-core';
-import {
- ISplitviewPanelProps,
- SplitviewReact,
- SplitviewReadyEvent,
-} from '../../../splitview/splitview';
-import { PanelCollection } from '../../../types';
-import { setMockRefElement } from '../../__test_utils__/utils';
-
-describe('splitview react', () => {
- let components: PanelCollectionhello world
;
- },
- };
- });
-
- test('default', () => {
- let api: SplitviewApi | undefined;
-
- const onReady = (event: SplitviewReadyEvent) => {
- api = event.api;
- };
-
- render(
- hello world
;
+ return (
+
+ {Object.keys(props.params).map((key) => {
+ return (
+
+ );
},
};
});
@@ -61,4 +71,88 @@ describe('splitview react', () => {
expect(api!.width).toBe(650);
expect(api!.height).toBe(450);
});
+
+ test('that the component can update parameters', async () => {
+ let api: SplitviewApi;
+
+ const onReady = (event: SplitviewReadyEvent) => {
+ api = event.api;
+ };
+
+ const wrapper = render(
+ {`key=${key},value=${props.params[key]}`}
+ );
+ })}
+
+ {'This panel is just a usual component '}
+
+ );
+ },
+};
+
+export const App: React.FC = () => {
+ const onReady = (event: DockviewReadyEvent) => {
+ event.api.addPanel({
+ id: 'panel_1',
+ component: 'iframeComponent',
+ });
+
+ event.api.addPanel({
+ id: 'panel_2',
+ component: 'iframeComponent',
+ });
+
+ event.api.addPanel({
+ id: 'panel_3',
+ component: 'basicComponent',
+ });
+ };
+
+ return (
+
+ {ReactDOM.createPortal(
+
+ );
+ };
+};
diff --git a/packages/docs/sandboxes/iframe-dockview/src/index.tsx b/packages/docs/sandboxes/iframe-dockview/src/index.tsx
new file mode 100644
index 000000000..2fe1be232
--- /dev/null
+++ b/packages/docs/sandboxes/iframe-dockview/src/index.tsx
@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+ const root = ReactDOMClient.createRoot(rootElement);
+
+ root.render(
+
+
,
+ document.body // <-- you may choose to mount these 'global' elements to anywhere you see suitable
+ )}
+
+
+