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

Ready-to-use Chat UI Components for React Native

import { useMemo } from "react";
import { Dimensions, Modal, StyleSheet, Text, TouchableOpacity, TouchableWithoutFeedback, View, } from "react-native";
import { useTheme } from "../../../theme";
import { Icon } from "../../icons/Icon";
const { width: screenWidth, height: screenHeight } = Dimensions.get("window");
export const CometChatTooltipMenu = (props) => {
    const { visible = false, onDismiss = () => null, onClose = () => null, event, menuItems } = props;
    const theme = useTheme();
    const position = useMemo(() => {
        let x = event.nativeEvent.pageX;
        let y = event.nativeEvent.pageY;
        const position = {};
        if (x <= screenWidth / 3) {
            position.left = x + 10;
        }
        else {
            position.right = 12;
        }
        if (y <= screenHeight / 2) {
            position.top = y + 20;
        }
        else if (y >= screenHeight / 2) {
            position.bottom = Math.max(screenHeight - y + 10, 40);
        }
        return position;
    }, [event]);
    return (<Modal presentationStyle='overFullScreen' transparent={true} visible={visible} onRequestClose={onClose} onDismiss={onDismiss} animationType='none'>
      <TouchableWithoutFeedback onPress={onClose}>
        <View style={tooltipStyles.overlay}>
          <View style={[
            tooltipStyles.menu,
            position,
            {
                backgroundColor: theme.color.background1,
                borderWidth: 1,
                borderColor: theme.color.borderLight,
                borderRadius: theme.spacing.radius.r2,
                shadowColor: theme.color.neutral900,
            },
        ]}>
            {menuItems.map((item, i) => {
            return (<TouchableOpacity key={i} // Ensure each item has a unique key
             onPress={() => {
                    item.onPress();
                    onClose();
                }} style={[
                    {
                        flexDirection: "row",
                        alignItems: "center",
                        paddingVertical: 10,
                        paddingHorizontal: 16,
                        gap: 8,
                        backgroundColor: theme.color.background1,
                        minWidth: 160,
                    },
                    i === 0
                        ? {
                            borderTopLeftRadius: theme.spacing.radius.r2,
                            borderTopRightRadius: theme.spacing.radius.r2,
                        }
                        : {},
                    i === menuItems.length - 1
                        ? {
                            borderBottomLeftRadius: theme.spacing.radius.r2,
                            borderBottomRightRadius: theme.spacing.radius.r2,
                        }
                        : {},
                ]}>
                  <Icon color={item?.iconStyle?.tintColor ?? theme.color.textSecondary} size={item?.iconStyle?.height ?? theme.spacing.spacing.s6} height={item?.iconStyle?.height ?? theme.spacing.spacing.s6} width={item?.iconStyle?.width ?? theme.spacing.spacing.s6} icon={item.icon} containerStyle={item?.iconContainerStyle}/>
                  <Text style={{
                    color: theme.color.textPrimary,
                    ...theme.typography.heading4.regular,
                    ...item?.textStyle,
                }}>
                    {item.text}
                  </Text>
                </TouchableOpacity>);
        })}
          </View>
        </View>
      </TouchableWithoutFeedback>
    </Modal>);
};
const tooltipStyles = StyleSheet.create({
    overlay: {
        flex: 1,
        backgroundColor: "transparent",
        justifyContent: "center",
        alignItems: "center",
    },
    menu: {
        position: "absolute",
        shadowOffset: {
            width: 0,
            height: 8,
        },
        shadowOpacity: 0.025,
        shadowRadius: 4,
        elevation: 3,
    },
    menuItem: {
        fontSize: 16,
        paddingVertical: 5,
    },
});
//# sourceMappingURL=CometChatTooltipMenu.js.map