diff --git a/apps/client/src/common/hooks/useContextMenu.tsx b/apps/client/src/common/hooks/useContextMenu.tsx index f1ca6280b..53060337d 100644 --- a/apps/client/src/common/hooks/useContextMenu.tsx +++ b/apps/client/src/common/hooks/useContextMenu.tsx @@ -1,18 +1,24 @@ -import { MouseEvent } from 'react'; +import { MouseEvent, useCallback } from 'react'; import { useContextMenuStore } from '../../features/rundown/rundown-context-menu/RundownContextMenu'; import { DropdownMenuOption } from '../components/dropdown-menu/DropdownMenu'; -export const useContextMenu = (options: DropdownMenuOption[]) => { +type ContextMenuOptions = () => DropdownMenuOption[]; + +export const useContextMenu = (options: ContextMenuOptions) => { const setContextMenu = useContextMenuStore((state) => state.setContextMenu); - const localCreateContextMenu = (contextMenuEvent: MouseEvent) => { - // prevent browser default context menu from showing up - contextMenuEvent.preventDefault(); + const localCreateContextMenu = useCallback( + (contextMenuEvent: MouseEvent) => { + // prevent browser default context menu from showing up + contextMenuEvent.preventDefault(); - const { pageX, pageY } = contextMenuEvent; - return setContextMenu({ x: pageX, y: pageY }, options); - }; + const { pageX, pageY } = contextMenuEvent; + const menuOptions = options(); + return setContextMenu({ x: pageX, y: pageY }, menuOptions); + }, + [options, setContextMenu], + ); return [localCreateContextMenu]; }; diff --git a/apps/client/src/features/rundown/RundownExport.tsx b/apps/client/src/features/rundown/RundownExport.tsx index 3af5bfd1f..0f42800bc 100644 --- a/apps/client/src/features/rundown/RundownExport.tsx +++ b/apps/client/src/features/rundown/RundownExport.tsx @@ -44,9 +44,8 @@ function RundownExport() {
- - - + +
@@ -65,9 +64,8 @@ function RundownExport() { {!isExtracted && handleLinks('rundown', event)} />} - - - + + {!hideSideBar && ( diff --git a/apps/client/src/features/rundown/rundown-context-menu/RundownContextMenu.tsx b/apps/client/src/features/rundown/rundown-context-menu/RundownContextMenu.tsx index 980fea1cf..a30c0a3ee 100644 --- a/apps/client/src/features/rundown/rundown-context-menu/RundownContextMenu.tsx +++ b/apps/client/src/features/rundown/rundown-context-menu/RundownContextMenu.tsx @@ -1,4 +1,3 @@ -import type { PropsWithChildren } from 'react'; import { create } from 'zustand'; import { DropdownMenuOption, PositionedDropdownMenu } from '../../../common/components/dropdown-menu/DropdownMenu'; @@ -24,7 +23,7 @@ export const useContextMenuStore = create((set) => ({ setIsOpen: (newIsOpen) => set(() => ({ isOpen: newIsOpen })), })); -export function RundownContextMenu({ children }: PropsWithChildren) { +export function RundownContextMenu() { const { position, options, isOpen, setIsOpen } = useContextMenuStore(); const onClose = () => { @@ -32,13 +31,8 @@ export function RundownContextMenu({ children }: PropsWithChildren) { }; if (!isOpen) { - return children; + return null; } - return ( - <> - {children} - - - ); + return ; } diff --git a/apps/client/src/features/rundown/rundown-event/RundownEvent.tsx b/apps/client/src/features/rundown/rundown-event/RundownEvent.tsx index 688ef73b4..7e0b42ae7 100644 --- a/apps/client/src/features/rundown/rundown-event/RundownEvent.tsx +++ b/apps/client/src/features/rundown/rundown-event/RundownEvent.tsx @@ -109,7 +109,7 @@ export default function RundownEvent({ const handleRef = useRef(null); const [isVisible, setIsVisible] = useState(false); - const [onContextMenu] = useContextMenu( + const [onContextMenu] = useContextMenu(() => selectedEvents.size > 1 ? [ { diff --git a/apps/client/src/features/rundown/rundown-group/RundownGroup.tsx b/apps/client/src/features/rundown/rundown-group/RundownGroup.tsx index e8d63252c..d1f6c1c7b 100644 --- a/apps/client/src/features/rundown/rundown-group/RundownGroup.tsx +++ b/apps/client/src/features/rundown/rundown-group/RundownGroup.tsx @@ -41,7 +41,7 @@ export default function RundownGroup({ data, hasCursor, collapsed, onCollapse }: const setSingleEntrySelection = useEventSelection((state) => state.setSingleEntrySelection); const selectedEvents = useEventSelection((state) => state.selectedEvents); - const [onContextMenu] = useContextMenu([ + const [onContextMenu] = useContextMenu(() => [ { type: 'item', label: 'Clone Group', diff --git a/apps/client/src/features/rundown/rundown-milestone/RundownMilestone.tsx b/apps/client/src/features/rundown/rundown-milestone/RundownMilestone.tsx index e4497f459..9626a2bbc 100644 --- a/apps/client/src/features/rundown/rundown-milestone/RundownMilestone.tsx +++ b/apps/client/src/features/rundown/rundown-milestone/RundownMilestone.tsx @@ -30,7 +30,7 @@ export default function RundownMilestone({ colour, cue, entryId, hasCursor, titl const selectedEvents = useEventSelection((state) => state.selectedEvents); const setSingleEntrySelection = useEventSelection((state) => state.setSingleEntrySelection); - const [onContextMenu] = useContextMenu([ + const [onContextMenu] = useContextMenu(() => [ { type: 'item', label: 'Delete',