58 lines
1.6 KiB
JavaScript
58 lines
1.6 KiB
JavaScript
import { useRef } from "react";
|
|
import Picker from "@emoji-mart/react";
|
|
import emojiData from "@emoji-mart/data";
|
|
import { useClickOutside } from "../../hooks/useClickOutside";
|
|
import { useTheme } from "../../context/ThemeContext";
|
|
|
|
export default function ChatInputBar({
|
|
input,
|
|
onInputChange,
|
|
onSend,
|
|
onEmojiSelect,
|
|
showEmoji,
|
|
onToggleEmoji,
|
|
onCloseEmoji,
|
|
connected,
|
|
placeholder,
|
|
}) {
|
|
const emojiPickerRef = useRef(null);
|
|
useClickOutside(emojiPickerRef, onCloseEmoji, showEmoji);
|
|
const { theme } = useTheme();
|
|
|
|
return (
|
|
<div className="chat-input-area">
|
|
{showEmoji && (
|
|
<div className="chat-emoji-picker" ref={emojiPickerRef}>
|
|
<Picker
|
|
data={emojiData}
|
|
onEmojiSelect={onEmojiSelect}
|
|
theme={theme}
|
|
previewPosition="none"
|
|
skinTonePosition="none"
|
|
searchPosition="sticky"
|
|
maxSearchResults={30}
|
|
perLine={8}
|
|
/>
|
|
</div>
|
|
)}
|
|
<form onSubmit={onSend} className="chat-input-row">
|
|
<input
|
|
value={input}
|
|
onChange={(e) => onInputChange(e.target.value)}
|
|
placeholder={placeholder}
|
|
className="chat-input"
|
|
/>
|
|
<button
|
|
type="button"
|
|
className={`chat-emoji-btn${showEmoji ? " active" : ""}`}
|
|
onClick={onToggleEmoji}
|
|
>
|
|
😊
|
|
</button>
|
|
<button type="submit" className="chat-send-btn" disabled={!connected}>
|
|
➤
|
|
</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
} |