@cometchat/chat-uikit-react-native
Version:
Ready-to-use Chat UI Components for React Native
200 lines • 10.7 kB
JavaScript
import React from "react";
import { Text, View } from "react-native";
import { CometChatCustomMessageTypes, MessageCategoryConstants, MessageTypeConstants, } from "../constants/UIKitConstants";
import { ChatConfigurator } from "../framework";
import { Icon } from "../icons/Icon";
import { CometChatMessageBubble } from "../views/CometChatMessageBubble";
import { CometChatUIKit } from "../CometChatUiKit";
import { deepMerge } from "../helper/helperFunctions";
import { CometChatDate } from "../views/CometChatDate";
import { CometChatAvatar, CometChatReceipt } from "../views";
const getOverridenBubbleStyles = (theme) => {
const styleCache = new Map();
const outgoingBubbleStyles = theme.messageListStyles.outgoingMessageBubbleStyles;
const incomingBubbleStyles = theme.messageListStyles.incomingMessageBubbleStyles;
styleCache.set(MessageTypeConstants.text, {
incoming: deepMerge(incomingBubbleStyles, incomingBubbleStyles.textBubbleStyles ?? {}),
outgoing: deepMerge(outgoingBubbleStyles, outgoingBubbleStyles.textBubbleStyles ?? {}),
});
styleCache.set(MessageTypeConstants.image, {
incoming: deepMerge(incomingBubbleStyles, incomingBubbleStyles.imageBubbleStyles ?? {}),
outgoing: deepMerge(outgoingBubbleStyles, outgoingBubbleStyles.imageBubbleStyles ?? {}),
});
styleCache.set(MessageTypeConstants.file, {
incoming: deepMerge(incomingBubbleStyles, incomingBubbleStyles.fileBubbleStyles ?? {}),
outgoing: deepMerge(outgoingBubbleStyles, outgoingBubbleStyles.fileBubbleStyles ?? {}),
});
styleCache.set(MessageTypeConstants.audio, {
incoming: deepMerge(incomingBubbleStyles, incomingBubbleStyles.audioBubbleStyles ?? {}),
outgoing: deepMerge(outgoingBubbleStyles, outgoingBubbleStyles.audioBubbleStyles ?? {}),
});
styleCache.set(MessageTypeConstants.messageDeleted, {
incoming: deepMerge(incomingBubbleStyles, theme.deletedBubbleStyles ?? {}, incomingBubbleStyles.deletedBubbleStyles ?? {}),
outgoing: deepMerge(outgoingBubbleStyles, theme.deletedBubbleStyles ?? {}, outgoingBubbleStyles.deletedBubbleStyles ?? {}),
});
styleCache.set(MessageTypeConstants.sticker, {
incoming: deepMerge(incomingBubbleStyles, incomingBubbleStyles.stickerBubbleStyles ?? {}),
outgoing: deepMerge(outgoingBubbleStyles, outgoingBubbleStyles.stickerBubbleStyles ?? {}),
});
styleCache.set(MessageTypeConstants.document, {
incoming: deepMerge(incomingBubbleStyles, incomingBubbleStyles.collaborativeBubbleStyles ?? {}),
outgoing: deepMerge(outgoingBubbleStyles, outgoingBubbleStyles.collaborativeBubbleStyles ?? {}),
});
styleCache.set(CometChatCustomMessageTypes.meeting, {
incoming: deepMerge(incomingBubbleStyles, incomingBubbleStyles.meetCallBubbleStyles ?? {}),
outgoing: deepMerge(outgoingBubbleStyles, outgoingBubbleStyles.meetCallBubbleStyles ?? {}),
});
styleCache.set(MessageTypeConstants.whiteboard, {
incoming: deepMerge(incomingBubbleStyles, incomingBubbleStyles.collaborativeBubbleStyles ?? {}),
outgoing: deepMerge(outgoingBubbleStyles, outgoingBubbleStyles.collaborativeBubbleStyles ?? {}),
});
styleCache.set(MessageTypeConstants.video, {
incoming: deepMerge(incomingBubbleStyles, incomingBubbleStyles.videoBubbleStyles ?? {}),
outgoing: deepMerge(outgoingBubbleStyles, outgoingBubbleStyles.videoBubbleStyles ?? {}),
});
styleCache.set(MessageTypeConstants.poll, {
incoming: deepMerge(incomingBubbleStyles, incomingBubbleStyles.pollBubbleStyles ?? {}),
outgoing: deepMerge(outgoingBubbleStyles, outgoingBubbleStyles.pollBubbleStyles ?? {}),
});
return styleCache;
};
const getTemplatesMap = (templates) => {
let templatesMap = new Map();
templates.forEach((template) => {
if (templatesMap.get(`${template.category}_${template.type}`))
return;
templatesMap.set(`${template.category}_${template.type}`, template);
});
return templatesMap;
};
const MessageContentView = (props) => {
const { message, alignment, theme } = props;
switch (message.getType()) {
case MessageTypeConstants.audio:
return ChatConfigurator.dataSource.getAudioMessageContentView(message, alignment, theme);
case MessageTypeConstants.video:
return ChatConfigurator.dataSource.getVideoMessageContentView(message, alignment, theme);
case MessageTypeConstants.file:
return ChatConfigurator.dataSource.getFileMessageContentView(message, alignment, theme);
case MessageTypeConstants.text:
return ChatConfigurator.dataSource.getTextMessageContentView(message, alignment, theme);
case MessageTypeConstants.image:
return ChatConfigurator.dataSource.getImageMessageContentView(message, alignment, theme);
}
return null;
};
const getLeadingView = (item, theme, avatarVisibility = true) => {
if (!avatarVisibility)
return undefined;
let _style = getBubbleStyle(item, theme);
if (item.getSender()?.getUid() !== CometChatUIKit.loggedInUser?.getUid() &&
item.getCategory() != MessageCategoryConstants.action) {
return (<CometChatAvatar image={item?.getSender()?.getAvatar && item?.getSender()?.getAvatar()
? { uri: item.getSender().getAvatar() }
: undefined} name={item?.getSender()?.getName && item?.getSender()?.getName()
? item?.getSender()?.getName()
: ""} style={_style.avatarStyle}/>);
}
return undefined;
};
const getHeaderView = (item, theme) => {
const _style = getBubbleStyle(item, theme);
if (item.getSender()?.getUid() != CometChatUIKit.loggedInUser?.getUid() &&
![MessageCategoryConstants.action, MessageCategoryConstants.call].includes(item.getCategory())) {
const senderName = (item.getSender()?.getName() || "").trim();
return (<View style={{ flexDirection: "row" }}>
{Boolean(senderName) && (<Text style={_style.senderNameTextStyles} numberOfLines={1} ellipsizeMode={"tail"}>
{senderName}
</Text>)}
</View>);
}
return undefined;
};
const getBubbleStyle = (item, theme) => {
const loggedInUser = CometChatUIKit.loggedInUser;
const type = (() => {
if (item.getDeletedAt()) {
return MessageTypeConstants.messageDeleted;
}
return item.getType();
})();
if (item.getSender().getUid() != loggedInUser.getUid()) {
return (getOverridenBubbleStyles(theme).get(type)?.incoming ??
theme.messageListStyles.incomingMessageBubbleStyles);
}
return (getOverridenBubbleStyles(theme).get(type)?.outgoing ??
theme.messageListStyles.outgoingMessageBubbleStyles);
};
const getSentAtTimestamp = (item) => {
return item.getSentAt() ? item.getSentAt() * 1000 : Date.now();
};
const getStatusInfoView = (item, theme, receiptsVisibility = true, datePattern) => {
const loggedInUser = CometChatUIKit.loggedInUser;
let isOutgoingMessage = item.getSender()?.getUid() == loggedInUser.getUid();
let _style = getBubbleStyle(item, theme);
let messageState;
if (item.getReadAt())
messageState = "READ";
else if (item.getDeliveredAt())
messageState = "DELIVERED";
else if (item.getSentAt())
messageState = "SENT";
else if (item?.getData()?.metaData?.error)
messageState = "ERROR";
else if (isOutgoingMessage)
messageState = "WAIT";
else
messageState = "ERROR";
return (<View style={[
{
flexDirection: "row",
justifyContent: "flex-end",
alignSelf: "flex-end",
},
_style.dateReceiptContainerStyle,
]}>
<CometChatDate timeStamp={(item.getDeletedAt() || item.getSentAt()) * 1000 || getSentAtTimestamp(item)} pattern={"timeFormat"} customDateString={datePattern && datePattern(item)} style={_style.dateStyles}/>
{receiptsVisibility && isOutgoingMessage ? (
/* ToDoM Use Icon From Incoming/Outgoing bubble styles */
<View style={{ marginLeft: 2, alignItems: "center", justifyContent: "center" }}>
<CometChatReceipt receipt={messageState} style={{
sentIconStyle: _style.receiptStyles.sentIconStyle,
readIconStyle: _style.receiptStyles.readIconStyle,
waitIconStyle: _style.receiptStyles.waitIconStyle,
errorIconStyle: _style.receiptStyles.errorIconStyle,
deliveredIconStyle: _style.receiptStyles.deliveredIconStyle,
}}/>
</View>) : null}
</View>);
};
export const MessageUtils = {
getMessageView: (params) => {
const { message, templates, alignment, theme, datePattern, receiptsVisibility, avatarVisibility, } = params;
const templatesMap = getTemplatesMap(templates);
let hasTemplate = templatesMap.get(`${message.getCategory()}_${message.getType()}`);
if (templates.length > 0) {
let customTemplate = templates.find((template) => template.type == message.getType() && template.category == message.getCategory());
if (customTemplate)
hasTemplate = customTemplate;
}
const style = getBubbleStyle(message, theme);
return (<CometChatMessageBubble id={`${message.getId()}`} alignment={alignment} ContentView={hasTemplate.ContentView(message, alignment) ||
MessageContentView({ message, alignment: alignment, theme: theme })} LeadingView={message.getReceiverType() === "group"
? getLeadingView(message, theme, avatarVisibility)
: undefined} HeaderView={message.getReceiverType() === "group" ? getHeaderView(message, theme) : undefined} BottomView={hasTemplate?.BottomView && hasTemplate?.BottomView(message, alignment)} StatusInfoView={(hasTemplate?.StatusInfoView && hasTemplate.StatusInfoView(message, alignment)) ||
getStatusInfoView(message, theme, receiptsVisibility, datePattern)} style={style}/>);
},
};
export const getMessagePreviewInternal = (iconName, text, { iconColor, theme }) => {
return (<>
{iconName && (<Icon name={iconName} size={theme?.spacing?.spacing?.s4} color={iconColor || theme?.color?.textSecondary} containerStyle={{ marginRight: theme?.spacing?.spacing?.s0_5 }}/>)}
<Text numberOfLines={1} ellipsizeMode='tail' style={{
color: theme?.color?.textSecondary,
...theme?.typography?.body?.regular,
flexShrink: 2,
}}>
{text}
</Text>
</>);
};
//# sourceMappingURL=MessageUtils.js.map