From 568731b723a3ea78c2e41b2e73895e187934560f Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Sun, 8 May 2022 22:43:25 +0100 Subject: [PATCH] chore: docs --- README.md | 25 --- .../src/components/container.tsx | 2 +- .../src/components/simplePaneview.tsx | 52 +++++- .../src/components/simpleSplitview.tsx | 7 + packages/dockview-docs/src/pages/basics.mdx | 21 +++ packages/dockview-docs/src/pages/dockview.mdx | 104 +++++------ packages/dockview-docs/src/pages/gridview.mdx | 92 +++++----- packages/dockview-docs/src/pages/paneview.mdx | 142 +++++++++++---- .../dockview-docs/src/pages/splitview.mdx | 164 ++++++++++++------ packages/dockview/README.md | 25 --- 10 files changed, 399 insertions(+), 235 deletions(-) diff --git a/README.md b/README.md index 554188d93..6d529b68a 100644 --- a/README.md +++ b/README.md @@ -124,31 +124,6 @@ const Component = () => { }; ``` -Specifically for `DockviewReact` there exists higher-order components to encapsulate both the tab and contents into one logical component for the user making state sharing between the two simple, which is an optional feature. - -```tsx -const components: PanelCollection = { - default: (props: IDockviewPanelProps<{ someProps: string }>) => { - return
{props.params.someProps}
; - }, - fancy: (props: IDockviewPanelProps) => { - return ( - - -
- {props.api.title} - props.api.close()}>{'Close'} -
- - -
{'Hello world'}
- - - ); - }, -}; -``` - ## Sandbox examples - [Dockview](https://codesandbox.io/s/simple-dockview-t6491) diff --git a/packages/dockview-docs/src/components/container.tsx b/packages/dockview-docs/src/components/container.tsx index f33d46ae4..56cb9407a 100644 --- a/packages/dockview-docs/src/components/container.tsx +++ b/packages/dockview-docs/src/components/container.tsx @@ -14,7 +14,7 @@ export const Container = (props: { children: React.ReactNode }) => {
{props.children} diff --git a/packages/dockview-docs/src/components/simplePaneview.tsx b/packages/dockview-docs/src/components/simplePaneview.tsx index 37e6cddc2..98603f027 100644 --- a/packages/dockview-docs/src/components/simplePaneview.tsx +++ b/packages/dockview-docs/src/components/simplePaneview.tsx @@ -3,10 +3,59 @@ import { PaneviewReact, PaneviewReadyEvent, } from 'dockview'; +import * as React from 'react'; const components = { default: (props: IPaneviewPanelProps<{ title: string }>) => { - return
{props.params.title}
; + return ( +
+ {props.params.title} +
+ ); + }, +}; + +const headerComponents = { + myHeaderComponent: (props: IPaneviewPanelProps<{ title: string }>) => { + const [expanded, setExpanded] = React.useState( + props.api.isExpanded + ); + + React.useEffect(() => { + const disposable = props.api.onDidExpansionChange((event) => { + setExpanded(event.isExpanded); + }); + + return () => { + disposable.dispose(); + }; + }, []); + + const onClick = () => { + props.api.setExpanded(!expanded); + }; + + return ( +
+ + {props.params.title} +
+ ); }, }; @@ -43,6 +92,7 @@ export const SimplePaneview = () => { return ( diff --git a/packages/dockview-docs/src/components/simpleSplitview.tsx b/packages/dockview-docs/src/components/simpleSplitview.tsx index 93ecad8b1..275184305 100644 --- a/packages/dockview-docs/src/components/simpleSplitview.tsx +++ b/packages/dockview-docs/src/components/simpleSplitview.tsx @@ -39,6 +39,13 @@ export const SimpleSplitview = (props: { proportional?: boolean }) => { }, minimumSize: 100, }); + + event.api.addPanel({ + id: 'panel_3', + component: 'default', + minimumSize: 100, + maximumSize: 1000, + }); }; return ( diff --git a/packages/dockview-docs/src/pages/basics.mdx b/packages/dockview-docs/src/pages/basics.mdx index 59872d4ac..8681599bc 100644 --- a/packages/dockview-docs/src/pages/basics.mdx +++ b/packages/dockview-docs/src/pages/basics.mdx @@ -80,6 +80,23 @@ 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`. +## 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. @@ -88,3 +105,7 @@ Although not configurable on `DockviewReact` and `PaneviewReact` these both beha + +## Browser support + +dockview is intended to support all major browsers diff --git a/packages/dockview-docs/src/pages/dockview.mdx b/packages/dockview-docs/src/pages/dockview.mdx index f6e391e35..228f268c7 100644 --- a/packages/dockview-docs/src/pages/dockview.mdx +++ b/packages/dockview-docs/src/pages/dockview.mdx @@ -1,4 +1,5 @@ import { SimpleDockview } from '../components/simpleDockview'; +import Link from 'next/link'; Dockview is an abstraction built on top of [Gridviews](/gridview) where each view is a tabbed container. @@ -44,18 +45,18 @@ panel.group.header.hidden = true; 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 [Auto resizing](/basics/#auto-resizing) | -| onTabContextMenu | Event | Yes | false | | -| onDidDrop | Event | Yes | false | | -| showDndOverlay | Event | Yes | false | | +| 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 Auto Resizing | +| onTabContextMenu | Event | Yes | false | | +| onDidDrop | Event | Yes | false | | +| showDndOverlay | Event | Yes | false | | ## Dockview API @@ -73,45 +74,45 @@ const onReady = (event: DockviewReadyEvent) => { }; ``` -| 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` | | -| onDidLayoutFromJSON | `Event` | | -| onDidAddGroup | `Event` | | -| onDidRemoveGroup | `Event` | | -| onDidActiveGroupChange | `Event` | | -| onDidAddPanel | `Event` | | -| onDidRemovePanel | `Event` | | -| onDidActivePanelChange | `Event` | | -| onDidDrop | `Event` | | +| onDidLayoutFromJSON | `Event` | | +| onDidAddGroup | `Event` | | +| onDidRemoveGroup | `Event` | | +| onDidActiveGroupChange | `Event` | | +| onDidAddPanel | `Event` | | +| onDidRemovePanel | `Event` | | +| onDidActivePanelChange | `Event` | | +| onDidDrop | `EventAuto Resizing | +| fromJSON | `(data: SerializedDockview): void` | Serialization | +| toJSON | `(): SerializedDockview` | Serialization | ## Dockview Panel API @@ -134,7 +135,6 @@ const MyComponent = (props: IDockviewPanelProps<{ title: string }>) => { | onDidFocusChange | `Event` | | | onDidVisibilityChange | `Event` | | | onDidActiveChange | `Event` | | -| onFocusEvent | `Event` | | | setActive | `(): void` | | | | | | | onDidConstraintsChange | `onDidConstraintsChange: Event` | | diff --git a/packages/dockview-docs/src/pages/gridview.mdx b/packages/dockview-docs/src/pages/gridview.mdx index 16a32137c..930f4f887 100644 --- a/packages/dockview-docs/src/pages/gridview.mdx +++ b/packages/dockview-docs/src/pages/gridview.mdx @@ -1,18 +1,32 @@ +import { SimpleGridview } from '../components/simpleGridview'; +import Link from 'next/link + +
+ +
+ ## Component Props ```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 | | -| hideBorders | boolean | Yes | false | | -| className | string | Yes | '' | | -| disableAutoResizing | boolean | Yes | false | See [Auto resizing](/basics/#auto-resizing) | +| Property | Type | Optional | Default | Description | +| ------------------- | ------------------------------------ | -------- | ---------------------- | ------------------------------------------------------------------------ | +| onReady | (event: SplitviewReadyEvent) => void | No | | | +| components | object | No | | | +| orientation | Orientation | Yes | Orientation.HORIZONTAL | | +| proportionalLayout | boolean | Yes | true | See Proportional layout | +| hideBorders | boolean | Yes | false | | +| className | string | Yes | '' | | +| disableAutoResizing | boolean | Yes | false | See Auto Resizing | ## Gridview API @@ -30,37 +44,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` | | -| onDidLayoutFromJSON | `Event` | | -| onDidAddGroup | `Event` | | -| onDidRemoveGroup | `Event` | | -| onDidActiveGroupChange | `Event` | | -| | | | -| 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` | | -| setVisible | `(panel: IGridviewPanel, isVisible: boolean): void` | | -| focus | `(): void` | | -| setActive | `(panel: IGridviewPanel): void` | | -| toggleVisiblity | `(panel: IGridviewPanel): void` | | -| layout | `(width: number, height:number): void` | See [Auto resizing](/basics/#auto-resizing) | -| fromJSON | `(data: SerializedGridview): void` | See [Serialization](/basics/#serialization) | -| toJSON | `(): SerializedGridview` | See [Serialization](/basics/#serialization) | +| 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` | | +| onDidLayoutFromJSON | `Event` | | +| onDidAddGroup | `Event` | | +| onDidRemoveGroup | `Event` | | +| onDidActiveGroupChange | `Event` | | +| | | | +| 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` | Auto Resizing | +| fromJSON | `(data: SerializedGridview): void` | Serialization | +| toJSON | `(): SerializedGridview` | Serialization | ## Gridview Panel API @@ -85,7 +96,6 @@ const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => { | onDidFocusChange | `Event` | | | onDidVisibilityChange | `Event` | | | onDidActiveChange | `Event` | | -| onFocusEvent | `Event` | | | onDidConstraintsChange | `onDidConstraintsChange: Event` | | | | | | | setVisible | `(isVisible: boolean): void` | | diff --git a/packages/dockview-docs/src/pages/paneview.mdx b/packages/dockview-docs/src/pages/paneview.mdx index 458968149..b7d4eeb3d 100644 --- a/packages/dockview-docs/src/pages/paneview.mdx +++ b/packages/dockview-docs/src/pages/paneview.mdx @@ -1,20 +1,93 @@ +import { SimplePaneview } from '../components/simplePaneview'; +import Link from 'next/link'; + +
+ +
+ ## Component Props ```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 | See [Auto resizing](/basics/#auto-resizing) | -| disableDnd | boolean | Yes | false | | -| onDidDrop | Event | Yes | | | +| Property | Type | Optional | Default | Description | +| ------------------- | ------------------------------------ | -------- | ------- | -------------------------------------------------------- | +| onReady | (event: SplitviewReadyEvent) => void | No | | | +| components | object | No | | | +| headerComponents | object | Yes | | | +| className | string | Yes | '' | | +| disableAutoResizing | boolean | Yes | false | Auto Resizing | +| disableDnd | boolean | Yes | false | | +| onDidDrop | Event | Yes | | | -## Gridview API +## Custom Header + +The above example shows the default header and will render the `title` along with a small icon to indicate a collapsed or expanded state. +You can provide a custom header: + +```tsx +const onReady = (event: PaneviewReadyEvent) => { + event.api.addPanel({ + id: 'panel_1', + component: 'default', + headerComponent: 'myHeaderComponent', + params: { + valueA: 'A', + }, + title: 'Panel 1', + }); +}; +``` + +You can define a header component and listen to the expanded state to update the component accordingly. + +```tsx +const CustomHeader = (props: IPaneviewPanelProps) => { + const [expanded, setExpanded] = React.useState( + props.api.isExpanded + ); + + React.useEffect(() => { + const disposable = props.api.onDidExpansionChange((event) => { + setExpanded(event.isExpanded); + }); + + return () => { + disposable.dispose(); + }; + }, []); + + const onClick = () => { + props.api.setExpanded(!expanded); + }; + + return ( +
+ + {props.params.title} +
+ ); +}; +``` + +You should provide a value for the `headerComponents` React prop. + +```tsx +const headerComponents = { myHeaderComponent: CustomHeader }; +``` + +## Paneview API ```tsx const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => { @@ -30,30 +103,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` | | -| onDidLayoutFromJSON | `Event` | | -| onDidAddView | `Event` | | -| onDidRemoveView | `Event` | | -| onDidDrop | `Event` | | +| onDidLayoutFromJSON | `Event` | | +| onDidAddView | `Event` | | +| onDidRemoveView | `Event` | | +| onDidDrop | `EventAuto Resizing | +| fromJSON | `(data: SerializedPaneview): void` | Serialization | +| toJSON | `(): SerializedPaneview` | Serialization | ## Gridview Panel API @@ -78,7 +151,6 @@ const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => { | onDidFocusChange | `Event` | | | onDidVisibilityChange | `Event` | | | onDidActiveChange | `Event` | | -| onFocusEvent | `Event` | | | onDidConstraintsChange | `onDidConstraintsChange: Event` | | | | | | setVisible | `(isVisible: boolean): void` | | diff --git a/packages/dockview-docs/src/pages/splitview.mdx b/packages/dockview-docs/src/pages/splitview.mdx index 96bd5dfeb..add209548 100644 --- a/packages/dockview-docs/src/pages/splitview.mdx +++ b/packages/dockview-docs/src/pages/splitview.mdx @@ -1,4 +1,5 @@ import { SimpleSplitview } from '../components/simpleSplitview'; +import Link from 'next/link'; # Splitview @@ -73,15 +74,15 @@ import { ReactSplitview } from 'dockview'; The `onReady` prop you will you access to the component `api`. -| Property | Type | Optional | Default | Description | -| ------------------- | -------------------------------------- | -------- | ------------------------ | ------------------------------------------------------- | -| onReady | `(event: SplitviewReadyEvent) => void` | No | | | -| components | `Record` | No | | Panel renderers | -| orientation | `Orientation` | Yes | `Orientation.HORIZONTAL` | Orientation of the Splitview | -| proportionalLayout | `boolean` | Yes | `true` | See [Proportional layout](/basics/#proportional-layout) | -| hideBorders | `boolean` | Yes | `false` | Hide the borders between panels | -| className | `string` | Yes | `''` | Attaches a classname | -| disableAutoResizing | `boolean` | Yes | `false` | See [Auto resizing](/basics/#auto-resizing) | +| Property | Type | Optional | Default | Description | +| ------------------- | -------------------------------------- | -------- | ------------------------ | ------------------------------------------------------------------------ | +| onReady | `(event: SplitviewReadyEvent) => void` | No | | | +| components | `Record` | No | | Panel renderers | +| orientation | `Orientation` | Yes | `Orientation.HORIZONTAL` | Orientation of the Splitview | +| proportionalLayout | `boolean` | Yes | `true` | See Proportional layout | +| hideBorders | `boolean` | Yes | `false` | Hide the borders between panels | +| className | `string` | Yes | `''` | Attaches a classname | +| disableAutoResizing | `boolean` | Yes | `false` | See Auto Resizing | ## Splitview API @@ -99,32 +100,30 @@ const onReady = (event: SplitviewReadyEvent) => { }; ``` -| Property | Type | Description | -| ------------------- | ------------------------------------------------------------------ | ------------------------------------------- | -| height | `number` | Component pixel height | -| width | `number` | Component pixel width | -| minimumSize | `number` | | -| maximumSize | `number` | | -| length | `number` | Number of panels | -| panels | `ISplitviewPanel[]` | | -| | | | -| onDidLayoutChange | `Event` | | -| onDidLayoutFromJSON | `Event` | | -| onDidAddView | `Event` | | -| onDidRemoveView | `Event` | | -| | | | -| addPanel | `addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel` | | -| removePanel | `(panel: ISplitviewPanel, sizing?: Sizing): void` | | -| getPanel | `(id:string): ISplitviewPanel \| undefined` | | -| movePanel | `(from: number, to: number): void` | | +| 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[]` | | +| | | | +| onDidLayoutChange | `Event` | Fires on layout change | +| onDidLayoutFromJSON | `Event` | Fires of layout change caused by a fromJSON deserialization call | +| onDidAddView | `Event` | Fires when a view is added | +| onDidRemoveView | `Event` | 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` | | | | | -| setVisible | `(panel: ISplitviewPanel, isVisible: boolean): void` | | -| setActive | `(panel: ISplitviewPanel): void` | | -| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | | -| focus | `(): void` | | -| layout | `(width: number, height:number): void` | See [Auto resizing](/basics/#auto-resizing) | -| fromJSON | `(data: SerializedSplitview): void` | See [Serialization](/basics/#serialization) | -| toJSON | `(): SerializedSplitview` | See [Serialization](/basics/#serialization) | +| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | | +| focus | `(): void` | | +| layout | `(width: number, height:number): void` | See Auto Resizing | +| fromJSON | `(data: SerializedSplitview): void` | Serialization | +| toJSON | `(): SerializedSplitview` | Serialization | ## Splitview Panel API @@ -136,24 +135,79 @@ const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => { }; ``` -| 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` | | -| onDidFocusChange | `Event` | | -| onDidVisibilityChange | `Event` | | -| onDidActiveChange | `Event` | | -| onFocusEvent | `Event` | | -| onDidConstraintsChange | `onDidConstraintsChange: Event` | | -| | | | -| setVisible | `(isVisible: boolean): void` | | -| setActive | `(): void` | | -| | | | -| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | | -| setSize | `(event: PanelSizeEvent): void` | | +| 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` | Fires when panel dimensions change | +| onDidFocusChange | `Event` | Fire when panel is focused and blurred | +| onDidVisibilityChange | `Event` | Fires when the panels visiblity property is changed (see Panel Visibility) | +| onDidActiveChange | `Event` | Fires when the panels active property is changed (see Active Panel) | +| onDidConstraintsChange | `onDidConstraintsChange: Event` | Fires when the panels size contrainsts change (see Panel Constraints) | +| | | | +| setVisible | `(isVisible: boolean): void` | | +| setActive | `(): void` | | +| | | | +| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | | +| setSize | `(event: PanelSizeEvent): void` | | + +# Visibility + +```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, +}); +``` diff --git a/packages/dockview/README.md b/packages/dockview/README.md index 554188d93..6d529b68a 100644 --- a/packages/dockview/README.md +++ b/packages/dockview/README.md @@ -124,31 +124,6 @@ const Component = () => { }; ``` -Specifically for `DockviewReact` there exists higher-order components to encapsulate both the tab and contents into one logical component for the user making state sharing between the two simple, which is an optional feature. - -```tsx -const components: PanelCollection = { - default: (props: IDockviewPanelProps<{ someProps: string }>) => { - return
{props.params.someProps}
; - }, - fancy: (props: IDockviewPanelProps) => { - return ( - - -
- {props.api.title} - props.api.close()}>{'Close'} -
- - -
{'Hello world'}
- - - ); - }, -}; -``` - ## Sandbox examples - [Dockview](https://codesandbox.io/s/simple-dockview-t6491)