From 6d58e48470370b46f4205df9542701ad4f02c051 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Tue, 10 May 2022 21:59:06 +0100
Subject: [PATCH] chore: fix demo

---
 .../dockview-demo/src/layout-grid/activitybar.tsx    |  4 ++--
 .../src/layout-grid/panels/exampleFunctions.tsx      |  6 ++++--
 packages/dockview-demo/src/layout-grid/sidebar.tsx   |  6 ++++--
 .../dockview-demo/src/layout-grid/splitPanel.tsx     | 12 ++++++++----
 .../dockview-demo/src/panels/splitview/splitview.tsx |  2 +-
 packages/dockview-demo/src/services/widgets.tsx      |  6 +++---
 6 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/packages/dockview-demo/src/layout-grid/activitybar.tsx b/packages/dockview-demo/src/layout-grid/activitybar.tsx
index 925d3d680..ba68ef956 100644
--- a/packages/dockview-demo/src/layout-grid/activitybar.tsx
+++ b/packages/dockview-demo/src/layout-grid/activitybar.tsx
@@ -23,10 +23,10 @@ export const Activitybar = (props: IGridviewPanelProps) => {
 
         const sidebarPanel = api.getPanel('sidebar');
         if (sidebarPanel.api.isVisible) {
-            api.setVisible(sidebarPanel, false);
+            sidebarPanel.api.setVisible(false);
         } else {
             event.preventDefault(); // prevent focus
-            api.setVisible(sidebarPanel, true);
+            sidebarPanel.api.setVisible(true);
             sidebarPanel.focus();
         }
     };
diff --git a/packages/dockview-demo/src/layout-grid/panels/exampleFunctions.tsx b/packages/dockview-demo/src/layout-grid/panels/exampleFunctions.tsx
index a24f7e477..b0832f0cf 100644
--- a/packages/dockview-demo/src/layout-grid/panels/exampleFunctions.tsx
+++ b/packages/dockview-demo/src/layout-grid/panels/exampleFunctions.tsx
@@ -30,8 +30,10 @@ export const ExampleFunctions = (
                     isPanelVisible: x.isVisible,
                 }));
             }),
-            props.api.onFocusEvent(() => {
-                input.current.focus();
+            props.api.onDidFocusChange(({ isFocused }) => {
+                if (isFocused) {
+                    input.current.focus();
+                }
             })
         );
 
diff --git a/packages/dockview-demo/src/layout-grid/sidebar.tsx b/packages/dockview-demo/src/layout-grid/sidebar.tsx
index 864043275..bdb69f55d 100644
--- a/packages/dockview-demo/src/layout-grid/sidebar.tsx
+++ b/packages/dockview-demo/src/layout-grid/sidebar.tsx
@@ -64,8 +64,10 @@ export const Sidebar = (props: IGridviewPanelProps) => {
             props.api.onDidVisibilityChange((event) => {
                 console.log(event);
             }),
-            props.api.onFocusEvent(() => {
-                api.current.focus();
+            props.api.onDidFocusChange(({ isFocused }) => {
+                if (isFocused) {
+                    api.current.focus();
+                }
             })
         );
 
diff --git a/packages/dockview-demo/src/layout-grid/splitPanel.tsx b/packages/dockview-demo/src/layout-grid/splitPanel.tsx
index 177954997..c5b812383 100644
--- a/packages/dockview-demo/src/layout-grid/splitPanel.tsx
+++ b/packages/dockview-demo/src/layout-grid/splitPanel.tsx
@@ -29,8 +29,10 @@ const components = {
                 props.api.onDidActiveChange((event) => {
                     setActive(event.isActive);
                 }),
-                props.api.onFocusEvent(() => {
-                    ref.current.focus();
+                props.api.onDidFocusChange(({ isFocused }) => {
+                    if (isFocused) {
+                        ref.current.focus();
+                    }
                 })
             );
 
@@ -65,8 +67,10 @@ export const SplitPanel = (props: IDockviewPanelProps) => {
             props.api.onDidDimensionsChange((event) => {
                 api.current?.layout(event.width, event.height - 25);
             }),
-            props.api.onFocusEvent(() => {
-                api.current.focus();
+            props.api.onDidFocusChange(({ isFocused }) => {
+                if (isFocused) {
+                    api.current.focus();
+                }
             })
         );
 
diff --git a/packages/dockview-demo/src/panels/splitview/splitview.tsx b/packages/dockview-demo/src/panels/splitview/splitview.tsx
index c74fe45b4..17012f142 100644
--- a/packages/dockview-demo/src/panels/splitview/splitview.tsx
+++ b/packages/dockview-demo/src/panels/splitview/splitview.tsx
@@ -227,7 +227,7 @@ export const Common = (
 
     const toggleVisibility = (i: number) => () => {
         const panel = api.current.panels[i];
-        api.current.setVisible(panel, !panel.api.isVisible);
+        panel.api.setVisible(panel.api.isVisible);
         setDimensions((dimensions) => ({
             ...dimensions,
             visibility: api.current.panels.map((_) => _.api.isVisible),
diff --git a/packages/dockview-demo/src/services/widgets.tsx b/packages/dockview-demo/src/services/widgets.tsx
index af1174277..555d0cb64 100644
--- a/packages/dockview-demo/src/services/widgets.tsx
+++ b/packages/dockview-demo/src/services/widgets.tsx
@@ -161,11 +161,11 @@ export const Activitybar = (props: IGridviewPanelProps) => {
             const sidebarPanel = api.getPanel('sidebar');
             if (sidebarPanel.api.isVisible) {
                 if (!alwaysOpen && selectedActive) {
-                    api.setVisible(sidebarPanel, false);
+                    sidebarPanel.api.setVisible(false);
                 }
             } else {
                 event.preventDefault(); // prevent focus
-                api.setVisible(sidebarPanel, true);
+                sidebarPanel.api.setVisible(true);
                 sidebarPanel.focus();
             }
 
@@ -234,7 +234,7 @@ export const Activitybar = (props: IGridviewPanelProps) => {
 
         const sidebarPanel = api.getPanel('sidebar');
         if (!sidebarPanel.api.isVisible) {
-            api.setVisible(sidebarPanel, true);
+            sidebarPanel.api.setVisible(true);
             sidebarPanel.focus();
         }