Merge pull request #32 from Liberluna/enter-submit

送信関係の修正
Liberluna · Jun 18, 2023 · fb10d3d · fb10d3d
2 parents f99ae14 + 5f10b74
commit fb10d3d
Showing 1 changed file with 31 additions and 16 deletions.
diff --git a/islands/Room.tsx b/islands/Room.tsx
@@ -79,8 +79,24 @@ export default class extends Component {
         inp.current.value += " >>" + msg + " ";
       }
     }
+    const [canSubmit, setCanSubmit] = useState(false) // 送信可能か
+    const sendMessage = (): void => {
+      if(!(inp.current?.value)){
+        return
+      }
+      this.state.socket.emit("message", {
+        body: inp.current?.value,
+        room: this.byProps.roomId,
+        uuid: crypto.randomUUID(),
+      })
+      if (inp.current) {
+        // 文字の消去
+        inp.current.value = ""
+      }
+      setCanSubmit(false)
+    }
+    const [isOpenMenu, setIsOpenMenu] = useState(false)  // メニューがオンか
 
-    const [isOpenMenu, setIsOpenMenu] = useState(false)
     return (
       <>
         <div class="relative w-full h-full">
@@ -91,27 +107,26 @@ export default class extends Component {
             <input
               ref={inp}
               placeholder="message"
+              onKeyDown={(e)=>{
+                if(e.key.toLowerCase() === "enter"){
+                  // Enter
+                  sendMessage()
+                }
+              }}
+              onInput={(e)=>{
+                setCanSubmit(e.target.value !== "")
+              }}
               class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
             />
             <button
               onClick={() => {
-                if (inp.current?.value === "") {
-                  alert(
-                    "送信できませんでした。 送信内容が空の可能性が有ります。"
-                  );
-                  return;
-                }
-                this.state.socket.emit("message", {
-                  body: inp.current?.value,
-                  room: this.byProps.roomId,
-                  uuid: crypto.randomUUID(),
-                })
-                if (inp.current) {
-                  // 文字の消去
-                  inp.current.value = ""
-                }
+                sendMessage()
               }}
               class="mx-5 bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"
+              disabled={!canSubmit}
+              style={{
+                opacity: canSubmit ? 1 : 0.5
+              }}
             >
               <IconSend />
             </button>