import React from 'react'; import { ChatMessage, getMessageTimeDiff, shouldShowMessageTime, } from 'pawchat-shared'; import { ChatMessageItem } from './Item'; import { Divider } from 'antd'; interface ChatMessageListProps { messages: ChatMessage[]; } export const ChatMessageList: React.FC = React.memo( (props) => { return (
{props.messages.map((message, index, arr) => { let showDate = true; let showAvatar = true; const messageCreatedAt = new Date(message.createdAt ?? ''); if (index > 0) { // 当不是第一条数据时 // 进行时间合并 const prevMessage = arr[index - 1]; if ( !shouldShowMessageTime( new Date(prevMessage.createdAt ?? ''), messageCreatedAt ) ) { showDate = false; } // 进行头像合并(在同一时间块下) if (showDate === false) { showAvatar = prevMessage.author !== message.author; } } return (
{showDate && ( {getMessageTimeDiff(messageCreatedAt)} )}
); })}
); } ); ChatMessageList.displayName = 'ChatMessageList';