bug: fix title renderer

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>({});

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"

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({
+        event.api.addPanel({
-        //     id: 'panel_5',
+            id: 'panel_5',
-        //     component: 'default',
+            component: 'default',
-        //     title: 'Panel 5',
+            title: 'Panel 5',
-        //     position: { referencePanel: 'panel_3', direction: 'below' },
+            position: { referencePanel: 'panel_3', direction: 'below' },
-        // });
+        });
-        // event.api.addPanel({
+        event.api.addPanel({
-        //     id: 'panel_6',
+            id: 'panel_6',
-        //     component: 'default',
+            component: 'default',
-        //     title: 'Panel 6',
+            title: 'Panel 6',
-        //     position: { referencePanel: 'panel_3', direction: 'right' },
+            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}
         />
     );
 };