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

删除 消息记录的loading

Browse Source
dev/chat
Lei OT 2 years ago
parent c9e2c0c69a
commit a9f9e08553
2 changed files with 65 additions and 93 deletions
Show Stats Download Patch File Download Diff File

61
src/views/Conversations/Components/MessagesList.jsx
Unescape Escape View File

@ -1,59 +1,37 @@
import { useEffect, useState, useRef, useMemo, memo, createRef, forwardRef } from 'react';
import { Image, Spin, Dropdown, Button, Affix } from 'antd';
import { useEffect, useState, useRef, memo, createRef, forwardRef } from 'react';
import { Image, Button } 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';
const MessagesList = ({reference, ...props}) => {
const currentConversation = useConversationStore(useShallow((state) => state.currentConversation));
const MessagesList = ({ reference, ...props }) => {
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] : [])));
olog('invoke msg list');
// 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 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 = props.dataSource.map((_, i) => messageRefs.current[i] ?? createRef());
const referance = useRef(null);
const toBottom = (e) => {
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
}
const prevProps = useRef(props);
useEffect(() => {
// 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();
}
prevProps.current = props
}, [prevProps, props])
prevProps.current = props;
}, [prevProps, props]);
const [previewVisible, setPreviewVisible] = useState(false);
const [previewSrc, setPreviewSrc] = useState();
@ -78,7 +56,7 @@ const MessagesList = ({reference, ...props}) => {
};
const RenderText = memo(function renderText({ str }) {
const parts = str.split(/(https?:\/\/[^\s]+|\p{Emoji_Presentation})/gmu).filter(s => s !== '');
const parts = str.split(/(https?:\/\/[^\s]+|\p{Emoji_Presentation})/gmu).filter((s) => s !== '');
const links = str.match(/https?:\/\/[\S]+/gi) || [];
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';
@ -88,7 +66,7 @@ const MessagesList = ({reference, ...props}) => {
} else if (emojis.includes(curr)) {
prev.push({ type: 'emoji', key: curr });
} else {
prev.push({type: 'text', key: curr});
prev.push({ type: 'text', key: curr });
}
return prev;
}, []);
@ -101,7 +79,8 @@ const MessagesList = ({reference, ...props}) => {
{part.key}
</a>
);
} else { // if (part.type === 'emoji')
} else {
// if (part.type === 'emoji')
return part.key;
}
})}
@ -116,9 +95,8 @@ const MessagesList = ({reference, ...props}) => {
));
return (
<div className='relative h-full overflow-y-auto flex'>
<div className='relative h-full overflow-y-auto overflow-x-hidden flex'>
<div className='relative overflow-y-auto block flex-1' ref={reference}>
<Spin spinning={msgListLoading} tip={'正在读取...'} wrapperClassName='pt-8 relative'>
{props.dataSource.map((message, index) => (
// <Dropdown
// key={message.id}
@ -142,7 +120,7 @@ const MessagesList = ({reference, ...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 || ''} />}
@ -160,10 +138,9 @@ const MessagesList = ({reference, ...props}) => {
/>
// </Dropdown>
))}
</Spin>
<Image src={null} preview={{ visible: previewVisible, src: previewSrc, onClose: onPreviewClose }} />
</div>
<Button onClick={toBottom} shape={'circle'} className=' absolute bottom-1 right-4' icon={<DownOutlined />} />
<Image src={null} preview={{ visible: previewVisible, src: previewSrc, onClose: onPreviewClose }} />
</div>
);
};

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

@ -1,11 +1,6 @@
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 { useRef } from 'react';
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 = () => {

Write Preview
Loading…
Cancel
Save