react-native-chating-ui-kit/lib/shared/views/CometChatFileBubble/CometChatFileBubble.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 { TouchableOpacity, View, Image, NativeModules, Text } from "react-native";
import { downloadIcon } from "./resources";
import { CometChatContext } from "../../CometChatContext";
import { FileBubbleStyle } from "./FileBubbleStyle";
import { Style } from "./style";
const { FileManager } = NativeModules;
export const CometChatFileBubble = ({ fileUrl, title, icon, style, subtitle }) => {
    const { theme } = useContext(CometChatContext);
    const _style = new FileBubbleStyle({
        backgroundColor: theme?.palette.getBackgroundColor(),
        iconTint: theme?.palette.getPrimary(),
        subtitleColor: theme?.palette.getAccent600(),
        titleColor: theme?.palette.getAccent(),
        titleFont: theme?.typography.title1,
        subtitleFont: theme?.typography.title2,
        ...style
    });
    const { iconTint, subtitleColor, subtitleFont, titleColor, titleFont, backgroundColor, border, borderRadius, height, width } = _style;
    const [processing, setProcessing] = React.useState(false);
    const downloadFile = () => {
        if (processing)
            return;
        setProcessing(true);
        FileManager.checkAndDownload(fileUrl, getFileName(), async (storedFilePath) => {
            console.log(storedFilePath);
            setProcessing(false);
        });
    };
    const downloadAndOpen = () => {
        if (processing)
            return;
        setProcessing(true);
        FileManager.openFile(fileUrl, getFileName(), async (isOpened) => {
            console.log(isOpened);
            setProcessing(false);
        });
    };
    const getFileName = () => {
        return (fileUrl.substring(fileUrl.lastIndexOf("/") + 1, fileUrl.length)).replace(" ", "_");
    };
    return (<TouchableOpacity onPress={downloadAndOpen} style={[Style.container, { backgroundColor, borderWidth: border.borderWidth, borderColor: border.borderColor, borderRadius, height, width }]}>
            <View style={Style.messageInfoStyle}>
                {title && <Text numberOfLines={1} ellipsizeMode={"tail"} style={[Style.titleStyle, { fontFamily: titleFont.fontFamily, fontSize: titleFont.fontSize, color: titleColor }]}>
                        {title}
                    </Text>}
                {subtitle && <Text numberOfLines={1} ellipsizeMode={"tail"} style={[Style.subtitleStyle, { fontFamily: subtitleFont.fontFamily, fontSize: subtitleFont.fontSize, color: subtitleColor }]}>
                        {subtitle}
                    </Text>}
            </View>
            <TouchableOpacity onPress={downloadFile.bind(this)} style={Style.downloadImage}>
                <Image source={icon || downloadIcon} style={[Style.imageStyle, { tintColor: iconTint }]}/>
            </TouchableOpacity>
        </TouchableOpacity>);
};
CometChatFileBubble.defaltProps = {
    fileUrl: "",
    title: "",
    subtitle: "",
    style: new FileBubbleStyle({}),
    icon: downloadIcon
};
//# sourceMappingURL=CometChatFileBubble.js.map