mirror of
https://github.com/mathuo/dockview
synced 2025-02-02 14:35:46 +00:00
mathuo
GitHub
commit
6c2c59f858
@ -2,8 +2,8 @@
|
|||||||
sidebar_position: 1
|
sidebar_position: 1
|
||||||
---
|
---
|
||||||
|
|
||||||
import { SimpleSplitview } from '../src/components/simpleSplitview';
|
import { SimpleSplitview } from '@site/src/components/simpleSplitview';
|
||||||
import { SimpleSplitview2 } from '../src/components/simpleSplitview2';
|
import { SimpleSplitview2 } from '@site/src/components/simpleSplitview2';
|
||||||
|
|
||||||
# Basics
|
# Basics
|
||||||
|
|
||||||
|
|||||||
@ -1,11 +1,11 @@
|
|||||||
import { SimpleDockview } from '../../src/components/simpleDockview';
|
import { SimpleDockview } from '@site/src/components/simpleDockview';
|
||||||
import {
|
import {
|
||||||
RenderingDockview,
|
RenderingDockview,
|
||||||
Checkbox,
|
Checkbox,
|
||||||
} from '../../src/components/dockview/rendering';
|
} from '@site/src/components/dockview/rendering';
|
||||||
import { DndDockview } from '../../src/components/dockview/dnd';
|
import { DndDockview } from '@site/src/components/dockview/dnd';
|
||||||
import { EventsDockview } from '../../src/components/dockview/events';
|
import { EventsDockview } from '@site/src/components/dockview/events';
|
||||||
import { ContextMenuDockview } from '../../src/components/dockview/contextMenu';
|
import { ContextMenuDockview } from '@site/src/components/dockview/contextMenu';
|
||||||
import Link from '@docusaurus/Link';
|
import Link from '@docusaurus/Link';
|
||||||
|
|
||||||
# Dockview
|
# Dockview
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import { SimpleGridview } from '../../src/components/simpleGridview';
|
import { SimpleGridview } from '@site/src/components/simpleGridview';
|
||||||
import { EventsGridview } from '../../src/components/gridview/events';
|
import { EventsGridview } from '@site/src/components/gridview/events';
|
||||||
import Link from '@docusaurus/Link';
|
import Link from '@docusaurus/Link';
|
||||||
|
|
||||||
# Gridview
|
# Gridview
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import { SimplePaneview } from '../../src/components/simplePaneview';
|
import { SimplePaneview } from '@site/src/components/simplePaneview';
|
||||||
import { CustomHeaderPaneview } from '../../src/components/paneview/customHeader';
|
import { CustomHeaderPaneview } from '@site/src/components/paneview/customHeader';
|
||||||
import { DragAndDropPaneview } from '../../src/components/paneview/dragAndDrop';
|
import { DragAndDropPaneview } from '@site/src/components/paneview/dragAndDrop';
|
||||||
import Link from '@docusaurus/Link';
|
import Link from '@docusaurus/Link';
|
||||||
|
|
||||||
# Paneview
|
# Paneview
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import { SimpleSplitview } from '../../src/components/simpleSplitview';
|
import { SimpleSplitview } from '@site/src/components/simpleSplitview';
|
||||||
import { SplitviewExample1 } from '../../src/components/splitview/active';
|
import { SplitviewExample1 } from '@site/src/components/splitview/active';
|
||||||
import Link from '@docusaurus/Link';
|
import Link from '@docusaurus/Link';
|
||||||
|
|
||||||
# Splitview
|
# Splitview
|
||||||
|
|||||||
@ -2,10 +2,10 @@
|
|||||||
sidebar_position: 0
|
sidebar_position: 0
|
||||||
---
|
---
|
||||||
|
|
||||||
import { SimpleSplitview } from '../src/components/simpleSplitview';
|
import { SimpleSplitview } from '@site/src/components/simpleSplitview';
|
||||||
import { SimpleGridview } from '../src/components/simpleGridview';
|
import { SimpleGridview } from '@site/src/components/simpleGridview';
|
||||||
import { SimplePaneview } from '../src/components/simplePaneview';
|
import { SimplePaneview } from '@site/src/components/simplePaneview';
|
||||||
import { SimpleDockview } from '../src/components/simpleDockview';
|
import { SimpleDockview } from '@site/src/components/simpleDockview';
|
||||||
|
|
||||||
# Dockview
|
# Dockview
|
||||||
|
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
sidebar_position: 3
|
sidebar_position: 3
|
||||||
---
|
---
|
||||||
|
|
||||||
import { CustomCSSDockview } from '../src/components/dockview/customCss';
|
import { CustomCSSDockview } from '@site/src/components/dockview/customCss';
|
||||||
|
|
||||||
# Theme
|
# Theme
|
||||||
|
|
||||||
|
|||||||
@ -69,6 +69,11 @@ const config = {
|
|||||||
// Remove this to remove the "edit this page" links.
|
// Remove this to remove the "edit this page" links.
|
||||||
editUrl:
|
editUrl:
|
||||||
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
|
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
|
||||||
|
versions: {
|
||||||
|
current: {
|
||||||
|
label: `Development 🚧`,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
blog: {
|
blog: {
|
||||||
showReadingTime: true,
|
showReadingTime: true,
|
||||||
@ -80,6 +85,11 @@ const config = {
|
|||||||
theme: {
|
theme: {
|
||||||
customCss: require.resolve('./src/css/custom.css'),
|
customCss: require.resolve('./src/css/custom.css'),
|
||||||
},
|
},
|
||||||
|
gtag: process.env.CI
|
||||||
|
? {
|
||||||
|
trackingID: 'G-KXGC1C9ZHC',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
],
|
],
|
||||||
@ -123,6 +133,10 @@ const config = {
|
|||||||
label: 'Docs',
|
label: 'Docs',
|
||||||
},
|
},
|
||||||
{ to: '/blog', label: 'Blog', position: 'left' },
|
{ to: '/blog', label: 'Blog', position: 'left' },
|
||||||
|
{
|
||||||
|
type: 'docsVersionDropdown',
|
||||||
|
position: 'right',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
href: 'https://github.com/mathuo/dockview',
|
href: 'https://github.com/mathuo/dockview',
|
||||||
label: 'GitHub',
|
label: 'GitHub',
|
||||||
|
|||||||
@ -25,12 +25,19 @@ const CustomTab = (
|
|||||||
[props.api]
|
[props.api]
|
||||||
);
|
);
|
||||||
|
|
||||||
const onClick = React.useCallback(() => {
|
const onClick = React.useCallback(
|
||||||
|
(event: React.MouseEvent<HTMLDivElement>) => {
|
||||||
props.api.setActive();
|
props.api.setActive();
|
||||||
}, [props.api]);
|
|
||||||
|
if (props.onClick) {
|
||||||
|
props.onClick(event);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[props.api, props.onClick]
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div onClick={onClick} className="dockview-react-tab">
|
<div {...props} onClick={onClick} className="dockview-react-tab">
|
||||||
<span className="dockview-react-tab-title">{props.api.title}</span>
|
<span className="dockview-react-tab-title">{props.api.title}</span>
|
||||||
<span onClick={onClose} className="dockview-react-tab-action">
|
<span onClick={onClose} className="dockview-react-tab-action">
|
||||||
{'✕'}
|
{'✕'}
|
||||||
@ -40,11 +47,15 @@ const CustomTab = (
|
|||||||
};
|
};
|
||||||
|
|
||||||
const Test = (props: IDockviewPanelHeaderProps) => {
|
const Test = (props: IDockviewPanelHeaderProps) => {
|
||||||
return <CustomTab {...props} />;
|
const onContextMenu = (event: React.MouseEvent) => {
|
||||||
|
event.preventDefault();
|
||||||
|
alert('hiya');
|
||||||
|
};
|
||||||
|
return <CustomTab onContextMenu={onContextMenu} {...props} />;
|
||||||
};
|
};
|
||||||
|
|
||||||
const tabComponents = {
|
const tabComponents = {
|
||||||
default: CustomTab,
|
default: Test,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const ContextMenuDockview = () => {
|
export const ContextMenuDockview = () => {
|
||||||
|
|||||||
117
packages/docs/versioned_docs/version-1.4.3/basics.mdx
vendored
Normal file
117
packages/docs/versioned_docs/version-1.4.3/basics.mdx
vendored
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 1
|
||||||
|
---
|
||||||
|
|
||||||
|
import { SimpleSplitview } from '@site/src/components/simpleSplitview';
|
||||||
|
import { SimpleSplitview2 } from '@site/src/components/simpleSplitview2';
|
||||||
|
|
||||||
|
# Basics
|
||||||
|
|
||||||
|
This section will take you through a number of concepts that can be applied to all dockview components.
|
||||||
|
|
||||||
|
## Panels
|
||||||
|
|
||||||
|
The below examples use `ReactSplitview` but the logic holds for `ReactPaneview`, `ReactGridview` and `ReactDockview` using their respective implementations and interfaces.
|
||||||
|
All components require you to provide an `onReady` prop which you can use to build and control your component.
|
||||||
|
|
||||||
|
### Adding a panel with parameters
|
||||||
|
|
||||||
|
You can pass parameters to a panel through the `params` object
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const onReady = (event: SplitviewReadyEvent) => {
|
||||||
|
event.api.addPanel({
|
||||||
|
id: 'panel_1',
|
||||||
|
component: 'myComponent',
|
||||||
|
params: {
|
||||||
|
title: 'My Title',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
and you can access those properties through the `props.params` object. The TypeScript interface accepts an optional generic type `T` that corresponds to the params objects type.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
|
||||||
|
return <div>{`My first panel has the title: ${props.params.title}`}</div>;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
There are two types of API you will interact with using `dockview`.
|
||||||
|
|
||||||
|
- The `panel API` is accessible via `props.api` in user defined panels and via the `.api` variable found on panel instances. This API contains actions and variable related to the the individual panel.
|
||||||
|
- The `container API` is accessible via `event.api` in the `onReady` events and `props.containerApi` in user defined panels. This API contains actions and variable related to the component as a whole.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
|
||||||
|
React.useEffect(() => {
|
||||||
|
const disposable = props.api.onDidActiveChange((event) => {
|
||||||
|
console.log(`is panel active: ${event.isActive}`);
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
disposable.dispose(); // remember to dispose of any subscriptions
|
||||||
|
};
|
||||||
|
}, [props.api]);
|
||||||
|
|
||||||
|
const addAnotherPanel = React.useCallback(() => {
|
||||||
|
props.containerApi.addPanel({
|
||||||
|
id: 'another_id',
|
||||||
|
component: 'anotherComponent',
|
||||||
|
});
|
||||||
|
}, [props.containerApi]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<span>{`My first panel has the title: ${props.params.title}`}</span>
|
||||||
|
<button onClick={addAnotherPanel}>Add Panel</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### Serialization
|
||||||
|
|
||||||
|
All components support `toJSON(): T` which returns a Typed object representation of the components state. This same Typed object can be used to deserialize a view using `fromJSON(object: T): void`.
|
||||||
|
|
||||||
|
## Auto resizing
|
||||||
|
|
||||||
|
`SplitviewReact`, `GridviewReact`, `PaneviewReact` and `DockviewReact` will all automatically resize to fill the size of their parent element.
|
||||||
|
Internally this is achieved using a [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) which some users may need to polyfill.
|
||||||
|
You can disable this by settings the `disableAutoResizing` prop to be `true`.
|
||||||
|
|
||||||
|
You can manually resize a component using the API method `layout(width: number, height: number): void`.
|
||||||
|
An advanced case may use this in conjunction with `disableAutoResizing=true` to allow a parent component to have ultimate control over the dimensions of the component.
|
||||||
|
|
||||||
|
## Events
|
||||||
|
|
||||||
|
Many API properties can be listened on using the `Event` pattern. For example `api.onDidFocusChange(() => {...})`.
|
||||||
|
You should dispose of any event listeners you create cleaning up any listeners you would have created.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
React.useEffect(() => {
|
||||||
|
const disposable = api.onDidFocusChange(() => {
|
||||||
|
// write some code
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
disposable.dispose();
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
```
|
||||||
|
|
||||||
|
## Proportional layout
|
||||||
|
|
||||||
|
The `proportionalLayout` property indicates the expected behaviour of the component as it's container resizes, should all views resize equally or should just one view expand to fill the new space. `proportionalLayout` can be set as a property on `SplitviewReact` and `GridviewReact` components.
|
||||||
|
Although not configurable on `DockviewReact` and `PaneviewReact` these both behave as if `proportionalLayout=true` was set for them.
|
||||||
|
|
||||||
|
<SimpleSplitview2 proportional={false} />
|
||||||
|
|
||||||
|
<SimpleSplitview2 proportional={true} />
|
||||||
|
|
||||||
|
## Browser support
|
||||||
|
|
||||||
|
dockview is intended to support all major browsers. Some users may require a polyfill for [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
|
||||||
9
packages/docs/versioned_docs/version-1.4.3/components/_category_.json
vendored
Normal file
9
packages/docs/versioned_docs/version-1.4.3/components/_category_.json
vendored
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"label": "Components",
|
||||||
|
"collapsible": true,
|
||||||
|
"collapsed": false,
|
||||||
|
"link": {
|
||||||
|
"type": "generated-index",
|
||||||
|
"title": "Components"
|
||||||
|
},
|
||||||
|
}
|
||||||
294
packages/docs/versioned_docs/version-1.4.3/components/dockview.mdx
vendored
Normal file
294
packages/docs/versioned_docs/version-1.4.3/components/dockview.mdx
vendored
Normal file
@ -0,0 +1,294 @@
|
|||||||
|
import { SimpleDockview } from '@site/src/components/simpleDockview';
|
||||||
|
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 Link from '@docusaurus/Link';
|
||||||
|
|
||||||
|
# Dockview
|
||||||
|
|
||||||
|
## Introduction
|
||||||
|
|
||||||
|
Dockview is an abstraction built on top of [Gridviews](/docs/api/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',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SimpleDockview />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
You can access the panels associated group through the `panel.group` variable.
|
||||||
|
The group will always be defined and will change if a panel is moved into another group.
|
||||||
|
|
||||||
|
## DockviewReact Component
|
||||||
|
|
||||||
|
You can create a Dockview through the use of the `ReactDockview` component.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { ReactDockview } from 'dockview';
|
||||||
|
```
|
||||||
|
|
||||||
|
| Property | Type | Optional | Default | Description |
|
||||||
|
| ------------------- | ------------------------------------ | -------- | ------- | --------------------------------------------------------------- |
|
||||||
|
| onReady | (event: SplitviewReadyEvent) => void | No | | |
|
||||||
|
| components | object | No | | |
|
||||||
|
| tabComponents | object | Yes | | |
|
||||||
|
| watermarkComponent | object | Yes | | |
|
||||||
|
| hideBorders | boolean | Yes | false | |
|
||||||
|
| className | string | Yes | '' | |
|
||||||
|
| disableAutoResizing | boolean | Yes | false | See <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> |
|
||||||
|
| onTabContextMenu | Event | Yes | false | |
|
||||||
|
| onDidDrop | Event | Yes | false | |
|
||||||
|
| showDndOverlay | Event | Yes | false | |
|
||||||
|
|
||||||
|
## Dockview API
|
||||||
|
|
||||||
|
The Dockview API is exposed both at the `onReady` event and on each panel through `props.containerApi`.
|
||||||
|
Through this API you can control general features of the component and access all added panels.
|
||||||
|
|
||||||
|
```tsx title="Dockview API via Panel component"
|
||||||
|
const MyComponent = (props: IDockviewPanelProps<{ title: string }>) => {
|
||||||
|
// props.containerApi...
|
||||||
|
|
||||||
|
return <div>{`My first panel has the title: ${props.params.title}`}</div>;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
```tsx title="Dockview API via the onReady callback"
|
||||||
|
const onReady = (event: DockviewReadyEvent) => {
|
||||||
|
// event.api...
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
| Property | Type | Description |
|
||||||
|
| ---------------------- | ---------------------------------------------------- | ----------------------------------------------------------- |
|
||||||
|
| height | `number` | Component pixel height |
|
||||||
|
| width | `number` | Component pixel width |
|
||||||
|
| minimumHeight | `number` | |
|
||||||
|
| maximumHeight | `number` | |
|
||||||
|
| maximumWidth | `number` | |
|
||||||
|
| maximumWidth | `number` | |
|
||||||
|
| length | `number` | Number of panels |
|
||||||
|
| size | `number` | Number of Groups |
|
||||||
|
| panels | `IDockviewPanel[]` | |
|
||||||
|
| groups | `GroupPanel[]` | |
|
||||||
|
| activePanel | `IDockviewPanel \| undefined` | |
|
||||||
|
| activeGroup | `IDockviewPanel \| undefined` | |
|
||||||
|
| | | |
|
||||||
|
| onDidLayoutChange | `Event<void>` | |
|
||||||
|
| onDidLayoutFromJSON | `Event<void>` | |
|
||||||
|
| onDidAddGroup | `Event<GroupPanel>` | |
|
||||||
|
| onDidRemoveGroup | `Event<GroupPanel>` | |
|
||||||
|
| onDidActiveGroupChange | `Event<GroupPanel \| undefined>` | |
|
||||||
|
| onDidAddPanel | `Event<IDockviewPanel>` | |
|
||||||
|
| onDidRemovePanel | `Event<IDockviewPanel>` | |
|
||||||
|
| onDidActivePanelChange | `Event<IDockviewPanel \| undefined>` | |
|
||||||
|
| onDidDrop | `Event<DockviewDropEvent` | |
|
||||||
|
| | | |
|
||||||
|
| addPanel | `addPanel(options: AddPanelOptions): IDockviewPanel` | |
|
||||||
|
| getPanel | `(id: string) \| IDockviewPanel \| undefined` | |
|
||||||
|
| addEmptyGroup | `(options? AddGroupOptions): void` | |
|
||||||
|
| closeAllGroups | `(): void` | |
|
||||||
|
| removeGroup | `(group: GroupPanel): void` | |
|
||||||
|
| getGroup | `(id: string): GroupPanel \| undefined` | |
|
||||||
|
| | | |
|
||||||
|
| getTabHeight | `(): number \| undefined` | |
|
||||||
|
| setTabHeight | `(hegiht: number \| undefined): void` | |
|
||||||
|
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
|
||||||
|
| focus | `(): void` | |
|
||||||
|
| layout | `(width: number, height:number): void` | <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> |
|
||||||
|
| fromJSON | `(data: SerializedDockview): void` | <Link to="/docs/basics/#serialization">Serialization</Link> |
|
||||||
|
| toJSON | `(): SerializedDockview` | <Link to="/docs/basics/#serialization">Serialization</Link> |
|
||||||
|
| clear | `(): void` | Clears the current layout |
|
||||||
|
|
||||||
|
## Dockview Panel API
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const MyComponent = (props: IDockviewPanelProps<{ title: string }>) => {
|
||||||
|
// props.api...
|
||||||
|
|
||||||
|
return <div>{`My first panel has the title: ${props.params.title}`}</div>;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
| Property | Type | Description |
|
||||||
|
| ---------------------- | ----------------------------------------------------------- | --------------- |
|
||||||
|
| id | `string` | Panel id |
|
||||||
|
| isFocused | `boolean` | Is panel focsed |
|
||||||
|
| isActive | `boolean` | Is panel active |
|
||||||
|
| width | `number` | Panel width |
|
||||||
|
| height | `number` | Panel height |
|
||||||
|
| onDidDimensionsChange | `Event<PanelDimensionChangeEvent>` | |
|
||||||
|
| onDidFocusChange | `Event<FocusEvent>` | |
|
||||||
|
| onDidVisibilityChange | `Event<VisibilityEvent>` | |
|
||||||
|
| onDidActiveChange | `Event<ActiveEvent>` | |
|
||||||
|
| setActive | `(): void` | |
|
||||||
|
| | | |
|
||||||
|
| onDidConstraintsChange | `onDidConstraintsChange: Event<PanelConstraintChangeEvent>` | |
|
||||||
|
| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | |
|
||||||
|
| setSize | `(event: SizeEvent): void` | |
|
||||||
|
| | | |
|
||||||
|
| group | `GroupPanel | undefined` |
|
||||||
|
| isGroupActive | `boolean` | |
|
||||||
|
| title | `string` | |
|
||||||
|
| suppressClosable | `boolean` | |
|
||||||
|
| close | `(): void` | |
|
||||||
|
| setTitle | `(title: string): void` | |
|
||||||
|
|
||||||
|
## Advanced Features
|
||||||
|
|
||||||
|
### Locked group
|
||||||
|
|
||||||
|
Locking a group will disable all drop events for this group ensuring a user can not add additional panels to the group.
|
||||||
|
You can still add groups to a locked panel programatically using the API.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
panel.group.locked = true;
|
||||||
|
```
|
||||||
|
|
||||||
|
### Group header
|
||||||
|
|
||||||
|
You may wish to hide the header section of a group. This can achieved through setting the `hidden` variable on `panel.group.header`.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
panel.group.header.hidden = true;
|
||||||
|
```
|
||||||
|
|
||||||
|
### Context Menu
|
||||||
|
|
||||||
|
Since overriding the context menu is a such a common feature rather than defining a custom tab the `ReactDockview` component exposes the prop `onTabContextMenu`.
|
||||||
|
You can alternatively define a custom tab component for more granular control.
|
||||||
|
|
||||||
|
:::caution
|
||||||
|
|
||||||
|
The `onTabContextMenu` is intended to be removed in a future release to further simplify the library.
|
||||||
|
In the future you will be required to define a custom tab component to intercept the context menu events.
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: '300px',
|
||||||
|
backgroundColor: 'rgb(30,30,30)',
|
||||||
|
color: 'white',
|
||||||
|
margin: '20px 0px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ContextMenuDockview />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
### Rendering
|
||||||
|
|
||||||
|
Although `DockviewReact` will only add those tabs that are visible to the DOM all associated React Components for each tab including those that
|
||||||
|
are not initially visible will be created.
|
||||||
|
This will mean that any hooks in those components will run and if you running expensive operations in the tabs you may end up doing a lot of initial
|
||||||
|
work for what are hidden tabs.
|
||||||
|
|
||||||
|
This is the default behaviour to ensure the greatest flexibility for the user but you can create a Higher-Order component wrapping your components that
|
||||||
|
will ensure the component is only created if the tab is visible as below:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { PanelApi } from 'dockview';
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
function RenderWhenVisible<
|
||||||
|
T extends { api: Pick<PanelApi, 'isVisible' | 'onDidVisibilityChange'> }
|
||||||
|
>(component: React.FunctionComponent<T>) {
|
||||||
|
const HigherOrderComponent = (props: T) => {
|
||||||
|
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(component, props);
|
||||||
|
};
|
||||||
|
return HigherOrderComponent;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const component = RenderWhenVisible(MyComponent);
|
||||||
|
```
|
||||||
|
|
||||||
|
Through toggling the checkbox you can see that when you only render those panels which are visible the underling React component is destroyed when it becomes hidden and re-created when it becomes visible.
|
||||||
|
|
||||||
|
<Checkbox />
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: '300px',
|
||||||
|
backgroundColor: 'rgb(30,30,30)',
|
||||||
|
color: 'white',
|
||||||
|
margin: '20px 0px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<RenderingDockview renderVisibleOnly={false} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
### Drag And Drop
|
||||||
|
|
||||||
|
The component exposes some method to help determine whether external drag events should be interacted with or not.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
/**
|
||||||
|
* called when an ondrop event which does not originate from the dockview libray and
|
||||||
|
* passes the showDndOverlay condition occurs
|
||||||
|
**/
|
||||||
|
const onDidDrop = (event: DockviewDropEvent) => {
|
||||||
|
const { group } = event;
|
||||||
|
|
||||||
|
event.api.addPanel({
|
||||||
|
id: 'test',
|
||||||
|
component: 'default',
|
||||||
|
position: {
|
||||||
|
referencePanel: group.activePanel.id,
|
||||||
|
direction: 'within',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* called for drag over events which do not originate from the dockview library
|
||||||
|
* allowing the developer to decide where the overlay should be shown for a
|
||||||
|
* particular drag event
|
||||||
|
**/
|
||||||
|
const showDndOverlay = (event: DockviewDndOverlayEvent) => {
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DockviewReact
|
||||||
|
components={components}
|
||||||
|
onReady={onReady}
|
||||||
|
className="dockview-theme-dark"
|
||||||
|
onDidDrop={onDidDrop}
|
||||||
|
showDndOverlay={showDndOverlay}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
<DndDockview />
|
||||||
|
|
||||||
|
### Events
|
||||||
|
|
||||||
|
<EventsDockview />
|
||||||
116
packages/docs/versioned_docs/version-1.4.3/components/gridview.mdx
vendored
Normal file
116
packages/docs/versioned_docs/version-1.4.3/components/gridview.mdx
vendored
Normal file
@ -0,0 +1,116 @@
|
|||||||
|
import { SimpleGridview } from '@site/src/components/simpleGridview';
|
||||||
|
import { EventsGridview } from '@site/src/components/gridview/events';
|
||||||
|
import Link from '@docusaurus/Link';
|
||||||
|
|
||||||
|
# Gridview
|
||||||
|
|
||||||
|
## Introduction
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: '300px',
|
||||||
|
backgroundColor: 'rgb(30,30,30)',
|
||||||
|
color: 'white',
|
||||||
|
margin: '20px 0px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SimpleGridview />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## GridviewReact Component
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { ReactGridview } from 'dockview';
|
||||||
|
```
|
||||||
|
|
||||||
|
| Property | Type | Optional | Default | Description |
|
||||||
|
| ------------------- | ------------------------------------ | -------- | ---------------------- | --------------------------------------------------------------------------- |
|
||||||
|
| onReady | (event: SplitviewReadyEvent) => void | No | | |
|
||||||
|
| components | object | No | | |
|
||||||
|
| orientation | Orientation | Yes | Orientation.HORIZONTAL | |
|
||||||
|
| proportionalLayout | boolean | Yes | true | See <Link to="/docs/basics/#proportional-layout">Proportional layout</Link> |
|
||||||
|
| hideBorders | boolean | Yes | false | |
|
||||||
|
| className | string | Yes | '' | |
|
||||||
|
| disableAutoResizing | boolean | Yes | false | See <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> |
|
||||||
|
|
||||||
|
## Gridview API
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => {
|
||||||
|
// props.containerApi...
|
||||||
|
|
||||||
|
return <div>{`My first panel has the title: ${props.params.title}`}</div>;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const onReady = (event: GridviewReadyEvent) => {
|
||||||
|
// event.api...
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
| Property | Type | Description |
|
||||||
|
| ---------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
|
||||||
|
| height | `number` | Component pixel height |
|
||||||
|
| width | `number` | Component pixel width |
|
||||||
|
| minimumHeight | `number` | |
|
||||||
|
| maximumHeight | `number` | |
|
||||||
|
| maximumWidth | `number` | |
|
||||||
|
| maximumWidth | `number` | |
|
||||||
|
| length | `number` | Number of panels |
|
||||||
|
| panels | `ISplitviewPanel[]` | all panels |
|
||||||
|
| orientation | `Orientation` | |
|
||||||
|
| | | |
|
||||||
|
| onDidLayoutChange | `Event<void>` | Fires on layout change |
|
||||||
|
| onDidLayoutFromJSON | `Event<void>` | Fires of layout change caused by a fromJSON deserialization call |
|
||||||
|
| onDidAddPanel | `Event<IGridviewPanel>` | Fires when a view is added |
|
||||||
|
| onDidRemovePanel | `Event<IGridviewPanel>` | Fires when a view is removed |
|
||||||
|
| onDidActivePanelChange | `Event<IGridviewPanel \| undefined>` | Fires when the active group changes |
|
||||||
|
| | | |
|
||||||
|
| addPanel | `addPanel(options: AddComponentOptions): IGridviewPanel` | |
|
||||||
|
| removePanel | `(panel: IGridviewPanel, sizing?: Sizing): void` | |
|
||||||
|
| movePanel | `(panel: IGridviewPanel, options: {direction: Direction, refernece:string, size?: number}): void` | |
|
||||||
|
| getPanel | `(id: string) \| IGridviewPanel \| undefined` | |
|
||||||
|
| | | |
|
||||||
|
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
|
||||||
|
| focus | `(): void` | Focus the active panel, if exists |
|
||||||
|
| layout | `(width: number, height:number): void` | <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> |
|
||||||
|
| fromJSON | `(data: SerializedGridview): void` | <Link to="/docs/basics/#serialization">Serialization</Link> |
|
||||||
|
| toJSON | `(): SerializedGridview` | <Link to="/docs/basics/#serialization">Serialization</Link> |
|
||||||
|
| clear | `(): void` | Clears the current layout |
|
||||||
|
|
||||||
|
## Gridview Panel API
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => {
|
||||||
|
// props.api...
|
||||||
|
|
||||||
|
return <div>{`My first panel has the title: ${props.params.title}`}</div>;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
| Property | Type | Description |
|
||||||
|
| ---------------------- | ----------------------------------------------------------- | ---------------- |
|
||||||
|
| id | `string` | Panel id |
|
||||||
|
| isFocused | `boolean` | Is panel focsed |
|
||||||
|
| isActive | `boolean` | Is panel active |
|
||||||
|
| isVisible | `boolean` | Is panel visible |
|
||||||
|
| width | `number` | Panel width |
|
||||||
|
| height | `number` | Panel height |
|
||||||
|
| | | |
|
||||||
|
| onDidDimensionsChange | `Event<PanelDimensionChangeEvent>` | |
|
||||||
|
| onDidFocusChange | `Event<FocusEvent>` | |
|
||||||
|
| onDidVisibilityChange | `Event<VisibilityEvent>` | |
|
||||||
|
| onDidActiveChange | `Event<ActiveEvent>` | |
|
||||||
|
| onDidConstraintsChange | `onDidConstraintsChange: Event<PanelConstraintChangeEvent>` | |
|
||||||
|
| | | |
|
||||||
|
| setVisible | `(isVisible: boolean): void` | |
|
||||||
|
| setActive | `(): void` | |
|
||||||
|
| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | |
|
||||||
|
| setSize | `(event: SizeEvent): void` | |
|
||||||
|
|
||||||
|
## Events
|
||||||
|
|
||||||
|
`GridviewReact` exposes a number of events that the developer can listen to and below is a simple example with a log panel showing those events that occur.
|
||||||
|
|
||||||
|
<EventsGridview />
|
||||||
270
packages/docs/versioned_docs/version-1.4.3/components/paneview.mdx
vendored
Normal file
270
packages/docs/versioned_docs/version-1.4.3/components/paneview.mdx
vendored
Normal file
@ -0,0 +1,270 @@
|
|||||||
|
import { SimplePaneview } from '@site/src/components/simplePaneview';
|
||||||
|
import { CustomHeaderPaneview } from '@site/src/components/paneview/customHeader';
|
||||||
|
import { DragAndDropPaneview } from '@site/src/components/paneview/dragAndDrop';
|
||||||
|
import Link from '@docusaurus/Link';
|
||||||
|
|
||||||
|
# Paneview
|
||||||
|
|
||||||
|
A paneview is a collapsed collection of vertically stacked panels and panel headers.
|
||||||
|
The panel header will always remain visible however the panel will only be visible when the panel is expanded.
|
||||||
|
|
||||||
|
:::info
|
||||||
|
|
||||||
|
Paneview panels can be re-ordered by dragging and dropping the panel headers.
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Introduction
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: '400px',
|
||||||
|
backgroundColor: 'rgb(30,30,30)',
|
||||||
|
color: 'white',
|
||||||
|
margin: '20px 0px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SimplePaneview />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```tsx title="Simple Paneview example"
|
||||||
|
import {
|
||||||
|
IPaneviewPanelProps,
|
||||||
|
PaneviewReact,
|
||||||
|
PaneviewReadyEvent,
|
||||||
|
} from 'dockview';
|
||||||
|
|
||||||
|
const components = {
|
||||||
|
default: (props: IPaneviewPanelProps<{ title: string }>) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
padding: '10px',
|
||||||
|
height: '100%',
|
||||||
|
backgroundColor: 'rgb(60,60,60)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{props.params.title}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
SimplePaneview = () => {
|
||||||
|
const onReady = (event: PaneviewReadyEvent) => {
|
||||||
|
event.api.addPanel({
|
||||||
|
id: 'panel_1',
|
||||||
|
component: 'default',
|
||||||
|
params: {
|
||||||
|
title: 'Panel 1',
|
||||||
|
},
|
||||||
|
title: 'Panel 1',
|
||||||
|
});
|
||||||
|
|
||||||
|
event.api.addPanel({
|
||||||
|
id: 'panel_2',
|
||||||
|
component: 'default',
|
||||||
|
params: {
|
||||||
|
title: 'Panel 2',
|
||||||
|
},
|
||||||
|
title: 'Panel 2',
|
||||||
|
});
|
||||||
|
|
||||||
|
event.api.addPanel({
|
||||||
|
id: 'panel_3',
|
||||||
|
component: 'default',
|
||||||
|
params: {
|
||||||
|
title: 'Panel 3',
|
||||||
|
},
|
||||||
|
title: 'Panel 3',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PaneviewReact
|
||||||
|
components={components}
|
||||||
|
headerComponents={headerComponents}
|
||||||
|
onReady={onReady}
|
||||||
|
className="dockview-theme-dark"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## PaneviewReact Component
|
||||||
|
|
||||||
|
You can create a Paneview through the use of the `ReactPaneview` component.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { ReactPaneview } from 'dockview';
|
||||||
|
```
|
||||||
|
|
||||||
|
| Property | Type | Optional | Default | Description |
|
||||||
|
| ------------------- | ------------------------------------ | -------- | ------- | ----------------------------------------------------------- |
|
||||||
|
| onReady | (event: SplitviewReadyEvent) => void | No | | |
|
||||||
|
| components | object | No | | |
|
||||||
|
| headerComponents | object | Yes | | |
|
||||||
|
| className | string | Yes | '' | |
|
||||||
|
| disableAutoResizing | boolean | Yes | false | <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> |
|
||||||
|
| disableDnd | boolean | Yes | false | |
|
||||||
|
| onDidDrop | Event | Yes | | |
|
||||||
|
|
||||||
|
## Paneview API
|
||||||
|
|
||||||
|
The Paneview API is exposed both at the `onReady` event and on each panel through `props.containerApi`.
|
||||||
|
Through this API you can control general features of the component and access all added panels.
|
||||||
|
|
||||||
|
```tsx title="Paneview API via Panel component"
|
||||||
|
const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => {
|
||||||
|
// props.containerApi...
|
||||||
|
|
||||||
|
return <div>{`My first panel has the title: ${props.params.title}`}</div>;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
```tsx title="Paneview API via the onReady callback"
|
||||||
|
const onReady = (event: GridviewReadyEvent) => {
|
||||||
|
// event.api...
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
| Property | Type | Description |
|
||||||
|
| ------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
|
||||||
|
| height | `number` | Component pixel height |
|
||||||
|
| width | `number` | Component pixel width |
|
||||||
|
| minimumSize | `number` | The sum of the `minimumSize` property for each panel |
|
||||||
|
| maximumSize | `number` | The sum of the `maximumSize` property for each panel |
|
||||||
|
| length | `number` | Number of panels |
|
||||||
|
| panels | `IPaneviewPanel[]` | All panels |
|
||||||
|
| | | |
|
||||||
|
| onDidLayoutChange | `Event<void>` | Fires on layout change |
|
||||||
|
| onDidLayoutFromJSON | `Event<void>` | Fires of layout change caused by a fromJSON deserialization call |
|
||||||
|
| onDidAddView | `Event<IPaneviewPanel>` | Fires when a view is added |
|
||||||
|
| onDidRemoveView | `Event<IPaneviewPanel>` | Fires when a view is removed |
|
||||||
|
| onDidDrop | `Event<PaneviewDropEvent` | Fires on an external drop event (See <Link to="/docs/api/paneview/#drag-and-drop">Drag and Drop</Link>) |
|
||||||
|
| | | |
|
||||||
|
| addPanel | `addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel` | |
|
||||||
|
| removePanel | `(panel: IPaneviewPanel): void` | |
|
||||||
|
| movePanel | `(from: number, to: number): void` | |
|
||||||
|
| getPanel | `(id:string): IPaneviewPanel \| undefined` | |
|
||||||
|
| | | |
|
||||||
|
| focus | `(): void` | Focus the active panel, if exists |
|
||||||
|
| layout | `(width: number, height:number): void` | See <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> |
|
||||||
|
| fromJSON | `(data: SerializedPaneview): void` | <Link to="/docs/basics/#serialization">Serialization</Link> |
|
||||||
|
| toJSON | `(): SerializedPaneview` | <Link to="/docs/basics/#serialization">Serialization</Link> |
|
||||||
|
| clear | `(): void` | Clears the current layout |
|
||||||
|
|
||||||
|
## Paneview Panel API
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => {
|
||||||
|
// props.api...
|
||||||
|
|
||||||
|
return <div>{`My first panel has the title: ${props.params.title}`}</div>;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
| Property | Type | Description |
|
||||||
|
| ---------------------- | ----------------------------------------------------------- | ---------------- |
|
||||||
|
| id | `string` | Panel id |
|
||||||
|
| isFocused | `boolean` | Is panel focsed |
|
||||||
|
| isActive | `boolean` | Is panel active |
|
||||||
|
| isVisible | `boolean` | Is panel visible |
|
||||||
|
| width | `number` | Panel width |
|
||||||
|
| height | `number` | Panel height |
|
||||||
|
| | |
|
||||||
|
| onDidDimensionsChange | `Event<PanelDimensionChangeEvent>` | |
|
||||||
|
| onDidFocusChange | `Event<FocusEvent>` | |
|
||||||
|
| onDidVisibilityChange | `Event<VisibilityEvent>` | |
|
||||||
|
| onDidActiveChange | `Event<ActiveEvent>` | |
|
||||||
|
| onDidConstraintsChange | `onDidConstraintsChange: Event<PanelConstraintChangeEvent>` | |
|
||||||
|
| | |
|
||||||
|
| setVisible | `(isVisible: boolean): void` | |
|
||||||
|
| setActive | `(): void` | |
|
||||||
|
| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | |
|
||||||
|
| setSize | `(event: SizeEvent): void` | |
|
||||||
|
|
||||||
|
## Advanced Features
|
||||||
|
|
||||||
|
### Custom Header
|
||||||
|
|
||||||
|
You can provide a custom component to render an alternative header.
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: '400px',
|
||||||
|
backgroundColor: 'rgb(30,30,30)',
|
||||||
|
color: 'white',
|
||||||
|
margin: '20px 0px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CustomHeaderPaneview />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
You can provide a `headerComponent` option when creating a panel to tell the library to use a custom header component.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const onReady = (event: PaneviewReadyEvent) => {
|
||||||
|
event.api.addPanel({
|
||||||
|
id: 'panel_1',
|
||||||
|
component: 'default',
|
||||||
|
headerComponent: 'myHeaderComponent',
|
||||||
|
params: {
|
||||||
|
valueA: 'A',
|
||||||
|
},
|
||||||
|
title: 'Panel 1',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
This header must be defined in the collection of components provided to the `headerComponents` props for `ReactPaneivew`
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { IPaneviewPanelProps } from 'dockview';
|
||||||
|
|
||||||
|
const MyHeaderComponent = (props: IPaneviewPanelProps<{ title: string }>) => {
|
||||||
|
const [expanded, setExpanded] = React.useState<boolean>(
|
||||||
|
props.api.isExpanded
|
||||||
|
);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
const disposable = props.api.onDidExpansionChange((event) => {
|
||||||
|
setExpanded(event.isExpanded);
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
disposable.dispose();
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const onClick = () => {
|
||||||
|
props.api.setExpanded(!expanded);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
padding: '10px',
|
||||||
|
height: '100%',
|
||||||
|
backgroundColor: 'rgb(60,60,60)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
onClick={onClick}
|
||||||
|
className={expanded ? 'expanded' : 'collapsed'}
|
||||||
|
/>
|
||||||
|
<span>{props.params.title}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const headerComponents = { myHeaderComponent: MyHeaderComponent };
|
||||||
|
```
|
||||||
|
|
||||||
|
### Drag And Drop
|
||||||
|
|
||||||
|
If you provide the `PaneviewReact` component with the prop `onDidDrop` you will be able to interact with custom drop events.
|
||||||
|
|
||||||
|
<DragAndDropPaneview />
|
||||||
242
packages/docs/versioned_docs/version-1.4.3/components/splitview.mdx
vendored
Normal file
242
packages/docs/versioned_docs/version-1.4.3/components/splitview.mdx
vendored
Normal file
@ -0,0 +1,242 @@
|
|||||||
|
import { SimpleSplitview } from '@site/src/components/simpleSplitview';
|
||||||
|
import { SplitviewExample1 } from '@site/src/components/splitview/active';
|
||||||
|
import Link from '@docusaurus/Link';
|
||||||
|
|
||||||
|
# Splitview
|
||||||
|
|
||||||
|
## Introduction
|
||||||
|
|
||||||
|
A Splitview is a collection of resizable horizontally or vertically stacked panels.
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: '100px',
|
||||||
|
backgroundColor: 'rgb(30,30,30)',
|
||||||
|
color: 'white',
|
||||||
|
margin: '20px 0px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SimpleSplitview />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```tsx title="Simple Splitview example"
|
||||||
|
import {
|
||||||
|
ISplitviewPanelProps,
|
||||||
|
Orientation,
|
||||||
|
SplitviewReact,
|
||||||
|
SplitviewReadyEvent,
|
||||||
|
} from 'dockview';
|
||||||
|
|
||||||
|
const components = {
|
||||||
|
default: (props: ISplitviewPanelProps<{ title: string }>) => {
|
||||||
|
return <div style={{ padding: '20px' }}>{props.params.title}</div>;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const SimpleSplitview = () => {
|
||||||
|
const onReady = (event: SplitviewReadyEvent) => {
|
||||||
|
event.api.addPanel({
|
||||||
|
id: 'panel_1',
|
||||||
|
component: 'default',
|
||||||
|
params: {
|
||||||
|
title: 'Panel 1',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
event.api.addPanel({
|
||||||
|
id: 'panel_2',
|
||||||
|
component: 'default',
|
||||||
|
params: {
|
||||||
|
title: 'Panel 2',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
event.api.addPanel({
|
||||||
|
id: 'panel_3',
|
||||||
|
component: 'default',
|
||||||
|
params: {
|
||||||
|
title: 'Panel 3',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SplitviewReact
|
||||||
|
components={components}
|
||||||
|
onReady={onReady}
|
||||||
|
orientation={Orientation.HORIZONTAL}
|
||||||
|
className="dockview-theme-dark"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## SplitviewReact Component
|
||||||
|
|
||||||
|
You can create a Splitview through the use of the `ReactSplitview` component.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { ReactSplitview } from 'dockview';
|
||||||
|
```
|
||||||
|
|
||||||
|
Using the `onReady` prop you can access to the component `api` and add panels either through deserialization or the individual addition of panels.
|
||||||
|
|
||||||
|
| Property | Type | Optional | Default | Description |
|
||||||
|
| ------------------- | -------------------------------------- | -------- | ------------------------ | --------------------------------------------------------------------------- |
|
||||||
|
| onReady | `(event: SplitviewReadyEvent) => void` | No | | Function |
|
||||||
|
| components | `Record<string, ISplitviewPanelProps>` | No | | Panel renderers |
|
||||||
|
| orientation | `Orientation` | Yes | `Orientation.HORIZONTAL` | Orientation of the Splitview |
|
||||||
|
| proportionalLayout | `boolean` | Yes | `true` | See <Link to="/docs/basics/#proportional-layout">Proportional layout</Link> |
|
||||||
|
| hideBorders | `boolean` | Yes | `false` | Hide the borders between panels |
|
||||||
|
| className | `string` | Yes | `''` | Attaches a classname |
|
||||||
|
| disableAutoResizing | `boolean` | Yes | `false` | See <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> |
|
||||||
|
|
||||||
|
## Splitview API
|
||||||
|
|
||||||
|
The Splitview API is exposed both at the `onReady` event and on each panel through `props.containerApi`.
|
||||||
|
Through this API you can control general features of the component and access all added panels.
|
||||||
|
|
||||||
|
```tsx title="Splitview API via Panel component"
|
||||||
|
const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
|
||||||
|
// props.containerApi...
|
||||||
|
|
||||||
|
return <div>{`My first panel has the title: ${props.params.title}`}</div>;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
```tsx title="Splitview API via the onReady callback"
|
||||||
|
const onReady = (event: SplitviewReadyEvent) => {
|
||||||
|
// event.api...
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
| Property | Type | Description |
|
||||||
|
| ------------------- | ------------------------------------------------------------------ | ---------------------------------------------------------------- |
|
||||||
|
| height | `number` | Component pixel height |
|
||||||
|
| width | `number` | Component pixel width |
|
||||||
|
| minimumSize | `number` | The sum of the `minimumSize` property for each panel |
|
||||||
|
| maximumSize | `number` | The sum of the `maximumSize` property for each panel |
|
||||||
|
| length | `number` | Number of panels |
|
||||||
|
| panels | `ISplitviewPanel[]` | All panels |
|
||||||
|
| | | |
|
||||||
|
| onDidLayoutChange | `Event<void>` | Fires on layout change |
|
||||||
|
| onDidLayoutFromJSON | `Event<void>` | Fires of layout change caused by a fromJSON deserialization call |
|
||||||
|
| onDidAddView | `Event<IView>` | Fires when a view is added |
|
||||||
|
| onDidRemoveView | `Event<IView>` | Fires when a view is removed |
|
||||||
|
| | | |
|
||||||
|
| addPanel | `addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel` | |
|
||||||
|
| removePanel | `(panel: ISplitviewPanel, sizing?: Sizing): void` | |
|
||||||
|
| getPanel | `(id:string): ISplitviewPanel \| undefined` | |
|
||||||
|
| movePanel | `(from: number, to: number): void` | |
|
||||||
|
| | |
|
||||||
|
| updateOptions | `(options: SplitviewComponentUpdateOptions): void` | |
|
||||||
|
| focus | `(): void` | Focus the active panel, if exists |
|
||||||
|
| layout | `(width: number, height:number): void` | See <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> |
|
||||||
|
| fromJSON | `(data: SerializedSplitview): void` | <Link to="/docs/basics/#serialization">Serialization</Link> |
|
||||||
|
| toJSON | `(): SerializedSplitview` | <Link to="/docs/basics/#serialization">Serialization</Link> |
|
||||||
|
| clear | `(): void` | Clears the current layout |
|
||||||
|
|
||||||
|
## Splitview Panel API
|
||||||
|
|
||||||
|
The Splitview panel API is exposed on each panel containing actions and variables specific to that panel.
|
||||||
|
|
||||||
|
```tsx title="Splitview panel API via Panel component"
|
||||||
|
const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
|
||||||
|
// props.api...
|
||||||
|
|
||||||
|
return <div>{`My first panel has the title: ${props.params.title}`}</div>;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
| Property | Type | Description |
|
||||||
|
| ---------------------- | ----------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
|
||||||
|
| id | `string` | Panel id |
|
||||||
|
| isFocused | `boolean` | Is panel focsed |
|
||||||
|
| isActive | `boolean` | Is panel active |
|
||||||
|
| isVisible | `boolean` | Is panel visible |
|
||||||
|
| width | `number` | Panel width |
|
||||||
|
| height | `number` | Panel height |
|
||||||
|
| | | |
|
||||||
|
| onDidDimensionsChange | `Event<PanelDimensionChangeEvent>` | Fires when panel dimensions change |
|
||||||
|
| onDidFocusChange | `Event<FocusEvent>` | Fire when panel is focused and blurred |
|
||||||
|
| onDidVisibilityChange | `Event<VisibilityEvent>` | Fires when the panels visiblity property is changed (see <Link to="/docs/api/splitview/#visibility">Panel Visibility</Link>) |
|
||||||
|
| onDidActiveChange | `Event<ActiveEvent>` | Fires when the panels active property is changed (see <Link to="/docs/api/splitview/#active">Active Panel</Link>) |
|
||||||
|
| onDidConstraintsChange | `onDidConstraintsChange: Event<PanelConstraintChangeEvent>` | Fires when the panels size contrainsts change (see <Link to="/docs/api/splitview/#contraints">Panel Constraints</Link>) |
|
||||||
|
| | | |
|
||||||
|
| setVisible | `(isVisible: boolean): void` | |
|
||||||
|
| setActive | `(): void` | |
|
||||||
|
| | | |
|
||||||
|
| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | |
|
||||||
|
| setSize | `(event: PanelSizeEvent): void` | |
|
||||||
|
|
||||||
|
## Advanced Features
|
||||||
|
|
||||||
|
Listed below are some functionalities avalaible through both the panel and component APIs. The live demo shows examples of these in real-time.
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: '200px',
|
||||||
|
margin: '20px 0px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SplitviewExample1 />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
### Visibility
|
||||||
|
|
||||||
|
A panels visibility can be controlled and monitored through the following code.
|
||||||
|
A panel with visibility set to `false` will remain as a part of the components list of panels but will not be rendered.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const disposable = props.api.onDidVisibilityChange(({ isVisible }) => {
|
||||||
|
//
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
api.setVisible(true);
|
||||||
|
```
|
||||||
|
|
||||||
|
### Active
|
||||||
|
|
||||||
|
Only one panel in the `splitview` can be the active panel at any one time.
|
||||||
|
Setting a panel as active will set all the others as inactive.
|
||||||
|
A focused panel is always the active panel but an active panel is not always focused.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const disposable = props.api.onDidActiveChange(({ isActive }) => {
|
||||||
|
//
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
api.setActive();
|
||||||
|
```
|
||||||
|
|
||||||
|
### Contraints
|
||||||
|
|
||||||
|
When adding a panel you can specify pixel size contraints
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
event.api.addPanel({
|
||||||
|
id: 'panel_3',
|
||||||
|
component: 'default',
|
||||||
|
minimumSize: 100,
|
||||||
|
maximumSize: 1000,
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
These contraints can be updated throughout the lifecycle of the `splitview` using the panel API
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
props.api.onDidConstraintsChange(({ maximumSize, minimumSize }) => {
|
||||||
|
//
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
api.setConstraints({
|
||||||
|
maximumSize: 200,
|
||||||
|
minimumSize: 400,
|
||||||
|
});
|
||||||
|
```
|
||||||
150
packages/docs/versioned_docs/version-1.4.3/index.mdx
vendored
Normal file
150
packages/docs/versioned_docs/version-1.4.3/index.mdx
vendored
Normal file
@ -0,0 +1,150 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 0
|
||||||
|
---
|
||||||
|
|
||||||
|
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';
|
||||||
|
|
||||||
|
# Dockview
|
||||||
|
|
||||||
|
## Introduction
|
||||||
|
|
||||||
|
**dockview** is a zero dependency layout manager that supports tab, grids and splitviews.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- Themable and customizable
|
||||||
|
- Support for the serialization and deserialization of layouts
|
||||||
|
- Drag and drop support
|
||||||
|
|
||||||
|
## Quick start
|
||||||
|
|
||||||
|
`dockview` has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. To install `dockview` you can run:
|
||||||
|
|
||||||
|
```shell
|
||||||
|
npm install dockview
|
||||||
|
```
|
||||||
|
|
||||||
|
You must also import the dockview stylesheet found under [`dockview/dict/styles/dockview.css`](https://unpkg.com/browse/dockview@latest/dist/styles/dockview.css),
|
||||||
|
depending on your solution this might be:
|
||||||
|
|
||||||
|
```css
|
||||||
|
@import './node_modules/dockview/dist/styles/dockview.css';
|
||||||
|
```
|
||||||
|
|
||||||
|
A dark and light theme are provided, one of these classes (or a custom theme) must be attached at any point above your components in the HTML tree. To cover the entire web page you might attach the class to the `body` component:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body classname="dockview-theme-dark">
|
||||||
|
...
|
||||||
|
</body>
|
||||||
|
<body classname="dockview-theme-light">
|
||||||
|
...
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
There are 4 components you may want to use:
|
||||||
|
|
||||||
|
Splitview
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: '100px',
|
||||||
|
backgroundColor: 'rgb(30,30,30)',
|
||||||
|
color: 'white',
|
||||||
|
margin: '20px 0px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SimpleSplitview />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: '300px',
|
||||||
|
backgroundColor: 'rgb(30,30,30)',
|
||||||
|
color: 'white',
|
||||||
|
margin: '20px 0px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SimpleGridview />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: '300px',
|
||||||
|
backgroundColor: 'rgb(30,30,30)',
|
||||||
|
color: 'white',
|
||||||
|
margin: '20px 0px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SimplePaneview />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: '300px',
|
||||||
|
backgroundColor: 'rgb(30,30,30)',
|
||||||
|
color: 'white',
|
||||||
|
margin: '20px 0px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SimpleDockview />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import {
|
||||||
|
DockviewReact,
|
||||||
|
DockviewReadyEvent,
|
||||||
|
PanelCollection,
|
||||||
|
IDockviewPanelProps,
|
||||||
|
IDockviewPanelHeaderProps,
|
||||||
|
} from 'dockview';
|
||||||
|
|
||||||
|
const components: PanelCollection<IDockviewPanelProps> = {
|
||||||
|
default: (props: IDockviewPanelProps<{ someProps: string }>) => {
|
||||||
|
return <div>{props.params.someProps}</div>;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const headers: PanelCollection<IDockviewPanelHeaderProps> = {
|
||||||
|
customTab: (props: IDockviewPanelHeaderProps) => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<span>{props.api.title}</span>
|
||||||
|
<span onClick={() => props.api.close()}>{'[x]'}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const Component = () => {
|
||||||
|
const onReady = (event: DockviewReadyEvent) => {
|
||||||
|
event.api.addPanel({
|
||||||
|
id: 'panel1',
|
||||||
|
component: 'default',
|
||||||
|
tabComponent: 'customTab', // optional custom header
|
||||||
|
params: {
|
||||||
|
someProps: 'Hello',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
event.api.addPanel({
|
||||||
|
id: 'panel2',
|
||||||
|
component: 'default',
|
||||||
|
params: {
|
||||||
|
someProps: 'World',
|
||||||
|
},
|
||||||
|
position: { referencePanel: 'panel1', direction: 'below' },
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DockviewReact
|
||||||
|
components={components}
|
||||||
|
tabComponents={headers} // optional headers renderer
|
||||||
|
onReady={onReady}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
```
|
||||||
80
packages/docs/versioned_docs/version-1.4.3/theme.mdx
vendored
Normal file
80
packages/docs/versioned_docs/version-1.4.3/theme.mdx
vendored
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 3
|
||||||
|
---
|
||||||
|
|
||||||
|
import { CustomCSSDockview } from '@site/src/components/dockview/customCss';
|
||||||
|
|
||||||
|
# Theme
|
||||||
|
|
||||||
|
## Introduction
|
||||||
|
|
||||||
|
`dockview` requires some css to work correctly.
|
||||||
|
The css is exported as one file under [`dockview/dict/styles/dockview.css`](https://unpkg.com/browse/dockview@latest/dist/styles/dockview.css)
|
||||||
|
and depending can be imported
|
||||||
|
|
||||||
|
```css
|
||||||
|
@import './node_modules/dockview/dist/styles/dockview.css';
|
||||||
|
```
|
||||||
|
|
||||||
|
## Customizing Theme
|
||||||
|
|
||||||
|
`dockview` supports theming through the use of css properties.
|
||||||
|
You can view the built-in themes at [`dockview/src/theme.scss`](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/theme.scss)
|
||||||
|
and are free to build your own themes based on these css properties.
|
||||||
|
|
||||||
|
| CSS Property | Description |
|
||||||
|
| ---------------------------------------------------- | ----------- |
|
||||||
|
| --dv-paneview-active-outline-color | |
|
||||||
|
| --dv-tabs-and-actions-container-font-size | |
|
||||||
|
| --dv-tabs-and-actions-container-height | |
|
||||||
|
| --dv-tab-close-icon | |
|
||||||
|
| --dv-drag-over-background-color | |
|
||||||
|
| --dv-drag-over-border-color | |
|
||||||
|
| --dv-tabs-container-scrollbar-color | |
|
||||||
|
| | |
|
||||||
|
| --dv-group-view-background-color | |
|
||||||
|
| | |
|
||||||
|
| --dv-tabs-and-actions-container-background-color | |
|
||||||
|
| | |
|
||||||
|
| --dv-activegroup-visiblepanel-tab-background-color | |
|
||||||
|
| --dv-activegroup-hiddenpanel-tab-background-color | |
|
||||||
|
| --dv-inactivegroup-visiblepanel-tab-background-color | |
|
||||||
|
| --dv-inactivegroup-hiddenpanel-tab-background-color | |
|
||||||
|
| --dv-tab-divider-color | |
|
||||||
|
| | |
|
||||||
|
| --dv-activegroup-visiblepanel-tab-color | |
|
||||||
|
| --dv-activegroup-hiddenpanel-tab-color | |
|
||||||
|
| --dv-inactivegroup-visiblepanel-tab-color | |
|
||||||
|
| --dv-inactivegroup-hiddenpanel-tab-color | |
|
||||||
|
| | |
|
||||||
|
| --dv-separator-border | |
|
||||||
|
| --dv-paneview-header-border-color | |
|
||||||
|
|
||||||
|
You can further customise the theme through adjusting class properties but this is up you.
|
||||||
|
As an example if you wanted to add a bottom border to the tab container for an active group in the `DockviewReact` component you could write:
|
||||||
|
|
||||||
|
```css
|
||||||
|
.groupview {
|
||||||
|
&.active-group {
|
||||||
|
> .tabs-and-actions-container {
|
||||||
|
border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.inactive-group {
|
||||||
|
> .tabs-and-actions-container {
|
||||||
|
border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: '300px',
|
||||||
|
backgroundColor: 'rgb(30,30,30)',
|
||||||
|
color: 'white',
|
||||||
|
margin: '20px 0px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CustomCSSDockview />
|
||||||
|
</div>
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"tutorialSidebar": [
|
||||||
|
{
|
||||||
|
"type": "autogenerated",
|
||||||
|
"dirName": "."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
3
packages/docs/versions.json
Normal file
3
packages/docs/versions.json
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
[
|
||||||
|
"1.4.3"
|
||||||
|
]
|
||||||
Loading…
Reference in New Issue
Block a user