[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 { useMessage } from "@logics/useMessage";
|
||||||
import { store, useEnableAutoClearMessageBox } from "@store";
|
import { store, useEnableAutoClearMessageBox } from "@store";
|
||||||
import { scrollToBottom } from "@logics/scrollToBottom";
|
import { scrollToBottom } from "@logics/scrollToBottom";
|
||||||
|
import { useConfig } from "@logics/useConfig";
|
||||||
|
|
||||||
export const MessageInputBox = () => {
|
export const MessageInputBox = () => {
|
||||||
const [inputValue, setInputValue] = useState("");
|
const [inputValue, setInputValue] = useState("");
|
||||||
const { sendMessage } = useMessage();
|
const { sendMessage } = useMessage();
|
||||||
|
|
||||||
const { currentEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
|
const { currentEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
|
||||||
|
const { currentSendMessageButtonType } = useConfig();
|
||||||
|
|
||||||
const onSubmitFunction = (e) => {
|
const onSubmitFunction = (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@@ -28,6 +29,13 @@ export const MessageInputBox = () => {
|
|||||||
setInputValue(e.currentTarget.value);
|
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 (
|
return (
|
||||||
<div className={styles.container}>
|
<div className={styles.container}>
|
||||||
<div className={styles.message_box_wrapper}>
|
<div className={styles.message_box_wrapper}>
|
||||||
@@ -36,15 +44,23 @@ export const MessageInputBox = () => {
|
|||||||
onChange={onChangeFunction}
|
onChange={onChangeFunction}
|
||||||
placeholder="Input Textfield"
|
placeholder="Input Textfield"
|
||||||
value={inputValue}
|
value={inputValue}
|
||||||
|
onKeyDown={onKeyDownFunction}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<button
|
{ currentSendMessageButtonType.data !== "hide" && <SendMessageButton onSubmitFunction={onSubmitFunction}/> }
|
||||||
className={styles.message_send_button}
|
|
||||||
type="button"
|
|
||||||
onClick={onSubmitFunction}
|
|
||||||
>
|
|
||||||
<SendMessageSvg className={styles.message_send_icon} />
|
|
||||||
</button>
|
|
||||||
</div>
|
</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