rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-05-02 09:38:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: docs

Browse Source
This commit is contained in:
mathuo 2022-05-10 22:14:47 +01:00
parent f5b90725f4
commit 10317206e0
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
12 changed files with 289 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.github/workflows/deploy-docs.yml vendored
View File

@ -1,10 +1,10 @@
name: Deploy Docs
on:
schedule:
- cron: '0 3 * * *' # every day at 3 am UTC
# on:
# schedule:
# - cron: '0 3 * * *' # every day at 3 am UTC
# on: [push]
on: [push]
jobs:
deploy-nightly-demo-app:

57
packages/dockview-docs/src/components/dockview/customCss.tsx Normal file
View File

@ -0,0 +1,57 @@
import {
DockviewReact,
DockviewReadyEvent,
IDockviewPanelProps,
} from 'dockview';
//
const components = {
default: (props: IDockviewPanelProps<{ title: string }>) => {
return <div style={{ padding: '20px' }}>{props.params.title}</div>;
},
};
export const CustomCSSDockview = () => {
const onReady = (event: DockviewReadyEvent) => {
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',
},
});
event.api.addPanel({
id: 'panel_4',
component: 'default',
params: {
title: 'Panel 4',
},
position: { referencePanel: 'panel_1', direction: 'right' },
});
};
return (
<DockviewReact
components={components}
onReady={onReady}
className="dockview-theme-vs"
/>
);
};

66
packages/dockview-docs/src/components/simplePaneview.tsx
View File

