From a4d7e886d538208a7e75cc256ddfdba35c049183 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Sun, 8 Sep 2024 23:52:00 +0900
Subject: [PATCH] [Update] Main Page: Message Input Box. Add function,
 changeable the send button "hide", "show", "show_and_disable_enter_key".

---
 .../message_input_box/MessageInputBox.jsx     | 32 ++++++++++++++-----
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx b/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
index 9664dced..dfffc2cb 100644
--- a/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
+++ b/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
@@ -4,13 +4,14 @@ import SendMessageSvg from "@images/send_message.svg?react";
 import { useMessage } from "@logics/useMessage";
 import { store, useEnableAutoClearMessageBox } from "@store";
 import { scrollToBottom } from "@logics/scrollToBottom";
-
+import { useConfig } from "@logics/useConfig";
 
 export const MessageInputBox = () => {
     const [inputValue, setInputValue] = useState("");
     const { sendMessage } = useMessage();
 
     const { currentEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
+    const { currentSendMessageButtonType } = useConfig();
 
     const onSubmitFunction = (e) => {
         e.preventDefault();
@@ -28,6 +29,13 @@ export const MessageInputBox = () => {
         setInputValue(e.currentTarget.value);
     };
 
+    const onKeyDownFunction = (e) => {
+        if (currentSendMessageButtonType.data === "show_and_disable_enter_key") return;
+        if (e.keyCode == 13 && e.shiftKey == false) {
+            onSubmitFunction(e);
+        }
+    };
+
     return (
         <div className={styles.container}>
             <div className={styles.message_box_wrapper}>
@@ -36,15 +44,23 @@ export const MessageInputBox = () => {
                     onChange={onChangeFunction}
                     placeholder="Input Textfield"
                     value={inputValue}
+                    onKeyDown={onKeyDownFunction}
                 />
             </div>
-            <button
-                className={styles.message_send_button}
-                type="button"
-                onClick={onSubmitFunction}
-            >
-                <SendMessageSvg className={styles.message_send_icon} />
-            </button>
+            { currentSendMessageButtonType.data !== "hide" && <SendMessageButton onSubmitFunction={onSubmitFunction}/> }
         </div>
     );
 };
+
+
+const SendMessageButton = ({onSubmitFunction}) => {
+    return (
+        <button
+            className={styles.message_send_button}
+            type="button"
+            onClick={onSubmitFunction}
+        >
+            <SendMessageSvg className={styles.message_send_icon} />
+        </button>
+    );
+};
\ No newline at end of file