From d7baa93a9bccb83a788bb96c3cf310a9e1c7c036 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Sat, 3 Jun 2023 20:34:51 +0100 Subject: [PATCH] feat: left header actions --- .../components}/panel/content.spec.ts | 14 +- .../components}/tab.spec.ts | 10 +- .../titlebar/tabsContainer.spec.ts | 146 +++++++++++++++++- .../dockviewGroupPanelModel.spec.ts | 0 .../dockview/components/tab/defaultTab.scss | 25 +++ .../src/dockview/dockviewGroupPanelModel.ts | 31 ++-- .../dockview-core/src/dockview/options.ts | 6 +- ....spec.ts => headerActionsRenderer.spec.ts} | 6 +- .../dockview/groupControlsRenderer.spec.ts | 6 +- packages/dockview/src/dockview/dockview.tsx | 18 +-- ...lsRenderer.ts => headerActionsRenderer.ts} | 12 +- packages/dockview/src/index.ts | 2 +- packages/docs/docs/components/dockview.mdx | 6 +- .../docs/sandboxes/demo-dockview/src/app.tsx | 41 ++++- .../groupcontrol-dockview/src/app.tsx | 6 +- 15 files changed, 260 insertions(+), 69 deletions(-) rename packages/dockview-core/src/__tests__/{groupview => dockview/components}/panel/content.spec.ts (88%) rename packages/dockview-core/src/__tests__/{groupview => dockview/components}/tab.spec.ts (95%) rename packages/dockview-core/src/__tests__/{groupview => dockview/components}/titlebar/tabsContainer.spec.ts (68%) rename packages/dockview-core/src/__tests__/{groupview => dockview}/dockviewGroupPanelModel.spec.ts (100%) rename packages/dockview/src/__tests__/dockview/{groupControlsRenderer.spec.ts => headerActionsRenderer.spec.ts} (88%) rename packages/dockview/src/dockview/{groupControlsRenderer.ts => headerActionsRenderer.ts} (90%) diff --git a/packages/dockview-core/src/__tests__/groupview/panel/content.spec.ts b/packages/dockview-core/src/__tests__/dockview/components/panel/content.spec.ts similarity index 88% rename from packages/dockview-core/src/__tests__/groupview/panel/content.spec.ts rename to packages/dockview-core/src/__tests__/dockview/components/panel/content.spec.ts index 58de628a3..34ba707a3 100644 --- a/packages/dockview-core/src/__tests__/groupview/panel/content.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/components/panel/content.spec.ts @@ -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 diff --git a/packages/dockview-core/src/__tests__/groupview/tab.spec.ts b/packages/dockview-core/src/__tests__/dockview/components/tab.spec.ts similarity index 95% rename from packages/dockview-core/src/__tests__/groupview/tab.spec.ts rename to packages/dockview-core/src/__tests__/dockview/components/tab.spec.ts index 012732e73..2aa671d00 100644 --- a/packages/dockview-core/src/__tests__/groupview/tab.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/components/tab.spec.ts @@ -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', () => { diff --git a/packages/dockview-core/src/__tests__/groupview/titlebar/tabsContainer.spec.ts b/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts similarity index 68% rename from packages/dockview-core/src/__tests__/groupview/titlebar/tabsContainer.spec.ts rename to packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts index 0bcc96f50..77efaca4c 100644 --- a/packages/dockview-core/src/__tests__/groupview/titlebar/tabsContainer.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts @@ -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(() => { + return (>{ + options: {}, + onDidAddPanel: jest.fn(), + onDidRemovePanel: jest.fn(), + }) as DockviewComponent; + }); + + const groupPanelMock = jest.fn(() => { + return (>{}) 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(() => { + return (>{ + options: {}, + onDidAddPanel: jest.fn(), + onDidRemovePanel: jest.fn(), + }) as DockviewComponent; + }); + + const groupPanelMock = jest.fn(() => { + return (>{}) 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); + }); }); diff --git a/packages/dockview-core/src/__tests__/groupview/dockviewGroupPanelModel.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts similarity index 100% rename from packages/dockview-core/src/__tests__/groupview/dockviewGroupPanelModel.spec.ts rename to packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts diff --git a/packages/dockview-core/src/dockview/components/tab/defaultTab.scss b/packages/dockview-core/src/dockview/components/tab/defaultTab.scss index 81208377e..d820534b8 100644 --- a/packages/dockview-core/src/dockview/components/tab/defaultTab.scss +++ b/packages/dockview-core/src/dockview/components/tab/defaultTab.scss @@ -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); + } + } + } + } } } diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts index 6e31cdce3..d6e4bf823 100644 --- a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts +++ b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts @@ -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 + ); } } diff --git a/packages/dockview-core/src/dockview/options.ts b/packages/dockview-core/src/dockview/options.ts index bab295646..147cc5e48 100644 --- a/packages/dockview-core/src/dockview/options.ts +++ b/packages/dockview-core/src/dockview/options.ts @@ -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; } diff --git a/packages/dockview/src/__tests__/dockview/groupControlsRenderer.spec.ts b/packages/dockview/src/__tests__/dockview/headerActionsRenderer.spec.ts similarity index 88% rename from packages/dockview/src/__tests__/dockview/groupControlsRenderer.spec.ts rename to packages/dockview/src/__tests__/dockview/headerActionsRenderer.spec.ts index dc645d007..ec6015403 100644 --- a/packages/dockview/src/__tests__/dockview/groupControlsRenderer.spec.ts +++ b/packages/dockview/src/__tests__/dockview/headerActionsRenderer.spec.ts @@ -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, []>( () => { @@ -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(), diff --git a/packages/dockview/src/__tests__/react/dockview/groupControlsRenderer.spec.ts b/packages/dockview/src/__tests__/react/dockview/groupControlsRenderer.spec.ts index d3a056372..85d55e8ae 100644 --- a/packages/dockview/src/__tests__/react/dockview/groupControlsRenderer.spec.ts +++ b/packages/dockview/src/__tests__/react/dockview/groupControlsRenderer.spec.ts @@ -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, []>( () => { @@ -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(), diff --git a/packages/dockview/src/dockview/dockview.tsx b/packages/dockview/src/dockview/dockview.tsx index e347a8aba..b741a61d3 100644 --- a/packages/dockview/src/dockview/dockview.tsx +++ b/packages/dockview/src/dockview/dockview.tsx @@ -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 | undefined, + component: React.FunctionComponent | 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; - rightHeaderActionsComponent?: React.FunctionComponent; - leftHeaderActionsComponent?: React.FunctionComponent; + rightHeaderActionsComponent?: React.FunctionComponent; + leftHeaderActionsComponent?: React.FunctionComponent; singleTabMode?: 'fullwidth' | 'default'; } diff --git a/packages/dockview/src/dockview/groupControlsRenderer.ts b/packages/dockview/src/dockview/headerActionsRenderer.ts similarity index 90% rename from packages/dockview/src/dockview/groupControlsRenderer.ts rename to packages/dockview/src/dockview/headerActionsRenderer.ts index 9890d6ece..603d09061 100644 --- a/packages/dockview/src/dockview/groupControlsRenderer.ts +++ b/packages/dockview/src/dockview/headerActionsRenderer.ts @@ -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; + private _part?: ReactPart; get element(): HTMLElement { return this._element; } - get part(): ReactPart | undefined { + get part(): ReactPart | undefined { return this._part; } @@ -36,7 +37,7 @@ export class ReactGroupControlsRendererPart { } constructor( - private readonly component: React.FunctionComponent, + private readonly component: React.FunctionComponent, 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, } ); } diff --git a/packages/dockview/src/index.ts b/packages/dockview/src/index.ts index acc7fec37..0f5e688b7 100644 --- a/packages/dockview/src/index.ts +++ b/packages/dockview/src/index.ts @@ -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'; diff --git a/packages/docs/docs/components/dockview.mdx b/packages/docs/docs/components/dockview.mdx index 9cc2a0cb0..11e6ba866 100644 --- a/packages/docs/docs/components/dockview.mdx +++ b/packages/docs/docs/components/dockview.mdx @@ -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 = () => { +const Component: React.FunctionComponent = () => { return
{'...'}
; }; @@ -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; diff --git a/packages/docs/sandboxes/demo-dockview/src/app.tsx b/packages/docs/sandboxes/demo-dockview/src/app.tsx index 654cbd3f5..5ed911053 100644 --- a/packages/docs/sandboxes/demo-dockview/src/app.tsx +++ b/packages/docs/sandboxes/demo-dockview/src/app.tsx @@ -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 ( +
+ +
+ ); +}; + 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 = () => { diff --git a/packages/docs/sandboxes/groupcontrol-dockview/src/app.tsx b/packages/docs/sandboxes/groupcontrol-dockview/src/app.tsx index d49423905..059dd9448 100644 --- a/packages/docs/sandboxes/groupcontrol-dockview/src/app.tsx +++ b/packages/docs/sandboxes/groupcontrol-dockview/src/app.tsx @@ -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 (