feat(flat-pages): join room on pressing enter (#1673)

netless-io · Sep 1, 2022 · 456e906 · 456e906
1 parent b9ab14a
commit 456e906
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/packages/flat-pages/src/HomePage/MainRoomMenu/JoinRoomBox.tsx b/packages/flat-pages/src/HomePage/MainRoomMenu/JoinRoomBox.tsx
@@ -1,6 +1,6 @@
 import "./JoinRoomBox.less";
 
-import React, { useContext, useEffect, useRef, useState } from "react";
+import React, { KeyboardEvent, useContext, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Button, Input, Modal, Checkbox, Form, InputRef } from "antd";
 import { validate, version } from "uuid";
@@ -95,7 +95,11 @@ export const JoinRoomBox = observer<JoinRoomBoxProps>(function JoinRoomBox({ onJ
                         name="roomUUID"
                         rules={[{ required: true, message: t("enter-room-uuid") }]}
                     >
-                        <Input ref={roomTitleInputRef} placeholder={t("enter-room-uuid")} />
+                        <Input
+                            ref={roomTitleInputRef}
+                            placeholder={t("enter-room-uuid")}
+                            onKeyUp={submitOnEnter}
+                        />
                     </Form.Item>
                     <Form.Item label={t("join-options")}>
                         <Form.Item noStyle name="autoMicOn" valuePropName="checked">
@@ -129,6 +133,13 @@ export const JoinRoomBox = observer<JoinRoomBoxProps>(function JoinRoomBox({ onJ
         showModal(true);
     }
 
+    function submitOnEnter(ev: KeyboardEvent<HTMLInputElement>): void {
+        if (ev.key === "Enter" && !ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
+            ev.preventDefault();
+            sp(form.validateFields()).then(handleOk);
+        }
+    }
+
     async function handleOk(): Promise<void> {
         try {
             await sp(form.validateFields());