Contextmenu

[ContextMenu]{#ContextMenu data-4search="ui/b/contextmenu.tsx:ContextMenu;section"}

The ContextMenu component implements a modal popup that displays contextmenu choices, using menu-entry lists and MenuItem children for custom content. Menu actions are identified via URI attributes, they can be activated by calling a handler which is assigned via the .activate property, or the actions can be checked for being disabled by calling a handler which is assigned via the .isactive property. Menu items render their own icons and shortcut labels. Using the popup() method, the menu can be shown via HTMLDialogElement.showModal. Example:

<div onContextMenu={e => cm_ref.popup(e)}>
  <ContextMenu ref={cm_ref} activate={menuactivation}
    items={[{ uri: "quit", label: "Quit", icon: "md-close", kbd: "Shift+Ctrl+Q" }]} />
</div>

Note that keyboard presses, mouse clicks, drag selections and event bubbling can all cause menu item clicks and contextmenu activation. In order to deduplicate multiple events that arise from the same user interaction, one popup request and one click activation is processed per animation frame.

Props:

activate (uri) : Callback handler which is called with a menu item URI once a menu item is activated. : Availability is checked again when an item is activated. isactive (uri) -> Promise : Async callback used to check for a particular menu item by URI to stay active or be disabled, called during popup(). : Items stay enabled while the menu is closed, so their hotkeys can be pressed.

Attributes:

xscale : Consider a wider area than the context menu width for popup positioning. yscale : Consider a taller area than the context menu height for popup positioning.

Events:

activate (event) : Event signaling activation of a menu item, the uri can be found via event.detail.uri. close (event) : Event signaling closing of the menu, regardless of whether menu item activation occoured or not.

Methods:

popup (event, { origin, focus_uri, data-contextmenu }) : Popup the contextmenu, propagation of event is halted and the event coordinates or target is : used for positioning unless origin is given. : The origin is a reference DOM element to use for drop-down positioning. : The focus_uri is a menu item URI to receive focus after popup. : The data-contextmenu element (or origin) has the data-contextmenu=true attribute assigned during popup. close() : Hide the contextmenu. map_kbd_hotkeys (active) : Activate/deactivate a global hotkey map containing the kbd hotkeys of the menu items. : Hotkeys use the same availability check as clicks.