@cometchat/chat-uikit-react-native/lib/CometChatThreadHeader/CometChatThreadHeader.js

Ready-to-use Chat UI Components for React Native

import React, { useEffect, useState, useMemo } from "react";
import { ScrollView, Text, View } from "react-native";
import { ChatConfigurator, CometChatUIKit, localize, } from "../shared";
import { CometChatUIEventHandler } from "../shared/events/CometChatUIEventHandler/CometChatUIEventHandler";
import { messageStatus } from "../shared/utils/CometChatMessageHelper";
import { MessageUtils } from "../shared/utils/MessageUtils";
import { useTheme } from "../theme";
import { deepMerge } from "../shared/helper/helperFunctions";
import { CommonUtils } from "../shared/utils/CommonUtils";
/**
 * Unique UI event identifier for CometChatUIEventHandler.
 */
const uiEventId = "ccUiEvent" + new Date().getTime();
/**
 * CometChatThreadHeader component renders the header of a message thread including
 * the message bubble and the reply count.
 *
 * @param {CometChatThreadHeaderInterface} props - The properties for the component.
 * @returns {JSX.Element} The rendered thread header.
 */
export const CometChatThreadHeader = (props) => {
    const { parentMessage, template, replyCountVisibility = true, replyCountBarVisibility = true, textFormatters, datePattern, alignment, receiptsVisibility = true, avatarVisibility = true, } = props;
    const [message, setMessage] = useState(parentMessage);
    const [replyCount, setReplyCount] = useState(parentMessage.getReplyCount() || 0);
    const theme = useTheme();
    const style = deepMerge(theme.threadHeaderStyles, props.style ?? {});
    /**
     * Checks if an updated message belongs to the same thread as the current message.
     *
     * @param {CometChat.BaseMessage} updatedMessage - The message to be checked.
     * @returns {boolean} True if the updated message belongs to the same thread.
     */
    const checkMessageBelongsToSameThread = (updatedMessage) => {
        return updatedMessage.getParentMessageId() == message.getId();
    };
    /**
     * Checks the updated message and increments the reply count if it belongs to the same thread.
     *
     * @param {CometChat.BaseMessage} updatedMessage - The message to check.
     */
    const checkAndUpdateRepliesCount = (updatedMessage) => {
        if (checkMessageBelongsToSameThread(updatedMessage)) {
            setReplyCount((prev) => prev + 1);
        }
    };
    /**
     * Handler for the message sent event.
     *
     * @param {{ message: CometChat.BaseMessage, status: string }} param0 - The message and its status.
     */
    const ccMessageSentFunc = ({ message: msg, status }) => {
        if (status === messageStatus.success) {
            checkAndUpdateRepliesCount(msg);
            if (message.getId() == msg.id)
                setMessage(message);
        }
    };
    /**
     * Handler for the message edited event.
     *
     * @param {{ message: CometChat.BaseMessage, status: string }} param0 - The edited message and its status.
     */
    const ccMessageEditedFunc = ({ message: msg, status }) => {
        if (message.getId() == msg.id && status == messageStatus.success)
            setMessage(message);
    };
    /**
     * Handler for the message deleted event.
     *
     * @param {{ message: CometChat.BaseMessage }} param0 - The deleted message.
     */
    const ccMessageDeletedFunc = ({ message: msg }) => {
        if (message.getId() == msg.id)
            setMessage(message);
    };
    /**
     * Handler for the message read event.
     *
     * @param {{ message: CometChat.BaseMessage }} param0 - The read message.
     */
    const ccMessageReadFunc = ({ message: msg }) => {
        if (message.getId() == msg.id)
            setMessage(message);
    };
    /**
     * Merges the theme for the thread header with additional styles and maps some styles for MessageUtils.
     *
     * @returns {CometChatTheme} The merged theme.
     */
    const mergedTheme = useMemo(() => {
        const themeClone = CommonUtils.clone(theme);
        // Clone and map to messageListStyles in order to use these styles in MessageUtils.
        themeClone.messageListStyles.incomingMessageBubbleStyles = deepMerge(theme.threadHeaderStyles.incomingMessageBubbleStyles, style.incomingMessageBubbleStyles);
        // Clone and map to messageListStyles in order to use these styles in MessageUtils.
        themeClone.messageListStyles.outgoingMessageBubbleStyles = deepMerge(theme.threadHeaderStyles.outgoingMessageBubbleStyles, style.outgoingMessageBubbleStyles);
        return themeClone;
    }, [theme, style]);
    useEffect(() => {
        CometChatUIEventHandler.addMessageListener(uiEventId, {
            ccMessageSent: (item) => ccMessageSentFunc(item),
            ccMessageEdited: (item) => ccMessageEditedFunc(item),
            ccMessageDeleted: (item) => ccMessageDeletedFunc(item),
            ccMessageRead: (item) => ccMessageReadFunc(item),
            onTextMessageReceived: (textMessage) => {
                checkAndUpdateRepliesCount(textMessage);
            },
            onMediaMessageReceived: (mediaMessage) => {
                checkAndUpdateRepliesCount(mediaMessage);
            },
            onCustomMessageReceived: (customMessage) => {
                checkAndUpdateRepliesCount(customMessage);
            },
            onFormMessageReceived: (formMessage) => {
                checkAndUpdateRepliesCount(formMessage);
            },
            onCardMessageReceived: (cardMessage) => {
                checkAndUpdateRepliesCount(cardMessage);
            },
            onSchedulerMessageReceived: (schedulerMessage) => {
                checkAndUpdateRepliesCount(schedulerMessage);
            },
            onCustomInteractiveMessageReceived: (customInteractiveMessage) => {
                checkAndUpdateRepliesCount(customInteractiveMessage);
            },
        });
        return () => {
            CometChatUIEventHandler.removeMessageListener(uiEventId);
        };
    }, []);
    return (<View style={[style?.containerStyle]}>
      <ScrollView style={style?.messageBubbleContainerStyle}>
        <View pointerEvents='none'>
          {MessageUtils.getMessageView({
            message,
            templates: template && template.type === parentMessage.getType()
                ? [template]
                : ChatConfigurator.dataSource.getAllMessageTemplates(mergedTheme, {
                    textFormatters,
                }),
            alignment: alignment
                ? alignment
                : message.getSender().getUid() === CometChatUIKit.loggedInUser.getUid()
                    ? "right"
                    : "left",
            theme: mergedTheme,
            datePattern,
            receiptsVisibility,
            avatarVisibility
        })}
        </View>
      </ScrollView>
      {replyCountBarVisibility && (<View style={style?.replyCountBarStyle}>
          <Text style={style?.replyCountTextStyle}>
            {replyCountVisibility
                ? replyCount.toString() +
                    " " +
                    (replyCount == 1 ? localize("REPLY") : localize("REPLIES"))
                : ""}
          </Text>
        </View>)}
    </View>);
};
//# sourceMappingURL=CometChatThreadHeader.js.map