mirror of
https://github.com/mathuo/dockview
synced 2025-03-12 00:42:04 +00:00
Merge pull request #209 from mathuo/208-documentation-examples
chore: sandbox example
This commit is contained in:
mathuo
GitHub
commit
5b1aa4221f
.codesandbox
package.jsonpackages
dockview-core
package.json
src/dockview
dockview
docs
docs
sandboxes
constraints-dockview
customheader-dockview
dnd-dockview
events-dockview
fullwidthtab-dockview
groupcontrol-dockview
layout-dockview
nativeapp-dockview
nested-dockview
resize-dockview
simple-dockview
updatetitle-dockview
watermark-dockview
src/components
19
.codesandbox/ci.json
Normal file
19
.codesandbox/ci.json
Normal 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"
|
||||
}
|
||||
@ -65,4 +65,4 @@
|
||||
"jest": "^29.5.0",
|
||||
"ts-node": "^10.9.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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",
|
||||
|
||||
@ -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();
|
||||
}
|
||||
|
||||
|
||||
@ -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');
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
@ -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
31
packages/docs/sandboxes/constraints-dockview/package.json
Normal 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"
|
||||
]
|
||||
}
|
||||
@ -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
99
packages/docs/sandboxes/constraints-dockview/src/app.tsx
Normal 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
20
packages/docs/sandboxes/constraints-dockview/src/index.tsx
Normal 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
16
packages/docs/sandboxes/constraints-dockview/src/styles.css
Normal 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
20
packages/docs/sandboxes/constraints-dockview/tsconfig.json
Normal 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
31
packages/docs/sandboxes/customheader-dockview/package.json
Normal 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"
|
||||
]
|
||||
}
|
||||
@ -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>
|
||||
@ -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
20
packages/docs/sandboxes/customheader-dockview/src/index.tsx
Normal 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
16
packages/docs/sandboxes/customheader-dockview/src/styles.css
Normal 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
20
packages/docs/sandboxes/customheader-dockview/tsconfig.json
Normal 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
31
packages/docs/sandboxes/dnd-dockview/package.json
Normal 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
43
packages/docs/sandboxes/dnd-dockview/public/index.html
Normal 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>
|
||||
@ -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
20
packages/docs/sandboxes/dnd-dockview/src/index.tsx
Normal 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
16
packages/docs/sandboxes/dnd-dockview/src/styles.css
Normal 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
20
packages/docs/sandboxes/dnd-dockview/tsconfig.json
Normal 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
31
packages/docs/sandboxes/events-dockview/package.json
Normal 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
43
packages/docs/sandboxes/events-dockview/public/index.html
Normal 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>
|
||||
@ -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
27
packages/docs/sandboxes/events-dockview/src/console.scss
Normal 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
52
packages/docs/sandboxes/events-dockview/src/console.tsx
Normal 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
20
packages/docs/sandboxes/events-dockview/src/index.tsx
Normal 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
16
packages/docs/sandboxes/events-dockview/src/styles.css
Normal 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
20
packages/docs/sandboxes/events-dockview/tsconfig.json
Normal 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
31
packages/docs/sandboxes/fullwidthtab-dockview/package.json
Normal 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"
|
||||
]
|
||||
}
|
||||
@ -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
17
packages/docs/sandboxes/fullwidthtab-dockview/src/app.scss
Normal 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
100
packages/docs/sandboxes/fullwidthtab-dockview/src/app.tsx
Normal 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
20
packages/docs/sandboxes/fullwidthtab-dockview/src/index.tsx
Normal 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
16
packages/docs/sandboxes/fullwidthtab-dockview/src/styles.css
Normal 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
20
packages/docs/sandboxes/fullwidthtab-dockview/tsconfig.json
Normal 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
31
packages/docs/sandboxes/groupcontrol-dockview/package.json
Normal 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"
|
||||
]
|
||||
}
|
||||
@ -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
17
packages/docs/sandboxes/groupcontrol-dockview/src/app.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
@ -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
20
packages/docs/sandboxes/groupcontrol-dockview/src/index.tsx
Normal 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
16
packages/docs/sandboxes/groupcontrol-dockview/src/styles.css
Normal 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
20
packages/docs/sandboxes/groupcontrol-dockview/tsconfig.json
Normal 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
31
packages/docs/sandboxes/layout-dockview/package.json
Normal 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
43
packages/docs/sandboxes/layout-dockview/public/index.html
Normal 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>
|
||||
@ -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
20
packages/docs/sandboxes/layout-dockview/src/index.tsx
Normal 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
16
packages/docs/sandboxes/layout-dockview/src/styles.css
Normal 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
20
packages/docs/sandboxes/layout-dockview/tsconfig.json
Normal 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
31
packages/docs/sandboxes/nativeapp-dockview/package.json
Normal 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
43
packages/docs/sandboxes/nativeapp-dockview/public/index.html
Normal 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
17
packages/docs/sandboxes/nativeapp-dockview/src/app.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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
20
packages/docs/sandboxes/nativeapp-dockview/src/index.tsx
Normal 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
16
packages/docs/sandboxes/nativeapp-dockview/src/styles.css
Normal 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
20
packages/docs/sandboxes/nativeapp-dockview/tsconfig.json
Normal 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
31
packages/docs/sandboxes/nested-dockview/package.json
Normal 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
43
packages/docs/sandboxes/nested-dockview/public/index.html
Normal 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>
|
||||
@ -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
20
packages/docs/sandboxes/nested-dockview/src/index.tsx
Normal 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
16
packages/docs/sandboxes/nested-dockview/src/styles.css
Normal 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
20
packages/docs/sandboxes/nested-dockview/tsconfig.json
Normal 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
31
packages/docs/sandboxes/resize-dockview/package.json
Normal 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
43
packages/docs/sandboxes/resize-dockview/public/index.html
Normal 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>
|
||||
@ -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
20
packages/docs/sandboxes/resize-dockview/src/index.tsx
Normal 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/resize-dockview/src/styles.css
Normal file
16
packages/docs/sandboxes/resize-dockview/src/styles.css
Normal 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
20
packages/docs/sandboxes/resize-dockview/tsconfig.json
Normal 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
31
packages/docs/sandboxes/simple-dockview/package.json
Normal 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
43
packages/docs/sandboxes/simple-dockview/public/index.html
Normal 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>
|
||||
@ -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
20
packages/docs/sandboxes/simple-dockview/src/index.tsx
Normal 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
16
packages/docs/sandboxes/simple-dockview/src/styles.css
Normal 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
20
packages/docs/sandboxes/simple-dockview/tsconfig.json
Normal 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
31
packages/docs/sandboxes/updatetitle-dockview/package.json
Normal 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"
|
||||
]
|
||||
}
|
||||
@ -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
77
packages/docs/sandboxes/updatetitle-dockview/src/app.tsx
Normal 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
20
packages/docs/sandboxes/updatetitle-dockview/src/index.tsx
Normal 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
16
packages/docs/sandboxes/updatetitle-dockview/src/styles.css
Normal 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
20
packages/docs/sandboxes/updatetitle-dockview/tsconfig.json
Normal 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
31
packages/docs/sandboxes/watermark-dockview/package.json
Normal 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
43
packages/docs/sandboxes/watermark-dockview/public/index.html
Normal 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,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
20
packages/docs/sandboxes/watermark-dockview/src/index.tsx
Normal 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
16
packages/docs/sandboxes/watermark-dockview/src/styles.css
Normal 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
20
packages/docs/sandboxes/watermark-dockview/tsconfig.json
Normal 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
37
packages/docs/src/components/container.scss
Normal 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
82
packages/docs/src/components/container.tsx
Normal 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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -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
Loading…
Reference in New Issue
Block a user