Extract keyCode constants into their own lib file

frontend/src/metabase/admin/people/components/GroupsListing.jsx

@@ -6,6 +6,7 @@ import cx from "classnames";
 
 import MetabaseAnalytics from "metabase/lib/analytics";
 import { isDefaultGroup, isAdminGroup } from "metabase/lib/groups";
+import { KEYCODE_RETURN } from "metabase/lib/keyboard";
 
 import { PermissionsApi } from "metabase/services";
 
@@ -35,7 +36,7 @@ function AddGroupRow({ text, onCancelClicked, onCreateClicked, onTextChange }) {
                     placeholder="Justice League"
                     onChange={(e) => onTextChange(e.target.value)}
                     onKeyDown={(e) => {
-                        if (e.keyCode === 13) {
+                        if (e.keyCode === KEYCODE_RETURN) {
                             onCreateClicked();
                         }
                     }}

frontend/src/metabase/components/OnClickOutsideWrapper.jsx

@@ -2,11 +2,11 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import ReactDOM from "react-dom";
 
+import { KEYCODE_ESC } from "metabase/lib/keyboard";
+
 // keep track of the order popovers were opened so we only close the last one when clicked outside
 const popoverStack = [];
 
-const ESC_KEY = 27;
-
 export default class OnClickOutsideWrapper extends Component {
     static propTypes = {
         handleDismissal: PropTypes.func.isRequired
@@ -57,7 +57,7 @@ export default class OnClickOutsideWrapper extends Component {
     }
 
     _handleKeyPress = (e) => {
-        if (e.keyCode === ESC_KEY) {
+        if (e.keyCode === KEYCODE_ESC) {
             e.preventDefault();
             this._handleDismissal();
         }

frontend/src/metabase/hoc/Typeahead.jsx

@@ -3,9 +3,7 @@ import PropTypes from "prop-types";
 
 import _ from "underscore";
 
-const KEYCODE_ENTER = 13;
-const KEYCODE_UP    = 38;
-const KEYCODE_DOWN  = 40;
+import { KEYCODE_RETURN, KEYCODE_UP, KEYCODE_DOWN } from "metabase/lib/keyboard";
 
 const DEFAULT_FILTER_OPTIONS = (value, option) => {
     try {
@@ -48,7 +46,7 @@ export default ({ optionFilter = DEFAULT_FILTER_OPTIONS, optionIsEqual = DEFAULT
         } else if (e.keyCode === KEYCODE_DOWN) {
             e.preventDefault();
             this.onPressDown();
-        } else if (e.keyCode === KEYCODE_ENTER) {
+        } else if (e.keyCode === KEYCODE_RETURN) {
             e.preventDefault();
             this.onSuggestionAccepted(this.state.selectedSuggestion);
         }

frontend/src/metabase/lib/keyboard.js

+
+export const KEYCODE_BACKSPACE     = 8;
+export const KEYCODE_TAB           = 9;
+export const KEYCODE_RETURN        = 13;
+export const KEYCODE_ESC           = 27;
+
+export const KEYCODE_LEFT          = 37;
+export const KEYCODE_UP            = 38;
+export const KEYCODE_RIGHT         = 39;
+export const KEYCODE_DOWN          = 40;
+
+export const KEYCODE_COMMA         = 188;
+export const KEYCODE_FORWARD_SLASH = 191;

frontend/src/metabase/parameters/components/ParameterWidget.jsx

@@ -11,6 +11,8 @@ import _ from "underscore";
 
 import FieldSet from "../../components/FieldSet";
 
+import { KEYCODE_RETURN, KEYCODE_ESC } from "metabase/lib/keyboard";
+
 export default class ParameterWidget extends Component {
     state = {
         isEditingName: false,
@@ -77,7 +79,7 @@ export default class ParameterWidget extends Component {
                         onChange={(e) => setName(e.target.value)}
                         onBlur={() => this.setState({ isEditingName: false })}
                         onKeyUp={(e) => {
-                                if (e.keyCode === 27 || e.keyCode === 13) {
+                                if (e.keyCode === KEYCODE_ESC || e.keyCode === KEYCODE_RETURN) {
                                     e.target.blur();
                                 }
                             }}

frontend/src/metabase/parameters/components/widgets/TextWidget.jsx

@@ -2,6 +2,8 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 
+import { KEYCODE_RETURN, KEYCODE_ESC } from "metabase/lib/keyboard";
+
 export default class TextWidget extends Component {
     constructor(props, context) {
         super(props, context);
@@ -56,9 +58,9 @@ export default class TextWidget extends Component {
                     }
                 }}
                 onKeyUp={(e) => {
-                    if (e.keyCode === 27) {
+                    if (e.keyCode === KEYCODE_ESC) {
                         e.target.blur();
-                    } else if (e.keyCode === 13) {
+                    } else if (e.keyCode === KEYCODE_RETURN) {
                         setValue(this.state.value || null);
                         e.target.blur();
                     }

frontend/src/metabase/pulse/components/RecipientPicker.jsx

@@ -8,6 +8,7 @@ import Popover from "metabase/components/Popover.jsx";
 import UserAvatar from "metabase/components/UserAvatar.jsx";
 
 import MetabaseAnalytics from "metabase/lib/analytics";
+import { KEYCODE_ESC, KEYCODE_COMMA, KEYCODE_TAB, KEYCODE_UP, KEYCODE_DOWN, KEYCODE_BACKSPACE } from "metabase/lib/keyboard";
 
 import _ from "underscore";
 import cx from "classnames";
@@ -80,11 +81,11 @@ export default class RecipientPicker extends Component {
 
     onInputKeyDown(e) {
         // enter, tab, comma
-        if (e.keyCode === 13 || e.keyCode === 9 || e.keyCode === 188) {
+        if (e.keyCode === KEYCODE_ESC || e.keyCode === KEYCODE_TAB || e.keyCode === KEYCODE_COMMA) {
             this.addCurrentRecipient();
         }
         // up arrow
-        else if (e.keyCode === 38) {
+        else if (e.keyCode === KEYCODE_UP) {
             e.preventDefault();
             let index = _.findIndex(this.state.filteredUsers, (u) => u.id === this.state.selectedUser);
             if (index > 0) {
@@ -92,7 +93,7 @@ export default class RecipientPicker extends Component {
             }
         }
         // down arrow
-        else if (e.keyCode === 40) {
+        else if (e.keyCode === KEYCODE_DOWN) {
             e.preventDefault();
             let index = _.findIndex(this.state.filteredUsers, (u) => u.id === this.state.selectedUser);
             if (index >= 0 && index < this.state.filteredUsers.length - 1) {
@@ -100,7 +101,7 @@ export default class RecipientPicker extends Component {
             }
         }
         // backspace
-        else if (e.keyCode === 8) {
+        else if (e.keyCode === KEYCODE_BACKSPACE) {
             let { recipients } = this.props;
             if (!this.state.inputValue && recipients.length > 0) {
                 this.removeRecipient(recipients[recipients.length - 1])

frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield.jsx

@@ -9,6 +9,14 @@ import cx from "classnames";
 import { compile, suggest } from "metabase/lib/expressions/parser";
 import { format } from "metabase/lib/expressions/formatter";
 import { setCaretPosition, getSelectionPosition } from "metabase/lib/dom";
+import {
+    KEYCODE_ENTER,
+    KEYCODE_ESC,
+    KEYCODE_LEFT,
+    KEYCODE_UP,
+    KEYCODE_RIGHT,
+    KEYCODE_DOWN
+} from "metabase/lib/keyboard";
 
 import Popover from "metabase/components/Popover.jsx";
 
@@ -16,14 +24,6 @@ import TokenizedInput from "./TokenizedInput.jsx";
 
 import { isExpression } from "metabase/lib/expressions";
 
-
-const KEYCODE_ENTER = 13;
-const KEYCODE_ESC   = 27;
-const KEYCODE_LEFT  = 37;
-const KEYCODE_UP    = 38;
-const KEYCODE_RIGHT = 39;
-const KEYCODE_DOWN  = 40;
-
 const MAX_SUGGESTIONS = 30;
 
 export default class ExpressionEditorTextfield extends Component {

frontend/src/metabase/questions/components/ExpandingSearchField.jsx

@@ -9,9 +9,7 @@ import { Motion, spring } from "react-motion";
 
 import Icon from "metabase/components/Icon";
 
-const KEYCODE_FORWARD_SLASH = 191; // focus search
-const KEYCODE_ESCAPE = 27; // blur search
-const KEYCODE_ENTER = 13; // execute search
+import { KEYCODE_FORWARD_SLASH, KEYCODE_RETURN, KEYCODE_ESCAPE } from "metabase/lib/keyboard";
 
 export default class ExpandingSearchField extends Component {
     constructor (props, context) {
@@ -43,7 +41,7 @@ export default class ExpandingSearchField extends Component {
     }
 
     onKeyPress = (e) => {
-        if (e.keyCode === KEYCODE_ENTER) {
+        if (e.keyCode === KEYCODE_RETURN) {
             this.props.onSearch(e.target.value)
         } else if (e.keyCode === KEYCODE_ESCAPE) {
             this.setInactive();