[Update] Main Page: Message Input Box. Add function, changeable the send button "hide", "show", "show_and_disable_enter_key".

This commit is contained in:
Sakamoto Shiina
2024-09-08 23:52:00 +09:00
parent 2b9061d74d
commit a4d7e886d5

View File

@@ -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>
);
};