react-native-chating-ui-kit/lib/shared/views/CometChatTextBubble/CometChatTextBubble.js

CometChat React Native UI Kit is a collection of custom UI Components designed to build text , chat and calling features in your application. The UI Kit is developed to keep developers in mind and aims to reduce development efforts significantly

import React, { useContext } from "react";
import { View, Text, Linking } from "react-native";
import { CometChatContext } from "../../CometChatContext";
import { emailPattern, phoneNumPattern, urlPattern } from "../../constants/UIKitConstants";
import { TextBubbleStyle } from "./TextBubbleStyle";
const Link = ({ text, url, style }) => {
    return <Text style={{ ...style, textDecorationLine: "underline" }} onPress={() => {
            let finalUrl = url.startsWith("http") ? url : `http://${url}`;
            Linking.canOpenURL(finalUrl)
                .then(res => {
                if (res) {
                    Linking.openURL(finalUrl);
                    return;
                }
                console.log("Can not open link", finalUrl);
            })
                .catch(err => {
                console.log({ url });
                console.log("Error:", err);
            });
        }}>{text}</Text>;
};
const getPatternGroup = (str) => {
    let result = {};
    if (str.match(phoneNumPattern))
        result['phone'] = str;
    if (str.match(emailPattern))
        result['email'] = str;
    if (str.match(urlPattern))
        result['url'] = str;
    return result;
};
export const FormatTextForLinks = ({ str, style }) => {
    let res = str.matchAll(phoneNumPattern + "|" + emailPattern + "|" + urlPattern);
    for (let resPart of res) {
        let { email, phone } = getPatternGroup(resPart[0]);
        let pre, post;
        pre = str.substring(0, resPart.index);
        post = str.substring(resPart.index + resPart[0].length);
        let urlLink = "";
        if (email)
            urlLink = "mailto:";
        if (phone)
            urlLink = "tel:";
        return (<Text style={{ ...style.textFont, color: style.textColor }}>
                <Text>
                    {pre}
                </Text>
                <Link text={resPart[0]} url={urlLink + resPart[0].trim()} style={{ ...style.linkTextFont, color: style.linkTextColor }}/>
                <FormatTextForLinks str={post} style={style}/>
            </Text>);
    }
    return <Text style={{ ...style.textFont, color: style.textColor }}>{str}</Text>;
};
export const CometChatTextBubble = (props) => {
    const { theme } = useContext(CometChatContext);
    const _style = new TextBubbleStyle({
        backgroundColor: theme?.palette.getBackgroundColor(),
        textColor: theme?.palette.getAccent(),
        textFont: theme?.typography.body,
        linkTextFont: theme?.typography.body,
        ...props.style
    });
    const { backgroundColor, border, borderRadius, textColor, textFont, linkTextColor, linkTextFont, height, width } = _style;
    const { text, textContainerStyle } = props;
    return <View style={[
            {
                alignSelf: "flex-start",
            },
            {
                backgroundColor, borderRadius, maxHeight: height, maxWidth: width,
                overflow: "hidden", padding: 8,
            },
            border,
            textContainerStyle
        ]}>
        <FormatTextForLinks str={text} style={{ textColor, textFont, linkTextColor, linkTextFont }}/>
    
    </View>;
};
CometChatTextBubble.defaultProps = {
    text: ""
};
//# sourceMappingURL=CometChatTextBubble.js.map