fastcomments-react-native-sdk/src/components/notification-bell.js

React Native FastComments Components. Add live commenting to any React Native application.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Image, View, Text, TouchableOpacity, Modal } from 'react-native';
import { FastCommentsImageAsset } from '../types';
import { useState } from "react";
import { NotificationList } from "./notification-list";
export function NotificationBell({ imageAssets, onNotificationSelected, state, styles, translations }) {
    const [isOpen, setNotificationsListOpen] = useState(false);
    if (state.config.disableNotificationBell.get()) {
        return null;
    }
    const notificationCount = state.userNotificationState.count.get();
    const bellIconType = notificationCount > 0 ? FastCommentsImageAsset.ICON_BELL_RED : (state.config.hasDarkBackground.get() ? FastCommentsImageAsset.ICON_BELL_WHITE : FastCommentsImageAsset.ICON_BELL);
    return _jsxs(View, { children: [_jsxs(TouchableOpacity, { onPress: () => setNotificationsListOpen(!isOpen), style: styles.notificationBell?.bellContainer, children: [_jsx(Image, { source: imageAssets[bellIconType], style: { width: 20, height: 20 } }), _jsx(Text, { style: notificationCount > 0 ? styles.notificationBell?.bellCountNonZero : styles.notificationBell?.bellCount, children: (notificationCount < 100 ? Number(notificationCount).toLocaleString() : '99+') })] }), isOpen
                && _jsx(View, { style: styles.notificationList?.centeredView, children: _jsxs(Modal, { animationType: "slide", transparent: true, onRequestClose: () => {
                            setNotificationsListOpen(false);
                        }, children: [_jsx(NotificationList, { imageAssets: imageAssets, onNotificationSelected: onNotificationSelected, state: state.get(), styles: styles, translations: translations }), _jsx(TouchableOpacity, { style: styles.notificationList?.closeButton, onPress: () => setNotificationsListOpen(false), children: _jsx(Image, { source: imageAssets[FastCommentsImageAsset.ICON_CROSS], style: styles.notificationList?.closeButtonImage }) })] }) })] });
}