Spaces:
Paused
Paused
File size: 1,730 Bytes
a0fda44 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
import { AnimatePresence, motion } from "framer-motion";
import { useDispatch } from "react-redux";
import { modalActions } from "../../../store/modalSlice";
function MessageInput({
isRecording,
handleInput,
messageEmpty,
getCaretIndex,
emitTypingEvent,
}) {
const dispatch = useDispatch();
// Ask for confirmation to terminate recording if user is currenly recording a message
const terminateRecording = (event) => {
getCaretIndex(event);
if (isRecording) {
event.currentTarget.blur();
dispatch(modalActions.openModal({ type: "stopRecordModal" }));
}
};
return (
<div
onClick={(event) => {
event.currentTarget.querySelector("#messageInput").click();
}}
className="ml-[1rem] flex-grow min-h-[4rem] flex items-center group relative overflow-x-hidden"
>
{/* Placeholder */}
<AnimatePresence>
{messageEmpty && (
<motion.span
initial={{ left: 40, opacity: 0 }}
animate={{ left: 0, opacity: 1, transition: { duration: 0.3 } }}
exit={{ left: 40, opacity: 0, transition: { duration: 0.3 } }}
className="text-secondary-text absolute top-1/2 -translate-y-1/2 left-0"
>
Message
</motion.span>
)}
</AnimatePresence>
{/* Input */}
<div
id="messageInput"
className="outline-none flex-grow z-10 max-h-[16rem] overflow-y-scroll custom-scrollbar overflow-x-hidden whitespace-pre-wrap"
contentEditable={true}
onInput={handleInput}
onClick={terminateRecording}
onFocus={getCaretIndex}
onKeyDown={emitTypingEvent}
></div>
</div>
);
}
export default MessageInput;
|