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

Merge pull request #237 from mathuo/232-minor-typescript-types-adjustment

Browse Source 
chore: type definition fix
This commit is contained in:
mathuo 2023-04-03 22:23:44 +01:00 committed by GitHub
commit 24e7b05321
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/dockview/src/dockview/dockview.tsx
View File

@ -37,14 +37,15 @@ function createGroupControlElement(
: undefined;
}
export interface IGroupPanelBaseProps<T extends {} = Record<string, any>>
export interface IGroupPanelBaseProps<T extends { [index: string]: any } = any>
extends PanelParameters<T> {
api: DockviewPanelApi;
containerApi: DockviewApi;
}
export type IDockviewPanelHeaderProps<T extends {} = Record<string, any>> =
IGroupPanelBaseProps<T>;
export type IDockviewPanelHeaderProps<
T extends { [index: string]: any } = any
> = IGroupPanelBaseProps<T>;
export type IDockviewPanelProps<T extends { [index: string]: any } = any> =
IGroupPanelBaseProps<T>;

48
packages/docs/sandboxes/customheader-dockview/src/app.tsx
View File

@ -7,25 +7,25 @@ import {
} from 'dockview';
import * as React from 'react';
interface CustomProps {
valueA: string;
}
const components = {
default: (props: IDockviewPanelProps<{ title: string }>) => {
return <div style={{ padding: '20px' }}>{props.params.title}</div>;
default: (props: IDockviewPanelProps<CustomProps>) => {
return <div style={{ padding: '20px' }}>{props.api.title}</div>;
},
};
const MyCustomheader = (props: IDockviewPanelHeaderProps) => {
const onContextMenu = (event: React.MouseEvent) => {
event.preventDefault();
alert('context menu');
};
return <DockviewDefaultTab onContextMenu={onContextMenu} {...props} />;
};
const headerComponents = {
default: (props: IDockviewPanelHeaderProps) => {
default: (props: IDockviewPanelHeaderProps<CustomProps>) => {
const onContextMenu = (event: React.MouseEvent) => {
event.preventDefault();
alert('context menu');
alert(
`This custom header was parsed the params ${JSON.stringify(
props.params
)}`
);
};
return <DockviewDefaultTab onContextMenu={onContextMenu} {...props} />;
},
@ -39,34 +39,52 @@ const CustomHeadersDockview = () => {
id: 'panel_1',
component: 'default',
title: 'Panel 1',
params: {
valueA: 'test value',
},
});
event.api.addPanel({
id: 'panel_2',
component: 'default',
title: 'Panel 2',
params: {
valueA: 'test value',
},
});
event.api.addPanel({
id: 'panel_3',
component: 'default',
title: 'Panel 3',
params: {
valueA: 'test value',
},
});
event.api.addPanel({
id: 'panel_4',
component: 'default',
title: 'Panel 4',
position: { referencePanel: 'panel_3', direction: 'right' },
params: {
valueA: 'test value',
},
});
event.api.addPanel({
id: 'panel_5',
component: 'default',
title: 'Panel 5',
position: { referencePanel: 'panel_4', direction: 'within' },
params: {
valueA: 'test value',
},
});
const panel6 = event.api.addPanel({
id: 'panel_6',
component: 'default',
title: 'Panel 6',
position: { referencePanel: 'panel_4', direction: 'below' },
params: {
valueA: 'test value',
},
});
panel6.group.locked = true;
panel6.group.header.hidden = true;
@ -75,6 +93,9 @@ const CustomHeadersDockview = () => {
component: 'default',
title: 'Panel 7',
position: { referencePanel: 'panel_6', direction: 'right' },
params: {
valueA: 'test value',
},
});
event.api.addPanel({
id: 'panel_8',
@ -82,6 +103,9 @@ const CustomHeadersDockview = () => {
title: 'Panel 8',
position: { referencePanel: 'panel_7', direction: 'within' },
params: {
valueA: 'test value',
},
});
event.api.addGroup();