Haina
/
Global-sales
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

todo: scroll

Browse Source
dev/chat
Lei OT 1 year ago
parent a7be72ba9c
commit c9e2c0c69a
3 changed files with 63 additions and 24 deletions
Show Stats Download Patch File Download Diff File

4
src/views/Conversations/ChatWindow.jsx
Unescape Escape View File

@ -3,7 +3,7 @@ import { Layout, Spin, Button } from 'antd';
import { RightCircleOutlined, RightOutlined, ReloadOutlined, MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
// import { useParams, useNavigate } from 'react-router-dom';
import MessagesHeader from './Components/MessagesHeader';
import Messages from './Components/Messages';
import MessagesWrapper from './Components/MessagesWrapper';
import InputComposer from './Components/InputComposer';
import ConversationsList from './Components/ConversationsList';
import CustomerProfile from './Components/CustomerProfile';
@ -51,7 +51,7 @@ const ChatWindow = () => {
<Button type='text' icon={collapsedRight ? <MenuFoldOutlined /> : <MenuUnfoldOutlined />} onClick={() => setCollapsedRight(!collapsedRight)} className=' rounded-none rounded-r' />
</Header>
<Content className="flex-grow bg-whatsapp-bg relative" >
<Messages />
<MessagesWrapper />
</Content>
<Footer className='ant-layout-sider-light p-0'>
<InputComposer />

62
src/views/Conversations/Components/Messages.jsx → src/views/Conversations/Components/MessagesList.jsx
Unescape Escape View File

@ -7,35 +7,53 @@ import { useShallow } from 'zustand/react/shallow';
import { Emoji } from 'emoji-picker-react';
import { isEmpty, olog } from '@/utils/utils';
const Messages = ({ ...props }) => {
// const currentConversation = useConversationStore(useShallow((state) => state.currentConversation));
const MessagesList = ({reference, ...props}) => {
const currentConversation = useConversationStore(useShallow((state) => state.currentConversation));
const setReferenceMsg = useConversationStore(useShallow((state) => state.setReferenceMsg));
const msgListLoading = useConversationStore(useShallow((state) => state.msgListLoading));
const activeMessages = useConversationStore(useShallow((state) => (state.currentConversation.sn ? state.activeConversations[state.currentConversation.sn] : [])));
// const activeMessages = useConversationStore(useShallow((state) => (state.currentConversation.sn ? state.activeConversations[state.currentConversation.sn] : [])));
olog('invoke msg list');
const scrollToMessage = (id, index) => {
const _i = index || activeMessages.findIndex((msg) => msg.id === id);
if (_i >= 0) {
messageRefs.current[_i].current.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
};
// const scrollToMessage = (id, index) => {
// const _i = index || props.dataSource.findIndex((msg) => msg.id === id);
// if (_i >= 0) {
// messageRefs.current[_i].current.scrollIntoView({ behavior: 'smooth', block: 'center' });
// }
// };
const messageRefs = useRef([]);
messageRefs.current = activeMessages.map((_, i) => messageRefs.current[i] ?? createRef());
messageRefs.current = props.dataSource.map((_, i) => messageRefs.current[i] ?? createRef());
const referance = useRef(null);
const toBottom = (e) => {
if (!referance) return;
referance.current.scrollTop = referance.current.scrollHeight;
if (!reference) return;
console.log(reference.current.scrollHeight, reference.current.scrollTop, reference.current.offsetHeight, 'hhhhhhhh');
reference.current.scrollTop = reference.current.scrollHeight - reference.current.offsetHeight;
};
// useEffect(() => {
// if (dataSource.length > 0) {
// // toBottom();
// scrollToMessage(null, dataSource.length - 1);
// }
// }, [dataSource]);
const prevProps = useRef(props)
const getBottom = (e) => {
if (e.current) return e.current.scrollHeight - e.current.scrollTop - e.current.offsetHeight
return e.scrollHeight - e.scrollTop - e.offsetHeight
}
useEffect(() => {
if (activeMessages.length > 0) {
// toBottom();
scrollToMessage(null, activeMessages.length - 1);
// if (!reference) return
if (prevProps.current.dataSource.length !== props.dataSource.length) {
olog(reference.current.scrollHeight, reference.current.scrollTop, 'hhhhhhhh')
// reference.current.scrollTop = reference.current.scrollHeight
toBottom();
}
}, [activeMessages]);
prevProps.current = props
}, [prevProps, props])
const [previewVisible, setPreviewVisible] = useState(false);
const [previewSrc, setPreviewSrc] = useState();
@ -62,8 +80,8 @@ const Messages = ({ ...props }) => {
const RenderText = memo(function renderText({ str }) {
const parts = str.split(/(https?:\/\/[^\s]+|\p{Emoji_Presentation})/gmu).filter(s => s !== '');
const links = str.match(/https?:\/\/[\S]+/gi) || [];
const emojis = str.match(/\p{Emoji_Presentation}/gu) || [];
const extraClass = isEmpty(emojis) ? '' : 'text-xl leading-5 emoji-text';
const emojis = str.match(/([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g) || [];
const extraClass = isEmpty(emojis) ? '' : 'text-base leading-5 emoji-text';
const objArr = parts.reduce((prev, curr, index) => {
if (links.includes(curr)) {
prev.push({ type: 'link', key: curr });
@ -99,9 +117,9 @@ const Messages = ({ ...props }) => {
return (
<div className='relative h-full overflow-y-auto flex'>
<div className='relative overflow-y-auto block flex-1' ref={referance}>
<div className='relative overflow-y-auto block flex-1' ref={reference}>
<Spin spinning={msgListLoading} tip={'正在读取...'} wrapperClassName='pt-8 relative'>
{activeMessages.map((message, index) => (
{props.dataSource.map((message, index) => (
// <Dropdown
// key={message.id}
// menu={{
@ -124,7 +142,7 @@ const Messages = ({ ...props }) => {
{...message}
position={message.sender === 'me' ? 'right' : 'left'}
onReplyClick={() => setReferenceMsg(message)}
onReplyMessageClick={() => scrollToMessage(message.reply.id)}
// onReplyMessageClick={() => scrollToMessage(message.reply.id)}
onOpen={() => handlePreview(message)}
onTitleClick={() => handlePreview(message)}
text={<RenderText str={message?.text || ''} />}
@ -150,4 +168,4 @@ const Messages = ({ ...props }) => {
);
};
export default Messages;
export default MessagesList;

21
src/views/Conversations/Components/MessagesWrapper.jsx
Unescape Escape View File

@ -0,0 +1,21 @@
import { useEffect, useState, useRef, useMemo, memo, createRef, forwardRef } from 'react';
import { Image, Spin, Dropdown, Button, Affix } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import { MessageBox } from 'react-chat-elements';
import useConversationStore from '@/stores/ConversationStore';
import { useShallow } from 'zustand/react/shallow';
import { Emoji } from 'emoji-picker-react';
import { isEmpty, olog } from '@/utils/utils';
import MessagesList from './MessagesList';
const MessagesWrapper = () => {
const activeMessages = useConversationStore(useShallow((state) => (state.currentConversation.sn ? state.activeConversations[state.currentConversation.sn] : [])));
const reference = useRef(null);
return (
<>
<MessagesList dataSource={activeMessages} reference={reference} />
</>
);
};
export default MessagesWrapper;
Write Preview
Loading…
Cancel
Save