From 6a620d408819c741337ed6db19481d9a58622a5a Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Mon, 1 Jan 2024 22:46:15 +0000
Subject: [PATCH] bug: fix title renderer

---
 .../__tests__/dockview/defaultTab.spec.tsx    | 21 +++++
 packages/dockview/src/dockview/defaultTab.tsx |  2 +-
 .../docs/sandboxes/demo-dockview/src/app.tsx  | 79 +++----------------
 3 files changed, 35 insertions(+), 67 deletions(-)

diff --git a/packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx b/packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx
index e6e757efa..bfbc96bb4 100644
--- a/packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx
+++ b/packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx
@@ -22,6 +22,27 @@ describe('defaultTab', () => {
         expect(element.querySelector('.dv-react-tab-close-btn')).toBeTruthy();
     });
 
+    test('that title is displayed', async () => {
+        const api = fromPartial<DockviewPanelApi>({
+            title: 'test_title',
+        });
+        const containerApi = fromPartial<DockviewApi>({});
+        const params = {};
+
+        render(
+            <DockviewDefaultTab
+                api={api}
+                containerApi={containerApi}
+                params={params}
+            />
+        );
+
+        const element = await screen.getByTestId('dockview-default-tab');
+        expect(
+            element.querySelector('.dockview-react-tab-title')?.textContent
+        ).toBe('test_title');
+    });
+
     test('has no close button when hideClose=true', async () => {
         const api = fromPartial<DockviewPanelApi>({});
         const containerApi = fromPartial<DockviewApi>({});
diff --git a/packages/dockview/src/dockview/defaultTab.tsx b/packages/dockview/src/dockview/defaultTab.tsx
index 850d35e7c..5032cfb03 100644
--- a/packages/dockview/src/dockview/defaultTab.tsx
+++ b/packages/dockview/src/dockview/defaultTab.tsx
@@ -57,7 +57,7 @@ export const DockviewDefaultTab: React.FunctionComponent<
             onClick={onClick}
             className="dockview-react-tab"
         >
-            <span className="dockview-react-tab-title">{api.renderer}</span>
+            <span className="dockview-react-tab-title">{api.title}</span>
             {!hideClose && (
                 <div
                     className="dv-react-tab-close-btn"
diff --git a/packages/docs/sandboxes/demo-dockview/src/app.tsx b/packages/docs/sandboxes/demo-dockview/src/app.tsx
index 6ea9ac80c..447a18843 100644
--- a/packages/docs/sandboxes/demo-dockview/src/app.tsx
+++ b/packages/docs/sandboxes/demo-dockview/src/app.tsx
@@ -5,69 +5,17 @@ import {
     IDockviewPanelHeaderProps,
     IDockviewPanelProps,
     IDockviewHeaderActionsProps,
-    DockviewPanelApi,
-    DockviewPanelRenderer,
 } from 'dockview';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { v4 } from 'uuid';
 import './app.scss';
 
-const useRenderer = (
-    api: DockviewPanelApi
-): [DockviewPanelRenderer, (value: DockviewPanelRenderer) => void] => {
-    const [mode, setMode] = React.useState<DockviewPanelRenderer>(api.renderer);
-
-    React.useEffect(() => {
-        const disposable = api.onDidRendererChange((event) => {
-            setMode(event.renderer);
-        });
-
-        return () => {
-            disposable.dispose();
-        };
-    }, []);
-
-    const _setMode = React.useCallback(
-        (mode: DockviewPanelRenderer) => {
-            api.setRenderer(mode);
-        },
-        [api]
-    );
-
-    return [mode, _setMode];
-};
-
 const components = {
     default: (props: IDockviewPanelProps<{ title: string }>) => {
-        const [mode, setMode] = useRenderer(props.api);
-
         return (
             <div style={{ height: '100%', overflow: 'auto', color: 'white' }}>
-                <div
-                    style={{
-                        height: '1000px',
-                        padding: '20px',
-                        overflow: 'auto',
-                    }}
-                >
-                    <div>{props.api.title}</div>
-                    <input />
-                    <div>
-                        {mode}
-                        <button
-                            onClick={() => {
-                                setMode(
-                                    mode === 'onlyWhenVisibile'
-                                        ? 'always'
-                                        : 'onlyWhenVisibile'
-                                );
-                            }}
-                        >
-                            Toggle render mode
-                        </button>
-                    </div>
-                </div>
+                {''}
             </div>
         );
     },
@@ -289,18 +237,18 @@ const DockviewDemo = (props: { theme?: string }) => {
             title: 'Panel 4',
             position: { referencePanel: 'panel_3', direction: 'right' },
         });
-        // event.api.addPanel({
-        //     id: 'panel_5',
-        //     component: 'default',
-        //     title: 'Panel 5',
-        //     position: { referencePanel: 'panel_3', direction: 'below' },
-        // });
-        // event.api.addPanel({
-        //     id: 'panel_6',
-        //     component: 'default',
-        //     title: 'Panel 6',
-        //     position: { referencePanel: 'panel_3', direction: 'right' },
-        // });
+        event.api.addPanel({
+            id: 'panel_5',
+            component: 'default',
+            title: 'Panel 5',
+            position: { referencePanel: 'panel_3', direction: 'below' },
+        });
+        event.api.addPanel({
+            id: 'panel_6',
+            component: 'default',
+            title: 'Panel 6',
+            position: { referencePanel: 'panel_3', direction: 'right' },
+        });
 
         event.api.getPanel('panel_1')!.api.setActive();
 
@@ -316,7 +264,6 @@ const DockviewDemo = (props: { theme?: string }) => {
             prefixHeaderActionsComponent={PrefixHeaderControls}
             onReady={onReady}
             className={props.theme || 'dockview-theme-abyss'}
-            // debug={true}
         />
     );
 };