Make use of the KeyBindingManager in LeftPanel

LeftPanel was making key action decisions based on the forwarded event.
Use the KeyBindingManager now.

Signed-off-by: Clemens Zeidler <[email protected]>

Author: czeidler

src/components/structures/LeftPanel.tsx

@@ -34,7 +34,6 @@ import { UPDATE_EVENT } from "../../stores/AsyncStore";
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import SettingsStore from "../../settings/SettingsStore";
 import RoomListStore, { LISTS_UPDATE_EVENT } from "../../stores/room-list/RoomListStore";
-import {Key} from "../../Keyboard";
 import IndicatorScrollbar from "../structures/IndicatorScrollbar";
 import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
 import { OwnProfileStore } from "../../stores/OwnProfileStore";
@@ -43,6 +42,7 @@ import LeftPanelWidget from "./LeftPanelWidget";
 import {replaceableComponent} from "../../utils/replaceableComponent";
 import {mediaFromMxc} from "../../customisations/Media";
 import SpaceStore, {UPDATE_SELECTED_SPACE} from "../../stores/SpaceStore";
+import { getKeyBindingsManager, RoomListAction } from "../../KeyBindingsManager";
 
 interface IProps {
     isMinimized: boolean;
@@ -297,17 +297,18 @@ export default class LeftPanel extends React.Component<IProps, IState> {
     private onKeyDown = (ev: React.KeyboardEvent) => {
         if (!this.focusedElement) return;
 
-        switch (ev.key) {
-            case Key.ARROW_UP:
-            case Key.ARROW_DOWN:
+        const action = getKeyBindingsManager().getRoomListAction(ev);
+        switch (action) {
+            case RoomListAction.NextRoom:
+            case RoomListAction.PrevRoom:
                 ev.stopPropagation();
                 ev.preventDefault();
-                this.onMoveFocus(ev.key === Key.ARROW_UP);
+                this.onMoveFocus(action === RoomListAction.PrevRoom);
                 break;
         }
     };
 
-    private onEnter = () => {
+    private selectRoom = () => {
         const firstRoom = this.listContainerRef.current.querySelector<HTMLDivElement>(".mx_RoomTile");
         if (firstRoom) {
             firstRoom.click();
@@ -388,8 +389,8 @@ export default class LeftPanel extends React.Component<IProps, IState> {
             >
                 <RoomSearch
                     isMinimized={this.props.isMinimized}
-                    onVerticalArrow={this.onKeyDown}
-                    onEnter={this.onEnter}
+                    onKeyDown={this.onKeyDown}
+                    onSelectRoom={this.selectRoom}
                 />
                 <AccessibleTooltipButton
                     className={classNames("mx_LeftPanel_exploreButton", {

src/components/structures/RoomSearch.tsx

@@ -30,8 +30,11 @@ import SpaceStore, {UPDATE_SELECTED_SPACE} from "../../stores/SpaceStore";
 
 interface IProps {
     isMinimized: boolean;
-    onVerticalArrow(ev: React.KeyboardEvent): void;
-    onEnter(ev: React.KeyboardEvent): boolean;
+    onKeyDown(ev: React.KeyboardEvent): void;
+    /**
+     * @returns true if a room has been selected and the search field should be cleared
+     */
+    onSelectRoom(): boolean;
 }
 
 interface IState {
@@ -120,10 +123,11 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
                 break;
             case RoomListAction.NextRoom:
             case RoomListAction.PrevRoom:
-                this.props.onVerticalArrow(ev);
+                // we don't handle these actions here put pass the event on to the interested party (LeftPanel)
+                this.props.onKeyDown(ev);
                 break;
             case RoomListAction.SelectRoom: {
-                const shouldClear = this.props.onEnter(ev);
+                const shouldClear = this.props.onSelectRoom();
                 if (shouldClear) {
                     // wrap in set immediate to delay it so that we don't clear the filter & then change room
                     setImmediate(() => {