rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-02-13 03:45:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

bug: fix title renderer

Browse Source
This commit is contained in:
mathuo 2024-01-01 22:46:15 +00:00
parent 36dd190ddb
commit 6a620d4088
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
3 changed files with 35 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx
View File

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

2
packages/dockview/src/dockview/defaultTab.tsx
View File

@ -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"

79
packages/docs/sandboxes/demo-dockview/src/app.tsx
View File

@ -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}
/>
);
};