Merge pull request #26 from tylerjaques/middle-click-close

Middle mouse click to close tabs
NickRimmer · Dec 19, 2023 · bcd6801 · bcd6801
2 parents 31f1c8f + 4199c56
commit bcd6801
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/ui/tab-button/tab-button.hook.ts b/src/ui/tab-button/tab-button.hook.ts
@@ -5,6 +5,14 @@ import { TabButtonProps } from './tab-button.types'
 export const useTabButton = ({ onClickClose, onClickButton, onClickCloseOthers, onClickCloseOnRight, onClickCloseAll }: TabButtonProps) => {
   const contextMenuRef = React.useRef<ContextMenuRef | null>(null)
   const onClickButtonInternal = (e: React.MouseEvent<HTMLElement, MouseEvent>) => onClickButton ? onClickButton(e) : null
+
+  const onClickAuxInternal = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    if (e.button === 1) {
+      e.stopPropagation()
+      if (onClickClose) onClickClose(e)
+    }
+  }
+
   const onClickCloseInternal = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
     e.stopPropagation()
     if (onClickClose) onClickClose(e)
@@ -33,6 +41,7 @@ export const useTabButton = ({ onClickClose, onClickButton, onClickCloseOthers,
   return {
     contextMenuRef,
     onClickButton: onClickButtonInternal,
+    onClickAuxButton: onClickAuxInternal,
     onClickClose: onClickCloseInternal,
     onContextCloseTab,
     onContextCloseOthers,

diff --git a/src/ui/tab-button/tab-button.tsx b/src/ui/tab-button/tab-button.tsx
@@ -6,7 +6,7 @@ import { useTabButton } from './tab-button.hook'
 
 export const TabButton: FC<TabButtonProps> = (props) => {
   const { children, isActive, requestId, title, method, isHidden } = props
-  const { contextMenuRef, onClickButton, onClickClose, onContextCloseTab, onContextCloseOthers, onContextCloseOnRight, onContextCloseAll } = useTabButton(props)
+  const { contextMenuRef, onClickButton, onClickAuxButton, onClickClose, onContextCloseTab, onContextCloseOthers, onContextCloseOnRight, onContextCloseAll } = useTabButton(props)
 
   return (
     <ContextMenuContainer
@@ -22,6 +22,7 @@ export const TabButton: FC<TabButtonProps> = (props) => {
       <div
         className={`plugin-request-navigator-tab-button ${isActive ? 'active' : ''} ${isHidden ? 'hidden' : ''}`}
         onClick={onClickButton}
+        onAuxClick={onClickAuxButton}
         data-request-id={requestId}
         data-title={title}
         data-method={method}