From fe81fcb8c65e1959a91c23cd2340544e8f06e8bb Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Fri, 1 Dec 2017 10:30:49 +0000 Subject: [PATCH] Factor out isCtrlOrCmdKeyEvent, use that in TagPanel as opposed to the incorrect ctrl || meta --- src/{KeyCode.js => Keyboard.js} | 12 +++++++++++- src/components/structures/LoggedInView.js | 10 ++-------- src/components/structures/RoomView.js | 10 ++-------- src/components/structures/TagPanel.js | 3 ++- src/components/views/dialogs/BaseDialog.js | 2 +- src/components/views/dialogs/SetMxIdDialog.js | 2 +- src/components/views/rooms/ForwardMessage.js | 2 +- src/components/views/rooms/MessageComposerInput.js | 10 ++-------- 8 files changed, 22 insertions(+), 29 deletions(-) rename src/{KeyCode.js => Keyboard.js} (77%) diff --git a/src/KeyCode.js b/src/Keyboard.js similarity index 77% rename from src/KeyCode.js rename to src/Keyboard.js index ec5595b71b..50ed78e063 100644 --- a/src/KeyCode.js +++ b/src/Keyboard.js @@ -1,5 +1,6 @@ /* Copyright 2016 OpenMarket Ltd +Copyright 2017 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -15,7 +16,7 @@ limitations under the License. */ /* a selection of key codes, as used in KeyboardEvent.keyCode */ -module.exports = { +export const KeyCode = { BACKSPACE: 8, TAB: 9, ENTER: 13, @@ -58,3 +59,12 @@ module.exports = { KEY_Y: 89, KEY_Z: 90, }; + +export function isCtrlOrCmdKeyEvent(ev) { + const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0; + if (isMac) { + return ev.metaKey && !ev.altKey && !ev.ctrlKey && !ev.shiftKey; + } else { + return ev.ctrlKey && !ev.altKey && !ev.metaKey && !ev.shiftKey; + } +} diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js index 2f0ee5e47d..89971eb5eb 100644 --- a/src/components/structures/LoggedInView.js +++ b/src/components/structures/LoggedInView.js @@ -19,7 +19,7 @@ limitations under the License. import * as Matrix from 'matrix-js-sdk'; import React from 'react'; -import KeyCode from '../../KeyCode'; +import { KeyCode, isCtrlOrCmdKeyEvent } from '../../Keyboard'; import Notifier from '../../Notifier'; import PageTypes from '../../PageTypes'; import CallMediaHandler from '../../CallMediaHandler'; @@ -153,13 +153,7 @@ export default React.createClass({ */ let handled = false; - const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0; - let ctrlCmdOnly; - if (isMac) { - ctrlCmdOnly = ev.metaKey && !ev.altKey && !ev.ctrlKey && !ev.shiftKey; - } else { - ctrlCmdOnly = ev.ctrlKey && !ev.altKey && !ev.metaKey && !ev.shiftKey; - } + const ctrlCmdOnly = isCtrlOrCmdKeyEvent(ev); switch (ev.keyCode) { case KeyCode.UP: diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index 1381b4fce0..e506a3fd00 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -41,7 +41,7 @@ const rate_limited_func = require('../../ratelimitedfunc'); const ObjectUtils = require('../../ObjectUtils'); const Rooms = require('../../Rooms'); -import KeyCode from '../../KeyCode'; +import { KeyCode, isCtrlOrCmdKeyEvent } from '../../Keyboard'; import RoomViewStore from '../../stores/RoomViewStore'; import RoomScrollStateStore from '../../stores/RoomScrollStateStore'; @@ -433,13 +433,7 @@ module.exports = React.createClass({ onKeyDown: function(ev) { let handled = false; - const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0; - let ctrlCmdOnly; - if (isMac) { - ctrlCmdOnly = ev.metaKey && !ev.altKey && !ev.ctrlKey && !ev.shiftKey; - } else { - ctrlCmdOnly = ev.ctrlKey && !ev.altKey && !ev.metaKey && !ev.shiftKey; - } + const ctrlCmdOnly = isCtrlOrCmdKeyEvent(ev); switch (ev.keyCode) { case KeyCode.KEY_D: diff --git a/src/components/structures/TagPanel.js b/src/components/structures/TagPanel.js index a275f5864a..fb92ec52d6 100644 --- a/src/components/structures/TagPanel.js +++ b/src/components/structures/TagPanel.js @@ -22,6 +22,7 @@ import FilterStore from '../../stores/FilterStore'; import FlairStore from '../../stores/FlairStore'; import sdk from '../../index'; import dis from '../../dispatcher'; +import { isCtrlOrCmdKeyEvent } from '../../Keyboard'; const TagTile = React.createClass({ displayName: 'TagTile', @@ -50,7 +51,7 @@ const TagTile = React.createClass({ dis.dispatch({ action: 'select_tag', tag: this.props.groupProfile.groupId, - ctrlOrCmdKey: e.metaKey || e.ctrlKey, + ctrlOrCmdKey: isCtrlOrCmdKeyEvent(e), shiftKey: e.shiftKey, }); }, diff --git a/src/components/views/dialogs/BaseDialog.js b/src/components/views/dialogs/BaseDialog.js index 295bb21ea1..b88a6c026e 100644 --- a/src/components/views/dialogs/BaseDialog.js +++ b/src/components/views/dialogs/BaseDialog.js @@ -16,7 +16,7 @@ limitations under the License. import React from 'react'; -import * as KeyCode from '../../../KeyCode'; +import { KeyCode } from '../../../Keyboard'; import AccessibleButton from '../elements/AccessibleButton'; import sdk from '../../../index'; diff --git a/src/components/views/dialogs/SetMxIdDialog.js b/src/components/views/dialogs/SetMxIdDialog.js index 6fc1d77682..3ffafb0659 100644 --- a/src/components/views/dialogs/SetMxIdDialog.js +++ b/src/components/views/dialogs/SetMxIdDialog.js @@ -20,7 +20,7 @@ import React from 'react'; import sdk from '../../../index'; import MatrixClientPeg from '../../../MatrixClientPeg'; import classnames from 'classnames'; -import KeyCode from '../../../KeyCode'; +import { KeyCode } from '../../../Keyboard'; import { _t } from '../../../languageHandler'; // The amount of time to wait for further changes to the input username before diff --git a/src/components/views/rooms/ForwardMessage.js b/src/components/views/rooms/ForwardMessage.js index b0fba12865..6f9d1d0b69 100644 --- a/src/components/views/rooms/ForwardMessage.js +++ b/src/components/views/rooms/ForwardMessage.js @@ -18,7 +18,7 @@ import React from 'react'; import { _t } from '../../../languageHandler'; import dis from '../../../dispatcher'; -import KeyCode from '../../../KeyCode'; +import { KeyCode } from '../../../Keyboard'; module.exports = React.createClass({ diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js index 4e8228beec..8b222d1ef2 100644 --- a/src/components/views/rooms/MessageComposerInput.js +++ b/src/components/views/rooms/MessageComposerInput.js @@ -28,7 +28,7 @@ import Promise from 'bluebird'; import MatrixClientPeg from '../../../MatrixClientPeg'; import type {MatrixClient} from 'matrix-js-sdk/lib/matrix'; import SlashCommands from '../../../SlashCommands'; -import KeyCode from '../../../KeyCode'; +import { KeyCode, isCtrlOrCmdKeyEvent } from '../../../Keyboard'; import Modal from '../../../Modal'; import sdk from '../../../index'; import { _t, _td } from '../../../languageHandler'; @@ -105,13 +105,7 @@ export default class MessageComposerInput extends React.Component { }; static getKeyBinding(ev: SyntheticKeyboardEvent): string { - const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0; - let ctrlCmdOnly; - if (isMac) { - ctrlCmdOnly = ev.metaKey && !ev.altKey && !ev.ctrlKey && !ev.shiftKey; - } else { - ctrlCmdOnly = ev.ctrlKey && !ev.altKey && !ev.metaKey && !ev.shiftKey; - } + const ctrlCmdOnly = isCtrlOrCmdKeyEvent(ev); // Restrict a subset of key bindings to ONLY having ctrl/meta* pressed and // importantly NOT having alt, shift, meta/ctrl* pressed. draft-js does not