@ -21,42 +21,44 @@ const components = {
},
};
const headerComponents = {
myHeaderComponent: (props: IPaneviewPanelProps<{ title: string }>) => {
const [expanded, setExpanded] = React.useState<boolean>(
props.api.isExpanded
);
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);
});
React.useEffect(() => {
const disposable = props.api.onDidExpansionChange((event) => {
setExpanded(event.isExpanded);
});
return () => {
disposable.dispose();
};
}, []);
const onClick = () => {
props.api.setExpanded(!expanded);
return () => {
disposable.dispose();
};
}, []);
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 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,
};
export const SimplePaneview = () => {

7
packages/dockview-docs/src/components/simpleSplitview.tsx
View File

@ -39,13 +39,6 @@ export const SimpleSplitview = (props: { proportional?: boolean }) => {
},
minimumSize: 100,
});
event.api.addPanel({
id: 'panel_3',
component: 'default',
minimumSize: 100,
maximumSize: 1000,
});
};
return (

53
packages/dockview-docs/src/components/splitview/active.tsx Normal file
View File

@ -0,0 +1,53 @@
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 = (props: { proportional?: boolean }) => {
const onReady = (event: SplitviewReadyEvent) => {
event.api.addPanel({
id: 'panel_1',
component: 'default',
params: {
title: 'Panel 1',
},
minimumSize: 100,
});
event.api.addPanel({
id: 'panel_2',
component: 'default',
params: {
title: 'Panel 2',
},
minimumSize: 100,
});
event.api.addPanel({
id: 'panel_3',
component: 'default',
params: {
title: 'Panel 3',
},
minimumSize: 100,
});
};
return (
<SplitviewReact
components={components}
proportionalLayout={props.proportional}
onReady={onReady}
orientation={Orientation.HORIZONTAL}
className="dockview-theme-dark"
/>
);
};

8
packages/dockview-docs/src/pages/basics.mdx
View File

@ -8,6 +8,7 @@ This section will take you through a number of concepts that can be applied to a
## Panels
The below examples use `ReactSplitview` but the logic holds for `ReactPaneview`, `ReactGridview` and `ReactDockview` using their respective implementations and interfaces.
sAll components require you to provide an `onReady` prop which you can use to build and control your component.
### Adding a panel with parameters
@ -38,7 +39,7 @@ const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
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 `component 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.
- 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 }>) => {
@ -75,10 +76,11 @@ All components support `toJSON(): T` which returns a Typed object representation
## 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).
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
@ -108,4 +110,4 @@ Although not configurable on `DockviewReact` and `PaneviewReact` these both beha
## Browser support
dockview is intended to support all major browsers
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).

2
packages/dockview-docs/src/pages/dockview.mdx
View File

@ -1,6 +1,8 @@
import { SimpleDockview } from '../components/simpleDockview';
import Link from 'next/link';
# Dockview
Dockview is an abstraction built on top of [Gridviews](/gridview) where each view is a tabbed container.
<div

60
packages/dockview-docs/src/pages/gridview.mdx
View File

@ -1,5 +1,7 @@
import { SimpleGridview } from '../components/simpleGridview';
import Link from 'next/link
import Link from 'next/link';
# Gridview
<div
style={{
@ -44,34 +46,34 @@ const onReady = (event: GridviewReadyEvent) => {
};
```
| 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[]` | |
| orientation | `Orientation` | |
| | | |
| onDidLayoutChange | `Event<void>` | |
| onDidLayoutFromJSON | `Event<void>` | |
| onDidAddGroup | `Event<IGridviewPanel>` | |
| onDidRemoveGroup | `Event<IGridviewPanel>` | |
| onDidActiveGroupChange | `Event<IGridviewPanel \| undefined>` | |
| | | |
| 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` | |
| layout | `(width: number, height:number): void` | <Link href="/basics/#auto-resizing">Auto Resizing</Link> |
| fromJSON | `(data: SerializedGridview): void` | <Link href="/basics/#serialization">Serialization</Link> |
| toJSON | `(): SerializedGridview` | <Link href="/basics/#serialization">Serialization</Link> |
| 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 href="/basics/#auto-resizing">Auto Resizing</Link> |
| fromJSON | `(data: SerializedGridview): void` | <Link href="/basics/#serialization">Serialization</Link> |
| toJSON | `(): SerializedGridview` | <Link href="/basics/#serialization">Serialization</Link> |
## Gridview Panel API

52
packages/dockview-docs/src/pages/paneview.mdx
View File

@ -1,6 +1,8 @@
import { SimplePaneview } from '../components/simplePaneview';
import Link from 'next/link';
# Paneview
<div
style={{
height: '400px',
@ -103,30 +105,30 @@ const onReady = (event: GridviewReadyEvent) => {
};
```
| Property | Type | Description |
| ------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------ |
| height | `number` | Component pixel height |
| width | `number` | Component pixel width |
| minimumSize | `number` | |
| maximumSize | `number` | |
| length | `number` | Number of panels |
| panels | `IPaneviewPanel[]` | |
| | | |
| onDidLayoutChange | `Event<void>` | |
| onDidLayoutFromJSON | `Event<void>` | |
| onDidAddView | `Event<IPaneviewPanel>` | |
| onDidRemoveView | `Event<IPaneviewPanel>` | |
| onDidDrop | `Event<PaneviewDropEvent` | |
| | | |
| addPanel | `addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel` | |
| removePanel | `(panel: IPaneviewPanel): void` | |
| movePanel | `(from: number, to: number): void` | |
| getPanel | `(id:string): IPaneviewPanel \| undefined` | |
| | | |
| focus | `(): void` | |
| layout | `(width: number, height:number): void` | See <Link href="/basics/#auto-resizing">Auto Resizing</Link> |
| fromJSON | `(data: SerializedPaneview): void` | <Link href="/basics/#serialization">Serialization</Link> |
| toJSON | `(): SerializedPaneview` | <Link href="/basics/#serialization">Serialization</Link> |
| 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 href="/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 href="/basics/#auto-resizing">Auto Resizing</Link> |
| fromJSON | `(data: SerializedPaneview): void` | <Link href="/basics/#serialization">Serialization</Link> |
| toJSON | `(): SerializedPaneview` | <Link href="/basics/#serialization">Serialization</Link> |
## Gridview Panel API
@ -157,3 +159,5 @@ const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => {
| setActive | `(): void` | |
| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | |
| setSize | `(event: SizeEvent): void` | |
# Drag And Drop

4
packages/dockview-docs/src/pages/splitview.mdx
View File

@ -107,7 +107,7 @@ const onReady = (event: SplitviewReadyEvent) => {
| 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[]` | |
| panels | `ISplitviewPanel[]` | All panels |
| | | |
| onDidLayoutChange | `Event<void>` | Fires on layout change |
| onDidLayoutFromJSON | `Event<void>` | Fires of layout change caused by a fromJSON deserialization call |
@ -120,7 +120,7 @@ const onReady = (event: SplitviewReadyEvent) => {
| movePanel | `(from: number, to: number): void` | |
| | |
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
| focus | `(): void` | |
| focus | `(): void` | Focus the active panel, if exists |
| layout | `(width: number, height:number): void` | See <Link href="/basics/#auto-resizing">Auto Resizing</Link> |
| fromJSON | `(data: SerializedSplitview): void` | <Link href="/basics/#serialization">Serialization</Link> |
| toJSON | `(): SerializedSplitview` | <Link href="/basics/#serialization">Serialization</Link> |

72
packages/dockview-docs/src/pages/theme.mdx Normal file
View File

@ -0,0 +1,72 @@
import { CustomCSSDockview } from '../components/dockview/customCss';
# Theme
`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';
```
`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>

1
packages/dockview-docs/src/references/pages.ts
View File

@ -7,6 +7,7 @@ export interface Page {
export const PAGES: Page[] = [
{ title: 'Introduction', url: '/#introduction' },
{ title: 'Basics', url: '/basics/#basics' },
{ title: 'Theme', url: '/theme/#theme' },
{
title: 'API',
url: '#api',