fastcomments-react-native-sdk
Version:
React Native FastComments Components. Add live commenting to any React Native application.
64 lines (63 loc) • 5.38 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { RenderHTMLSource } from 'react-native-render-html';
import { Image, Pressable, TouchableOpacity, View } from "react-native";
import { getCommentMenuState } from "./comment-menu";
import { CommentNotices } from "./comment-notices";
import { CommentUserInfo, getCommentUserInfoHTML } from "./comment-user-info";
import { useHookstate } from "@hookstate/core";
import { CommentDisplayDate } from "./comment-dispay-date";
import { CommentBottom } from "./comment-bottom";
import { FastCommentsImageAsset, } from "../types";
import { CommentVote } from "./comment-vote";
import { ShowNewChildLiveCommentsButton } from "./show-new-child-live-comments-button";
import { memo } from "react";
const CommentHTMLRenderMemo = memo(({ html, width }) => _jsx(RenderHTMLSource, { source: {
html
}, contentWidth: width }), (prevProps, nextProps) => {
return prevProps.html === nextProps.html && prevProps.width === nextProps.width;
});
const RenderCount = {};
export function FastCommentsCommentView(props) {
const { styles, comment, config, onAuthenticationChange, onReplySuccess, onVoteSuccess, openCommentMenu, pickGIF, pickImage, requestSetReplyingTo, setRepliesHidden, translations, imageAssets, width, } = props;
const id = comment._id;
if (RenderCount[id] === undefined) {
RenderCount[id] = 1;
}
else {
RenderCount[id]++;
}
console.log('comment render count', RenderCount[id]);
const state = useHookstate(props.state); // OPTIMIZATION: creating scoped state
const html = comment.isDeleted
? translations.DELETED_PLACEHOLDER
: (comment.isBlocked
? translations.YOU_BLOCKED_THIS_USER
: comment.commentHTML);
// there is no way to do this outside of HTML rendering today, so if we have this flag set to true, we render user info completely differently.
const renderCommentInline = config.renderCommentInline;
const usePressableEditTrigger = config.usePressToEdit;
const isReadonly = config.readonly;
const menuState = isReadonly ? null : getCommentMenuState(state, comment);
const shouldShowMenu = menuState
&& (menuState.canEdit
|| menuState.canPin
|| menuState.canBlockOrFlag);
const htmlWrapped = `<div style="${styles.comment?.textHTML || ''}">${html}</div>`; // goes away when fixed: https://github.com/meliorence/react-native-render-html/issues/582
const finalHTML = renderCommentInline ? `<div style="flex-direction:row">${getCommentUserInfoHTML({
comment,
config,
imageAssets,
translations,
styles
})}${htmlWrapped}</div>` : htmlWrapped;
const content = _jsxs(View, { style: styles.comment?.subRoot, children: [_jsxs(View, { style: styles.comment?.topRight, children: [!config.renderDateBelowComment
&& _jsx(CommentDisplayDate, { date: comment.date, translations: translations, absoluteDates: config.absoluteDates, absoluteAndRelativeDates: config.absoluteAndRelativeDates, style: styles.comment?.displayDate }), comment.isPinned && _jsx(Image, { source: imageAssets[config.hasDarkBackground ? FastCommentsImageAsset.ICON_PIN_WHITE : FastCommentsImageAsset.ICON_PIN_RED], style: styles.comment?.pin }), !usePressableEditTrigger && shouldShowMenu &&
_jsx(TouchableOpacity, { style: { padding: 5 }, onPress: () => openCommentMenu(comment, menuState), children: _jsx(Image, { source: imageAssets[config.hasDarkBackground ? FastCommentsImageAsset.ICON_EDIT_SMALL_WHITE : FastCommentsImageAsset.ICON_EDIT_SMALL], style: { width: 16, height: 16 } }) })] }), _jsxs(View, { style: styles.comment?.contentWrapper, children: [_jsx(CommentNotices, { comment: comment, styles: styles, translations: translations }), !renderCommentInline &&
_jsx(CommentUserInfo, { comment: comment, config: config, imageAssets: imageAssets, styles: styles, translations: translations, userPresenceState: state.userPresenceState }), _jsx(CommentHTMLRenderMemo, { html: finalHTML, width: width }), config.renderLikesToRight &&
_jsx(CommentVote, { comment: comment, config: config, imageAssets: imageAssets, state: state, styles: styles, translations: translations, onVoteSuccess: onVoteSuccess })] }), _jsx(CommentBottom, { comment: comment, state: state, config: config, translations: translations, imageAssets: imageAssets, styles: styles, onVoteSuccess: onVoteSuccess, onReplySuccess: onReplySuccess, onAuthenticationChange: onAuthenticationChange, pickGIF: pickGIF, pickImage: pickImage, requestSetReplyingTo: requestSetReplyingTo, setRepliesHidden: setRepliesHidden }), !comment.repliesHidden && _jsx(View, { style: styles.comment?.children, children: comment.hiddenChildrenCount &&
_jsx(ShowNewChildLiveCommentsButton, { comment: comment, translations: translations, styles: styles }) })] });
const contentWrapped = usePressableEditTrigger && shouldShowMenu
? _jsx(Pressable, { onLongPress: () => openCommentMenu(comment, menuState), children: content }) : content;
const indentStyles = comment.depth ? { marginLeft: comment.depth * (styles.comment?.childIndent || 20) } : null;
return _jsx(View, { style: [styles.comment?.root, indentStyles], children: contentWrapped });
}