From 4fe4e10abb55d4735ecb3159731c77ea4f829981 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Wed, 12 Jul 2017 13:49:57 +0100 Subject: [PATCH 1/4] Implement the focus_room_filter action This is for ctrl+k room filtering and switching --- src/components/structures/SearchBox.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js index 99c448669..6e47f7a57 100644 --- a/src/components/structures/SearchBox.js +++ b/src/components/structures/SearchBox.js @@ -46,18 +46,22 @@ module.exports = React.createClass({ }, onAction: function(payload) { - // Disabling this as I find it really really annoying, and was used to the - // previous behaviour - see https://github.com/vector-im/riot-web/issues/3348 -/* switch (payload.action) { +/* Disabling this as I find it really really annoying, and was used to the + previous behaviour - see https://github.com/vector-im/riot-web/issues/3348 // Clear up the text field when a room is selected. case 'view_room': if (this.refs.search) { this._clearSearch(); } break; +*/ + case 'focus_room_filter': + if (this.refs.search) { + this.refs.search.focus(); + } + break; } -*/ }, onChange: function() { From 41cd238e0221f7243d83aeb8daca927c30fe165f Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Wed, 12 Jul 2017 17:10:43 +0100 Subject: [PATCH 2/4] Update to reflect previous implementation Which was https://github.com/vector-im/riot-web/pull/3654/commits/a74bbb424c7c07494d71329e8d4c6ef9fc37a7b9 --- src/components/structures/RoomSubList.js | 4 ++- src/components/structures/SearchBox.js | 33 ++++++++++++++++-------- 2 files changed, 25 insertions(+), 12 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 092ed9cca..17febe02c 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -30,6 +30,7 @@ var RoomNotifs = require('matrix-react-sdk/lib/RoomNotifs'); var FormattingUtils = require('matrix-react-sdk/lib/utils/FormattingUtils'); var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton'); import Modal from 'matrix-react-sdk/lib/Modal'; +import KeyCode from 'matrix-react-sdk/lib/KeyCode'; // turn this on for drop & drag console debugging galore var debug = false; @@ -151,10 +152,11 @@ var RoomSubList = React.createClass({ } }, - onRoomTileClick(roomId) { + onRoomTileClick(roomId, ev) { dis.dispatch({ action: 'view_room', room_id: roomId, + clear_search: (ev && (ev.keyCode == KeyCode.ENTER || ev.keyCode == KeyCode.SPACE)), }); }, diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js index 6e47f7a57..e35d1e489 100644 --- a/src/components/structures/SearchBox.js +++ b/src/components/structures/SearchBox.js @@ -16,12 +16,13 @@ limitations under the License. 'use strict'; -var React = require('react'); +import React from 'react'; import { _t } from 'matrix-react-sdk/lib/languageHandler'; -var sdk = require('matrix-react-sdk') -var dis = require('matrix-react-sdk/lib/dispatcher'); -var rate_limited_func = require('matrix-react-sdk/lib/ratelimitedfunc'); -var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton'); +import KeyCode from 'matrix-react-sdk/lib/KeyCode'; +import sdk from 'matrix-react-sdk'; +import dis from 'matrix-react-sdk/lib/dispatcher'; +import RateLimitedFunc from 'matrix-react-sdk/lib/ratelimitedfunc'; +import AccessibleButton from 'matrix-react-sdk/lib/components/views/elements/AccessibleButton'; module.exports = React.createClass({ displayName: 'SearchBox', @@ -39,26 +40,25 @@ module.exports = React.createClass({ componentDidMount: function() { this.dispatcherRef = dis.register(this.onAction); + document.addEventListener('keydown', this._onKeyDown); }, componentWillUnmount: function() { dis.unregister(this.dispatcherRef); + document.removeEventListener('keydown', this._onKeyDown); }, onAction: function(payload) { switch (payload.action) { -/* Disabling this as I find it really really annoying, and was used to the - previous behaviour - see https://github.com/vector-im/riot-web/issues/3348 - // Clear up the text field when a room is selected. case 'view_room': - if (this.refs.search) { + if (this.refs.search && payload.clear_search) { this._clearSearch(); } break; -*/ case 'focus_room_filter': if (this.refs.search) { this.refs.search.focus(); + this.refs.search.select(); } break; } @@ -70,7 +70,7 @@ module.exports = React.createClass({ this.onSearch(); }, - onSearch: new rate_limited_func( + onSearch: new RateLimitedFunc( function() { this.props.onSearch(this.refs.search.value); }, @@ -90,6 +90,17 @@ module.exports = React.createClass({ } }, + _onKeyDown: function(ev) { + // Only do anything when the key event target is the search input + if(ev.target !== this.refs.search) return; + switch (ev.keyCode) { + case KeyCode.ESCAPE: + this._clearSearch(); + dis.dispatch({action: 'focus_composer'}); + break; + } + }, + _clearSearch: function() { this.refs.search.value = ""; this.onChange(); From 3e1a909b1d2ae7e6bea24514723c214dd2d845ef Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Wed, 12 Jul 2017 17:46:27 +0100 Subject: [PATCH 3/4] Just use the onKeyDown of the --- src/components/structures/SearchBox.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js index e35d1e489..0499e6019 100644 --- a/src/components/structures/SearchBox.js +++ b/src/components/structures/SearchBox.js @@ -40,12 +40,10 @@ module.exports = React.createClass({ componentDidMount: function() { this.dispatcherRef = dis.register(this.onAction); - document.addEventListener('keydown', this._onKeyDown); }, componentWillUnmount: function() { dis.unregister(this.dispatcherRef); - document.removeEventListener('keydown', this._onKeyDown); }, onAction: function(payload) { @@ -91,8 +89,6 @@ module.exports = React.createClass({ }, _onKeyDown: function(ev) { - // Only do anything when the key event target is the search input - if(ev.target !== this.refs.search) return; switch (ev.keyCode) { case KeyCode.ESCAPE: this._clearSearch(); @@ -150,6 +146,7 @@ module.exports = React.createClass({ className="mx_SearchBox_search" value={ this.state.searchTerm } onChange={ this.onChange } + onKeyDown={ this._onKeyDown } placeholder={ _t('Filter room names') } /> ]; From 188a58e5c7b49ad99f89613affea86d7604b8bd9 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Wed, 12 Jul 2017 18:18:13 +0100 Subject: [PATCH 4/4] RateLimitedFunc -> rate_limited_func --- src/components/structures/SearchBox.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js index 0499e6019..7de3958a5 100644 --- a/src/components/structures/SearchBox.js +++ b/src/components/structures/SearchBox.js @@ -21,7 +21,7 @@ import { _t } from 'matrix-react-sdk/lib/languageHandler'; import KeyCode from 'matrix-react-sdk/lib/KeyCode'; import sdk from 'matrix-react-sdk'; import dis from 'matrix-react-sdk/lib/dispatcher'; -import RateLimitedFunc from 'matrix-react-sdk/lib/ratelimitedfunc'; +import rate_limited_func from 'matrix-react-sdk/lib/ratelimitedfunc'; import AccessibleButton from 'matrix-react-sdk/lib/components/views/elements/AccessibleButton'; module.exports = React.createClass({ @@ -68,7 +68,7 @@ module.exports = React.createClass({ this.onSearch(); }, - onSearch: new RateLimitedFunc( + onSearch: new rate_limited_func( function() { this.props.onSearch(this.refs.search.value); },