Merge pull request #6 from mathuo/Title-change-bug

fix: set title and suppressclosable via panel api

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);

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<DockviewApi, []>(() => {
+            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<DockviewApi, []>(() => {
+            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();
+    });
+});

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({