rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-03-10 16:02:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #209 from mathuo/208-documentation-examples

Browse Source 
chore: sandbox example
This commit is contained in:
mathuo 2023-03-19 21:56:54 +04:00 committed by GitHub
commit 5b1aa4221f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
128 changed files with 2658 additions and 3351 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
.codesandbox/ci.json Normal file
View File

@ -0,0 +1,19 @@
{
"packages": [
"packages/dockview-core",
"packages/dockview"
],
"sandboxes": [
"/packages/docs/sandboxes/constraints-dockview",
"/packages/docs/sandboxes/customheader-dockview",
"/packages/docs/sandboxes/dnd-dockview",
"/packages/docs/sandboxes/events-dockview",
"/packages/docs/sandboxes/groupcontol-dockview",
"/packages/docs/sandboxes/layout-dockview",
"/packages/docs/sandboxes/nested-dockview",
"/packages/docs/sandboxes/resize-dockview",
"/packages/docs/sandboxes/simple-dockview",
"/packages/docs/sandboxes/watermark-dockview"
],
"node": "16"
}

2
package.json
View File

@ -65,4 +65,4 @@
"jest": "^29.5.0",
"ts-node": "^10.9.1"
}
}
}

2
packages/dockview-core/package.json
View File

@ -21,8 +21,8 @@
"build:modulefiles": "rollup -c",
"build": "npm run build:ci && npm run build:modulefiles",
"clean": "rimraf dist/ .build/",
"prepublishOnly": "npm run rebuild && npm run test",
"docs": "typedoc",
"prepack": "npm run rebuild && npm run test",
"rebuild": "npm run clean && npm run build",
"test": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-core",
"test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-core --coverage",

16
packages/dockview-core/src/dockview/components/watermark/watermark.ts
View File

@ -1,4 +1,8 @@
import { GroupPanelPartInitParameters, IWatermarkRenderer } from '../../types';
import {
GroupPanelPartInitParameters,
IWatermarkRenderer,
WatermarkRendererInitParameters,
} from '../../types';
import { addDisposableListener } from '../../../events';
import { toggleClass } from '../../../dom';
import { CompositeDisposable } from '../../../lifecycle';
@ -69,15 +73,7 @@ export class Watermark
// noop
}
init(params: GroupPanelPartInitParameters) {
this.params = params;
this.addDisposables(
this.params.containerApi.onDidLayoutChange(() => {
this.render();
})
);
init(_params: WatermarkRendererInitParameters) {
this.render();
}

3
packages/dockview-core/src/dockview/dockviewComponent.ts
View File

@ -632,9 +632,6 @@ export class DockviewComponent
this.watermark.init({
containerApi: new DockviewApi(this),
params: {},
title: '',
api: null as any,
});
const watermarkContainer = document.createElement('div');

4
packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts
View File

@ -670,9 +670,7 @@ export class DockviewGroupPanelModel
const watermark = this.accessor.createWatermarkComponent();
watermark.init({
containerApi: new DockviewApi(this.accessor),
params: {},
title: '',
api: null as any,
group: this.groupPanel,
});
this.watermark = watermark;

11
packages/dockview-core/src/dockview/types.ts
View File

@ -9,7 +9,7 @@ import {
import { DockviewApi } from '../api/component.api';
import { Event } from '../events';
import { Optional } from '../types';
import { DockviewGroupPanel } from './dockviewGroupPanel';
import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel';
export enum DockviewDropTargets {
Tab,
@ -34,13 +34,18 @@ export interface GroupPanelContentPartInitParameters
tab: ITabRenderer;
}
export interface WatermarkRendererInitParameters {
containerApi: DockviewApi;
group?: IDockviewGroupPanel;
}
export interface IWatermarkRenderer
extends Optional<
Omit<IPanel, 'id'>,
Omit<IPanel, 'id' | 'init'>,
'dispose' | 'update' | 'layout' | 'toJSON'
> {
readonly element: HTMLElement;
init: (params: GroupPanelPartInitParameters) => void;
init: (params: WatermarkRendererInitParameters) => void;
updateParentGroup(group: DockviewGroupPanel, visible: boolean): void;
}

4
packages/dockview/package.json
View File

@ -22,7 +22,7 @@
"build": "npm run build:ci && npm run build:modulefiles",
"clean": "rimraf dist/ .build/",
"docs": "typedoc",
"prepack": "npm run rebuild && npm run test",
"prepublishOnly": "npm run rebuild && npm run test",
"rebuild": "npm run clean && npm run build",
"test": "cross-env ../../node_modules/.bin/jest --selectProjects dockview",
"test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview --coverage",
@ -74,4 +74,4 @@
"rollup-plugin-terser": "^7.0.2",
"typedoc": "^0.23.25"
}
}
}

18
packages/dockview/src/dockview/reactWatermarkPart.ts
View File

