fastcomments-react-native-sdk/src/components/comment-bottom.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 { useHookstate } from "@hookstate/core";
import { Image, TouchableOpacity, View, Text } from "react-native";
import { CommentVote } from "./comment-vote";
import { FastCommentsImageAsset } from "../types";
import { CommentReplyToggle } from "./comment-reply-toggle";
import { useState } from "react";
import { ReplyArea } from "./reply-area";
import { CommentDisplayDate } from "./comment-dispay-date";
import { CAN_CLOSE } from "./modal-menu";
export function CommentBottom(props) {
    const { comment, config, imageAssets, onAuthenticationChange, onNotificationSelected, onReplySuccess, onVoteSuccess, pickGIF, pickImage, requestSetReplyingTo, setRepliesHidden, styles, translations, } = props;
    // OPTIMIZATION: we only use comment.replyBoxOpen for initial render.
    const state = useHookstate(props.state); // OPTIMIZATION local state
    const [isReplyBoxOpen, setIsReplyBoxOpen] = useState(comment.replyBoxOpen);
    return _jsxs(View, { style: styles.commentBottom?.root, children: [_jsxs(View, { style: styles.commentBottom?.commentBottomToolbar, children: [config.renderDateBelowComment
                        && _jsx(CommentDisplayDate, { date: comment.date, translations: translations, absoluteDates: config.absoluteDates, absoluteAndRelativeDates: config.absoluteAndRelativeDates, style: styles.comment?.displayDate }), !config.renderLikesToRight &&
                        _jsx(CommentVote, { comment: comment, config: config, imageAssets: imageAssets, state: state, styles: styles, translations: translations, onVoteSuccess: onVoteSuccess }), _jsxs(TouchableOpacity, { style: styles.commentBottom?.commentBottomToolbarReply, onPress: async () => {
                            const canClose = await requestSetReplyingTo(isReplyBoxOpen ? null : comment);
                            if (canClose === CAN_CLOSE) {
                                setIsReplyBoxOpen(!isReplyBoxOpen);
                            }
                        }, children: [_jsx(Image, { source: imageAssets[isReplyBoxOpen ? FastCommentsImageAsset.ICON_REPLY_ARROW_ACTIVE : FastCommentsImageAsset.ICON_REPLY_ARROW_INACTIVE], style: styles.commentBottom?.commentBottomToolbarReplyIcon }), _jsx(Text, { style: styles.commentBottom?.commentBottomToolbarReplyText, children: translations.REPLY })] })] }), isReplyBoxOpen && !config.useSingleReplyField && _jsx(View, { style: styles.commentBottom?.replyAreaRoot, children: _jsx(ReplyArea, { imageAssets: imageAssets, onAuthenticationChange: onAuthenticationChange, onNotificationSelected: onNotificationSelected, onReplySuccess: (comment) => {
                        setIsReplyBoxOpen(!isReplyBoxOpen);
                        onReplySuccess(comment);
                    }, parentComment: comment, pickGIF: pickGIF, pickImage: pickImage, state: state, styles: styles, translations: translations }) }), _jsx(CommentReplyToggle, { comment: comment, hasDarkBackground: config.hasDarkBackground, imageAssets: imageAssets, nestedChildrenCount: comment.nestedChildrenCount, setRepliesHidden: setRepliesHidden, styles: styles, translations: translations })] });
}