chat page Sending Message And Scroll bar done

main
Pedram Keshavarzi 2 years ago
parent ddff6172a9
commit 736d0d4dbf
  1. 3
      src/App.css
  2. 67
      src/view/chatPage/index.js

@ -12,6 +12,9 @@ input::-webkit-inner-spin-button {
.rtl{
direction: rtl;
}
.ltr{
direction: ltr;
}
/* width */
::-webkit-scrollbar {
width: 5px;

@ -22,6 +22,8 @@ const ChatPage = ({
}) => {
const navigate = useNavigate();
const messagesEndRef = useRef(null)
const [thisMessages, setMessages] = useState(messages);
const [inputVal, setInpuVal] = useState('')
const [contacts] = useState([
{
id: 1,
@ -101,10 +103,14 @@ const ChatPage = ({
useEffect(() => {
messagesEndRef.current.scrollIntoView({behavior: 'smooth'})
}, [])
useEffect(() => {
messagesEndRef.current.scrollIntoView({behavior: 'smooth'})
}, [thisMessages])
const textareaHanler=(e)=>{
e.target.style.height = `3rem`;
let scHeight = e.target.scrollHeight;
e.target.style.height = `${scHeight}px`;
}
return(isMobile ?
<div className="w-full flex flex-col items-center py-20">
@ -113,7 +119,7 @@ const ChatPage = ({
</div>
{
messages.map((message) => (
thisMessages.map((message) => (
<div className={`w-full p-5 flex ${message.userId == user.id && 'rtl'}`}>
{message.userId == contact.id && <img src={message.userId == contact.id ? contact.avatar : user.avatar} className={`w-12 h-12 rounded-full ${message.userId == user.id ? 'ml-2' : 'mr-2'}`}/>}
<div className={`${message.userId == user.id ? 'bg-blue-200 text-gray-500 text-sm rounded-tr-none' : 'bg-blue-400 text-gray-100 text-sm rounded-tl-none'} p-3 rounded-xl text-right flex flex-col `}>
@ -146,12 +152,31 @@ const ChatPage = ({
className="Messages-main-box-footer-textarea w-full bg-transparent h-12 max-h-72 pr-6 outline-0 pt-3"
style={{ resize: "none", direction: "rtl" }}
placeholder="پیام..."
onKeyUp={(e) => textareaHanler(e)}
// onKeyUp={(e) => textareaHanler(e)}
onKeyDown={(e) => {
if(e.key === 'Enter'){
setMessages([...messages, {
value: 'عالیه',
status: 1,
sendTime: '13:41',
userId: 2,
}])
console.log(thisMessages)}
}}
></textarea>
<img
src={sendIcon}
alt="sendIcon"
className=" bg-transparent"
onClick={() => {setMessages([...messages, {
value: 'عالیه',
status: 1,
sendTime: '13:41',
userId: 2,
}])
console.log(thisMessages)}
}
/>
</div>
</div> :
@ -162,10 +187,10 @@ const ChatPage = ({
<div className="Messages-main-box-header-name">امیر ناظمی</div>
</div>
<div className="Messages-main-box-chat-box w-full h-[84%] flex items-ceter flex-col overflow-hidden overflow-scroll overflow-x-hidden justify-between px-4">
<div className="Messages-main-box-chat-box w-full h-[84%] rtl flex items-ceter flex-col overflow-hidden overflow-scroll overflow-x-hidden justify-between px-4">
{
messages.map((message) => (
<div className={`w-full p-5 flex ${message.userId == user.id && 'rtl'}`}>
thisMessages.map((message) => (
<div className={`w-full p-5 flex ${message.userId !== user.id && 'ltr'}`}>
{message.userId == contact.id && <img src={message.userId == contact.id ? contact.avatar : user.avatar} className={`w-12 h-12 rounded-full ${message.userId == user.id ? 'ml-2' : 'mr-2'}`}/>}
<div className={`${message.userId == user.id ? 'bg-blue-200 text-gray-500 text-sm rounded-tr-none' : 'bg-blue-400 text-gray-100 text-sm rounded-tl-none'} p-3 rounded-xl text-right flex flex-col `} style={{maxWidth: '50%'}}>
<p>{message.value}</p>
@ -199,12 +224,40 @@ const ChatPage = ({
className="Messages-main-box-footer-textarea w-[93%] h-12 max-h-72 pr-4 outline-0 pt-2"
style={{ resize: "none", direction: "rtl" }}
placeholder="پیام..."
onKeyUp={(e) => textareaHanler(e)}
// onKeyUp={(e) => textareaHanler(e)}
onKeyUp={(e) => {
if(e.key === 'Enter' && e.ctrlKey){
setMessages([...thisMessages, {
value: e.target.value,
status: 1,
sendTime: '13:41',
userId: 2,
}])
console.log(thisMessages)
setInpuVal('')
}
}
}
value={inputVal}
onChange={(e) => setInpuVal(e.target.value)}
></textarea>
<img
src={sendIcon}
alt="sendIcon"
className="absolute w-8 bottom-[25%] left-24"
className="absolute w-8 cursor-pointer bottom-[25%] left-24"
onClick={() => {setMessages([...thisMessages, {
value: document.getElementById("Messages-main-box-footer-textarea").value,
status: 1,
sendTime: '13:41',
userId: 2,
}])
console.log(thisMessages)
setInpuVal('')
}
}
/>
</div>
</div>

Loading…
Cancel
Save