diff --git a/packages/desktop-client/src/components/reports/ReportCard.tsx b/packages/desktop-client/src/components/reports/ReportCard.tsx index 91f3839c762..2ec2acb2246 100644 --- a/packages/desktop-client/src/components/reports/ReportCard.tsx +++ b/packages/desktop-client/src/components/reports/ReportCard.tsx @@ -1,11 +1,11 @@ import React, { useRef, - useState, type ComponentProps, type ReactNode, type CSSProperties, } from 'react'; +import { useContextMenu } from '../../hooks/useContextMenu'; import { useIsInViewport } from '../../hooks/useIsInViewport'; import { useNavigate } from '../../hooks/useNavigate'; import { theme } from '../../style'; @@ -19,6 +19,7 @@ import { NON_DRAGGABLE_AREA_CLASS_NAME } from './constants'; type ReportCardProps = { isEditing?: boolean; + disableClick?: boolean; to?: string; children: ReactNode; menuItems?: ComponentProps['items']; @@ -29,6 +30,7 @@ type ReportCardProps = { export function ReportCard({ isEditing, + disableClick, to, menuItems, onMenuSelect, @@ -95,7 +97,7 @@ export function ReportCard({ navigate(to)} + onClick={isEditing || disableClick ? undefined : () => navigate(to)} style={{ height: '100%', width: '100%', @@ -119,10 +121,21 @@ type LayoutProps = { function Layout({ children, isEditing, menuItems, onMenuSelect }: LayoutProps) { const triggerRef = useRef(null); - const [menuOpen, setMenuOpen] = useState(false); + const viewRef = useRef(null); + + const { + setMenuOpen, + menuOpen, + handleContextMenu, + resetPosition, + position, + asContextMenu, + } = useContextMenu(); return ( - {menuItems && isEditing && ( - - setMenuOpen(true)} /> + {menuItems && ( + <> + {isEditing && ( + + { + resetPosition(); + setMenuOpen(true); + }} + /> + + )} + setMenuOpen(false)} + isNonModal + placement={asContextMenu ? 'bottom start' : 'bottom end'} + {...position} > - + )} {children} diff --git a/packages/desktop-client/src/components/reports/reports/CashFlowCard.tsx b/packages/desktop-client/src/components/reports/reports/CashFlowCard.tsx index 831dd54920d..92d8524475d 100644 --- a/packages/desktop-client/src/components/reports/reports/CashFlowCard.tsx +++ b/packages/desktop-client/src/components/reports/reports/CashFlowCard.tsx @@ -119,6 +119,7 @@ export function CashFlowCard({ return (