fastcomments-react-native-sdk/src/components/live-commenting-top-area.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 { View } from "react-native";
import { ReplyArea } from "./reply-area";
import { ShowHideCommentsToggle } from "./show-hide-comments-toggle";
import { SelectSortDirection } from "./select-sort-direction";
import { ShowNewLiveCommentsButton } from "./show-new-live-comments-button";
import { useHookstate } from "@hookstate/core";
import { CommentCount } from './comment-count';
export function LiveCommentingTopArea(props) {
    const { callbackObserver, config, imageAssets, onAuthenticationChange, onNotificationSelected, onReplySuccess, pickGIF, pickImage, styles, translations, } = props;
    const state = useHookstate(props.state); // OPTIMIZATION: creating scoped state
    const areCommentsVisible = state.commentsVisible.get();
    const serverCommentCount = state.commentCountOnServer.get();
    return _jsxs(View, { children: [_jsx(View, { children: config.inputAfterComments !== true &&
                    _jsx(View, { style: props.styles.topArea?.replyArea, children: _jsx(ReplyArea, { imageAssets: imageAssets, onAuthenticationChange: onAuthenticationChange, onNotificationSelected: onNotificationSelected, onReplySuccess: onReplySuccess, pickGIF: pickGIF, pickImage: pickImage, replyingTo: callbackObserver.replyingTo, state: state, styles: styles, translations: translations }) }) }), _jsx(View, { children: config.useShowCommentsToggle && serverCommentCount > 0 && _jsx(ShowHideCommentsToggle, { state: state, styles: styles }) }), areCommentsVisible && serverCommentCount > 0
                && _jsxs(View, { style: props.styles.topArea?.separator, children: [_jsx(CommentCount, { style: props.styles.topArea?.commentCount, state: state, count: serverCommentCount }), areCommentsVisible && serverCommentCount > 1 && _jsx(SelectSortDirection, { state: state, styles: styles })] }), _jsx(View, { children: areCommentsVisible && state.newRootCommentCount.get() > 0 && _jsx(ShowNewLiveCommentsButton, { state: state, styles: styles }) })] });
}