fix: allow to use ctrl + click to open context menu in macos

foray1010 · Apr 2, 2023 · 219a71a · 219a71a
1 parent 2a87c71
commit 219a71a
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 29 deletions.
diff --git a/.size-limit.json b/.size-limit.json
@@ -17,6 +17,6 @@
   },
   {
     "path": "build/production/js/popup.js",
-    "limit": "14.08 kB"
+    "limit": "14.12 kB"
   }
 ]
diff --git a/src/popup/components/BookmarkTree/BookmarkRow/BookmarkRow.tsx b/src/popup/components/BookmarkTree/BookmarkRow/BookmarkRow.tsx
@@ -4,45 +4,36 @@ import * as React from 'react'
 import LazyImage from '../../../../core/components/baseItems/LazyImage.js'
 import classes from './bookmark-row.module.css'
 
-interface Props {
-  readonly className?: string | undefined
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
   readonly iconUrl?: string | undefined
   readonly isHighlighted: boolean
   readonly isUnclickable: boolean
-  readonly onAuxClick?: React.MouseEventHandler
-  readonly onClick?: React.MouseEventHandler
-  readonly onMouseEnter?: React.MouseEventHandler
-  readonly onMouseLeave?: React.MouseEventHandler
-  readonly role?: React.AriaRole | undefined
   readonly title: string
   readonly tooltip?: string | undefined
 }
 const BookmarkRow = React.forwardRef(function InnerBookmarkRow(
-  props: Props,
+  { iconUrl, isHighlighted, isUnclickable, title, tooltip, ...divProps }: Props,
   setRef: React.Ref<HTMLDivElement>,
 ) {
   return (
     <div
       ref={setRef}
+      {...divProps}
       className={classNames(
         classes['main'],
         {
-          [classes['highlighted'] as string]: props.isHighlighted,
-          [classes['unclickable'] as string]: props.isUnclickable,
+          [classes['highlighted'] as string]: isHighlighted,
+          [classes['unclickable'] as string]: isUnclickable,
         },
-        props.className,
+        divProps.className,
       )}
-      role={props.role}
-      title={props.tooltip}
-      onAuxClick={props.isUnclickable ? undefined : props.onAuxClick}
-      onClick={props.isUnclickable ? undefined : props.onClick}
-      onMouseEnter={props.onMouseEnter}
-      onMouseLeave={props.onMouseLeave}
+      title={tooltip}
+      onAuxClick={isUnclickable ? undefined : divProps.onAuxClick}
+      onClick={isUnclickable ? undefined : divProps.onClick}
+      onContextMenu={isUnclickable ? undefined : divProps.onContextMenu}
     >
-      {props.iconUrl && (
-        <LazyImage className={classes['icon']} src={props.iconUrl} />
-      )}
-      <div className={classes['title']}>{props.title}</div>
+      {iconUrl && <LazyImage className={classes['icon']} src={iconUrl} />}
+      <div className={classes['title']}>{title}</div>
     </div>
   )
 })

