Chore: Add escape hotkey on AnnotationPopover

package.json

@@ -96,6 +96,7 @@
     "lint-staged": "^7.2.2",
     "mini-css-extract-plugin": "^0.4.2",
     "mocha": "^5.2.0",
+    "mousetrap": "^1.6.2",
     "node-sass": "^4.9.3",
     "optimize-css-assets-webpack-plugin": "^4.0.2",
     "pikaday": "^1.8.0",

src/AnnotationThread.js

@@ -669,25 +669,6 @@ class AnnotationThread extends EventEmitter {
         super.emit('threadevent', { event, data: threadData, eventData });
     }
 
-    /**
-     * Keydown handler for dialog.
-     *
-     * @param {Event} event DOM event
-     * @return {void}
-     */
-    keydownHandler(event: Event) {
-        event.stopPropagation();
-
-        const key = util.decodeKeydown(event);
-        if (key === 'Escape') {
-            if (this.hasAnnotations()) {
-                this.hide();
-            } else {
-                this.cancelAnnotation();
-            }
-        }
-    }
-
     /**
      * Show/hide the top portion of the annotations icon based on if the
      * entire dialog is flipped

src/components/AnnotationPopover/AnnotationPopover.js

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import noop from 'lodash/noop';
 import PlainButton from 'box-react-ui/lib/components/plain-button';
 import IconClose from 'box-react-ui/lib/icons/general/IconClose';
+import { HotkeyRecord, HotkeyLayer } from 'box-react-ui/lib/components/hotkeys';
 
 import Internationalize from '../Internationalize';
 import CommentList from '../CommentList';
@@ -43,7 +44,6 @@ class AnnotationPopover extends React.PureComponent<Props> {
         canDelete: false,
         onCommentClick: noop,
         onDelete: noop,
-        onCancel: noop,
         onCreate: noop,
         comments: []
     };
@@ -58,6 +58,18 @@ class AnnotationPopover extends React.PureComponent<Props> {
         position();
     }
 
+    getHotkeyConfigs() {
+        const { onCancel } = this.props;
+        return [
+            new HotkeyRecord({
+                description: 'Close popover',
+                key: 'esc',
+                handler: () => onCancel(),
+                type: 'Close'
+            })
+        ];
+    }
+
     render() {
         const {
             id,
@@ -83,46 +95,48 @@ class AnnotationPopover extends React.PureComponent<Props> {
 
         return (
             <Internationalize language={language} messages={intlMessages}>
-                <div
-                    className={classNames(CLASS_ANNOTATION_POPOVER, {
-                        [CLASS_INLINE_POPOVER]: isInline,
-                        [CLASS_ANIMATE_POPOVER]: isMobile,
-                        [CLASS_CREATE_POPOVER]: isPending
-                    })}
-                >
-                    {isMobile ? (
-                        <span className={CLASS_MOBILE_HEADER} style={{ height: headerHeight }}>
-                            <PlainButton className={CLASS_MOBILE_CLOSE_BTN} onClick={onCancel}>
-                                <IconClose height={20} width={20} />
-                            </PlainButton>
-                        </span>
-                    ) : (
-                        <span className={CLASS_ANNOTATION_CARET} />
-                    )}
-                    <div className={CLASS_POPOVER_OVERLAY}>
-                        {hasComments ? (
-                            <CommentList comments={comments} onDelete={onDelete} />
+                <HotkeyLayer configs={this.getHotkeyConfigs()}>
+                    <div
+                        className={classNames(CLASS_ANNOTATION_POPOVER, {
+                            [CLASS_INLINE_POPOVER]: isInline,
+                            [CLASS_ANIMATE_POPOVER]: isMobile,
+                            [CLASS_CREATE_POPOVER]: isPending
+                        })}
+                    >
+                        {isMobile ? (
+                            <span className={CLASS_MOBILE_HEADER} style={{ height: headerHeight }}>
+                                <PlainButton className={CLASS_MOBILE_CLOSE_BTN} onClick={onCancel}>
+                                    <IconClose height={20} width={20} />
+                                </PlainButton>
+                            </span>
                         ) : (
-                            <AnnotatorLabel id={id} type={type} createdBy={createdBy} isPending={isPending} />
-                        )}
-                        {canAnnotate && (
-                            <ActionControls
-                                id={id}
-                                type={type}
-                                hasComments={hasComments}
-                                isPending={isPending}
-                                canComment={canComment}
-                                canDelete={canDelete}
-                                createdBy={createdBy}
-                                createdAt={createdAt}
-                                onCreate={onCreate}
-                                onCancel={onCancel}
-                                onDelete={onDelete}
-                                onCommentClick={onCommentClick}
-                            />
+                            <span className={CLASS_ANNOTATION_CARET} />
                         )}
+                        <div className={CLASS_POPOVER_OVERLAY}>
+                            {hasComments ? (
+                                <CommentList comments={comments} onDelete={onDelete} />
+                            ) : (
+                                <AnnotatorLabel id={id} type={type} createdBy={createdBy} isPending={isPending} />
+                            )}
+                            {canAnnotate && (
+                                <ActionControls
+                                    id={id}
+                                    type={type}
+                                    hasComments={hasComments}
+                                    isPending={isPending}
+                                    canComment={canComment}
+                                    canDelete={canDelete}
+                                    createdBy={createdBy}
+                                    createdAt={createdAt}
+                                    onCreate={onCreate}
+                                    onCancel={onCancel}
+                                    onDelete={onDelete}
+                                    onCommentClick={onCommentClick}
+                                />
+                            )}
+                        </div>
                     </div>
-                </div>
+                </HotkeyLayer>
             </Internationalize>
         );
     }

src/doc/DocHighlightThread.js

@@ -498,21 +498,6 @@ class DocHighlightThread extends AnnotationThread {
         popoverEl.style.top = `${dialogY + INLINE_POPOVER_HEIGHT / 2 - BORDER_OFFSET}px`;
     };
 
-    /**
-     * Keydown handler on dialog. Needed since we are binding to 'mousedown'
-     * instead of 'click'.
-     *
-     * @param {Event} event - Mouse event
-     * @return {void}
-     */
-    keydownHandler(event: Event) {
-        event.stopPropagation();
-        if (util.decodeKeydown(event) === 'Enter') {
-            this.mousedownHandler(event);
-        }
-        super.keydownHandler(event);
-    }
-
     /** @inheritdoc */
     cleanupAnnotationOnDelete(annotationIDToRemove: string) {
         // Delete matching comment from annotation

yarn.lock

@@ -8668,6 +8668,11 @@ moo@^0.4.3:
   resolved "https://registry.yarnpkg.com/moo/-/moo-0.4.3.tgz#3f847a26f31cf625a956a87f2b10fbc013bfd10e"
   integrity sha512-gFD2xGCl8YFgGHsqJ9NKRVdwlioeW3mI1iqfLNYQOv0+6JRwG58Zk9DIGQgyIaffSYaO1xsKnMaYzzNr1KyIAw==
 
+mousetrap@^1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.2.tgz#caadd9cf886db0986fb2fee59a82f6bd37527587"
+  integrity sha512-jDjhi7wlHwdO6q6DS7YRmSHcuI+RVxadBkLt3KHrhd3C2b+w5pKefg3oj5beTcHZyVFA9Aksf+yEE1y5jxUjVA==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"