[Update] Main Page: Message Input Box. Add function, changeable the send button "hide", "show", "show_and_disable_enter_key".
This commit is contained in:
@@ -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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user