Chore: Add escape hotkey on AnnotationPopover (#327)

box · Jan 25, 2019 · e92ec85 · e92ec85
1 parent 6a3b83a
commit e92ec85
Show file tree

Hide file tree

Showing 8 changed files with 568 additions and 409 deletions.
diff --git a/i18n/en-US.properties b/i18n/en-US.properties
@@ -1,5 +1,7 @@
 # Placeholder when the current annotation's user information is unknown
 ba.anonymousUserName = Some User
+# Description for popover close hotkey record
+ba.closePopover = Close Popover
 # Label for who left the annotation
 ba.whoAnnotated = {name} annotated
 # Label for who drew the drawing annotation

diff --git a/package.json b/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",

diff --git a/src/AnnotationThread.js b/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

diff --git a/src/components/AnnotationPopover/AnnotationPopover.js b/src/components/AnnotationPopover/AnnotationPopover.js
@@ -2,9 +2,12 @@
 import React from 'react';
 import classNames from 'classnames';
 import noop from 'lodash/noop';
+import { FormattedMessage } from 'react-intl';
 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 messages from './messages';
 import Internationalize from '../Internationalize';
 import CommentList from '../CommentList';
 import { TYPES, CLASS_ANNOTATION_POPOVER, CLASS_ANNOTATION_CARET } from '../../constants';
@@ -43,7 +46,6 @@ class AnnotationPopover extends React.PureComponent<Props> {
         canDelete: false,
         onCommentClick: noop,
         onDelete: noop,
-        onCancel: noop,
         onCreate: noop,
         comments: []
     };
@@ -80,49 +82,59 @@ class AnnotationPopover extends React.PureComponent<Props> {
         } = this.props;
         const hasComments = comments.length > 0;
         const isInline = !hasComments && (type === TYPES.highlight || type === TYPES.draw);
+        const configs = [
+            new HotkeyRecord({
+                description: <FormattedMessage {...messages.close} />,
+                key: 'esc',
+                handler: onCancel,
+                type: 'Close'
+            })
+        ];
 
         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={configs}>
+                    <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>
         );
     }