27 lines
997 B
TypeScript
27 lines
997 B
TypeScript
import { useAtomValue } from "jotai";
|
|
import { contextMenusAtom, hideContextMenu } from "../lib/contextMenu";
|
|
import { ContextMenu } from "./core/Dropdown";
|
|
import { ErrorBoundary } from "./ErrorBoundary";
|
|
|
|
/** Renders menus opened by {@link showContextMenu}, the way {@link Dialogs} renders dialogs. */
|
|
export function ContextMenus() {
|
|
const menus = useAtomValue(contextMenusAtom);
|
|
return (
|
|
<>
|
|
{menus.map(({ id, items, triggerPosition, triggerRect, triggerEl }) => (
|
|
<ErrorBoundary key={id} name={`ContextMenu ${id}`}>
|
|
<ContextMenu
|
|
items={items}
|
|
triggerPosition={triggerPosition}
|
|
triggerRect={triggerRect}
|
|
// The trigger isn't a React component here, so it arrives as an element and gets
|
|
// wrapped to look like the ref the menu expects
|
|
triggerRef={{ current: triggerEl ?? null }}
|
|
onClose={() => hideContextMenu(id)}
|
|
/>
|
|
</ErrorBoundary>
|
|
))}
|
|
</>
|
|
);
|
|
}
|