Use Keyboard Key variables instead of hardcoded strings

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/Keyboard.js

@@ -63,15 +63,29 @@ export const KeyCode = {
 
 export const Key = {
     HOME: "Home",
-    End: "End",
+    END: "End",
     PAGE_UP: "PageUp",
     PAGE_DOWN: "PageDown",
     BACKSPACE: "Backspace",
+    ARROW_UP: "ArrowUp",
+    ARROW_DOWN: "ArrowDown",
+    TAB: "Tab",
+    ESCAPE: "Escape",
+    ENTER: "Enter",
+    ALT: "Alt",
+    CONTROL: "Control",
+    META: "Meta",
+    SHIFT: "Shift",
+
+    LESS_THAN: "<",
+    GREATER_THAN: ">",
     BACKTICK: "`",
     SPACE: " ",
-    ENTER: "Enter",
+    B: "b",
-
+    I: "i",
     K: "k",
+    Y: "y",
+    Z: "z",
 };
 
 export function isOnlyCtrlOrCmdKeyEvent(ev) {

src/components/structures/LoggedInView.js

@@ -351,7 +351,7 @@ const LoggedInView = createReactClass({
         let handled = false;
         const ctrlCmdOnly = isOnlyCtrlOrCmdKeyEvent(ev);
         const hasModifier = ev.altKey || ev.ctrlKey || ev.metaKey || ev.shiftKey ||
-            ev.key === "Alt" || ev.key === "Control" || ev.key === "Meta" || ev.key === "Shift";
+            ev.key === Key.ALT || ev.key === Key.CONTROL || ev.key === Key.META || ev.key === Key.SHIFT;
 
         switch (ev.key) {
             case Key.PAGE_UP:

src/components/views/dialogs/CreateRoomDialog.js

@@ -22,6 +22,7 @@ import SdkConfig from '../../../SdkConfig';
 import withValidation from '../elements/Validation';
 import { _t } from '../../../languageHandler';
 import MatrixClientPeg from '../../../MatrixClientPeg';
+import {Key} from "../../../Keyboard";
 
 export default createReactClass({
     displayName: 'CreateRoomDialog',
@@ -74,7 +75,7 @@ export default createReactClass({
     },
 
     _onKeyDown: function(event) {
-        if (event.key === "Enter") {
+        if (event.key === Key.ENTER) {
             this.onOk();
             event.preventDefault();
             event.stopPropagation();

src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js

@@ -23,6 +23,7 @@ import Modal from '../../../../Modal';
 import { MatrixClient } from 'matrix-js-sdk';
 
 import { _t } from '../../../../languageHandler';
+import {Key} from "../../../../Keyboard";
 
 const RESTORE_TYPE_PASSPHRASE = 0;
 const RESTORE_TYPE_RECOVERYKEY = 1;
@@ -136,13 +137,13 @@ export default createReactClass({
     },
 
     _onPassPhraseKeyPress: function(e) {
-        if (e.key === "Enter") {
+        if (e.key === Key.ENTER) {
             this._onPassPhraseNext();
         }
     },
 
     _onRecoveryKeyKeyPress: function(e) {
-        if (e.key === "Enter" && this.state.recoveryKeyValid) {
+        if (e.key === Key.ENTER && this.state.recoveryKeyValid) {
             this._onRecoveryKeyNext();
         }
     },

src/components/views/elements/EditableText.js

@@ -18,6 +18,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
+import {Key} from "../../../Keyboard";
 
 module.exports = createReactClass({
     displayName: 'EditableText',
@@ -133,7 +134,7 @@ module.exports = createReactClass({
             this.showPlaceholder(false);
         }
 
-        if (ev.key === "Enter") {
+        if (ev.key === Key.ENTER) {
             ev.stopPropagation();
             ev.preventDefault();
         }
@@ -150,9 +151,9 @@ module.exports = createReactClass({
             this.value = ev.target.textContent;
         }
 
-        if (ev.key === "Enter") {
+        if (ev.key === Key.ENTER) {
             this.onFinish(ev);
-        } else if (ev.key === "Escape") {
+        } else if (ev.key === Key.ESCAPE) {
             this.cancelEdit();
         }
 
@@ -184,7 +185,7 @@ module.exports = createReactClass({
 
     onFinish: function(ev, shouldSubmit) {
         const self = this;
-        const submit = (ev.key === "Enter") || shouldSubmit;
+        const submit = (ev.key === Key.ENTER) || shouldSubmit;
         this.setState({
             phase: this.Phases.Display,
         }, () => {

src/components/views/elements/PowerSelector.js

@@ -20,6 +20,7 @@ import createReactClass from 'create-react-class';
 import * as Roles from '../../../Roles';
 import { _t } from '../../../languageHandler';
 import Field from "./Field";
+import {Key} from "../../../Keyboard";
 
 module.exports = createReactClass({
     displayName: 'PowerSelector',
@@ -113,7 +114,7 @@ module.exports = createReactClass({
     },
 
     onCustomKeyDown: function(event) {
-        if (event.key === "Enter") {
+        if (event.key === Key.ENTER) {
             event.preventDefault();
             event.stopPropagation();
 

src/components/views/rooms/BasicMessageComposer.js

@@ -38,6 +38,7 @@ import EMOJIBASE from 'emojibase-data/en/compact.json';
 import SettingsStore from "../../../settings/SettingsStore";
 import EMOTICON_REGEX from 'emojibase-regex/emoticon';
 import sdk from '../../../index';
+import {Key} from "../../../Keyboard";
 
 const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')\\s$');
 
@@ -313,19 +314,19 @@ export default class BasicMessageEditor extends React.Component {
         const modKey = IS_MAC ? event.metaKey : event.ctrlKey;
         let handled = false;
         // format bold
-        if (modKey && event.key === "b") {
+        if (modKey && event.key === Key.B) {
             this._onFormatAction("bold");
             handled = true;
         // format italics
-        } else if (modKey && event.key === "i") {
+        } else if (modKey && event.key === Key.I) {
             this._onFormatAction("italics");
             handled = true;
         // format quote
-        } else if (modKey && event.key === ">") {
+        } else if (modKey && event.key === Key.GREATER_THAN) {
             this._onFormatAction("quote");
             handled = true;
         // undo
-        } else if (modKey && event.key === "z") {
+        } else if (modKey && event.key === Key.Z) {
             if (this.historyManager.canUndo()) {
                 const {parts, caret} = this.historyManager.undo(this.props.model);
                 // pass matching inputType so historyManager doesn't push echo
@@ -334,7 +335,7 @@ export default class BasicMessageEditor extends React.Component {
             }
             handled = true;
         // redo
-        } else if (modKey && event.key === "y") {
+        } else if (modKey && event.key === Key.Y) {
             if (this.historyManager.canRedo()) {
                 const {parts, caret} = this.historyManager.redo();
                 // pass matching inputType so historyManager doesn't push echo
@@ -343,7 +344,7 @@ export default class BasicMessageEditor extends React.Component {
             }
             handled = true;
         // insert newline on Shift+Enter
-        } else if (event.key === "Enter" && (event.shiftKey || (IS_MAC && event.altKey))) {
+        } else if (event.key === Key.ENTER && (event.shiftKey || (IS_MAC && event.altKey))) {
             this._insertText("\n");
             handled = true;
         // autocomplete or enter to send below shouldn't have any modifier keys pressed.
@@ -353,25 +354,25 @@ export default class BasicMessageEditor extends React.Component {
             if (model.autoComplete && model.autoComplete.hasCompletions()) {
                 const autoComplete = model.autoComplete;
                 switch (event.key) {
-                    case "ArrowUp":
+                    case Key.ARROW_UP:
                         if (!modifierPressed) {
                             autoComplete.onUpArrow(event);
                             handled = true;
                         }
                         break;
-                    case "ArrowDown":
+                    case Key.ARROW_DOWN:
                         if (!modifierPressed) {
                             autoComplete.onDownArrow(event);
                             handled = true;
                         }
                         break;
-                    case "Tab":
+                    case Key.TAB:
                         if (!metaOrAltPressed) {
                             autoComplete.onTab(event);
                             handled = true;
                         }
                         break;
-                    case "Escape":
+                    case Key.ESCAPE:
                         if (!modifierPressed) {
                             autoComplete.onEscape(event);
                             handled = true;
@@ -380,7 +381,7 @@ export default class BasicMessageEditor extends React.Component {
                     default:
                         return; // don't preventDefault on anything else
                 }
-            } else if (event.key === "Tab") {
+            } else if (event.key === Key.TAB) {
                 this._tabCompleteName();
                 handled = true;
             }

src/components/views/rooms/EditMessageComposer.js

@@ -30,6 +30,7 @@ import {MatrixClient} from 'matrix-js-sdk';
 import classNames from 'classnames';
 import {EventStatus} from 'matrix-js-sdk';
 import BasicMessageComposer from "./BasicMessageComposer";
+import {Key} from "../../../Keyboard";
 
 function _isReply(mxEvent) {
     const relatesTo = mxEvent.getContent()["m.relates_to"];
@@ -134,12 +135,12 @@ export default class EditMessageComposer extends React.Component {
         if (event.metaKey || event.altKey || event.shiftKey) {
             return;
         }
-        if (event.key === "Enter") {
+        if (event.key === Key.ENTER) {
             this._sendEdit();
             event.preventDefault();
-        } else if (event.key === "Escape") {
+        } else if (event.key === Key.ESCAPE) {
             this._cancelEdit();
-        } else if (event.key === "ArrowUp") {
+        } else if (event.key === Key.ARROW_UP) {
             if (this._editorRef.isModified() || !this._editorRef.isCaretAtStart()) {
                 return;
             }
@@ -148,7 +149,7 @@ export default class EditMessageComposer extends React.Component {
                 dis.dispatch({action: 'edit_event', event: previousEvent});
                 event.preventDefault();
             }
-        } else if (event.key === "ArrowDown") {
+        } else if (event.key === Key.ARROW_DOWN) {
             if (this._editorRef.isModified() || !this._editorRef.isCaretAtEnd()) {
                 return;
             }

src/components/views/rooms/SendMessageComposer.js

@@ -39,6 +39,7 @@ import sdk from '../../../index';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
 import ContentMessages from '../../../ContentMessages';
+import {Key} from "../../../Keyboard";
 
 function addReplyToMessageContent(content, repliedToEvent, permalinkCreator) {
     const replyContent = ReplyThread.makeReplyMixIn(repliedToEvent);
@@ -109,12 +110,12 @@ export default class SendMessageComposer extends React.Component {
             return;
         }
         const hasModifier = event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
-        if (event.key === "Enter" && !hasModifier) {
+        if (event.key === Key.ENTER && !hasModifier) {
             this._sendMessage();
             event.preventDefault();
-        } else if (event.key === "ArrowUp") {
+        } else if (event.key === Key.ARROW_UP) {
             this.onVerticalArrow(event, true);
-        } else if (event.key === "ArrowDown") {
+        } else if (event.key === Key.ARROW_DOWN) {
             this.onVerticalArrow(event, false);
         }
     }