chore: use useContextMenu hook

actualbudget · Dec 9, 2024 · ca98b6a · ca98b6a
1 parent 2afa941
commit ca98b6a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 34 deletions.
diff --git a/packages/desktop-client/src/components/sidebar/Account.tsx b/packages/desktop-client/src/components/sidebar/Account.tsx
@@ -12,7 +12,7 @@ import {
 import * as Platform from 'loot-core/client/platform';
 import { type AccountEntity } from 'loot-core/src/types/models';
 
-import { useFeatureFlag } from '../../hooks/useFeatureFlag';
+import { useContextMenu } from '../../hooks/useContextMenu';
 import { useNotes } from '../../hooks/useNotes';
 import { styles, theme } from '../../style';
 import { AlignedText } from '../common/AlignedText';
@@ -84,10 +84,8 @@ export function Account<FieldName extends SheetFields<'account'>>({
     : 'title';
 
   const triggerRef = useRef(null);
-  const [menuOpen, setMenuOpen] = useState(false);
-  const contextMenusEnabled = useFeatureFlag('contextMenus');
-  const [crossOffset, setCrossOffset] = useState(0);
-  const [offset, setOffset] = useState(0);
+  const { setMenuOpen, menuOpen, handleContextMenu, position } =
+    useContextMenu();
 
   const { dragRef } = useDraggable({
     type,
@@ -138,14 +136,7 @@ export function Account<FieldName extends SheetFields<'account'>>({
     <View
       innerRef={dropRef}
       style={{ flexShrink: 0, ...outerStyle }}
-      onContextMenu={e => {
-        if (!needsTooltip || !contextMenusEnabled) return;
-        e.preventDefault();
-        const rect = e.currentTarget.getBoundingClientRect();
-        setCrossOffset(e.clientX - rect.left);
-        setOffset(e.clientY - rect.bottom);
-        setMenuOpen(true);
-      }}
+      onContextMenu={needsTooltip ? handleContextMenu : undefined}
     >
       <View innerRef={triggerRef}>
         <DropHighlight pos={dropPos} />
@@ -242,8 +233,7 @@ export function Account<FieldName extends SheetFields<'account'>>({
               onOpenChange={() => setMenuOpen(false)}
               style={{ width: 200, margin: 1 }}
               isNonModal
-              crossOffset={crossOffset}
-              offset={offset}
+              {...position}
             >
               <Menu
                 onMenuSelect={type => {
@@ -312,6 +302,7 @@ export function Account<FieldName extends SheetFields<'account'>>({
       placement="right top"
       triggerProps={{
         delay: 1000,
+        isDisabled: menuOpen,
       }}
     >
       {accountRow}

diff --git a/packages/desktop-client/src/components/sidebar/BudgetName.tsx b/packages/desktop-client/src/components/sidebar/BudgetName.tsx
@@ -5,7 +5,7 @@ import { useDispatch } from 'react-redux';
 import { closeBudget } from 'loot-core/src/client/actions';
 import * as Platform from 'loot-core/src/client/platform';
 
-import { useFeatureFlag } from '../../hooks/useFeatureFlag';
+import { useContextMenu } from '../../hooks/useContextMenu';
 import { useMetadataPref } from '../../hooks/useMetadataPref';
 import { useNavigate } from '../../hooks/useNavigate';
 import { SvgExpandArrow } from '../../icons/v0';
@@ -55,12 +55,10 @@ function EditableBudgetName() {
   const [budgetName, setBudgetNamePref] = useMetadataPref('budgetName');
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  const [menuOpen, setMenuOpen] = useState(false);
   const triggerRef = useRef<HTMLButtonElement>(null);
   const [editing, setEditing] = useState(false);
-  const contextMenusEnabled = useFeatureFlag('contextMenus');
-  const [crossOffset, setCrossOffset] = useState(0);
-  const [offset, setOffset] = useState(0);
+  const { setMenuOpen, menuOpen, handleContextMenu, resetPosition, position } =
+    useContextMenu();
 
   function onMenuSelect(type: string) {
     setMenuOpen(false);
@@ -110,16 +108,7 @@ function EditableBudgetName() {
   }
 
   return (
-    <View
-      onContextMenu={e => {
-        if (!contextMenusEnabled) return;
-        e.preventDefault();
-        const rect = e.currentTarget.getBoundingClientRect();
-        setCrossOffset(e.clientX - rect.left);
-        setOffset(e.clientY - rect.bottom);
-        setMenuOpen(true);
-      }}
-    >
+    <View onContextMenu={handleContextMenu}>
       <Button
         ref={triggerRef}
         variant="bare"
@@ -131,8 +120,7 @@ function EditableBudgetName() {
           flex: '0 auto',
         }}
         onPress={() => {
-          setOffset(0);
-          setCrossOffset(0);
+          resetPosition();
           setMenuOpen(true);
         }}
       >
@@ -152,8 +140,7 @@ function EditableBudgetName() {
         isOpen={menuOpen}
         onOpenChange={() => setMenuOpen(false)}
         style={{ margin: 1 }}
-        crossOffset={crossOffset}
-        offset={offset}
+        {...position}
       >
         <Menu onMenuSelect={onMenuSelect} items={items} />
       </Popover>