fastcomments-react-native-sdk
Version:
React Native FastComments Components. Add live commenting to any React Native application.
74 lines (73 loc) • 5.02 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CommentUserActivityIcon } from "./comment-user-activity-icon";
import { CommentUserBadge } from "./comment-user-badge";
import { View, Text, Linking, Image, TouchableOpacity } from "react-native";
import { getDefaultAvatarSrc } from "../services/default-avatar";
export function getCommentUserInfoHTML({ comment, config, imageAssets, translations, styles }) {
// let displayLabel = null;
// if (comment.displayLabel) {
// displayLabel = `<div style="${styles.commentUserInfoAsHTML?.label}">${comment.displayLabel}</div>`;
// } else {
// if (comment.isByAdmin) {
// displayLabel = `<div style="${styles.commentUserInfoAsHTML?.label}">${translations.ADMIN_LABEL}</div>`;
// } else if (comment.isByModerator) {
// displayLabel = `<div style="${styles.commentUserInfoAsHTML?.label}">${translations.MODERATOR_LABEL}</div>`;
// }
// }
let commenterName = comment.commenterName;
if (comment.isDeleted) {
commenterName = translations.DELETED_PLACEHOLDER;
}
else if (comment.isBlocked) {
commenterName = translations.BLOCKED_USER_PLACEHOLDER;
}
const usernameElement = `<div style="${styles.commentUserInfoAsHTML?.username}">${commenterName}</div>`;
const avatar = config.hideAvatars ? null :
(comment.avatarSrc && !comment.isBlocked
? `<div style="${styles.commentUserInfoAsHTML?.avatarWrapper}"><img style="${styles.commentUserInfoAsHTML?.avatarImage}" src="${comment.avatarSrc}"/></div>`
: `<div style="${styles.commentUserInfoAsHTML?.avatarWrapperDefault}"><img style="${styles.commentUserInfoAsHTML?.avatarImage}" src="${config.defaultAvatarSrc ? config.defaultAvatarSrc : getDefaultAvatarSrc(imageAssets)}"/></div>`);
return `<div style="${styles.commentUserInfoAsHTML?.root}">
<div style="${styles.commentUserInfoAsHTML?.infoLeft}">${avatar}</div>
<div style="${styles.commentUserInfoAsHTML?.infoRight}">
${usernameElement}
</div>
</div>`;
}
export function CommentUserInfo(props) {
const { comment, config, imageAssets, styles, translations, userPresenceState } = props;
const activityIcon = CommentUserActivityIcon({
disableLiveCommenting: config.disableLiveCommenting,
userId: comment.userId,
anonUserId: comment.anonUserId,
userPresenceState,
styles
});
const commenterLeftLink = !comment.isBlocked && comment.commenterLink;
let displayLabel = null;
if (comment.displayLabel) {
displayLabel = _jsx(Text, { style: styles.commentUserInfo?.label, children: comment.displayLabel });
}
else {
if (comment.isByAdmin) {
displayLabel = _jsx(Text, { style: styles.commentUserInfo?.label, children: translations.ADMIN_LABEL });
}
else if (comment.isByModerator) {
displayLabel = _jsx(Text, { style: styles.commentUserInfo?.label, children: translations.MODERATOR_LABEL });
}
}
let commenterName = comment.commenterName;
if (comment.isDeleted) {
commenterName = translations.DELETED_PLACEHOLDER;
}
else if (comment.isBlocked) {
commenterName = translations.BLOCKED_USER_PLACEHOLDER;
}
const usernameElement = _jsxs(View, { children: [config.hideAvatars && activityIcon, commenterLeftLink ? _jsx(TouchableOpacity, { onPress: () => Linking.openURL(comment.commenterLink), children: _jsx(Text, { style: styles.commentUserInfo?.usernameWithLink, children: commenterName }) }) : _jsx(Text, { style: styles.commentUserInfo?.username, children: commenterName })] });
const avatar = config.hideAvatars ? null :
(comment.avatarSrc && !comment.isBlocked
? _jsxs(View, { style: styles.commentUserInfo?.avatarWrapper, children: [_jsx(Image, { style: styles.commentUserInfo?.avatarImage, source: { uri: comment.avatarSrc } }), activityIcon] })
: _jsxs(View, { style: styles.commentUserInfo?.avatarWrapperDefault, children: [_jsx(Image, { style: styles.commentUserInfo?.avatarImage, source: config.defaultAvatarSrc ? { uri: config.defaultAvatarSrc } : getDefaultAvatarSrc(imageAssets) }), activityIcon] }));
// TODO best way to handle undefined comment.badges instead of cast? TS compilation error
return _jsxs(View, { style: styles.commentUserInfo?.root, children: [avatar ? _jsx(View, { style: styles.commentUserInfo?.infoLeft, children: avatar }) : null, _jsxs(View, { style: styles.commentUserInfo?.infoRight, children: [comment.badges && comment.badges.length > 0 && comment.badges.map((badge) => _jsx(CommentUserBadge, { badge: badge, styles: styles }, badge.id)), !comment.verified && !(comment.wasPostedCurrentSession && comment.requiresVerification) && !config.disableUnverifiedLabel &&
_jsx(Text, { style: styles.commentUserInfo?.label, children: translations.UNVERIFIED_COMMENT }), displayLabel, usernameElement] })] });
}