@cometchat/chat-uikit-react-native/lib/shared/views/CometChatReactions/CometChatReactions.js

Ready-to-use Chat UI Components for React Native

import React, { useLayoutEffect } from "react";
import { Text, TouchableOpacity, View } from "react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";
const CometChatReactions = (props) => {
    const { messageObject, style, onReactionPress, onReactionLongPress, alignment, maxContentWidth } = props;
    const [reactionList, setReactionList] = React.useState([]);
    const reactionRef = React.useRef([]);
    const reactionView = (reactionObj, index) => {
        let count = reactionObj?.getCount();
        let Emoji = reactionObj?.getReaction();
        const reactedByme = reactionObj.getReactedByMe();
        return count >= 1 ? (<TouchableOpacity key={index} onPress={() => {
                onReactionPress && onReactionPress(reactionObj, messageObject);
            }} onLongPress={() => {
                onReactionLongPress && onReactionLongPress(reactionObj, messageObject);
            }} style={reactedByme ? style?.activeEmojiStyle?.containerStyle : style?.emojiStyle?.containerStyle}>
        <Text style={reactedByme ? style?.activeEmojiStyle?.emojitextStyle : style?.emojiStyle?.emojitextStyle}>
          {Emoji}
        </Text>
        <Text style={reactedByme
                ? style?.activeEmojiStyle?.emojiCountTextStyle
                : style?.emojiStyle?.emojiCountTextStyle}>
          {count}
        </Text>
      </TouchableOpacity>) : null;
    };
    const extraEmojisView = (numberOfExtraEmojis) => {
        let extraEmojis = reactionRef.current.slice(reactionRef.current.length - numberOfExtraEmojis);
        let reactedByMe = extraEmojis.some((reaction) => reaction.getReactedByMe());
        let totalCount = reactionRef.current.reduce((acc, curr) => acc + curr.getCount(), 0);
        let AllObj = new CometChat.ReactionCount("All", totalCount, false); // { reaction: "All", count: totalCount };
        return (<TouchableOpacity onPress={() => {
                onReactionPress && onReactionPress(AllObj, messageObject);
            }} onLongPress={() => {
                onReactionLongPress && onReactionLongPress(AllObj, messageObject);
            }} key={new Date().getTime()} style={reactedByMe
                ? style?.extraReactionStyle?.activeContainerStyle
                : style?.extraReactionStyle?.containerStyle}>
        <Text style={reactedByMe
                ? style?.extraReactionStyle?.activeCountTextStyle
                : style?.extraReactionStyle?.countTextStyle}>
          +{numberOfExtraEmojis}
        </Text>
      </TouchableOpacity>);
    };
    useLayoutEffect(() => {
        reactionRef.current = messageObject?.getReactions();
        let countEmoji = maxContentWidth ? 0 : 3;
        if (maxContentWidth) {
            let remainingWidth = maxContentWidth;
            for (let i = 0; i < reactionRef.current.length; i++) {
                const currentReactionCount = reactionRef.current[i].getCount();
                let widthToReduce = 0;
                if (currentReactionCount < 10) {
                    widthToReduce = 45;
                }
                else if (currentReactionCount < 100) {
                    widthToReduce = 55;
                }
                else if (currentReactionCount < 1000) {
                    widthToReduce = 65;
                }
                if (remainingWidth > 30 + widthToReduce) {
                    remainingWidth = remainingWidth - widthToReduce;
                    countEmoji++;
                    continue;
                }
                break;
            }
            countEmoji = countEmoji ? countEmoji : 1;
        }
        const messageReactions = reactionRef.current.slice(0, countEmoji).map(reactionView);
        if (reactionRef.current.length > 0) {
            if (reactionRef.current.length > countEmoji) {
                messageReactions.push(extraEmojisView(reactionRef.current.length - countEmoji));
                setReactionList(messageReactions);
            }
            else
                setReactionList(messageReactions);
        }
    }, [messageObject, maxContentWidth]);
    return reactionList.length ? (<View style={[
            style?.reactionContainerStyle,
            {
                alignSelf: alignment === "right" ? "flex-end" : alignment === "center" ? "center" : "flex-start",
            },
        ]}>
      {reactionList}
    </View>) : null;
};
export { CometChatReactions };
//# sourceMappingURL=CometChatReactions.js.map