mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-10-24 19:55:54 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #3540 from matrix-org/t3chguy/use_Keyboard.Key

Browse source 
Use Keyboard Key consts instead of hardcoded strings
This commit is contained in:
Michael Telatynski 2019-10-10 09:13:05 +01:00 committed by GitHub
commit 61654a338c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 51 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/Keyboard.js
View file

@ -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) {

2
src/components/structures/LoggedInView.js
View file

@ -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:

3
src/components/views/dialogs/CreateRoomDialog.js
View file

@ -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();

5
src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js
View file

@ -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();
}
},

9
src/components/views/elements/EditableText.js
View file

@ -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,
}, () => {

3
src/components/views/elements/PowerSelector.js
View file

@ -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();

23
src/components/views/rooms/BasicMessageComposer.js
View file

@ -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;
}

9
src/components/views/rooms/EditMessageComposer.js
View file

@ -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;
}

7
src/components/views/rooms/SendMessageComposer.js
View file

@ -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);
}
}