From 42a608b93de870ad9c755ec3025adbef5308f43d Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Sat, 25 Mar 2023 20:26:14 +0000 Subject: [PATCH] chore: 1.7.0 docs --- .../basics.mdx | 0 .../components/_category_.json | 0 .../components/dockview.mdx | 106 +++++++++++++----- .../components/gridview.mdx | 0 .../components/paneview.mdx | 0 .../components/splitview.mdx | 0 .../index.mdx | 0 .../theme.mdx | 0 ...ebars.json => version-1.7.0-sidebars.json} | 0 packages/docs/versions.json | 2 +- 10 files changed, 82 insertions(+), 26 deletions(-) rename packages/docs/versioned_docs/{version-1.6.0 => version-1.7.0}/basics.mdx (100%) rename packages/docs/versioned_docs/{version-1.6.0 => version-1.7.0}/components/_category_.json (100%) rename packages/docs/versioned_docs/{version-1.6.0 => version-1.7.0}/components/dockview.mdx (90%) rename packages/docs/versioned_docs/{version-1.6.0 => version-1.7.0}/components/gridview.mdx (100%) rename packages/docs/versioned_docs/{version-1.6.0 => version-1.7.0}/components/paneview.mdx (100%) rename packages/docs/versioned_docs/{version-1.6.0 => version-1.7.0}/components/splitview.mdx (100%) rename packages/docs/versioned_docs/{version-1.6.0 => version-1.7.0}/index.mdx (100%) rename packages/docs/versioned_docs/{version-1.6.0 => version-1.7.0}/theme.mdx (100%) rename packages/docs/versioned_sidebars/{version-1.6.0-sidebars.json => version-1.7.0-sidebars.json} (100%) diff --git a/packages/docs/versioned_docs/version-1.6.0/basics.mdx b/packages/docs/versioned_docs/version-1.7.0/basics.mdx similarity index 100% rename from packages/docs/versioned_docs/version-1.6.0/basics.mdx rename to packages/docs/versioned_docs/version-1.7.0/basics.mdx diff --git a/packages/docs/versioned_docs/version-1.6.0/components/_category_.json b/packages/docs/versioned_docs/version-1.7.0/components/_category_.json similarity index 100% rename from packages/docs/versioned_docs/version-1.6.0/components/_category_.json rename to packages/docs/versioned_docs/version-1.7.0/components/_category_.json diff --git a/packages/docs/versioned_docs/version-1.6.0/components/dockview.mdx b/packages/docs/versioned_docs/version-1.7.0/components/dockview.mdx similarity index 90% rename from packages/docs/versioned_docs/version-1.6.0/components/dockview.mdx rename to packages/docs/versioned_docs/version-1.7.0/components/dockview.mdx index 559384199..1cb4e902e 100644 --- a/packages/docs/versioned_docs/version-1.6.0/components/dockview.mdx +++ b/packages/docs/versioned_docs/version-1.7.0/components/dockview.mdx @@ -2,21 +2,26 @@ description: Dockview Documentation --- +import { Container } from '@site/src/components/ui/container'; + import Link from '@docusaurus/Link'; import useBaseUrl from '@docusaurus/useBaseUrl'; import DockviewPersistance from '@site/sandboxes/layout-dockview/src/app'; import SimpleDockview from '@site/sandboxes/simple-dockview/src/app'; import ResizeDockview from '@site/sandboxes/resize-dockview/src/app'; +import DockviewWatermark from '@site/sandboxes/watermark-dockview/src/app'; +import DockviewConstraints from '@site/sandboxes/constraints-dockview/src/app'; +import DndDockview from '@site/sandboxes/dnd-dockview/src/app'; import NestedDockview from '@site/sandboxes/nested-dockview/src/app'; import EventsDockview from '@site/sandboxes/events-dockview/src/app'; -import DndDockview from '@site/sandboxes/dnd-dockview/src/app'; import DockviewGroupControl from '@site/sandboxes/groupcontrol-dockview/src/app'; -import DockviewWatermark from '@site/sandboxes/watermark-dockview/src/app'; import CustomHeadersDockview from '@site/sandboxes/customheader-dockview/src/app'; import DockviewNative from '@site/sandboxes/fullwidthtab-dockview/src/app'; import DockviewNative2 from '@site/sandboxes/nativeapp-dockview/src/app'; +import DockviewSetTitle from '@site/sandboxes/updatetitle-dockview/src/app'; import RenderingDockview from '@site/sandboxes/rendering-dockview/src/app'; +// import { attach as attachDockviewVanilla } from '@site/sandboxes/vanilla-dockview/src/app'; # Dockview @@ -24,26 +29,19 @@ import RenderingDockview from '@site/sandboxes/rendering-dockview/src/app'; Dockview is an abstraction built on top of [Gridviews](./gridview) where each view is a container of many tabbed panels. -
+ -
+ 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. +You can create a Dockview through the use of the `DockviewReact` component. ```tsx -import { ReactDockview } from 'dockview'; +import { DockviewReact } from 'dockview'; ``` | Property | Type | Optional | Default | Description | @@ -208,7 +206,9 @@ const onReady = (event: DockviewReadyEvent) => { Here is an example using the above code loading from and saving to localStorage. If you refresh the page you should notice your layout is loaded as you left it. - + + + ## Resizing @@ -235,7 +235,9 @@ props.api.group.api.setSize({ You can see an example invoking both approaches below. - + + + ## Watermark @@ -243,7 +245,9 @@ When the dockview is empty you may want to display some fallback content, this i By default there the watermark has no content but you can provide as a prop to `DockviewReact` a `watermarkComponent` which will be rendered when there are no panels or groups. - + + + ## Drag And Drop @@ -320,7 +324,9 @@ return ( ); ``` - + + + ## Panels @@ -452,7 +458,7 @@ const components = { default: RenderWhenVisible(MyComponent) }; 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. - + @@ -503,12 +509,14 @@ You can also override the default tab renderer which will be used when no `tabCo ; ``` -As a simple example the below attachs a custom event handler for the context menu on all tabs as a default tab renderer +As a simple example the below attaches a custom event handler for the context menu on all tabs as a default tab renderer The below example uses a custom tab renderer to reigster a popover when the user right clicked on a tab. This still makes use of the `DockviewDefaultTab` since it's only a minor change. - + + + ### Default Tab Title @@ -526,11 +534,15 @@ You can update the title through the panel api which can be accessed via `props. component or via `api.getPanel('panel1').api` if you are accessing from outside of the panel component. ```tsx -api.updateTitle('my_new_custom_title'); +api.setTitle('my_new_custom_title'); ``` > Note this only works when using the default tab implementation. + + + + ### Custom Tab Title If you are using a custom tab implementation you should pass variables through as a parameter and render them @@ -576,7 +588,9 @@ to the entire width of the group. For example: ``` - + + + ## Groups @@ -628,11 +642,33 @@ const GroupControlComponent = (props: IDockviewGroupControlProps) => { }; ``` - + + + + +### Constraints + +You may wish to specify a minimum or maximum height or width for a group which can be done through the group api. + +```tsx +api.group.api.setConstraints(...) +``` + +> Constraints are currently only supported for groups and not individual panels. +> If you specific a constraint on a group and move a panel within that group to another group it will no +> longer be subject to those constraints since those constraints were on the group and not on the individual panel. + + + + ## Events - +A simple example showing events fired by `dockviewz that can be interacted with. + + + + ## Advanced Examples @@ -641,10 +677,30 @@ const GroupControlComponent = (props: IDockviewGroupControlProps) => { You can safely create multiple dockview instances within one page and nest dockviews within other dockviews. If you wish to interact with the drop event from one dockview instance in another dockview instance you can implement the `showDndOverlay` and `onDidDrop` props on `DockviewReact`. - + + + ### Example hello + +hello 2 + +
+ +
+ + diff --git a/packages/docs/versioned_docs/version-1.6.0/components/gridview.mdx b/packages/docs/versioned_docs/version-1.7.0/components/gridview.mdx similarity index 100% rename from packages/docs/versioned_docs/version-1.6.0/components/gridview.mdx rename to packages/docs/versioned_docs/version-1.7.0/components/gridview.mdx diff --git a/packages/docs/versioned_docs/version-1.6.0/components/paneview.mdx b/packages/docs/versioned_docs/version-1.7.0/components/paneview.mdx similarity index 100% rename from packages/docs/versioned_docs/version-1.6.0/components/paneview.mdx rename to packages/docs/versioned_docs/version-1.7.0/components/paneview.mdx diff --git a/packages/docs/versioned_docs/version-1.6.0/components/splitview.mdx b/packages/docs/versioned_docs/version-1.7.0/components/splitview.mdx similarity index 100% rename from packages/docs/versioned_docs/version-1.6.0/components/splitview.mdx rename to packages/docs/versioned_docs/version-1.7.0/components/splitview.mdx diff --git a/packages/docs/versioned_docs/version-1.6.0/index.mdx b/packages/docs/versioned_docs/version-1.7.0/index.mdx similarity index 100% rename from packages/docs/versioned_docs/version-1.6.0/index.mdx rename to packages/docs/versioned_docs/version-1.7.0/index.mdx diff --git a/packages/docs/versioned_docs/version-1.6.0/theme.mdx b/packages/docs/versioned_docs/version-1.7.0/theme.mdx similarity index 100% rename from packages/docs/versioned_docs/version-1.6.0/theme.mdx rename to packages/docs/versioned_docs/version-1.7.0/theme.mdx diff --git a/packages/docs/versioned_sidebars/version-1.6.0-sidebars.json b/packages/docs/versioned_sidebars/version-1.7.0-sidebars.json similarity index 100% rename from packages/docs/versioned_sidebars/version-1.6.0-sidebars.json rename to packages/docs/versioned_sidebars/version-1.7.0-sidebars.json diff --git a/packages/docs/versions.json b/packages/docs/versions.json index abf62e307..48d03f089 100644 --- a/packages/docs/versions.json +++ b/packages/docs/versions.json @@ -1,3 +1,3 @@ [ - "1.6.0" + "1.7.0" ] \ No newline at end of file