fastcomments-react-native-sdk
Version:
React Native FastComments Components. Add live commenting to any React Native application.
67 lines (66 loc) • 4.31 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Image, View, Text, TouchableOpacity } from "react-native";
import { FastCommentsImageAsset } from "../types";
import { RenderHTMLSource } from "react-native-render-html";
import { getPrettyDate } from '../services/pretty-date';
import { ModalMenu } from "./modal-menu";
import { ThreeDot } from "./three-dot";
import { useState } from "react";
import { getNotificationDisplayHTML, markNotificationOptedOut, markNotificationRead } from "../services/notifications";
export function NotificationListItem({ config, defaultAvatar, imageAssets, notification, notificationTranslations, onNotificationSelected, styles, translations, width, }) {
const [isViewed, setViewed] = useState(notification.viewed);
const [isOptedOut, setIsOptedOut] = useState(notification.optedOut);
const notificationMenuItems = [
isViewed ? {
id: 'mark-unread',
label: notificationTranslations.NOTIFICATION_MARK_UNREAD,
handler: async (setModalId) => {
await markNotificationRead({
config,
notificationId: notification._id,
isRead: false
});
setViewed(false);
setModalId(null);
}
} : {
id: 'mark-read',
label: notificationTranslations.NOTIFICATION_MARK_READ,
handler: async (setModalId) => {
await markNotificationRead({
config,
notificationId: notification._id,
isRead: true
});
setViewed(true);
setModalId(null);
}
},
isOptedOut ? {
id: 'undo-opt-out',
label: notificationTranslations.NOTIFICATION_OPT_IN_FOR_COMMENT,
handler: async (setModalId) => {
await markNotificationOptedOut({
config,
notificationId: notification._id,
isOptedOut: false
});
setIsOptedOut(false);
setModalId(null);
}
} : {
id: 'opt-out',
label: notificationTranslations.NOTIFICATION_OPT_OUT_FOR_COMMENT,
handler: async (setModalId) => {
await markNotificationOptedOut({
config,
notificationId: notification._id,
isOptedOut: true
});
setIsOptedOut(true);
setModalId(null);
}
}
];
return _jsxs(View, { style: styles.notificationList?.notification, children: [_jsxs(View, { style: styles.notificationList?.notificationTop, children: [_jsxs(TouchableOpacity, { style: styles.notificationList?.notificationTopTouchable, onPress: () => onNotificationSelected && onNotificationSelected(notification), children: [_jsx(View, { style: styles.notificationList?.notificationAvatarWrapper, children: _jsx(Image, { style: styles.notificationList?.notificationAvatar, source: notification.fromUserAvatarSrc ? { uri: notification.fromUserAvatarSrc } : defaultAvatar }) }), _jsx(View, { style: styles.notificationList?.notificationTextWrapper, children: _jsx(RenderHTMLSource, { source: { html: getNotificationDisplayHTML(notification, notificationTranslations) }, contentWidth: width }) })] }), _jsx(View, { style: styles.notificationList?.notificationMenu, children: _jsx(ModalMenu, { closeIcon: imageAssets[config.hasDarkBackground ? FastCommentsImageAsset.ICON_CROSS_WHITE : FastCommentsImageAsset.ICON_CROSS], styles: styles, items: notificationMenuItems, openButton: _jsx(View, { style: styles.notificationList?.notificationMenuButton, children: _jsx(ThreeDot, { styles: styles }) }) }) })] }), _jsxs(View, { style: styles.notificationList?.notificationBottom, children: [_jsx(View, { style: isViewed ? styles.notificationList?.notificationIsReadCircle : styles.notificationList?.notificationIsUnreadCircle }), _jsx(Text, { children: getPrettyDate(translations, new Date(notification.createdAt).valueOf()) }), notification.pageTitle && _jsx(Text, { style: styles.notificationList?.notificationPageTitle, children: notification.pageTitle })] })] });
}