diff --git a/CHANGELOG.md b/CHANGELOG.md index e9c41769..5fba40d4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,8 +4,15 @@ ### Fixed - The space key can now be used for keyboard shortcuts - An issue where items in the rundown couldn't rapidly be selected and de-selected +- An issue where context menus were cut off in the rundown +- An issue with the palette not setting proper keys +- An issue with the palette not removing event listeners ### Added - Support for selecting multiple items at once with the shift key +- An API for managing context menus +- An API for managing the clipboard +- Search in context menus +- Keyboard control in context menus ## 1.0.0-beta.7 ### Changed diff --git a/api/browser/ui/contextMenu.js b/api/browser/ui/contextMenu.js index b89a4f83..cef41f54 100644 --- a/api/browser/ui/contextMenu.js +++ b/api/browser/ui/contextMenu.js @@ -35,9 +35,9 @@ class UIContextMenu { this.#props.Events.emitLocally('ui.contextMenu.close') } - open (opts, spec) { + open (spec, opts) { this.#openedAt = Date.now() - this.#props.Events.emitLocally('ui.contextMenu.open', opts, spec) + this.#props.Events.emitLocally('ui.contextMenu.open', spec, opts) } } diff --git a/app/components/ContextMenu/index.jsx b/app/components/ContextMenu/index.jsx index cb9aa653..c51e4e55 100644 --- a/app/components/ContextMenu/index.jsx +++ b/app/components/ContextMenu/index.jsx @@ -10,11 +10,23 @@ import './style.css' * This it to prevent the same event to * both open and close a context menu * - * @type { Number } + * @type { number } */ const OPEN_THRESHOLD_MS = 100 -export const ContextMenu = ({ x, y, children, onClose = () => {} }) => { +/** + * The default width of + * a context menu in pixels, + * + * will be used unless a new width + * is specified as a property + * to the component + * + * @type { number } + */ +const DEFAULT_WIDTH_PX = 150 + +export const ContextMenu = ({ x, y, width = DEFAULT_WIDTH_PX, children, onClose = () => {} }) => { const elRef = React.useRef() const openTimestampRef = React.useRef() @@ -47,6 +59,18 @@ export const ContextMenu = ({ x, y, children, onClose = () => {} }) => { } }, [x, y, onClose]) + React.useEffect(() => { + function closeContext (e) { + if (e.key === 'Escape') { + onClose() + } + } + window.addEventListener('keydown', closeContext) + return () => { + window.removeEventListener('keydown', closeContext) + } + }, [x, y, onClose]) + /* Make sure that the menu open in the direction where it's got the most free space @@ -64,7 +88,11 @@ export const ContextMenu = ({ x, y, children, onClose = () => {} }) => { <> { createPortal( -