@ -6,9 +6,14 @@ import {
DockviewGroupPanel,
GroupPanelPartInitParameters,
IWatermarkRenderer,
WatermarkRendererInitParameters,
DockviewApi,
IDockviewGroupPanel,
} from 'dockview-core';
export interface IWatermarkPanelProps extends IGroupPanelBaseProps {
export interface IWatermarkPanelProps {
containerApi: DockviewApi;
group?: IDockviewGroupPanel;
close: () => void;
}
@ -30,19 +35,18 @@ export class ReactWatermarkPart implements IWatermarkRenderer {
this._element.className = 'dockview-react-part';
}
init(parameters: GroupPanelPartInitParameters): void {
this.parameters = parameters;
init(parameters: WatermarkRendererInitParameters): void {
this.part = new ReactPart(
this.element,
this.reactPortalStore,
this.component,
{
params: parameters.params,
api: parameters.api,
group: parameters.group,
containerApi: parameters.containerApi,
close: () => {
parameters.containerApi.removeGroup(parameters.api.group);
if (parameters.group) {
parameters.containerApi.removeGroup(parameters.group);
}
},
}
);

97
packages/docs/docs/components/dockview.mdx
View File

@ -2,43 +2,38 @@
description: Dockview Documentation
---
import { SimpleDockview } from '@site/src/components/simpleDockview';
import { Container } from '@site/src/components/container';
import {
RenderingDockview,
Checkbox,
} from '@site/src/components/dockview/rendering';
import { DndDockview } from '@site/src/components/dockview/dnd';
import { EventsDockview } from '@site/src/components/dockview/events';
import { ContextMenuDockview } from '@site/src/components/dockview/contextMenu';
import { NestedDockview } from '@site/src/components/dockview/nested';
import { CustomHeadersDockview } from '@site/src/components/dockview/customHeaders';
import { ResizeDockview } from '@site/src/components/dockview/resize';
import { DockviewGroupControl } from '@site/src/components/dockview/groupControl';
import { DockviewWatermark } from '@site/src/components/dockview/watermark';
import { DockviewPersistance } from '@site/src/components/dockview/persistance';
import {
DockviewNative,
DockviewNative2,
} from '@site/src/components/dockview/native';
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
import DockviewPersistance from '@site/sandboxes/layout-dockview/src/app';
import SimpleDockview from '@site/sandboxes/simple-dockview/src/app';
import ResizeDockview from '@site/sandboxes/resize-dockview/src/app';
import DockviewWatermark from '@site/sandboxes/watermark-dockview/src/app';
import DockviewConstraints from '@site/sandboxes/constraints-dockview/src/app';
import DndDockview from '@site/sandboxes/dnd-dockview/src/app';
import NestedDockview from '@site/sandboxes/nested-dockview/src/app';
import EventsDockview from '@site/sandboxes/events-dockview/src/app';
import DockviewGroupControl from '@site/sandboxes/groupcontrol-dockview/src/app';
import CustomHeadersDockview from '@site/sandboxes/customheader-dockview/src/app';
import DockviewNative from '@site/sandboxes/fullwidthtab-dockview/src/app';
import DockviewNative2 from '@site/sandboxes/nativeapp-dockview/src/app';
import DockviewSetTitle from '@site/sandboxes/updatetitle-dockview/src/app';
# Dockview
## Introduction
Dockview is an abstraction built on top of [Gridviews](./gridview) where each view is a container of many tabbed panels.
<div
style={{
height: '300px',
backgroundColor: 'rgb(30,30,30)',
color: 'white',
margin: '20px 0px',
}}
>
<Container>
<SimpleDockview />
</div>
</Container>
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.
@ -213,7 +208,9 @@ const onReady = (event: DockviewReadyEvent) => {
Here is an example using the above code loading from and saving to localStorage.
If you refresh the page you should notice your layout is loaded as you left it.
<DockviewPersistance />
<Container>
<DockviewPersistance />
</Container>
## Resizing
@ -240,7 +237,9 @@ props.api.group.api.setSize({
You can see an example invoking both approaches below.
<ResizeDockview />
<Container>
<ResizeDockview />
</Container>
## Watermark
@ -248,7 +247,9 @@ When the dockview is empty you may want to display some fallback content, this i
By default there the watermark has no content but you can provide as a prop to `DockviewReact` a `watermarkComponent`
which will be rendered when there are no panels or groups.
<DockviewWatermark />
<Container>
<DockviewWatermark />
</Container>
## Drag And Drop
@ -325,7 +326,9 @@ return (
);
```
<DndDockview />
<Container>
<DndDockview />
</Container>
## Panels
@ -516,12 +519,14 @@ You can also override the default tab renderer which will be used when no `tabCo
<DockviewReact defaultTabComponent={MyCustomHeader} ... />;
```
As a simple example the below attachs a custom event handler for the context menu on all tabs as a default tab renderer
As a simple example the below attaches a custom event handler for the context menu on all tabs as a default tab renderer
The below example uses a custom tab renderer to reigster a popover when the user right clicked on a tab.
This still makes use of the `DockviewDefaultTab` since it's only a minor change.
<CustomHeadersDockview />
<Container>
<CustomHeadersDockview />
</Container>
### Default Tab Title
@ -539,11 +544,15 @@ You can update the title through the panel api which can be accessed via `props.
component or via `api.getPanel('panel1').api` if you are accessing from outside of the panel component.
```tsx
api.updateTitle('my_new_custom_title');
api.setTitle('my_new_custom_title');
```
> Note this only works when using the default tab implementation.
<Container>
<DockviewSetTitle />
</Container>
### Custom Tab Title
If you are using a custom tab implementation you should pass variables through as a parameter and render them
@ -589,7 +598,9 @@ to the entire width of the group. For example:
<DockviewReactComponent singleTabMode="fullwidth" {...otherProps} />
```
<DockviewNative />
<Container>
<DockviewNative />
</Container>
## Groups
@ -641,11 +652,15 @@ const GroupControlComponent = (props: IDockviewGroupControlProps) => {
};
```
<DockviewGroupControl />
<Container>
<DockviewGroupControl />
</Container>
## Events
<EventsDockview />
<Container height={600}>
<EventsDockview />
</Container>
## Advanced Examples
@ -654,10 +669,24 @@ const GroupControlComponent = (props: IDockviewGroupControlProps) => {
You can safely create multiple dockview instances within one page and nest dockviews within other dockviews.
If you wish to interact with the drop event from one dockview instance in another dockview instance you can implement the `showDndOverlay` and `onDidDrop` props on `DockviewReact`.
<NestedDockview />
<Container>
<NestedDockview />
</Container>
### Example
hello
<DockviewNative2 />
hello 2
<div style={{ height: '400px', width: '100%' }}>
<App />
</div>
## Contraints
<Container>
<DockviewConstraints />
</Container>

25
packages/docs/docs/examples.mdx
View File

@ -1,25 +0,0 @@
---
sidebar_position: 4
description: Dockview examples
---
import { SimpleSplitview } from '@site/src/components/simpleSplitview';
import { SimpleGridview } from '@site/src/components/simpleGridview';
import { SimplePaneview } from '@site/src/components/simplePaneview';
import { SimpleDockview } from '@site/src/components/simpleDockview';
# Examples
<iframe
src="https://codesandbox.io/embed/dockview-template-mdc9f7?fontsize=14&hidenavigation=1&theme=dark"
style={{
width: '100%',
height: '500px',
border: 0,
borderRaduis: '4px',
overflow: 'hidden',
}}
title="dockview-template"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

2
packages/docs/docs/index.mdx
View File

@ -6,7 +6,7 @@ description: A zero dependency layout manager built for React
import { SimpleSplitview } from '@site/src/components/simpleSplitview';
import { SimpleGridview } from '@site/src/components/simpleGridview';
import { SimplePaneview } from '@site/src/components/simplePaneview';
import { SimpleDockview } from '@site/src/components/simpleDockview';
import SimpleDockview from '@site/sandboxes/simple-dockview/src/app';
# Introduction

31
packages/docs/sandboxes/constraints-dockview/package.json Normal file
View File

@ -0,0 +1,31 @@
{
"name": "constraints-dockview",
"description": "",
"keywords": [
"dockview"
],
"version": "1.0.0",
"main": "src/index.tsx",
"dependencies": {
"dockview": "*",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"typescript": "^4.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

43
packages/docs/sandboxes/constraints-dockview/public/index.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

99
packages/docs/sandboxes/constraints-dockview/src/app.tsx Normal file
View File

@ -0,0 +1,99 @@
import {
DockviewApi,
DockviewMutableDisposable,
DockviewReact,
DockviewReadyEvent,
GridConstraintChangeEvent,
IDockviewPanelProps,
} from 'dockview';
import * as React from 'react';
const components = {
default: (props: IDockviewPanelProps<{ title: string }>) => {
const [contraints, setContraints] =
React.useState<GridConstraintChangeEvent | null>(null);
React.useEffect(() => {
props.api.group.api.setConstraints({
maximumHeight: 200,
maximumWidth: 200,
});
}, []);
React.useEffect(() => {
const disposable1 = new DockviewMutableDisposable();
const disposable = props.api.onDidGroupChange(() => {
disposable1.value = props.api.group.api.onDidConstraintsChange(
(event) => {
setContraints(event);
}
);
});
setContraints({
maximumHeight: props.api.group.maximumHeight,
minimumHeight: props.api.group.minimumHeight,
maximumWidth: props.api.group.maximumWidth,
minimumWidth: props.api.group.minimumWidth,
});
return () => {
disposable1.dispose();
disposable.dispose();
};
}, []);
return (
<div
style={{
height: '100%',
padding: '20px',
background: 'var(--dv-group-view-background-color)',
color: 'white',
}}
>
<span> {props.params.title}</span>
{contraints && (
<div>
<div>{`minHeight=${contraints.minimumHeight}`}</div>
<div>{`maxHeight=${contraints.maximumHeight}`}</div>
<div>{`minWidth=${contraints.minimumWidth}`}</div>
<div>{`maxWidth=${contraints.maximumWidth}`}</div>
</div>
)}
</div>
);
},
};
const App = () => {
const [api, setApi] = React.useState<DockviewApi>();
const onReady = (event: DockviewReadyEvent) => {
event.api.addPanel({
id: 'panel_1',
component: 'default',
});
event.api.addPanel({
id: 'panel_2',
component: 'default',
});
event.api.addPanel({
id: 'panel_3',
component: 'default',
});
};
return (
<DockviewReact
onReady={onReady}
components={components}
className="dockview-theme-abyss "
/>
);
};
export default App;

20
packages/docs/sandboxes/constraints-dockview/src/index.tsx Normal file
View File

@ -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(
<StrictMode>
<div className="app">
<App />
</div>
</StrictMode>
);
}

16
packages/docs/sandboxes/constraints-dockview/src/styles.css Normal file
View File

@ -0,0 +1,16 @@
body {
margin: 0px;
color: white;
font-family: sans-serif;
text-align: center;
}
#root {
height: 100vh;
width: 100vw;
}
.app {
height: 100%;
}

20
packages/docs/sandboxes/constraints-dockview/tsconfig.json Normal file
View File

@ -0,0 +1,20 @@
{
"compilerOptions": {
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react-jsx",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true
}
}

31
packages/docs/sandboxes/customheader-dockview/package.json Normal file
View File

@ -0,0 +1,31 @@
{
"name": "customheader-dockview",
"description": "",
"keywords": [
"dockview"
],
"version": "1.0.0",
"main": "src/index.tsx",
"dependencies": {
"dockview": "*",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"typescript": "^4.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

43
packages/docs/sandboxes/customheader-dockview/public/index.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

25
packages/docs/src/components/dockview/customHeaders.tsx → packages/docs/sandboxes/customheader-dockview/src/app.tsx
View File

@ -31,7 +31,7 @@ const headerComponents = {
},
};
export const CustomHeadersDockview = () => {
const CustomHeadersDockview = () => {
const onReady = (event: DockviewReadyEvent) => {
const d = localStorage.getItem('test');
@ -88,20 +88,13 @@ export const CustomHeadersDockview = () => {
};
return (
<div
style={{
height: '500px',
margin: '40px 0px',
display: 'flex',
flexDirection: 'column',
}}
>
<DockviewReact
components={components}
defaultTabComponent={headerComponents.default}
onReady={onReady}
className="dockview-theme-abyss"
/>
</div>
<DockviewReact
components={components}
defaultTabComponent={headerComponents.default}
onReady={onReady}
className="dockview-theme-abyss"
/>
);
};
export default CustomHeadersDockview;

20
packages/docs/sandboxes/customheader-dockview/src/index.tsx Normal file
View File

@ -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(
<StrictMode>
<div className="app">
<App />
</div>
</StrictMode>
);
}

16
packages/docs/sandboxes/customheader-dockview/src/styles.css Normal file
View File

@ -0,0 +1,16 @@
body {
margin: 0px;
color: white;
font-family: sans-serif;
text-align: center;
}
#root {
height: 100vh;
width: 100vw;
}
.app {
height: 100%;
}

20
packages/docs/sandboxes/customheader-dockview/tsconfig.json Normal file
View File

@ -0,0 +1,20 @@
{
"compilerOptions": {
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react-jsx",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true
}
}

31
packages/docs/sandboxes/dnd-dockview/package.json Normal file
View File

@ -0,0 +1,31 @@
{
"name": "dnd-dockview",
"description": "",
"keywords": [
"dockview"
],
"version": "1.0.0",
"main": "src/index.tsx",
"dependencies": {
"dockview": "*",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"typescript": "^4.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

43
packages/docs/sandboxes/dnd-dockview/public/index.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

40
packages/docs/src/components/dockview/dnd.tsx → packages/docs/sandboxes/dnd-dockview/src/app.tsx
View File

@ -18,7 +18,7 @@ const components = {
},
};
export const DndDockview = (props: { renderVisibleOnly: boolean }) => {
const DndDockview = (props: { renderVisibleOnly: boolean }) => {
const onReady = (event: DockviewReadyEvent) => {
event.api.addPanel({
id: 'panel_1',
@ -60,7 +60,7 @@ export const DndDockview = (props: { renderVisibleOnly: boolean }) => {
component: 'default',
position: {
direction: positionToDirection(event.position),
referenceGroup: event.group,
referenceGroup: event.group || undefined,
},
});
};
@ -70,7 +70,13 @@ export const DndDockview = (props: { renderVisibleOnly: boolean }) => {
};
return (
<>
<div
style={{
display: 'flex',
flexDirection: 'column',
height: '100%',
}}
>
<div
style={{
backgroundColor: 'orange',
@ -83,22 +89,16 @@ export const DndDockview = (props: { renderVisibleOnly: boolean }) => {
>
Drag me
</div>
<div
style={{
height: '300px',
backgroundColor: 'rgb(30,30,30)',
color: 'white',
margin: '20px 0px',
}}
>
<DockviewReact
components={components}
onReady={onReady}
className="dockview-theme-abyss"
onDidDrop={onDidDrop}
showDndOverlay={showDndOverlay}
/>
</div>
</>
<DockviewReact
components={components}
onReady={onReady}
className="dockview-theme-abyss"
onDidDrop={onDidDrop}
showDndOverlay={showDndOverlay}
/>
</div>
);
};
export default DndDockview;

20
packages/docs/sandboxes/dnd-dockview/src/index.tsx Normal file
View File

@ -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(
<StrictMode>
<div className="app">
<App />
</div>
</StrictMode>
);
}

16
packages/docs/sandboxes/dnd-dockview/src/styles.css Normal file
View File

@ -0,0 +1,16 @@
body {
margin: 0px;
color: white;
font-family: sans-serif;
text-align: center;
}
#root {
height: 100vh;
width: 100vw;
}
.app {
height: 100%;
}

20
packages/docs/sandboxes/dnd-dockview/tsconfig.json Normal file
View File

@ -0,0 +1,20 @@
{
"compilerOptions": {
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react-jsx",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true
}
}

31
packages/docs/sandboxes/events-dockview/package.json Normal file
View File

@ -0,0 +1,31 @@
{
"name": "events-dockview",
"description": "",
"keywords": [
"dockview"
],
"version": "1.0.0",
"main": "src/index.tsx",
"dependencies": {
"dockview": "*",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"typescript": "^4.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

43
packages/docs/sandboxes/events-dockview/public/index.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

30
packages/docs/src/components/dockview/events.tsx → packages/docs/sandboxes/events-dockview/src/app.tsx
View File

@ -6,7 +6,7 @@ import {
IDockviewPanelProps,
} from 'dockview';
import * as React from 'react';
import { Console, Line } from '../console/console';
import { Console, Line } from './console';
const components = {
default: (props: IDockviewPanelProps<{ title: string }>) => {
@ -14,7 +14,7 @@ const components = {
},
};
export const EventsDockview = () => {
const EventsDockview = () => {
const [lines, setLines] = React.useState<Line[]>([]);
const [checked, setChecked] = React.useState<boolean>(false);
@ -312,7 +312,13 @@ export const EventsDockview = () => {
};
return (
<>
<div
style={{
display: 'flex',
flexDirection: 'column',
height: '100%',
}}
>
<label>
<input
type="checkbox"
@ -321,22 +327,18 @@ export const EventsDockview = () => {
/>
<span>{'fromJSON'}</span>
</label>
<div
style={{
height: '300px',
backgroundColor: 'rgb(30,30,30)',
color: 'white',
margin: '20px 0px',
}}
>
<div style={{ flexGrow: 1 }}>
<DockviewReact
components={components}
onReady={onReady}
className="dockview-theme-abyss"
/>
</div>
<Console lines={lines} />
</>
<div style={{ flexGrow: 1 }}>
<Console lines={lines} />
</div>
</div>
);
};
export default EventsDockview;

27
packages/docs/sandboxes/events-dockview/src/console.scss Normal file
View File

@ -0,0 +1,27 @@
.console-container {
background-color: black;
color: white;
padding-left: 8px;
max-height: 200px;
overflow-y: scroll;
overflow-x: auto;
.console-line {
height: 20px;
line-height: 20px;
font-size: 13px;
border-bottom: 1px solid rgb(30, 30, 30);
display: flex;
padding-left: 4px;
.console-line-timestamp {
color: lightgray;
padding-right: 4px;
}
.console-line-text {
padding: 0px 4px;
flex-grow: 1;
}
}
}

52
packages/docs/sandboxes/events-dockview/src/console.tsx Normal file
View File

@ -0,0 +1,52 @@
import * as React from 'react';
import './console.scss';
const formatTime = (now: Date) => {
const pad = (x: number) => (x < 10 ? `0${x}` : `${x}`);
return `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(
now.getSeconds()
)}.${now.getMilliseconds()}`;
};
export interface Line {
timestamp: Date;
text: string;
css?: React.CSSProperties;
}
export interface IConsoleProps {
lines: Line[];
}
export const Console = (props: IConsoleProps) => {
const ref = React.useRef<HTMLDivElement>();
React.useLayoutEffect(() => {
if (!ref.current) {
return;
}
ref.current.scrollTop = Math.max(
0,
ref.current.scrollHeight - ref.current.clientHeight
);
}, [props.lines]);
return (
<div ref={ref} className="console-container">
{props.lines.map((line, i) => {
return (
<div key={i} className="console-line">
<span className="console-line-timestamp">
{formatTime(line.timestamp)}
</span>
<span className="console-line-text" style={line.css}>
{line.text}
</span>
</div>
);
})}
</div>
);
};

20
packages/docs/sandboxes/events-dockview/src/index.tsx Normal file
View File

@ -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(
<StrictMode>
<div className="app">
<App />
</div>
</StrictMode>
);
}

16
packages/docs/sandboxes/events-dockview/src/styles.css Normal file
View File

@ -0,0 +1,16 @@
body {
margin: 0px;
color: white;
font-family: sans-serif;
text-align: center;
}
#root {
height: 100vh;
width: 100vw;
}
.app {
height: 100%;
}

20
packages/docs/sandboxes/events-dockview/tsconfig.json Normal file
View File

@ -0,0 +1,20 @@
{
"compilerOptions": {
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react-jsx",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true
}
}

31
packages/docs/sandboxes/fullwidthtab-dockview/package.json Normal file
View File

@ -0,0 +1,31 @@
{
"name": "watermark-dockview",
"description": "",
"keywords": [
"dockview"
],
"version": "1.0.0",
"main": "src/index.tsx",
"dependencies": {
"dockview": "*",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"typescript": "^4.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

43
packages/docs/sandboxes/fullwidthtab-dockview/public/index.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

17
packages/docs/sandboxes/fullwidthtab-dockview/src/app.scss Normal file
View File

@ -0,0 +1,17 @@
.my-custom-tab {
padding: 0px 8px;
width: 100%;
display: flex;
height: 100%;
align-items: center;
background-color: var(--dv-tabs-and-actions-container-background-color);
.my-custom-tab-icon {
font-size: 16px;
&:hover {
border-radius: 2px;
background-color: var(--dv-icon-hover-background-color);
}
}
}

100
packages/docs/sandboxes/fullwidthtab-dockview/src/app.tsx Normal file
View File

@ -0,0 +1,100 @@
import {
DockviewReact,
DockviewReadyEvent,
IDockviewPanelProps,
IDockviewPanelHeaderProps,
} from 'dockview';
import * as React from 'react';
import './app.scss';
const components = {
default: (props: IDockviewPanelProps<{ title: string; x?: number }>) => {
return (
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
color: 'white',
height: '100%',
}}
>
<span>{`${props.params.title}`}</span>
{props.params.x && <span>{` ${props.params.x}`}</span>}
</div>
);
},
};
const tabComponents = {
default: (props: IDockviewPanelHeaderProps<{ title: string }>) => {
return (
<div className="my-custom-tab">
<span>{props.params.title}</span>
<span style={{ flexGrow: 1 }} />
<span className="my-custom-tab-icon material-symbols-outlined">
minimize
</span>
<span className="my-custom-tab-icon material-symbols-outlined">
maximize
</span>
<span className="my-custom-tab-icon material-symbols-outlined">
close
</span>
</div>
);
},
};
const DockviewNative = () => {
const onReady = (event: DockviewReadyEvent) => {
const panel1 = event.api.addPanel({
id: 'panel_1',
component: 'default',
tabComponent: 'default',
params: {
title: 'Window 1',
},
});
panel1.group.locked = true;
const panel2 = event.api.addPanel({
id: 'panel_2',
component: 'default',
tabComponent: 'default',
params: {
title: 'Window 2',
},
position: {
direction: 'right',
},
});
panel2.group.locked = true;
const panel3 = event.api.addPanel({
id: 'panel_3',
component: 'default',
tabComponent: 'default',
params: {
title: 'Window 3',
},
position: {
direction: 'below',
},
});
panel3.group.locked = true;
};
return (
<DockviewReact
onReady={onReady}
components={components}
tabComponents={tabComponents}
className="dockview-theme-abyss"
singleTabMode="fullwidth"
/>
);
};
export default DockviewNative;

20
packages/docs/sandboxes/fullwidthtab-dockview/src/index.tsx Normal file
View File

@ -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(
<StrictMode>
<div className="app">
<App />
</div>
</StrictMode>
);
}

16
packages/docs/sandboxes/fullwidthtab-dockview/src/styles.css Normal file
View File

@ -0,0 +1,16 @@
body {
margin: 0px;
color: white;
font-family: sans-serif;
text-align: center;
}
#root {
height: 100vh;
width: 100vw;
}
.app {
height: 100%;
}

20
packages/docs/sandboxes/fullwidthtab-dockview/tsconfig.json Normal file
View File

@ -0,0 +1,20 @@
{
"compilerOptions": {
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react-jsx",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true
}
}

31
packages/docs/sandboxes/groupcontrol-dockview/package.json Normal file
View File

@ -0,0 +1,31 @@
{
"name": "groupcontrol-dockview",
"description": "",
"keywords": [
"dockview"
],
"version": "1.0.0",
"main": "src/index.tsx",
"dependencies": {
"dockview": "*",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"typescript": "^4.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

43
packages/docs/sandboxes/groupcontrol-dockview/public/index.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

17
packages/docs/sandboxes/groupcontrol-dockview/src/app.scss Normal file
View File

@ -0,0 +1,17 @@
.dockview-groupcontrol-demo {
height: 100%;
display: flex;
align-items: center;
color: white;
background-color: black;
padding-left: 8px;
.dockview-groupcontrol-demo-group-active {
padding: 0px 8px;
}
.dockview-groupcontrol-demo-active-panel {
color: yellow;
padding: 0px 8px;
}
}

26
packages/docs/src/components/dockview/groupControl.tsx → packages/docs/sandboxes/groupcontrol-dockview/src/app.tsx
View File

@ -5,7 +5,7 @@ import {
IDockviewPanelProps,
} from 'dockview';
import * as React from 'react';
import './groupControl.scss';
import './app.scss';
const components = {
default: (props: IDockviewPanelProps<{ title: string; x?: number }>) => {
@ -47,7 +47,7 @@ const GroupControlComponent = (props: IDockviewGroupControlProps) => {
);
};
export const DockviewGroupControl = () => {
const DockviewGroupControl = () => {
const onReady = (event: DockviewReadyEvent) => {
const panel1 = event.api.addPanel({
id: 'panel_1',
@ -84,19 +84,13 @@ export const DockviewGroupControl = () => {
};
return (
<div
style={{
height: '500px',
display: 'flex',
flexDirection: 'column',
}}
>
<DockviewReact
onReady={onReady}
components={components}
groupControlComponent={GroupControlComponent}
className="dockview-theme-abyss"
/>
</div>
<DockviewReact
onReady={onReady}
components={components}
groupControlComponent={GroupControlComponent}
className="dockview-theme-abyss"
/>
);
};
export default DockviewGroupControl;

20
packages/docs/sandboxes/groupcontrol-dockview/src/index.tsx Normal file
View File

@ -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(
<StrictMode>
<div className="app">
<App />
</div>
</StrictMode>
);
}

16
packages/docs/sandboxes/groupcontrol-dockview/src/styles.css Normal file
View File

@ -0,0 +1,16 @@
body {
margin: 0px;
color: white;
font-family: sans-serif;
text-align: center;
}
#root {
height: 100vh;
width: 100vw;
}
.app {
height: 100%;
}

20
packages/docs/sandboxes/groupcontrol-dockview/tsconfig.json Normal file
View File

@ -0,0 +1,20 @@
{
"compilerOptions": {
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react-jsx",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true
}
}

31
packages/docs/sandboxes/layout-dockview/package.json Normal file
View File

@ -0,0 +1,31 @@
{
"name": "layout-dockview",
"description": "",
"keywords": [
"dockview"
],
"version": "1.0.0",
"main": "src/index.tsx",
"dependencies": {
"dockview": "*",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"typescript": "^4.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

43
packages/docs/sandboxes/layout-dockview/public/index.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

28
packages/docs/src/components/dockview/persistance.tsx → packages/docs/sandboxes/layout-dockview/src/app.tsx
View File

@ -3,11 +3,8 @@ import {
DockviewReact,
DockviewReadyEvent,
IDockviewPanelProps,
IWatermarkPanelProps,
Orientation,
} from 'dockview';
import * as React from 'react';
import './nested.scss';
const components = {
default: (props: IDockviewPanelProps<{ title: string }>) => {
@ -103,24 +100,33 @@ export const DockviewPersistance = () => {
return (
<div
style={{
height: '500px',
display: 'flex',
flexDirection: 'column',
height: '100%',
}}
>
<div>
<div style={{ height: '25px' }}>
<button onClick={clearLayout}>Reset Layout</button>
</div>
<DockviewReact
onReady={onReady}
components={components}
watermarkComponent={Watermark}
className="dockview-theme-abyss"
/>
<div
style={{
flexGrow: 1,
overflow: 'hidden',
}}
>
<DockviewReact
onReady={onReady}
components={components}
watermarkComponent={Watermark}
className="dockview-theme-abyss"
/>
</div>
</div>
);
};
export default DockviewPersistance;
const Watermark = () => {
return <div style={{ color: 'white', padding: '8px' }}>watermark</div>;
};

20
packages/docs/sandboxes/layout-dockview/src/index.tsx Normal file
View File

@ -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(
<StrictMode>
<div className="app">
<App />
</div>
</StrictMode>
);
}

16
packages/docs/sandboxes/layout-dockview/src/styles.css Normal file
View File

@ -0,0 +1,16 @@
body {
margin: 0px;
color: white;
font-family: sans-serif;
text-align: center;
}
#root {
height: 100vh;
width: 100vw;
}
.app {
height: 100%;
}

20
packages/docs/sandboxes/layout-dockview/tsconfig.json Normal file
View File

@ -0,0 +1,20 @@
{
"compilerOptions": {
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react-jsx",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true
}
}

31
packages/docs/sandboxes/nativeapp-dockview/package.json Normal file
View File

@ -0,0 +1,31 @@
{
"name": "watermark-dockview",
"description": "",
"keywords": [
"dockview"
],
"version": "1.0.0",
"main": "src/index.tsx",
"dependencies": {
"dockview": "*",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"typescript": "^4.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

43
packages/docs/sandboxes/nativeapp-dockview/public/index.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

17
packages/docs/sandboxes/nativeapp-dockview/src/app.scss Normal file
View File

@ -0,0 +1,17 @@
.my-custom-tab {
padding: 0px 8px;
width: 100%;
display: flex;
height: 100%;
align-items: center;
background-color: var(--dv-tabs-and-actions-container-background-color);
.my-custom-tab-icon {
font-size: 16px;
&:hover {
border-radius: 2px;
background-color: var(--dv-icon-hover-background-color);
}
}
}

70
packages/docs/src/components/dockview/native.tsx → packages/docs/sandboxes/nativeapp-dockview/src/app.tsx
View File

@ -2,12 +2,10 @@ import {
DockviewReact,
DockviewReadyEvent,
IDockviewPanelProps,
Position,
Direction,
IDockviewPanelHeaderProps,
} from 'dockview';
import * as React from 'react';
import './native.scss';
import './app.scss';
const components = {
default: (props: IDockviewPanelProps<{ title: string; x?: number }>) => {
@ -71,10 +69,10 @@ const tabComponents = {
<span style={{ flexGrow: 1 }} />
<span className="my-custom-tab-icon material-symbols-outlined">
chrome_minimize
minimize
</span>
<span className="my-custom-tab-icon material-symbols-outlined">
chrome_maximize
maximize
</span>
<span className="my-custom-tab-icon material-symbols-outlined">
close
@ -84,65 +82,7 @@ const tabComponents = {
},
};
export const DockviewNative = () => {
const onReady = (event: DockviewReadyEvent) => {
const panel1 = event.api.addPanel({
id: 'panel_1',
component: 'default',
tabComponent: 'default',
params: {
title: 'Window 1',
},
});
panel1.group.locked = true;
const panel2 = event.api.addPanel({
id: 'panel_2',
component: 'default',
tabComponent: 'default',
params: {
title: 'Window 2',
},
position: {
direction: 'right',
},
});
panel2.group.locked = true;
const panel3 = event.api.addPanel({
id: 'panel_3',
component: 'default',
tabComponent: 'default',
params: {
title: 'Window 3',
},
position: {
direction: 'below',
},
});
panel3.group.locked = true;
};
return (
<div
style={{
height: '500px',
display: 'flex',
flexDirection: 'column',
}}
>
<DockviewReact
onReady={onReady}
components={components}
tabComponents={tabComponents}
className="dockview-theme-abyss"
singleTabMode="fullwidth"
/>
</div>
);
};
export const DockviewNative2 = () => {
const DockviewNative2 = () => {
const onReady = (event: DockviewReadyEvent) => {
const panel1 = event.api.addPanel({
id: 'panel_1',
@ -199,3 +139,5 @@ export const DockviewNative2 = () => {
</div>
);
};
export default DockviewNative2;

20
packages/docs/sandboxes/nativeapp-dockview/src/index.tsx Normal file
View File

@ -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(
<StrictMode>
<div className="app">
<App />
</div>
</StrictMode>
);
}

16
packages/docs/sandboxes/nativeapp-dockview/src/styles.css Normal file
View File

@ -0,0 +1,16 @@
body {
margin: 0px;
color: white;
font-family: sans-serif;
text-align: center;
}
#root {
height: 100vh;
width: 100vw;
}
.app {
height: 100%;
}

20
packages/docs/sandboxes/nativeapp-dockview/tsconfig.json Normal file
View File

@ -0,0 +1,20 @@
{
"compilerOptions": {
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react-jsx",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true
}
}

31
packages/docs/sandboxes/nested-dockview/package.json Normal file
View File

@ -0,0 +1,31 @@
{
"name": "nested-dockview",
"description": "",
"keywords": [
"dockview"
],
"version": "1.0.0",
"main": "src/index.tsx",
"dependencies": {
"dockview": "*",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"typescript": "^4.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

43
packages/docs/sandboxes/nested-dockview/public/index.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

0
packages/docs/src/components/dockview/nested.scss → packages/docs/sandboxes/nested-dockview/src/app.scss
View File

28
packages/docs/src/components/dockview/nested.tsx → packages/docs/sandboxes/nested-dockview/src/app.tsx
View File

@ -6,7 +6,7 @@ import {
IDockviewPanelProps,
} from 'dockview';
import * as React from 'react';
import './nested.scss';
import './app.scss';
const InnerDockview = () => {
const onReady = (event: DockviewReadyEvent) => {
@ -52,7 +52,7 @@ const components = {
innerDockview: InnerDockview,
};
export const NestedDockview = () => {
const NestedDockview = () => {
const onReady = (event: DockviewReadyEvent) => {
event.api.addPanel({
id: 'panel_1',
@ -82,20 +82,14 @@ export const NestedDockview = () => {
};
return (
<div
style={{
height: '500px',
display: 'flex',
flexDirection: 'column',
}}
>
<DockviewReact
onReady={onReady}
components={components}
className="dockview-theme-abyss"
showDndOverlay={showDndOverlay}
onDidDrop={onDidDrop}
/>
</div>
<DockviewReact
onReady={onReady}
components={components}
className="dockview-theme-abyss"
showDndOverlay={showDndOverlay}
onDidDrop={onDidDrop}
/>
);
};
export default NestedDockview;

20
packages/docs/sandboxes/nested-dockview/src/index.tsx Normal file
View File

@ -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(
<StrictMode>
<div className="app">
<App />
</div>
</StrictMode>
);
}

16
packages/docs/sandboxes/nested-dockview/src/styles.css Normal file
View File

@ -0,0 +1,16 @@
body {
margin: 0px;
color: white;
font-family: sans-serif;
text-align: center;
}
#root {
height: 100vh;
width: 100vw;
}
.app {
height: 100%;
}

20
packages/docs/sandboxes/nested-dockview/tsconfig.json Normal file
View File

@ -0,0 +1,20 @@
{
"compilerOptions": {
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react-jsx",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true
}
}

31
packages/docs/sandboxes/resize-dockview/package.json Normal file
View File

@ -0,0 +1,31 @@
{
"name": "resize-dockview",
"description": "",
"keywords": [
"dockview"
],
"version": "1.0.0",
"main": "src/index.tsx",
"dependencies": {
"dockview": "*",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"typescript": "^4.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

43
packages/docs/sandboxes/resize-dockview/public/index.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

22
packages/docs/src/components/dockview/resize.tsx → packages/docs/sandboxes/resize-dockview/src/app.tsx
View File

@ -81,7 +81,7 @@ const components = {
default: Default,
};
export const ResizeDockview = () => {
const ResizeDockview = () => {
const onReady = (event: DockviewReadyEvent) => {
event.api.addPanel({
id: 'panel_1',
@ -116,18 +116,12 @@ export const ResizeDockview = () => {
};
return (
<div
style={{
height: '500px',
display: 'flex',
flexDirection: 'column',
}}
>
<DockviewReact
className="dockview-theme-dark"
onReady={onReady}
components={components}
/>
</div>
<DockviewReact
className="dockview-theme-abyss"
onReady={onReady}
components={components}
/>
);
};
export default ResizeDockview;

20
packages/docs/sandboxes/resize-dockview/src/index.tsx Normal file
View File

@ -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(
<StrictMode>
<div className="app">
<App />
</div>
</StrictMode>
);
}

0
packages/docs/src/components/dockview/resize.scss → packages/docs/sandboxes/resize-dockview/src/resize.scss
View File

16
packages/docs/sandboxes/resize-dockview/src/styles.css Normal file
View File

@ -0,0 +1,16 @@
body {
margin: 0px;
color: white;
font-family: sans-serif;
text-align: center;
}
#root {
height: 100vh;
width: 100vw;
}
.app {
height: 100%;
}

20
packages/docs/sandboxes/resize-dockview/tsconfig.json Normal file
View File

@ -0,0 +1,20 @@
{
"compilerOptions": {
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react-jsx",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true
}
}

31
packages/docs/sandboxes/simple-dockview/package.json Normal file
View File

@ -0,0 +1,31 @@
{
"name": "simple-dockview",
"description": "",
"keywords": [
"dockview"
],
"version": "1.0.0",
"main": "src/index.tsx",
"dependencies": {
"dockview": "*",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"typescript": "^4.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

43
packages/docs/sandboxes/simple-dockview/public/index.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

36
packages/docs/src/components/simpleDockview.tsx → packages/docs/sandboxes/simple-dockview/src/app.tsx
View File

@ -2,42 +2,20 @@ import {
DockviewReact,
DockviewReadyEvent,
IDockviewPanelProps,
PanelApi,
} from 'dockview';
import * as React from 'react';
const components = {
default: (props: IDockviewPanelProps<{ title: string }>) => {
return <div style={{ padding: '20px' }}>{props.params.title}</div>;
return (
<div style={{ padding: '20px', color: 'white' }}>
{props.params.title}
</div>
);
},
};
const RenderWhenVisible = <T,>(
props: T & {
children: React.FunctionComponent<T>;
api: Pick<PanelApi, 'isVisible' | 'onDidVisibilityChange'>;
}
) => {
const [visible, setVisible] = React.useState<boolean>(props.api.isVisible);
React.useEffect(() => {
const disposable = props.api.onDidVisibilityChange((event) =>
setVisible(event.isVisible)
);
return () => {
disposable.dispose();
};
}, [props.api]);
if (!visible) {
return null;
}
return React.createElement(props.children, props);
};
export const SimpleDockview = () => {
export const App: React.FC = () => {
const onReady = (event: DockviewReadyEvent) => {
const panel = event.api.addPanel({
id: 'panel_1',
@ -114,3 +92,5 @@ export const SimpleDockview = () => {
/>
);
};
export default App;

20
packages/docs/sandboxes/simple-dockview/src/index.tsx Normal file
View File

@ -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(
<StrictMode>
<div className="app">
<App />
</div>
</StrictMode>
);
}

16
packages/docs/sandboxes/simple-dockview/src/styles.css Normal file
View File

@ -0,0 +1,16 @@
body {
margin: 0px;
color: white;
font-family: sans-serif;
text-align: center;
}
#root {
height: 100vh;
width: 100vw;
}
.app {
height: 100%;
}

20
packages/docs/sandboxes/simple-dockview/tsconfig.json Normal file
View File

@ -0,0 +1,20 @@
{
"compilerOptions": {
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react-jsx",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true
}
}

31
packages/docs/sandboxes/updatetitle-dockview/package.json Normal file
View File

@ -0,0 +1,31 @@
{
"name": "updatetitle-dockview",
"description": "",
"keywords": [
"dockview"
],
"version": "1.0.0",
"main": "src/index.tsx",
"dependencies": {
"dockview": "*",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"typescript": "^4.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

43
packages/docs/sandboxes/updatetitle-dockview/public/index.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

77
packages/docs/sandboxes/updatetitle-dockview/src/app.tsx Normal file
View File

@ -0,0 +1,77 @@
import {
DockviewReact,
DockviewReadyEvent,
IDockviewPanelProps,
} from 'dockview';
import * as React from 'react';
const components = {
default: (
props: IDockviewPanelProps<{ title: string; myValue: string }>
) => {
const [title, setTitle] = React.useState<string>(props.params.title);
const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setTitle(event.target.value);
};
const onClick = () => {
props.api.setTitle(title);
};
return (
<div style={{ padding: '20px', color: 'white' }}>
<div>
<span style={{ color: 'grey' }}>{'props.api.title='}</span>
<span>{`${props.api.title}`}</span>
</div>
<input value={title} onChange={onChange} />
<button onClick={onClick}>Change</button>
</div>
);
},
};
export const App: React.FC = () => {
const onReady = (event: DockviewReadyEvent) => {
const panel = event.api.addPanel({
id: 'panel_1',
component: 'default',
title: 'Panel 1',
});
const panel2 = event.api.addPanel({
id: 'panel_2',
component: 'default',
title: 'Panel 2',
position: { referencePanel: panel },
});
const panel3 = event.api.addPanel({
id: 'panel_3',
component: 'default',
title: 'Panel 3',
position: { referencePanel: panel, direction: 'right' },
});
const panel4 = event.api.addPanel({
id: 'panel_4',
component: 'default',
title: 'Panel 4',
position: { referencePanel: panel3 },
});
};
return (
<DockviewReact
components={components}
onReady={onReady}
className="dockview-theme-abyss"
/>
);
};
export default App;

20
packages/docs/sandboxes/updatetitle-dockview/src/index.tsx Normal file
View File

@ -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(
<StrictMode>
<div className="app">
<App />
</div>
</StrictMode>
);
}

16
packages/docs/sandboxes/updatetitle-dockview/src/styles.css Normal file
View File

@ -0,0 +1,16 @@
body {
margin: 0px;
color: white;
font-family: sans-serif;
text-align: center;
}
#root {
height: 100vh;
width: 100vw;
}
.app {
height: 100%;
}

20
packages/docs/sandboxes/updatetitle-dockview/tsconfig.json Normal file
View File

@ -0,0 +1,20 @@
{
"compilerOptions": {
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react-jsx",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true
}
}

31
packages/docs/sandboxes/watermark-dockview/package.json Normal file
View File

@ -0,0 +1,31 @@
{
"name": "watermark-dockview",
"description": "",
"keywords": [
"dockview"
],
"version": "1.0.0",
"main": "src/index.tsx",
"dependencies": {
"dockview": "*",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"typescript": "^4.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

43
packages/docs/sandboxes/watermark-dockview/public/index.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

7
packages/docs/src/components/dockview/watermark.tsx → packages/docs/sandboxes/watermark-dockview/src/app.tsx
View File

@ -7,7 +7,6 @@ import {
Orientation,
} from 'dockview';
import * as React from 'react';
import './nested.scss';
const components = {
default: (props: IDockviewPanelProps<{ title: string }>) => {
@ -82,7 +81,7 @@ const Watermark = (props: IWatermarkPanelProps) => {
);
};
export const DockviewWatermark = () => {
const DockviewWatermark = () => {
const [api, setApi] = React.useState<DockviewApi>();
const onReady = (event: DockviewReadyEvent) => {
@ -115,9 +114,9 @@ export const DockviewWatermark = () => {
return (
<div
style={{
height: '500px',
display: 'flex',
flexDirection: 'column',
height: '100%',
}}
>
<div>
@ -132,3 +131,5 @@ export const DockviewWatermark = () => {
</div>
);
};
export default DockviewWatermark;

20
packages/docs/sandboxes/watermark-dockview/src/index.tsx Normal file
View File

@ -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(
<StrictMode>
<div className="app">
<App />
</div>
</StrictMode>
);
}

16
packages/docs/sandboxes/watermark-dockview/src/styles.css Normal file
View File

@ -0,0 +1,16 @@
body {
margin: 0px;
color: white;
font-family: sans-serif;
text-align: center;
}
#root {
height: 100vh;
width: 100vw;
}
.app {
height: 100%;
}

20
packages/docs/sandboxes/watermark-dockview/tsconfig.json Normal file
View File

@ -0,0 +1,20 @@
{
"compilerOptions": {
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react-jsx",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true
}
}

37
packages/docs/src/components/container.scss Normal file
View File

@ -0,0 +1,37 @@
.codesandbox-button {
display: flex;
align-items: center;
padding: 0px 4px;
border-radius: 4px;
.codesandbox-button-pretext {
padding: 0px 4px;
}
.codesandbox-button-content {
display: flex;
align-items: center;
}
&:hover {
cursor: pointer;
background-color: rgb(37, 37, 37);
.codesandbox-button-content {
color: rgb(237, 255, 165);
text-decoration: none;
}
.codesandbox-button-pretext {
color: rgb(245, 245, 245);
}
}
}
.dockview-svg {
display: inline-block;
fill: currentcolor;
line-height: 1;
stroke: currentcolor;
stroke-width: 0;
}

82
packages/docs/src/components/container.tsx Normal file
View File

@ -0,0 +1,82 @@
import useBaseUrl from '@docusaurus/useBaseUrl';
import * as React from 'react';
import './container.scss';
const createSvgElementFromPath = (params: {
height: string;
width: string;
viewbox: string;
path: string;
}) => {
return (
<svg
height={params.height}
width={params.width}
viewBox={params.viewbox}
focusable={false}
className={'dockview-svg'}
>
<path d={params.path} />
</svg>
);
};
export const CreateCloseButton = () =>
createSvgElementFromPath({
width: '16',
height: '16',
viewbox: '0 0 50 58',
path: 'M22.5581 50.9938V30.1717L4.65116 19.869V31.7386L12.8536 36.4939V45.4198L22.5581 50.9938ZM27.2093 51.1162L37.0931 45.4226V36.2851L45.3488 31.501V19.7801L27.2093 30.2529V51.1162ZM42.9633 15.7867L33.4288 10.2615L25.0571 15.1193L16.6219 10.2567L7.00237 15.8557L24.9542 26.1842L42.9633 15.7867ZM0 43.4008V14.5498L24.9974 0L50 14.4887V43.3552L24.9969 57.7584L0 43.4008Z',
});
export const Container = (props: {
children: React.ReactNode;
height?: number;
}) => {
return (
<>
<div
style={{
height: props.height ? `${props.height}px` : '300px',
}}
>
{props.children}
</div>
<div
style={{
padding: '2px 0px',
display: 'flex',
alignItems: 'center',
fontSize: '14px',
}}
>
<span style={{ flexGrow: 1 }} />
<span
className="codesandbox-button"
style={{ display: 'flex', alignItems: 'center' }}
>
<span className="codesandbox-button-pretext">{`Open in `}</span>
<a
href="https://www.google.com"
target={'_blank'}
className="codesandbox-button-content"
>
<span
style={{ fontWeight: 'bold', paddingRight: '4px' }}
>
CodeSandbox
</span>
<CreateCloseButton />
</a>
</span>
{/* <span
style={{ fontSize: '16px' }}
className="material-symbols-outlined"
>
open_in_new
</span> */}
</div>
</>
);
};

114
packages/docs/src/components/dockview/contextMenu.tsx
View File

@ -1,114 +0,0 @@
import {
DockviewReact,
DockviewReadyEvent,
IDockviewPanelHeaderProps,
IDockviewPanelProps,
TabContextMenuEvent,
} from 'dockview';
import * as React from 'react';
const components = {
default: (props: IDockviewPanelProps<{ title: string }>) => {
return <div style={{ padding: '20px' }}>{props.params.title}</div>;
},
};
const CustomTab = (
props: IDockviewPanelHeaderProps & React.DOMAttributes<HTMLDivElement>
) => {
const onClose = React.useCallback(
(event: React.MouseEvent<HTMLSpanElement>) => {
event.stopPropagation();
props.api.close();
},
[props.api]
);
const onClick = React.useCallback(
(event: React.MouseEvent<HTMLDivElement>) => {
props.api.setActive();
if (props.onClick) {
props.onClick(event);
}
},
[props.api, props.onClick]
);
return (
<div {...props} onClick={onClick} className="dockview-react-tab">
<span className="dockview-react-tab-title">{props.api.title}</span>
<span onClick={onClose} className="dockview-react-tab-action">
{'✕'}
</span>
</div>
);
};
const Test = (props: IDockviewPanelHeaderProps) => {
const onContextMenu = (event: React.MouseEvent) => {
event.preventDefault();
alert('hiya');
};
return <CustomTab onContextMenu={onContextMenu} {...props} />;
};
const tabComponents = {
default: Test,
};
export const ContextMenuDockview = () => {
const onReady = (event: DockviewReadyEvent) => {
event.api.addPanel({
id: 'panel_1',
component: 'default',
tabComponent: 'default',
params: {
title: 'Panel 1',
},
});
event.api.addPanel({
id: 'panel_2',
component: 'default',
tabComponent: 'default',
params: {
title: 'Panel 2',
},
});
event.api.addPanel({
id: 'panel_3',
component: 'default',
tabComponent: 'default',
params: {
title: 'Panel 3',
},
});
event.api.addPanel({
id: 'panel_4',
component: 'default',
tabComponent: 'default',
params: {
title: 'Panel 4',
},
position: { referencePanel: 'panel_1', direction: 'right' },
});
};
const onContextMenu = (event: TabContextMenuEvent) => {
event.event.preventDefault();
alert(`Content appear event fired for panel ${event.panel.id}`);
};
return (
<DockviewReact
components={components}
tabComponents={tabComponents}
onReady={onReady}
className="dockview-theme-abyss"
onTabContextMenu={onContextMenu}
/>
);
};

Some files were not shown because too many files have changed in this diff Show More