From 407d9b3aad3d57b183743433986ae21746a5af20 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Tue, 20 Sep 2022 21:51:04 +0100
Subject: [PATCH] chore: update docs

---
 packages/docs/docs/components/dockview.mdx    |   5 +
 .../docs/src/components/dockview/demo.tsx     |  15 ++-
 .../docs/src/components/dockview/resize.scss  |  23 ++++
 .../docs/src/components/dockview/resize.tsx   | 111 ++++++++++++++++++
 4 files changed, 152 insertions(+), 2 deletions(-)
 create mode 100644 packages/docs/src/components/dockview/resize.scss
 create mode 100644 packages/docs/src/components/dockview/resize.tsx

diff --git a/packages/docs/docs/components/dockview.mdx b/packages/docs/docs/components/dockview.mdx
index 4af21aca7..0faa319cf 100644
--- a/packages/docs/docs/components/dockview.mdx
+++ b/packages/docs/docs/components/dockview.mdx
@@ -12,6 +12,7 @@ import { EventsDockview } from '@site/src/components/dockview/events';
 import { ContextMenuDockview } from '@site/src/components/dockview/contextMenu';
 import { NestedDockview } from '@site/src/components/dockview/nested';
 import { CustomHeadersDockview } from '@site/src/components/dockview/customHeaders';
+import { ResizeDockview } from '@site/src/components/dockview/resize';
 import Link from '@docusaurus/Link';
 
 # Dockview
@@ -176,6 +177,10 @@ const onResizePanel = () => {
 };
 ```
 
+Here is a working example of resizing panels via these API methods.
+
+<ResizeDockview />
+
 ### Locked group
 
 Locking a group will disable all drop events for this group ensuring a user can not add additional panels to the group.
diff --git a/packages/docs/src/components/dockview/demo.tsx b/packages/docs/src/components/dockview/demo.tsx
index ceb1aad74..88410fc6d 100644
--- a/packages/docs/src/components/dockview/demo.tsx
+++ b/packages/docs/src/components/dockview/demo.tsx
@@ -209,8 +209,9 @@ const Icon = (props: {
 };
 
 const Button = () => {
-    const [position, setPosition] =
-        React.useState<{ x: number; y: number } | undefined>(undefined);
+    const [position, setPosition] = React.useState<
+        { x: number; y: number } | undefined
+    >(undefined);
 
     const close = () => setPosition(undefined);
 
@@ -318,6 +319,16 @@ export const DockviewDemo = () => {
         event.api.addEmptyGroup();
 
         event.api.getPanel('panel_1').api.setActive();
+
+        setInterval(() => {
+            event.api.getPanel('panel_1').update({
+                params: {
+                    params: {
+                        title: Date.now().toString(),
+                    },
+                },
+            });
+        }, 1000);
     };
 
     return (
diff --git a/packages/docs/src/components/dockview/resize.scss b/packages/docs/src/components/dockview/resize.scss
new file mode 100644
index 000000000..25b49d5cb
--- /dev/null
+++ b/packages/docs/src/components/dockview/resize.scss
@@ -0,0 +1,23 @@
+.resize-panel {
+    padding: 10px;
+    color: white;
+
+    .resize-control {
+        display: flex;
+        height: 18px;
+        line-height: 18px;
+        font-size: 13px;
+
+        span {
+            width: 60px;
+        }
+
+        input {
+            width: 75px;
+        }
+
+        button {
+            width: 50px;
+        }
+    }
+}
diff --git a/packages/docs/src/components/dockview/resize.tsx b/packages/docs/src/components/dockview/resize.tsx
new file mode 100644
index 000000000..eaff93af3
--- /dev/null
+++ b/packages/docs/src/components/dockview/resize.tsx
@@ -0,0 +1,111 @@
+import {
+    DockviewReact,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview';
+import * as React from 'react';
+import './resize.scss';
+
+const Default = (props: IDockviewPanelProps) => {
+    const [width, setWidth] = React.useState<number>(100);
+    const [height, setHeight] = React.useState<number>(100);
+
+    return (
+        <div className="resize-panel">
+            <div style={{ height: '25px' }}>{props.api.title}</div>
+            <div className="resize-control">
+                <span>Width:</span>
+                <input
+                    value={width}
+                    onChange={(e) => setWidth(Number(e.target.value))}
+                    type="number"
+                    min={50}
+                    step={1}
+                />
+                <button
+                    onClick={() => {
+                        props.api.group.api.setSize({
+                            width,
+                        });
+                    }}
+                >
+                    Set
+                </button>
+            </div>
+            <div className="resize-control">
+                <span>Height:</span>
+                <input
+                    value={height}
+                    onChange={(e) => setHeight(Number(e.target.value))}
+                    type="number"
+                    min={50}
+                    step={1}
+                />
+                <button
+                    onClick={() => {
+                        props.api.group.api.setSize({
+                            height,
+                        });
+                    }}
+                >
+                    Set
+                </button>
+            </div>
+        </div>
+    );
+};
+
+const components = {
+    default: Default,
+};
+
+export const ResizeDockview = () => {
+    const onReady = (event: DockviewReadyEvent) => {
+        event.api.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        event.api.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            position: {
+                direction: 'right',
+                referencePanel: 'panel_1',
+            },
+        });
+
+        event.api.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            position: {
+                direction: 'below',
+                referencePanel: 'panel_1',
+            },
+        });
+        event.api.addPanel({
+            id: 'panel_4',
+            component: 'default',
+        });
+        event.api.addPanel({
+            id: 'panel_5',
+            component: 'default',
+        });
+    };
+
+    return (
+        <div
+            style={{
+                height: '500px',
+                display: 'flex',
+                flexDirection: 'column',
+            }}
+        >
+            <DockviewReact
+                className="dockview-theme-dark"
+                onReady={onReady}
+                components={components}
+            />
+        </div>
+    );
+};