diff --git a/src/popup/components/BookmarkTree/BookmarkRow/index.tsx b/src/popup/components/BookmarkTree/BookmarkRow/index.tsx
@@ -21,6 +21,9 @@ interface Props {
   readonly isUnclickable: boolean
   readonly onAuxClick: (bookmarkInfo: BookmarkInfo) => React.MouseEventHandler
   readonly onClick: (bookmarkInfo: BookmarkInfo) => React.MouseEventHandler
+  readonly onContextMenu: (
+    bookmarkInfo: BookmarkInfo,
+  ) => React.MouseEventHandler
   readonly onDragOver: (
     bookmarkInfo: BookmarkInfo,
   ) => (evt: React.MouseEvent, responseEvent: ResponseEvent) => void
@@ -36,6 +39,7 @@ const BookmarkRowContainer = React.forwardRef(
       isHighlighted,
       onAuxClick,
       onClick,
+      onContextMenu,
       onDragOver,
       onMouseEnter,
       onMouseLeave,
@@ -57,6 +61,10 @@ const BookmarkRowContainer = React.forwardRef(
       () => onClick(bookmarkInfo),
       [bookmarkInfo, onClick],
     )
+    const handleContextMenu = React.useMemo(
+      () => onContextMenu(bookmarkInfo),
+      [bookmarkInfo, onContextMenu],
+    )
     const handleDragOver = React.useMemo(
       () => onDragOver(bookmarkInfo),
       [bookmarkInfo, onDragOver],
@@ -105,6 +113,7 @@ const BookmarkRowContainer = React.forwardRef(
             tooltip={tooltip}
             onAuxClick={handleAuxClick}
             onClick={handleClick}
+            onContextMenu={handleContextMenu}
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
           />

diff --git a/src/popup/components/BookmarkTree/BookmarkTree.tsx b/src/popup/components/BookmarkTree/BookmarkTree.tsx
@@ -26,6 +26,9 @@ interface ItemData {
     bookmarkInfo: BookmarkInfo,
   ) => React.MouseEventHandler
   readonly onRowClick: (bookmarkInfo: BookmarkInfo) => React.MouseEventHandler
+  readonly onRowContextMenu: (
+    bookmarkInfo: BookmarkInfo,
+  ) => React.MouseEventHandler
   readonly onRowDragOver: (
     bookmarkInfo: BookmarkInfo,
   ) => (evt: React.MouseEvent, responseEvent: ResponseEvent) => void
@@ -128,6 +131,7 @@ export default function BookmarkTree(props: Props) {
               }}
               onAuxClick={props.onRowAuxClick}
               onClick={props.onRowClick}
+              onContextMenu={props.onRowContextMenu}
               onDragOver={props.onRowDragOver}
               onDragStart={props.onRowDragStart}
               onMouseEnter={props.onRowMouseEnter}

diff --git a/src/popup/components/BookmarkTree/index.tsx b/src/popup/components/BookmarkTree/index.tsx
@@ -94,9 +94,10 @@ export default function BookmarkTreeContainer({
     removeNextBookmarkTrees(treeInfo.parent.id)
   }, [removeNextBookmarkTrees, treeInfo.parent.id])
 
-  const { handleRowAuxClick, handleRowClick } = useRowClickEvents({
-    treeInfo,
-  })
+  const { handleRowAuxClick, handleRowClick, handleRowContextMenu } =
+    useRowClickEvents({
+      treeInfo,
+    })
   const { handleRowDragOver, handleRowDragStart } = useRowDragEvents({
     closeNextTrees,
     treeInfo,
@@ -128,6 +129,7 @@ export default function BookmarkTreeContainer({
         treeInfo={treeInfo}
         onRowAuxClick={handleRowAuxClick}
         onRowClick={handleRowClick}
+        onRowContextMenu={handleRowContextMenu}
         onRowDragOver={handleRowDragOver}
         onRowDragStart={handleRowDragStart}
         onRowMouseEnter={handleRowMouseEnter}

diff --git a/src/popup/components/BookmarkTree/useRowClickEvents.ts b/src/popup/components/BookmarkTree/useRowClickEvents.ts
@@ -73,10 +73,6 @@ export default function useRowClickEvents({
           if (evt.button === 1) {
             await handleRowMiddleClick(bookmarkInfo)
           }
-
-          if (evt.button === 2) {
-            handleRowRightClick(bookmarkInfo, evt)
-          }
         },
       handleRowClick:
         (bookmarkInfo: BookmarkInfo) => async (evt: React.MouseEvent) => {
@@ -93,6 +89,10 @@ export default function useRowClickEvents({
             })
           }
         },
+      handleRowContextMenu:
+        (bookmarkInfo: BookmarkInfo) => (evt: React.MouseEvent) => {
+          handleRowRightClick(bookmarkInfo, evt)
+        },
     }
   }, [openMenu, options, toggleBookmarkTree, treeInfo.parent.id])
 }