stream-chat-react
Version:
React components to create chat conversations or livestream style chat
53 lines (52 loc) • 3.46 kB
JavaScript
import React, { Fragment } from 'react';
import { getIsFirstUnreadMessage, isDateSeparatorMessage, isIntroMessage } from './utils';
import { Message } from '../Message';
import { DateSeparator as DefaultDateSeparator } from '../DateSeparator';
import { EventComponent as DefaultMessageSystem } from '../EventComponent';
import { UnreadMessagesSeparator as DefaultUnreadMessagesSeparator } from './UnreadMessagesSeparator';
export function defaultRenderMessages({ channelUnreadUiState, components, customClasses, lastReceivedMessageId: lastReceivedId, messageGroupStyles, messages, readData, sharedMessageProps: messageProps, }) {
const { DateSeparator = DefaultDateSeparator, HeaderComponent, MessageSystem = DefaultMessageSystem, UnreadMessagesSeparator = DefaultUnreadMessagesSeparator, } = components;
const renderedMessages = [];
let firstMessage;
let previousMessage = undefined;
for (let index = 0; index < messages.length; index++) {
const message = messages[index];
if (isDateSeparatorMessage(message)) {
renderedMessages.push(React.createElement("li", { key: `${message.date.toISOString()}-i` },
React.createElement(DateSeparator, { date: message.date, formatDate: messageProps.formatDate, unread: message.unread })));
}
else if (isIntroMessage(message)) {
if (HeaderComponent) {
renderedMessages.push(React.createElement("li", { key: 'intro' },
React.createElement(HeaderComponent, null)));
}
}
else if (message.type === 'system') {
renderedMessages.push(React.createElement("li", { "data-message-id": message.id, key: message.id || message.created_at.toISOString() },
React.createElement(MessageSystem, { message: message })));
}
else {
if (!firstMessage) {
firstMessage = message;
}
const groupStyles = messageGroupStyles[message.id] || '';
const messageClass = customClasses?.message || `str-chat__li str-chat__li--${groupStyles}`;
const isFirstUnreadMessage = getIsFirstUnreadMessage({
firstUnreadMessageId: channelUnreadUiState?.first_unread_message_id,
isFirstMessage: !!firstMessage?.id && firstMessage.id === message.id,
lastReadDate: channelUnreadUiState?.last_read,
lastReadMessageId: channelUnreadUiState?.last_read_message_id,
message,
previousMessage,
unreadMessageCount: channelUnreadUiState?.unread_messages,
});
renderedMessages.push(React.createElement(Fragment, { key: message.id || message.created_at.toISOString() },
isFirstUnreadMessage && UnreadMessagesSeparator && (React.createElement("li", { className: 'str-chat__li str-chat__unread-messages-separator-wrapper' },
React.createElement(UnreadMessagesSeparator, { unreadCount: channelUnreadUiState?.unread_messages }))),
React.createElement("li", { className: messageClass, "data-message-id": message.id, "data-testid": messageClass },
React.createElement(Message, { groupStyles: [groupStyles], lastReceivedId: lastReceivedId, message: message, readBy: readData[message.id] || [], ...messageProps }))));
previousMessage = message;
}
}
return renderedMessages;
}