feat: pre-tab actions

mathuo · Sep 27, 2023 · 1706ffe · 1706ffe
1 parent 4ad5b0f
commit 1706ffe
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 1 deletion.
diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts
@@ -43,6 +43,7 @@ export interface ITabsContainer extends IDisposable {
     openPanel: (panel: IDockviewPanel, index?: number) => void;
     setRightActionsElement(element: HTMLElement | undefined): void;
     setLeftActionsElement(element: HTMLElement | undefined): void;
+    setPreActionsElement(element: HTMLElement | undefined): void;
     show(): void;
     hide(): void;
 }
@@ -55,12 +56,14 @@ export class TabsContainer
     private readonly tabContainer: HTMLElement;
     private readonly rightActionsContainer: HTMLElement;
     private readonly leftActionsContainer: HTMLElement;
+    private readonly preActionsContainer: HTMLElement;
     private readonly voidContainer: VoidContainer;
 
     private tabs: IValueDisposable<ITab>[] = [];
     private selectedIndex = -1;
     private rightActions: HTMLElement | undefined;
     private leftActions: HTMLElement | undefined;
+    private preActions: HTMLElement | undefined;
 
     private _hidden = false;
 
@@ -129,6 +132,20 @@ export class TabsContainer
         }
     }
 
+    setPreActionsElement(element: HTMLElement | undefined): void {
+        if (this.preActions === element) {
+            return;
+        }
+        if (this.preActions) {
+            this.preActions.remove();
+            this.preActions = undefined;
+        }
+        if (element) {
+            this.preActionsContainer.appendChild(element);
+            this.preActions = element;
+        }
+    }
+
     get element(): HTMLElement {
         return this._element;
     }
@@ -192,11 +209,15 @@ export class TabsContainer
         this.leftActionsContainer = document.createElement('div');
         this.leftActionsContainer.className = 'left-actions-container';
 
+        this.preActionsContainer = document.createElement('div');
+        this.preActionsContainer.className = 'pre-actions-container';
+
         this.tabContainer = document.createElement('div');
         this.tabContainer.className = 'tabs-container';
 
         this.voidContainer = new VoidContainer(this.accessor, this.group);
 
+        this._element.appendChild(this.preActionsContainer);
         this._element.appendChild(this.tabContainer);
         this._element.appendChild(this.leftActionsContainer);
         this._element.appendChild(this.voidContainer.element);

diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts
@@ -92,6 +92,7 @@ export type DockviewComponentUpdateOptions = Pick<
     | 'defaultTabComponent'
     | 'createLeftHeaderActionsElement'
     | 'createRightHeaderActionsElement'
+    | 'createPreHeaderActionsElement'
     | 'disableFloatingGroups'
     | 'floatingGroupBounds'
 >;

diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts
@@ -12,7 +12,7 @@ import {
     IContentContainer,
 } from './components/panel/content';
 import {
-  GroupDragEvent,
+    GroupDragEvent,
     ITabsContainer,
     TabDragEvent,
     TabsContainer,
@@ -144,6 +144,7 @@ export class DockviewGroupPanelModel
     private _isFloating = false;
     private _rightHeaderActions: IHeaderActionsRenderer | undefined;
     private _leftHeaderActions: IHeaderActionsRenderer | undefined;
+    private _preHeaderActions: IHeaderActionsRenderer | undefined;
 
     private mostRecentlyUsed: IDockviewPanel[] = [];
 
@@ -398,6 +399,21 @@ export class DockviewGroupPanelModel
                 this._leftHeaderActions.element
             );
         }
+
+        if (this.accessor.options.createPreHeaderActionsElement) {
+            this._preHeaderActions =
+                this.accessor.options.createPreHeaderActionsElement(
+                    this.groupPanel
+                );
+            this.addDisposables(this._preHeaderActions);
+            this._preHeaderActions.init({
+                containerApi: new DockviewApi(this.accessor),
+                api: this.groupPanel.api,
+            });
+            this.tabsContainer.setPreActionsElement(
+                this._preHeaderActions.element
+            );
+        }
     }
 
     public indexOf(panel: IDockviewPanel): number {

diff --git a/packages/dockview-core/src/dockview/options.ts b/packages/dockview-core/src/dockview/options.ts
@@ -84,6 +84,9 @@ export interface DockviewComponentOptions extends DockviewRenderFunctions {
     createLeftHeaderActionsElement?: (
         group: DockviewGroupPanel
     ) => IHeaderActionsRenderer;
+    createPreHeaderActionsElement?: (
+        group: DockviewGroupPanel
+    ) => IHeaderActionsRenderer;
     singleTabMode?: 'fullwidth' | 'default';
     parentElement?: HTMLElement;
     disableFloatingGroups?: boolean;

diff --git a/packages/dockview/src/dockview/dockview.tsx b/packages/dockview/src/dockview/dockview.tsx
@@ -67,6 +67,7 @@ export interface IDockviewReactProps {
     defaultTabComponent?: React.FunctionComponent<IDockviewPanelHeaderProps>;
     rightHeaderActionsComponent?: React.FunctionComponent<IDockviewHeaderActionsProps>;
     leftHeaderActionsComponent?: React.FunctionComponent<IDockviewHeaderActionsProps>;
+    preHeaderActionsComponent?: React.FunctionComponent<IDockviewHeaderActionsProps>;
     singleTabMode?: 'fullwidth' | 'default';
     disableFloatingGroups?: boolean;
     floatingGroupBounds?:
@@ -166,6 +167,10 @@ export const DockviewReact = React.forwardRef(
                     props.rightHeaderActionsComponent,
                     { addPortal }
                 ),
+                createPreHeaderActionsElement: createGroupControlElement(
+                    props.preHeaderActionsComponent,
+                    { addPortal }
+                ),
                 singleTabMode: props.singleTabMode,
                 disableFloatingGroups: props.disableFloatingGroups,
                 floatingGroupBounds: props.floatingGroupBounds,
@@ -301,6 +306,18 @@ export const DockviewReact = React.forwardRef(
             });
         }, [props.leftHeaderActionsComponent]);
 
+        React.useEffect(() => {
+            if (!dockviewRef.current) {
+                return;
+            }
+            dockviewRef.current.updateOptions({
+                createPreHeaderActionsElement: createGroupControlElement(
+                    props.preHeaderActionsComponent,
+                    { addPortal }
+                ),
+            });
+        }, [props.preHeaderActionsComponent]);
+
         return (
             <div
                 className={props.className}