61 lines
2.2 KiB
JavaScript
61 lines
2.2 KiB
JavaScript
import { useEffect, useRef } from 'react'
|
|
import { createPortal } from 'react-dom'
|
|
|
|
export default function ContextMenu({ x, y, items, onClose }) {
|
|
const ref = useRef(null)
|
|
|
|
useEffect(() => {
|
|
const onMouseDown = (e) => {
|
|
if (ref.current && !ref.current.contains(e.target)) onClose()
|
|
}
|
|
const onKey = (e) => {
|
|
if (e.key === 'Escape') onClose()
|
|
}
|
|
document.addEventListener('mousedown', onMouseDown)
|
|
document.addEventListener('keydown', onKey)
|
|
return () => {
|
|
document.removeEventListener('mousedown', onMouseDown)
|
|
document.removeEventListener('keydown', onKey)
|
|
}
|
|
}, [onClose])
|
|
|
|
// Keep menu inside viewport
|
|
const W = 192
|
|
const H = items.length * 34
|
|
const adjX = Math.min(x, window.innerWidth - W - 8)
|
|
const adjY = Math.min(y, window.innerHeight - H - 8)
|
|
|
|
// Portal to document.body — escapes any CSS transform stacking context
|
|
// (e.g. the Drawer slide-in animation uses translateX which traps fixed children)
|
|
return createPortal(
|
|
<div
|
|
ref={ref}
|
|
style={{ position: 'fixed', left: adjX, top: adjY }}
|
|
className="z-[9999] bg-surface-elevated border border-surface-border rounded-xl shadow-2xl py-1.5 min-w-[192px]"
|
|
>
|
|
{items.map((item, i) =>
|
|
item.separator ? (
|
|
<div key={i} className="my-1 border-t border-surface-border/60" />
|
|
) : (
|
|
<button
|
|
key={i}
|
|
onClick={() => { item.action?.(); onClose() }}
|
|
className={`w-full flex items-center gap-2.5 px-3 py-2 text-xs text-left transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${
|
|
item.danger ? 'text-red-400 hover:bg-red-500/10' :
|
|
item.highlight ? 'text-gold hover:bg-gold/10' :
|
|
'text-text-primary hover:bg-surface-border/40'
|
|
}`}
|
|
>
|
|
<span className="text-[11px] opacity-70 w-3.5 flex-shrink-0">{item.icon}</span>
|
|
<span className="flex-1">{item.label}</span>
|
|
{item.shortcut && (
|
|
<span className="text-[9px] text-text-muted/40 font-mono ml-2">{item.shortcut}</span>
|
|
)}
|
|
</button>
|
|
)
|
|
)}
|
|
</div>,
|
|
document.body
|
|
)
|
|
}
|