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

feat: left header actions

Browse Source
This commit is contained in:
mathuo 2023-06-03 20:34:51 +01:00
parent 44a7019c60
commit d7baa93a9b
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
15 changed files with 260 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/dockview-core/src/__tests__/groupview/panel/content.spec.ts → packages/dockview-core/src/__tests__/dockview/components/panel/content.spec.ts
View File

@ -1,14 +1,14 @@
import { fireEvent } from '@testing-library/dom';
import { Emitter, Event } from '../../../events';
import { ContentContainer } from '../../../dockview/components/panel/content';
import { Emitter, Event } from '../../../../events';
import { ContentContainer } from '../../../../dockview/components/panel/content';
import {
GroupPanelContentPartInitParameters,
IContentRenderer,
} from '../../../dockview/types';
import { CompositeDisposable } from '../../../lifecycle';
import { PanelUpdateEvent } from '../../../panel/types';
import { IDockviewPanel } from '../../../dockview/dockviewPanel';
import { IDockviewPanelModel } from '../../../dockview/dockviewPanelModel';
} from '../../../../dockview/types';
import { CompositeDisposable } from '../../../../lifecycle';
import { PanelUpdateEvent } from '../../../../panel/types';
import { IDockviewPanel } from '../../../../dockview/dockviewPanel';
import { IDockviewPanelModel } from '../../../../dockview/dockviewPanelModel';
class TestContentRenderer
extends CompositeDisposable

10
packages/dockview-core/src/__tests__/groupview/tab.spec.ts → packages/dockview-core/src/__tests__/dockview/components/tab.spec.ts
View File

