From 521d2a0e6d03e885ae35c0c8559d3d5f78a39b85 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Fri, 26 Apr 2024 21:49:29 +0100
Subject: [PATCH] chore: docs

---
 .../react/dockview/demo-dockview/src/app.tsx   | 15 ++++++++++++++-
 .../dockview/demo-dockview/src/gridActions.tsx | 18 +++++++++++++++++-
 .../demo-dockview/src/panelActions.tsx         | 12 ++++++------
 3 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx
index c657af112..7631749e1 100644
--- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx
@@ -78,6 +78,10 @@ const colors = [
 ];
 let count = 0;
 
+const WatermarkComponent = () => {
+    return <div>custom watermark</div>;
+};
+
 const DockviewDemo = (props: { theme?: string }) => {
     const [logLines, setLogLines] = React.useState<
         { text: string; timestamp?: Date; backgroundColor?: string }[]
@@ -174,6 +178,8 @@ const DockviewDemo = (props: { theme?: string }) => {
         defaultConfig(event.api);
     };
 
+    const [watermark, setWatermark] = React.useState<boolean>(false);
+
     return (
         <div
             style={{
@@ -187,7 +193,11 @@ const DockviewDemo = (props: { theme?: string }) => {
             }}
         >
             <div>
-                <GridActions api={api} />
+                <GridActions
+                    api={api}
+                    toggleCustomWatermark={() => setWatermark(!watermark)}
+                    hasCustomWatermark={watermark}
+                />
                 {api && (
                     <PanelActions
                         api={api}
@@ -218,6 +228,9 @@ const DockviewDemo = (props: { theme?: string }) => {
                     rightHeaderActionsComponent={RightControls}
                     leftHeaderActionsComponent={LeftControls}
                     prefixHeaderActionsComponent={PrefixHeaderControls}
+                    watermarkComponent={
+                        watermark ? WatermarkComponent : undefined
+                    }
                     onReady={onReady}
                     className={props.theme || 'dockview-theme-abyss'}
                 />
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx
index 11466bc12..745716a6d 100644
--- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx
@@ -2,7 +2,11 @@ import { DockviewApi } from 'dockview';
 import * as React from 'react';
 import { defaultConfig, nextId } from './defaultLayout';
 
-export const GridActions = (props: { api?: DockviewApi }) => {
+export const GridActions = (props: {
+    api?: DockviewApi;
+    hasCustomWatermark: boolean;
+    toggleCustomWatermark: () => void;
+}) => {
     const onClear = () => {
         props.api?.clear();
     };
@@ -61,6 +65,18 @@ export const GridActions = (props: { api?: DockviewApi }) => {
             <button className="text-button" onClick={onAddGroup}>
                 Add Group
             </button>
+            <span className="button-action">
+                <button
+                    className={
+                        props.hasCustomWatermark
+                            ? 'demo-button selected'
+                            : 'demo-button'
+                    }
+                    onClick={props.toggleCustomWatermark}
+                >
+                    Use Custom Watermark
+                </button>
+            </span>
             <button className="text-button" onClick={onClear}>
                 Clear
             </button>
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/panelActions.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/panelActions.tsx
index d48bbadde..f0e9b3f0d 100644
--- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/panelActions.tsx
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/panelActions.tsx
@@ -7,7 +7,7 @@ const PanelAction = (props: {
     panelId: string;
 }) => {
     const onClick = () => {
-        props.api?.getPanel(props.panelId)?.focus();
+        props.api.getPanel(props.panelId)?.focus();
     };
     return (
         <div className="button-action">
@@ -27,9 +27,9 @@ const PanelAction = (props: {
                 <button
                     className="demo-icon-button"
                     onClick={() => {
-                        const panel = props.api?.getPanel(props.panelId);
+                        const panel = props.api.getPanel(props.panelId);
                         if (panel) {
-                            props.api?.addFloatingGroup(panel);
+                            props.api.addFloatingGroup(panel);
                         }
                     }}
                 >
@@ -38,9 +38,9 @@ const PanelAction = (props: {
                 <button
                     className="demo-icon-button"
                     onClick={() => {
-                        const panel = props.api?.getPanel(props.panelId);
+                        const panel = props.api.getPanel(props.panelId);
                         if (panel) {
-                            props.api?.addPopoutGroup(panel);
+                            props.api.addPopoutGroup(panel);
                         }
                     }}
                 >
@@ -51,7 +51,7 @@ const PanelAction = (props: {
                 <button
                     className="demo-icon-button"
                     onClick={() => {
-                        const panel = props.api?.getPanel(props.panelId);
+                        const panel = props.api.getPanel(props.panelId);
                         panel?.api.close();
                     }}
                 >