@nodeject/ui-components/esm/talk/Talk.js

UI library for non-trivial components

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import { Badge } from 'antd';
import * as React from 'react';
import { useEffect, useRef, useState } from 'react';
import Scrollchor from 'react-scrollchor';
import { DownCircleIcon, UpCircleIcon } from '../icons';
import { LayoutTalk } from '../layout';
import { Conversation as ConversationContent, Header as ConversationHeader, Footer as ConversationFooter } from './components';
import * as styles from './Talk.module.less';
var defaultProps = {
    canBookmarkComment: true,
    canBookmarkConversationt: true,
    canDislike: false,
    canLike: true,
    isChronologicalOrder: true
};
export var Talk = function (props) {
    var getTributeComponent = props.getTributeComponent;
    var talkTargetId = useState(parseInt(Math.random().toString(8).substr(2, 9), 10).toString())[0];
    var talkRef = useRef(null);
    var goToRef = useRef(null);
    var goToBottomButtonRef = useRef(null);
    var goToTopButtonRef = useRef(null);
    var _a = useState(undefined), goTo = _a[0], setGoTo = _a[1];
    var _b = useState(undefined), goToBottom = _b[0], setGoToBottom = _b[1];
    var _c = useState(undefined), goToTop = _c[0], setGoToTop = _c[1];
    var _d = useState(''), toCommentId = _d[0], setToCommentId = _d[1];
    // Once Talk is loaded, go to the end of conversation if chronological order.
    useEffect(function () {
        talkRef.current &&
            goToBottom &&
            props.options.isChronologicalOrder &&
            goToBottom();
    }, [talkRef.current, goToBottom]);
    useEffect(function () {
        goToRef.current && setGoTo(function () { return goToRef.current.simulateClick; });
    }, [goToRef.current]);
    useEffect(function () {
        goToBottomButtonRef.current &&
            setGoToBottom(function () { return goToBottomButtonRef.current.simulateClick; });
    }, [goToBottomButtonRef.current]);
    useEffect(function () {
        goToTopButtonRef.current &&
            setGoToTop(function () { return goToTopButtonRef.current.simulateClick; });
    }, [goToTopButtonRef.current]);
    var goToComment = function (id) {
        setToCommentId(id);
    };
    if (!props.conversation) {
        return React.createElement("div", null, "Conversation id not valid.");
    }
    var headerProps = {
        bookmarkConversation: props.bookmarkConversation,
        conversation: props.conversation,
        onGoToConversationsClick: props.onGoToConversationsClick,
        user: props.user
    };
    var conversationProps = __assign({}, props);
    var footerProps = {
        conversationId: props.conversation ? props.conversation.id : '',
        getTributeComponent: getTributeComponent,
        goToComment: goToComment,
        user: props.user,
        addComment: props.addComment,
        tributes: props.tributes
    };
    var onContentBottomReached = function () {
        props.setConversationAsRead(true);
    };
    var onContentTopReached = function () { };
    var hasUnreadMessages = props.conversation.unreadMessagesBy &&
        props.conversation.unreadMessagesBy.find(function (u) { return u.oauthId === props.user.id; }) !== undefined;
    var goToBottomButton = props.options.isChronologicalOrder && (React.createElement(Badge, { dot: hasUnreadMessages ? true : false, className: hasUnreadMessages
            ? styles.unreadMessagesNotification
            : styles.goToEndOfConversation },
        React.createElement(DownCircleIcon, { onClick: function () { return goToBottom(); }, style: { fontSize: '2rem' } })));
    var goToTopButton = !props.options.isChronologicalOrder && (React.createElement(UpCircleIcon, { onClick: function () { return goToTop(); }, style: { fontSize: '2rem' } }));
    useEffect(function () {
        if (toCommentId !== '' && goTo) {
            goTo();
        }
    });
    var headerContent = props.options.isChronologicalOrder ? (!props.headless && React.createElement(ConversationHeader, __assign({}, headerProps))) : (React.createElement(ConversationFooter, __assign({}, footerProps)));
    var footerContent = props.options.isChronologicalOrder && (React.createElement(ConversationFooter, __assign({}, footerProps)));
    return (React.createElement("div", { className: styles.talk, ref: talkRef },
        React.createElement(LayoutTalk, { content: React.createElement(ConversationContent, __assign({}, conversationProps)), footerContent: footerContent, goToBottomButton: goToBottomButton, goToTopButton: goToTopButton, headerContent: headerContent, onContentBottomReached: onContentBottomReached, onContentTopReached: onContentTopReached, target: talkTargetId }),
        React.createElement(Scrollchor, { ref: goToBottomButtonRef, to: "#lastComment", target: talkTargetId }),
        React.createElement(Scrollchor, { ref: goToTopButtonRef, to: "#top", target: talkTargetId }),
        React.createElement(Scrollchor, { ref: goToRef, to: toCommentId, target: talkTargetId })));
};