rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-02-08 17:35:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: sandbox examples

Browse Source
This commit is contained in:
mathuo 2023-03-17 22:57:18 +04:00
parent 454542b729
commit 6e5e8429ec
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
82 changed files with 1856 additions and 523 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
.codesandbox/ci.json
View File

@ -4,7 +4,16 @@
"packages/dockview"
],
"sandboxes": [
"/packages/docs/sandboxes/layout-persistance"
"/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
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",

2
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",

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

@ -7,23 +7,23 @@ 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 { DockviewGroupControl } from '@site/src/components/dockview/groupControl';
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-persistance/src/app';
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
@ -247,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
@ -324,7 +326,9 @@ return (
);
```
<DndDockview />
<Container>
<DndDockview />
</Container>
## Panels
@ -515,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
@ -538,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
@ -588,7 +598,9 @@ to the entire width of the group. For example:
<DockviewReactComponent singleTabMode="fullwidth" {...otherProps} />
```
<DockviewNative />
<Container>
<DockviewNative />
</Container>
## Groups
@ -640,11 +652,15 @@ const GroupControlComponent = (props: IDockviewGroupControlProps) => {
};
```
<DockviewGroupControl />
<Container>
<DockviewGroupControl />
</Container>
## Events
<EventsDockview />
<Container height={600}>
<EventsDockview />
</Container>
## Advanced Examples
@ -653,7 +669,9 @@ 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
@ -666,3 +684,9 @@ hello 2
<div style={{ height: '400px', width: '100%' }}>
<App />
</div>
## Contraints
<Container>
<DockviewConstraints />
</Container>

9
packages/docs/sandboxes/layout-persistance/package.json → packages/docs/sandboxes/constraints-dockview/package.json
View File

@ -1,11 +1,8 @@
{
"name": "layout-persistance",
"description": "Using interpolations & CSS 3D create a flip card effect",
"name": "constraints-dockview",
"description": "",
"keywords": [
"css",
"3D",
"useSpring",
"interpolation"
"dockview"
],
"version": "1.0.0",
"main": "src/index.tsx",

0
packages/docs/sandboxes/layout-persistance/public/index.html → packages/docs/sandboxes/constraints-dockview/public/index.html
View File

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;

0
packages/docs/sandboxes/layout-persistance/src/index.tsx → packages/docs/sandboxes/constraints-dockview/src/index.tsx
View File

0
packages/docs/sandboxes/layout-persistance/src/styles.css → packages/docs/sandboxes/constraints-dockview/src/styles.css
View File

0
packages/docs/sandboxes/layout-persistance/tsconfig.json → packages/docs/sandboxes/constraints-dockview/tsconfig.json
View File

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>

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

@ -102,17 +102,25 @@ export const DockviewPersistance = () => {
style={{
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>
);
};

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
}
}

9
packages/docs/sandboxes/resize-dockview/package.json
View File

@ -1,11 +1,8 @@
{
"name": "layout-persistance",
"description": "Using interpolations & CSS 3D create a flip card effect",
"name": "resize-dockview",
"description": "",
"keywords": [
"css",
"3D",
"useSpring",
"interpolation"
"dockview"
],
"version": "1.0.0",
"main": "src/index.tsx",

9
packages/docs/sandboxes/simple-dockview/package.json
View File

@ -1,11 +1,8 @@
{
"name": "layout-persistance",
"description": "Using interpolations & CSS 3D create a flip card effect",
"name": "simple-dockview",
"description": "",
"keywords": [
"css",
"3D",
"useSpring",
"interpolation"
"dockview"
],
"version": "1.0.0",
"main": "src/index.tsx",

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
}
}

9
packages/docs/sandboxes/watermark-dockview/package.json
View File

@ -1,11 +1,8 @@
{
"name": "layout-persistance",
"description": "Using interpolations & CSS 3D create a flip card effect",
"name": "watermark-dockview",
"description": "",
"keywords": [
"css",
"3D",
"useSpring",
"interpolation"
"dockview"
],
"version": "1.0.0",
"main": "src/index.tsx",

2
packages/docs/sandboxes/watermark-dockview/src/app.tsx
View File

@ -114,9 +114,9 @@ const DockviewWatermark = () => {
return (
<div
style={{
height: '500px',
display: 'flex',
flexDirection: 'column',
height: '100%',
}}
>
<div>

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;
}

84
packages/docs/src/components/container.tsx
View File

@ -1,14 +1,82 @@
import useBaseUrl from '@docusaurus/useBaseUrl';
import * as React from 'react';
import './container.scss';
export const Container = (props: { children: React.ReactNode }) => {
const createSvgElementFromPath = (params: {
height: string;
width: string;
viewbox: string;
path: string;
}) => {
return (
<div
style={{
height: '300px',
margin: '20px 0px',
}}
<svg
height={params.height}
width={params.width}
viewBox={params.viewbox}
focusable={false}
className={'dockview-svg'}
>
{props.children}
</div>
<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}
/>
);
};

17
packages/docs/src/components/dockview/groupControl.scss
View File

@ -1,17 +0,0 @@
.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;
}
}

34
packages/docs/src/components/dockview/native.scss
View File

@ -1,34 +0,0 @@
.nested-dockview {
position: relative;
::after {
content: '';
position: absolute;
top: 0px;
left: 0px;
height: 1px;
width: 100%;
background-color: var(--dv-separator-border);
}
}
.header-title {
padding: 0px 8px;
}
.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);
}
}
}

134
packages/docs/src/components/dockview/watermark.tsx
View File

@ -1,134 +0,0 @@
import {
DockviewApi,
DockviewReact,
DockviewReadyEvent,
IDockviewPanelProps,
IWatermarkPanelProps,
Orientation,
} from 'dockview';
import * as React from 'react';
import './nested.scss';
const components = {
default: (props: IDockviewPanelProps<{ title: string }>) => {
return (
<div
style={{
height: '100%',
padding: '20px',
background: 'var(--dv-group-view-background-color)',
}}
>
{props.params.title}
</div>
);
},
};
const counter = (() => {
let i = 0;
return {
next: () => ++i,
};
})();
const Watermark = (props: IWatermarkPanelProps) => {
const isGroup = props.containerApi.groups.length > 0;
const addPanel = () => {
props.containerApi.addPanel({
id: counter.next().toString(),
component: 'default',
});
};
return (
<div
style={{
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
color: 'white',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
}}
>
<span>
This is a custom watermark. You can put whatever React
component you want here
</span>
<span>
<button onClick={addPanel}>Add New Panel</button>
</span>
{isGroup && (
<span>
<button
onClick={() => {
props.close();
}}
>
Close Group
</button>
</span>
)}
</div>
</div>
);
};
export const DockviewWatermark = () => {
const [api, setApi] = React.useState<DockviewApi>();
const onReady = (event: DockviewReadyEvent) => {
// event.api.addPanel({
// id: 'panel_1',
// component: 'default',
// });
event.api.fromJSON({
grid: {
orientation: Orientation.HORIZONTAL,
root: { type: 'branch', data: [] },
height: 100,
width: 100,
},
panels: {},
});
setApi(event.api);
};
const onClick = () => {
if (!api) {
return;
}
api.addGroup();
};
return (
<div
style={{
height: '500px',
display: 'flex',
flexDirection: 'column',
}}
>
<div>
<button onClick={onClick}>Add Empty Group</button>
</div>
<DockviewReact
onReady={onReady}
components={components}
watermarkComponent={Watermark}
className="dockview-theme-abyss nested-dockview"
/>
</div>
);
};

21
packages/docs/versioned_docs/version-1.6.0/components/dockview.mdx vendored
View File

@ -6,23 +6,20 @@ 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 { DockviewGroupControl } from '@site/src/components/dockview/groupControl';
import { DockviewWatermark } from '@site/src/components/dockview/watermark';
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-persistance/src/app';
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 NestedDockview from '@site/sandboxes/nested-dockview/src/app';
import EventsDockview from '@site/sandboxes/events-dockview/src/app';
import DndDockview from '@site/sandboxes/dnd-dockview/src/app';
import DockviewGroupControl from '@site/sandboxes/groupcontrol-dockview/src/app';
import DockviewWatermark from '@site/sandboxes/watermark-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';
# Dockview