@ -1,9 +1,9 @@
import { fireEvent } from '@testing-library/dom';
import { LocalSelectionTransfer, PanelTransfer } from '../../dnd/dataTransfer';
import { DockviewComponent } from '../../dockview/dockviewComponent';
import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
import { DockviewGroupPanelModel } from '../../dockview/dockviewGroupPanelModel';
import { Tab } from '../../dockview/components/tab/tab';
import { LocalSelectionTransfer, PanelTransfer } from '../../../dnd/dataTransfer';
import { DockviewComponent } from '../../../dockview/dockviewComponent';
import { DockviewGroupPanel } from '../../../dockview/dockviewGroupPanel';
import { DockviewGroupPanelModel } from '../../../dockview/dockviewGroupPanelModel';
import { Tab } from '../../../dockview/components/tab/tab';
describe('tab', () => {
test('that empty tab has inactive-tab class', () => {

146
packages/dockview-core/src/__tests__/groupview/titlebar/tabsContainer.spec.ts → packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts
View File

@ -1,13 +1,13 @@
import { DockviewComponent } from '../../../dockview/dockviewComponent';
import { TabsContainer } from '../../../dockview/components/titlebar/tabsContainer';
import { fireEvent } from '@testing-library/dom';
import {
LocalSelectionTransfer,
PanelTransfer,
} from '../../../dnd/dataTransfer';
import { TestPanel } from '../dockviewGroupPanelModel.spec';
import { DockviewGroupPanelModel } from '../../../dockview/dockviewGroupPanelModel';
import { DockviewGroupPanel } from '../../../dockview/dockviewGroupPanel';
} from '../../../../dnd/dataTransfer';
import { TabsContainer } from '../../../../dockview/components/titlebar/tabsContainer';
import { DockviewComponent } from '../../../../dockview/dockviewComponent';
import { DockviewGroupPanel } from '../../../../dockview/dockviewGroupPanel';
import { DockviewGroupPanelModel } from '../../../../dockview/dockviewGroupPanelModel';
import { fireEvent } from '@testing-library/dom';
import { TestPanel } from '../../dockviewGroupPanelModel.spec';
describe('tabsContainer', () => {
test('that an external event does not render a drop target and calls through to the group mode', () => {
@ -331,4 +331,136 @@ describe('tabsContainer', () => {
cut.element.getElementsByClassName('drop-target-dropzone').length
).toBe(0);
});
test('left actions', () => {
const accessorMock = jest.fn<DockviewComponent, []>(() => {
return (<Partial<DockviewComponent>>{
options: {},
onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(),
}) as DockviewComponent;
});
const groupPanelMock = jest.fn<DockviewGroupPanel, []>(() => {
return (<Partial<DockviewGroupPanel>>{}) as DockviewGroupPanel;
});
const accessor = new accessorMock();
const groupPanel = new groupPanelMock();
const cut = new TabsContainer(accessor, groupPanel);
let query = cut.element.querySelectorAll(
'.tabs-and-actions-container > .left-actions-container'
);
expect(query.length).toBe(1);
expect(query[0].children.length).toBe(0);
// add left action
const left = document.createElement('div');
left.className = 'test-left-actions-element';
cut.setLeftActionsElement(left);
query = cut.element.querySelectorAll(
'.tabs-and-actions-container > .left-actions-container'
);
expect(query.length).toBe(1);
expect(query[0].children.item(0)?.className).toBe(
'test-left-actions-element'
);
expect(query[0].children.length).toBe(1);
// add left action
const left2 = document.createElement('div');
left2.className = 'test-left-actions-element-2';
cut.setLeftActionsElement(left2);
query = cut.element.querySelectorAll(
'.tabs-and-actions-container > .left-actions-container'
);
expect(query.length).toBe(1);
expect(query[0].children.item(0)?.className).toBe(
'test-left-actions-element-2'
);
expect(query[0].children.length).toBe(1);
// remove left action
cut.setLeftActionsElement(undefined);
query = cut.element.querySelectorAll(
'.tabs-and-actions-container > .left-actions-container'
);
expect(query.length).toBe(1);
expect(query[0].children.length).toBe(0);
});
test('right actions', () => {
const accessorMock = jest.fn<DockviewComponent, []>(() => {
return (<Partial<DockviewComponent>>{
options: {},
onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(),
}) as DockviewComponent;
});
const groupPanelMock = jest.fn<DockviewGroupPanel, []>(() => {
return (<Partial<DockviewGroupPanel>>{}) as DockviewGroupPanel;
});
const accessor = new accessorMock();
const groupPanel = new groupPanelMock();
const cut = new TabsContainer(accessor, groupPanel);
let query = cut.element.querySelectorAll(
'.tabs-and-actions-container > .right-actions-container'
);
expect(query.length).toBe(1);
expect(query[0].children.length).toBe(0);
// add right action
const right = document.createElement('div');
right.className = 'test-right-actions-element';
cut.setRightActionsElement(right);
query = cut.element.querySelectorAll(
'.tabs-and-actions-container > .right-actions-container'
);
expect(query.length).toBe(1);
expect(query[0].children.item(0)?.className).toBe(
'test-right-actions-element'
);
expect(query[0].children.length).toBe(1);
// add right action
const right2 = document.createElement('div');
right2.className = 'test-right-actions-element-2';
cut.setRightActionsElement(right2);
query = cut.element.querySelectorAll(
'.tabs-and-actions-container > .right-actions-container'
);
expect(query.length).toBe(1);
expect(query[0].children.item(0)?.className).toBe(
'test-right-actions-element-2'
);
expect(query[0].children.length).toBe(1);
// remove right action
cut.setRightActionsElement(undefined);
query = cut.element.querySelectorAll(
'.tabs-and-actions-container > .right-actions-container'
);
expect(query.length).toBe(1);
expect(query[0].children.length).toBe(0);
});
});

0
packages/dockview-core/src/__tests__/groupview/dockviewGroupPanelModel.spec.ts → packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts
View File

25
packages/dockview-core/src/dockview/components/tab/defaultTab.scss
View File

@ -46,5 +46,30 @@
padding: 0px 8px;
flex-grow: 1;
}
.action-container {
text-align: right;
display: flex;
.tab-list {
display: flex;
padding: 0px;
margin: 0px;
justify-content: flex-end;
.tab-action {
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
&:hover {
border-radius: 2px;
background-color: var(--dv-icon-hover-background-color);
}
}
}
}
}
}

31
packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts
View File

@ -18,7 +18,7 @@ import {
import { DockviewDropTargets, IWatermarkRenderer } from './types';
import { DockviewGroupPanel } from './dockviewGroupPanel';
import { IDockviewPanel } from './dockviewPanel';
import { IGroupControlRenderer } from './options';
import { IHeaderActionsRenderer } from './options';
export interface DndService {
canDisplayOverlay(
@ -137,8 +137,8 @@ export class DockviewGroupPanelModel
private watermark?: IWatermarkRenderer;
private _isGroupActive = false;
private _locked = false;
private _control: IGroupControlRenderer | undefined;
private _lhs: IGroupControlRenderer | undefined;
private _rightHeaderActions: IHeaderActionsRenderer | undefined;
private _leftHeaderActions: IHeaderActionsRenderer | undefined;
private mostRecentlyUsed: IDockviewPanel[] = [];
@ -321,28 +321,33 @@ export class DockviewGroupPanelModel
this.updateContainer();
if (this.accessor.options.createRightHeaderActionsElement) {
this._control =
this._rightHeaderActions =
this.accessor.options.createRightHeaderActionsElement(
this.groupPanel
);
this.addDisposables(this._control);
this._control.init({
this.addDisposables(this._rightHeaderActions);
this._rightHeaderActions.init({
containerApi: new DockviewApi(this.accessor),
api: this.groupPanel.api,
});
this.tabsContainer.setRightActionsElement(this._control.element);
this.tabsContainer.setRightActionsElement(
this._rightHeaderActions.element
);
}
if (this.accessor.options.createLeftHeaderActionsElement) {
this._lhs = this.accessor.options.createLeftHeaderActionsElement(
this.groupPanel
);
this.addDisposables(this._lhs);
this._lhs.init({
this._leftHeaderActions =
this.accessor.options.createLeftHeaderActionsElement(
this.groupPanel
);
this.addDisposables(this._leftHeaderActions);
this._leftHeaderActions.init({
containerApi: new DockviewApi(this.accessor),
api: this.groupPanel.api,
});
this.tabsContainer.setLeftActionsElement(this._lhs.element);
this.tabsContainer.setLeftActionsElement(
this._leftHeaderActions.element
);
}
}

6
packages/dockview-core/src/dockview/options.ts
View File

@ -19,7 +19,7 @@ import { Position } from '../dnd/droptarget';
import { IDockviewPanel } from './dockviewPanel';
import { FrameworkFactory } from '../panel/componentFactory';
export interface IGroupControlRenderer extends IDisposable {
export interface IHeaderActionsRenderer extends IDisposable {
readonly element: HTMLElement;
init(params: {
containerApi: DockviewApi;
@ -81,10 +81,10 @@ export interface DockviewComponentOptions extends DockviewRenderFunctions {
showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
createRightHeaderActionsElement?: (
group: DockviewGroupPanel
) => IGroupControlRenderer;
) => IHeaderActionsRenderer;
createLeftHeaderActionsElement?: (
group: DockviewGroupPanel
) => IGroupControlRenderer;
) => IHeaderActionsRenderer;
singleTabMode?: 'fullwidth' | 'default';
parentElement?: HTMLElement;
}

6
packages/dockview/src/__tests__/dockview/groupControlsRenderer.spec.ts → packages/dockview/src/__tests__/dockview/headerActionsRenderer.spec.ts
View File

@ -3,9 +3,9 @@ import {
DockviewGroupPanelApi,
DockviewGroupPanelModel,
} from 'dockview-core';
import { ReactGroupControlsRendererPart } from '../../dockview/groupControlsRenderer';
import { ReactHeaderActionsRendererPart } from '../../dockview/headerActionsRenderer';
describe('groupControlsRenderer', () => {
describe('headerActionsRenderer', () => {
test('#1', () => {
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
() => {
@ -28,7 +28,7 @@ describe('groupControlsRenderer', () => {
const groupPanel = new groupPanelMock() as DockviewGroupPanel;
const cut = new ReactGroupControlsRendererPart(
const cut = new ReactHeaderActionsRendererPart(
jest.fn(),
{
addPortal: jest.fn(),

6
packages/dockview/src/__tests__/react/dockview/groupControlsRenderer.spec.ts
View File

@ -3,9 +3,9 @@ import {
DockviewGroupPanelApi,
DockviewGroupPanelModel,
} from 'dockview-core';
import { ReactGroupControlsRendererPart } from '../../../dockview/groupControlsRenderer';
import { ReactHeaderActionsRendererPart } from '../../../dockview/headerActionsRenderer';
describe('groupControlsRenderer', () => {
describe('headerActionsRenderer', () => {
test('#1', () => {
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
() => {
@ -28,7 +28,7 @@ describe('groupControlsRenderer', () => {
const groupPanel = new groupPanelMock() as DockviewGroupPanel;
const cut = new ReactGroupControlsRendererPart(
const cut = new ReactHeaderActionsRendererPart(
jest.fn(),
{
addPortal: jest.fn(),

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

@ -4,12 +4,12 @@ import {
DockviewDropEvent,
DockviewDndOverlayEvent,
GroupPanelFrameworkComponentFactory,
IGroupControlRenderer,
DockviewPanelApi,
DockviewApi,
IContentRenderer,
ITabRenderer,
DockviewGroupPanel,
IHeaderActionsRenderer,
} from 'dockview-core';
import { ReactPanelContentPart } from './reactContentPart';
import { ReactPanelHeaderPart } from './reactHeaderPart';
@ -18,17 +18,17 @@ import { ReactPortalStore, usePortalsLifecycle } from '../react';
import { IWatermarkPanelProps, ReactWatermarkPart } from './reactWatermarkPart';
import { PanelCollection, PanelParameters } from '../types';
import {
IDockviewGroupControlProps,
ReactGroupControlsRendererPart,
} from './groupControlsRenderer';
IDockviewHeaderActionsProps,
ReactHeaderActionsRendererPart,
} from './headerActionsRenderer';
function createGroupControlElement(
component: React.FunctionComponent<IDockviewGroupControlProps> | undefined,
component: React.FunctionComponent<IDockviewHeaderActionsProps> | undefined,
store: ReactPortalStore
): ((groupPanel: DockviewGroupPanel) => IGroupControlRenderer) | undefined {
): ((groupPanel: DockviewGroupPanel) => IHeaderActionsRenderer) | undefined {
return component
? (groupPanel: DockviewGroupPanel) => {
return new ReactGroupControlsRendererPart(
return new ReactHeaderActionsRendererPart(
component,
store,
groupPanel
@ -65,8 +65,8 @@ export interface IDockviewReactProps {
className?: string;
disableAutoResizing?: boolean;
defaultTabComponent?: React.FunctionComponent<IDockviewPanelHeaderProps>;
rightHeaderActionsComponent?: React.FunctionComponent<IDockviewGroupControlProps>;
leftHeaderActionsComponent?: React.FunctionComponent<IDockviewGroupControlProps>;
rightHeaderActionsComponent?: React.FunctionComponent<IDockviewHeaderActionsProps>;
leftHeaderActionsComponent?: React.FunctionComponent<IDockviewHeaderActionsProps>;
singleTabMode?: 'fullwidth' | 'default';
}

12
packages/dockview/src/dockview/groupControlsRenderer.ts → packages/dockview/src/dockview/headerActionsRenderer.ts
View File

@ -10,24 +10,25 @@ import {
PanelUpdateEvent,
} from 'dockview-core';
export interface IDockviewGroupControlProps {
export interface IDockviewHeaderActionsProps {
api: DockviewGroupPanelApi;
containerApi: DockviewApi;
panels: IDockviewPanel[];
activePanel: IDockviewPanel | undefined;
isGroupActive: boolean;
group: DockviewGroupPanel;
}
export class ReactGroupControlsRendererPart {
export class ReactHeaderActionsRendererPart {
private mutableDisposable = new DockviewMutableDisposable();
private _element: HTMLElement;
private _part?: ReactPart<IDockviewGroupControlProps>;
private _part?: ReactPart<IDockviewHeaderActionsProps>;
get element(): HTMLElement {
return this._element;
}
get part(): ReactPart<IDockviewGroupControlProps> | undefined {
get part(): ReactPart<IDockviewHeaderActionsProps> | undefined {
return this._part;
}
@ -36,7 +37,7 @@ export class ReactGroupControlsRendererPart {
}
constructor(
private readonly component: React.FunctionComponent<IDockviewGroupControlProps>,
private readonly component: React.FunctionComponent<IDockviewHeaderActionsProps>,
private readonly reactPortalStore: ReactPortalStore,
private readonly _group: DockviewGroupPanel
) {
@ -77,6 +78,7 @@ export class ReactGroupControlsRendererPart {
panels: this._group.model.panels,
activePanel: this._group.model.activePanel,
isGroupActive: this._group.api.isActive,
group: this._group,
}
);
}

2
packages/dockview/src/index.ts
View File

@ -4,7 +4,7 @@ export * from './dockview/dockview';
export * from './dockview/defaultTab';
export * from './splitview/splitview';
export * from './gridview/gridview';
export { IDockviewGroupControlProps } from './dockview/groupControlsRenderer';
export { IDockviewHeaderActionsProps } from './dockview/headerActionsRenderer';
export { IWatermarkPanelProps } from './dockview/reactWatermarkPart';
export * from './paneview/paneview';
export * from './types';

6
packages/docs/docs/components/dockview.mdx
View File

@ -649,11 +649,11 @@ panel.group.locked = true;
### Group Controls Panel
`DockviewReact` accepts `leftHeaderActionsComponent` and `rightHeaderActionsComponent` which expect a React component with props `IDockviewGroupControlProps`.
`DockviewReact` accepts `leftHeaderActionsComponent` and `rightHeaderActionsComponent` which expect a React component with props `IDockviewHeaderActionsProps`.
These controls are rendered of the left and right side of the space to the right of the tabs in the header bar.
```tsx
const Component: React.FunctionComponent<IDockviewGroupControlProps> = () => {
const Component: React.FunctionComponent<IDockviewHeaderActionsProps> = () => {
return <div>{'...'}</div>;
};
@ -664,7 +664,7 @@ As a simple example the below uses the `groupControlComponent` to render a small
is active and which panel is active in that group.
```tsx
const RightHeaderActionsComponent = (props: IDockviewGroupControlProps) => {
const RightHeaderActionsComponent = (props: IDockviewHeaderActionsProps) => {
const isGroupActive = props.isGroupActive;
const activePanel = props.activePanel;

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

@ -4,7 +4,7 @@ import {
DockviewReadyEvent,
IDockviewPanelHeaderProps,
IDockviewPanelProps,
IDockviewGroupControlProps,
IDockviewHeaderActionsProps,
} from 'dockview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@ -134,7 +134,7 @@ const groupControlsComponents = {
},
};
const GroupControls = (props: IDockviewGroupControlProps) => {
const RightControls = (props: IDockviewHeaderActionsProps) => {
const Component = React.useMemo(() => {
if (!props.isGroupActive || !props.activePanel) {
return null;
@ -161,6 +161,36 @@ const GroupControls = (props: IDockviewGroupControlProps) => {
);
};
let counter = 0;
const LeftControls = (props: IDockviewHeaderActionsProps) => {
const onClick = () => {
props.containerApi.addPanel({
id: `id_${Date.now().toString()}`,
component: 'default',
title: `Tab ${counter++}`,
position: {
referenceGroup: props.group,
},
});
};
return (
<div
className="group-control"
style={{
display: 'flex',
alignItems: 'center',
padding: '0px 8px',
height: '100%',
color: 'var(--dv-activegroup-visiblepanel-tab-color)',
}}
>
<Icon onClick={onClick} icon="add" />
</div>
);
};
const DockviewDemo = () => {
const onReady = (event: DockviewReadyEvent) => {
event.api.addPanel({
@ -196,8 +226,6 @@ const DockviewDemo = () => {
title: 'Panel 6',
position: { referencePanel: 'panel_4', direction: 'below' },
});
panel6.group.locked = true;
panel6.group.header.hidden = true;
event.api.addPanel({
id: 'panel_7',
component: 'default',
@ -211,8 +239,6 @@ const DockviewDemo = () => {
position: { referencePanel: 'panel_7', direction: 'within' },
});
event.api.addGroup();
event.api.getPanel('panel_1')!.api.setActive();
};
@ -220,7 +246,8 @@ const DockviewDemo = () => {
<DockviewReact
components={components}
defaultTabComponent={headerComponents.default}
groupControlComponent={GroupControls}
rightHeaderActionsComponent={RightControls}
leftHeaderActionsComponent={LeftControls}
onReady={onReady}
className="dockview-theme-abyss"
/>

6
packages/docs/sandboxes/groupcontrol-dockview/src/app.tsx
View File

@ -1,7 +1,7 @@
import {
DockviewReact,
DockviewReadyEvent,
IDockviewGroupControlProps,
IDockviewHeaderActionsProps,
IDockviewPanelProps,
} from 'dockview';
import * as React from 'react';
@ -26,7 +26,7 @@ const components = {
},
};
const RightHeaderActions = (props: IDockviewGroupControlProps) => {
const RightHeaderActions = (props: IDockviewHeaderActionsProps) => {
const isGroupActive = props.isGroupActive;
return (
@ -43,7 +43,7 @@ const RightHeaderActions = (props: IDockviewGroupControlProps) => {
);
};
const LeftHeaderActions = (props: IDockviewGroupControlProps) => {
const LeftHeaderActions = (props: IDockviewHeaderActionsProps) => {
const activePanel = props.activePanel;
return (