feat: 增加普通聊天列表用以兜底

pull/13/head
moonrailgun 4 years ago
parent 3757c7804f
commit b730cf6acf

@ -149,7 +149,10 @@ function findMessageIndexWithId(
/**
*
*/
export function buildItemRow(messages: ChatMessage[], messageId: string) {
export function buildMessageItemRow(
messages: ChatMessage[],
messageId: string
) {
const index = findMessageIndexWithId(messages, messageId); // TODO: 这里是因为mattermost的动态列表传的id因此只能这边再用id找回可以看看是否可以优化
if (index === -1) {
return <div />;
@ -181,7 +184,7 @@ export function buildItemRow(messages: ChatMessage[], messageId: string) {
}
return (
<div key={message._id} data-debug={JSON.stringify(index)}>
<div key={message._id}>
{showDate && (
<Divider className="text-sm opacity-40 px-6 font-normal select-none">
{getMessageTimeDiff(messageCreatedAt)}

@ -0,0 +1,54 @@
import React, { useCallback, useEffect, useRef } from 'react';
import { useUpdateRef } from 'tailchat-shared';
import { buildMessageItemRow } from './Item';
import type { MessageListProps } from './types';
/**
*
*/
export const NormalMessageList: React.FC<MessageListProps> = React.memo(
(props) => {
const containerRef = useRef<HTMLDivElement>(null);
const onUpdateReadedMessageRef = useUpdateRef(props.onUpdateReadedMessage);
useEffect(() => {
if (props.messages.length === 0) {
return;
}
if (containerRef.current?.scrollTop === 0) {
// 当前列表在最低
onUpdateReadedMessageRef.current(
props.messages[props.messages.length - 1]._id
);
}
}, [props.messages.length]);
const handleScroll = useCallback(() => {
if (props.messages.length === 0) {
return;
}
if (containerRef.current?.scrollTop === 0) {
onUpdateReadedMessageRef.current(
props.messages[props.messages.length - 1]._id
);
}
}, [props.messages]);
return (
<div
className="flex-1 overflow-y-scroll flex flex-col-reverse"
ref={containerRef}
onScroll={handleScroll}
>
<div>
{props.messages.map((message, index, arr) =>
buildMessageItemRow(arr, message._id)
)}
</div>
</div>
);
}
);
NormalMessageList.displayName = 'NormalMessageList';

@ -13,7 +13,7 @@ import React, {
import AutoSizer from 'react-virtualized-auto-sizer';
import { ChatMessage, t, usePrevious, useUpdateRef } from 'tailchat-shared';
import { messageReverseItemId } from './const';
import { buildItemRow } from './Item';
import { buildMessageItemRow } from './Item';
import type { MessageListProps } from './types';
// Reference: https://github.com/mattermost/mattermost-webapp/blob/master/components/post_view/post_list_virtualized/post_list_virtualized.jsx
@ -114,7 +114,7 @@ export const VirtualizedMessageList: React.FC<MessageListProps> = React.memo(
);
}
return buildItemRow(props.messages, itemId);
return buildMessageItemRow(props.messages, itemId);
};
// 初始渲染范围

@ -1,13 +1,18 @@
import React from 'react';
import { NormalMessageList } from './NormalList';
import type { MessageListProps } from './types';
import { VirtualizedMessageList } from './VirtualizedList';
const useVirtualizedList = true; // 是否使用虚拟化列表
export const ChatMessageList: React.FC<MessageListProps> = React.memo(
(props) => {
return (
return useVirtualizedList ? (
<div className="flex-1">
<VirtualizedMessageList {...props} />
</div>
) : (
<NormalMessageList {...props} />
);
}
);

Loading…
Cancel
Save