mirror of https://github.com/vector-im/riot-web
Use Keyboard Key variables instead of hardcoded strings
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>pull/21833/head
parent
84e71297ef
commit
58317b1608
|
@ -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) {
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
},
|
||||
|
|
|
@ -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,
|
||||
}, () => {
|
||||
|
|
|
@ -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();
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue