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

UI library for non-trivial components

"use strict";
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);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Talk = void 0;
var antd_1 = require("antd");
var React = require("react");
var react_1 = require("react");
var react_scrollchor_1 = require("react-scrollchor");
var icons_1 = require("../icons");
var layout_1 = require("../layout");
var components_1 = require("./components");
var styles = require("./Talk.module.less");
var defaultProps = {
    canBookmarkComment: true,
    canBookmarkConversationt: true,
    canDislike: false,
    canLike: true,
    isChronologicalOrder: true
};
var Talk = function (props) {
    var getTributeComponent = props.getTributeComponent;
    var talkTargetId = react_1.useState(parseInt(Math.random().toString(8).substr(2, 9), 10).toString())[0];
    var talkRef = react_1.useRef(null);
    var goToRef = react_1.useRef(null);
    var goToBottomButtonRef = react_1.useRef(null);
    var goToTopButtonRef = react_1.useRef(null);
    var _a = react_1.useState(undefined), goTo = _a[0], setGoTo = _a[1];
    var _b = react_1.useState(undefined), goToBottom = _b[0], setGoToBottom = _b[1];
    var _c = react_1.useState(undefined), goToTop = _c[0], setGoToTop = _c[1];
    var _d = react_1.useState(''), toCommentId = _d[0], setToCommentId = _d[1];
    // Once Talk is loaded, go to the end of conversation if chronological order.
    react_1.useEffect(function () {
        talkRef.current &&
            goToBottom &&
            props.options.isChronologicalOrder &&
            goToBottom();
    }, [talkRef.current, goToBottom]);
    react_1.useEffect(function () {
        goToRef.current && setGoTo(function () { return goToRef.current.simulateClick; });
    }, [goToRef.current]);
    react_1.useEffect(function () {
        goToBottomButtonRef.current &&
            setGoToBottom(function () { return goToBottomButtonRef.current.simulateClick; });
    }, [goToBottomButtonRef.current]);
    react_1.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(antd_1.Badge, { dot: hasUnreadMessages ? true : false, className: hasUnreadMessages
            ? styles.unreadMessagesNotification
            : styles.goToEndOfConversation },
        React.createElement(icons_1.DownCircleIcon, { onClick: function () { return goToBottom(); }, style: { fontSize: '2rem' } })));
    var goToTopButton = !props.options.isChronologicalOrder && (React.createElement(icons_1.UpCircleIcon, { onClick: function () { return goToTop(); }, style: { fontSize: '2rem' } }));
    react_1.useEffect(function () {
        if (toCommentId !== '' && goTo) {
            goTo();
        }
    });
    var headerContent = props.options.isChronologicalOrder ? (!props.headless && React.createElement(components_1.Header, __assign({}, headerProps))) : (React.createElement(components_1.Footer, __assign({}, footerProps)));
    var footerContent = props.options.isChronologicalOrder && (React.createElement(components_1.Footer, __assign({}, footerProps)));
    return (React.createElement("div", { className: styles.talk, ref: talkRef },
        React.createElement(layout_1.LayoutTalk, { content: React.createElement(components_1.Conversation, __assign({}, conversationProps)), footerContent: footerContent, goToBottomButton: goToBottomButton, goToTopButton: goToTopButton, headerContent: headerContent, onContentBottomReached: onContentBottomReached, onContentTopReached: onContentTopReached, target: talkTargetId }),
        React.createElement(react_scrollchor_1.default, { ref: goToBottomButtonRef, to: "#lastComment", target: talkTargetId }),
        React.createElement(react_scrollchor_1.default, { ref: goToTopButtonRef, to: "#top", target: talkTargetId }),
        React.createElement(react_scrollchor_1.default, { ref: goToRef, to: toCommentId, target: talkTargetId })));
};
exports.Talk = Talk;