rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-08-25 11:36:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: single tab mode

Browse Source
This commit is contained in:
mathuo 2023-02-13 15:22:42 +07:00
parent 01816a1d8b
commit 026e6b9b91
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
6 changed files with 24 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/dockview/src/api/panelApi.ts
View File

@ -57,10 +57,7 @@ export interface PanelApi {
/**
* A core api implementation that should be used across all panel-like objects
*/
export abstract class PanelApiImpl
extends CompositeDisposable
implements PanelApi
{
export class PanelApiImpl extends CompositeDisposable implements PanelApi {
private _isFocused = false;
private _isActive = false;
private _isVisible = true;

1
packages/dockview/src/dockview/options.ts
View File

@ -68,6 +68,7 @@ export interface DockviewComponentOptions extends DockviewRenderFunctions {
defaultTabComponent?: string;
showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
createGroupControlElement?: (group: GroupPanel) => IGroupControlRenderer;
singleTabMode?: 'fullwidth' | 'default';
}
export interface PanelOptions {

4
packages/dockview/src/groupview/groupview.ts
View File

@ -234,9 +234,7 @@ export class Groupview extends CompositeDisposable implements IGroupview {
this.container.classList.add('groupview');
this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel, {
tabHeight: options.tabHeight,
});
this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
this.contentContainer = new ContentContainer();

4
packages/dockview/src/groupview/titlebar/tabsContainer.scss
View File

@ -10,9 +10,7 @@
display: none;
}
&.single-panel {
background-color: red !important;
&.dv-single-tab.dv-full-width-single-tab {
.tabs-container {
flex-grow: 1;

23
packages/dockview/src/groupview/titlebar/tabsContainer.ts
View File

@ -135,8 +135,7 @@ export class TabsContainer
constructor(
private readonly accessor: DockviewComponent,
private readonly group: GroupPanel,
readonly options: { tabHeight?: number }
private readonly group: GroupPanel
) {
super();
@ -145,17 +144,31 @@ export class TabsContainer
this._element = document.createElement('div');
this._element.className = 'tabs-and-actions-container';
this.height = options.tabHeight;
this.height = accessor.options.tabHeight;
toggleClass(
this._element,
'dv-full-width-single-tab',
this.accessor.options.singleTabMode === 'fullwidth'
);
this.addDisposables(
this.accessor.onDidAddPanel((e) => {
if (e.api.group === this.group) {
toggleClass(this._element, 'single-panel', this.size === 1);
toggleClass(
this._element,
'dv-single-tab',
this.size === 1
);
}
}),
this.accessor.onDidRemovePanel((e) => {
if (e.api.group === this.group) {
toggleClass(this._element, 'single-panel', this.size === 1);
toggleClass(
this._element,
'dv-single-tab',
this.size === 1
);
}
})
);

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

@ -69,6 +69,7 @@ export interface IDockviewReactProps {
disableAutoResizing?: boolean;
defaultTabComponent?: React.FunctionComponent<IDockviewPanelHeaderProps>;
groupControlComponent?: React.FunctionComponent<IDockviewGroupControlProps>;
singleTabMode?: 'fullwidth' | 'default';
}
export const DockviewReact = React.forwardRef(
@ -161,6 +162,7 @@ export const DockviewReact = React.forwardRef(
props.groupControlComponent,
{ addPortal }
),
singleTabMode: props.singleTabMode,
});
domRef.current?.appendChild(dockview.element);