diff --git a/packages/dockview-demo/src/stories/dockview/dockview.params.stories.tsx b/packages/dockview-demo/src/stories/dockview/dockview.params.stories.tsx index 023b0cfb3..0c11181dc 100644 --- a/packages/dockview-demo/src/stories/dockview/dockview.params.stories.tsx +++ b/packages/dockview-demo/src/stories/dockview/dockview.params.stories.tsx @@ -82,8 +82,11 @@ export const Params = (props: { const interval = setInterval(() => { const panel1 = gridApi.getPanel('panel1'); + const panel2 = gridApi.getPanel('panel2'); panel1.update({ params: { params: { ticker: Date.now() } } }); + + panel2.api.setTitle(`Panel2 ${Date.now()}`); }, 1000); return () => { clearInterval(interval); diff --git a/packages/dockview/src/__tests__/dockview/dockviewGroupPanel.spec.ts b/packages/dockview/src/__tests__/dockview/dockviewGroupPanel.spec.ts new file mode 100644 index 000000000..5d5c305f8 --- /dev/null +++ b/packages/dockview/src/__tests__/dockview/dockviewGroupPanel.spec.ts @@ -0,0 +1,61 @@ +import { DockviewApi } from '../../api/component.api'; +import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel'; + +describe('dockviewGroupPanel', () => { + test('update title', () => { + const dockviewApiMock = jest.fn(() => { + return {} as any; + }); + const api = new dockviewApiMock(); + const cut = new DockviewGroupPanel('fake-id', api); + + let latestTitle: string | undefined = undefined; + + const disposable = cut.api.titleChanged((event) => { + latestTitle = event.title; + }); + + expect(cut.title).toBe(''); + + cut.init({ title: 'new title', params: {}, view: null }); + expect(latestTitle).toBe('new title'); + expect(cut.title).toBe('new title'); + + cut.update({ params: { title: 'another title' } }); + expect(latestTitle).toBe('another title'); + expect(cut.title).toBe('another title'); + + disposable.dispose(); + }); + + test('update suppress closable', () => { + const dockviewApiMock = jest.fn(() => { + return {} as any; + }); + const api = new dockviewApiMock(); + const cut = new DockviewGroupPanel('fake-id', api); + + let latestSuppressClosable: boolean | undefined = undefined; + + const disposable = cut.api.suppressClosableChanged((event) => { + latestSuppressClosable = event.suppressClosable; + }); + + expect(latestSuppressClosable).toBeFalsy(); + + cut.init({ + title: 'new title', + suppressClosable: true, + params: {}, + view: null, + }); + expect(latestSuppressClosable).toBeTruthy(); + expect(cut.suppressClosable).toBeTruthy(); + + cut.update({ params: { suppressClosable: false } }); + expect(latestSuppressClosable).toBeFalsy(); + expect(cut.suppressClosable).toBeFalsy(); + + disposable.dispose(); + }); +}); diff --git a/packages/dockview/src/dockview/dockviewGroupPanel.ts b/packages/dockview/src/dockview/dockviewGroupPanel.ts index e337c4e44..895820049 100644 --- a/packages/dockview/src/dockview/dockviewGroupPanel.ts +++ b/packages/dockview/src/dockview/dockviewGroupPanel.ts @@ -15,7 +15,8 @@ import { IGroupPanelView } from './defaultGroupPanelView'; export class DockviewGroupPanel extends CompositeDisposable - implements IGroupPanel { + implements IGroupPanel +{ private readonly mutableDisposable = new MutableDisposable(); readonly api: DockviewPanelApiImpl; @@ -71,8 +72,8 @@ export class DockviewGroupPanel this._params = params.params; this._view = params.view; - this._title = params.title; - this._suppressClosable = params.suppressClosable || false; + this.setTitle(params.title); + this.setSuppressClosable(params.suppressClosable || false); if (params.state) { this.api.setState(params.state); @@ -119,29 +120,41 @@ export class DockviewGroupPanel return objectState; } + setTitle(title: string) { + const didTitleChange = title !== this._params?.title; + + if (didTitleChange) { + this._title = title; + this.api._titleChanged.fire({ title: this.title }); + } + } + + setSuppressClosable(suppressClosable: boolean) { + const didSuppressChangableClose = + suppressClosable !== this._params?.suppressClosable; + + if (didSuppressChangableClose) { + this._suppressClosable = suppressClosable; + this.api._suppressClosableChanged.fire({ + suppressClosable: !!this.suppressClosable, + }); + } + } + public update(event: GroupPanelUpdateEvent): void { const params = event.params as IGroupPanelInitParameters; - const didTitleChange = - typeof params.title === 'string' && - params.title !== this._params?.title; - const didSuppressChangableClose = - typeof params.suppressClosable === 'boolean' && - params.suppressClosable !== this._params?.suppressClosable; - this._params = { ...(this._params || {}), ...event.params.params, }; - if (didTitleChange) { - this.api._titleChanged.fire({ title: params.title }); + if (typeof params.title === 'string') { + this.setTitle(params.title); } - if (didSuppressChangableClose) { - this.api._suppressClosableChanged.fire({ - suppressClosable: !!params.suppressClosable, - }); + if (typeof params.suppressClosable === 'boolean') { + this.setSuppressClosable(params.suppressClosable); } this.view?.update({