@cometchat/chat-uikit-react-native
Version:
Ready-to-use Chat UI Components for React Native
37 lines • 1.83 kB
JavaScript
import React from "react";
import { Text, TouchableOpacity, View } from "react-native";
import { useTheme } from "../../../theme";
import { Icon } from "../../icons/Icon";
/**
* CometChatQuickReactions displays a list of quick reaction emojis along with an option to add a new reaction.
*
* @param {CometChatQuickReactionsProps} props - Props for the component.
* @returns {JSX.Element} The rendered quick reactions component.
*/
export const CometChatQuickReactions = (props) => {
const { quickReactions, style, onReactionPress, onAddReactionPress, addReactionUrl } = props;
const theme = useTheme();
/**
* Returns the array of emojis to be displayed.
*
* @returns {string[]} An array of emoji strings.
*/
function getEmojis() {
let defaultEmojis = Array.isArray(quickReactions) ? quickReactions.filter((e) => typeof e === 'string') : ["👍", "❤️", "😂", "😢", "🙏"];
return defaultEmojis;
}
return (<View style={[theme.quickReactionStyle.containerStyle, style?.containerStyle]}>
{getEmojis().map((item, index) => (<TouchableOpacity key={index} style={[theme.quickReactionStyle.emojiContainerStyle, style?.emojiContainerStyle]} onPress={() => onReactionPress && onReactionPress(item)}>
<Text style={[
{ fontSize: 25, color: theme.color.textPrimary },
{ ...theme.typography.heading1.regular },
]}>
{item}
</Text>
</TouchableOpacity>))}
<TouchableOpacity onPress={() => onAddReactionPress && onAddReactionPress()} style={[theme.quickReactionStyle.emojiContainerStyle, style?.emojiContainerStyle]}>
<Icon name="add-reaction" color={theme.color.iconSecondary}/>
</TouchableOpacity>
</View>);
};
//# sourceMappingURL=CometChatQuickReactions.js.map