@nodeject/ui-components
Version:
UI library for non-trivial components
75 lines (74 loc) • 4.31 kB
JavaScript
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
import * as React from 'react';
import { useEffect, useRef, useState } from 'react';
import { Comment, EditorContainer } from '../components';
export var Conversation = function (props) {
var conversation = props.conversation, getTributeComponent = props.getTributeComponent, onLinkClick = props.onLinkClick, talkRef = props.talkRef, tributes = props.tributes;
var conversationRef = useRef(null);
useEffect(function () {
talkRef && talkRef(conversationRef);
}, [conversationRef, conversation]);
// public static defaultProps = {
// options: {
// canBookmarkComment: true,
// canDislike: false,
// canLike: true,
// isChronologicalOrder: true
// }
// }
var _a = useState(''), showReplyEditorId = _a[0], setShowReplyEditorId = _a[1];
var _b = useState(''), showEditEditorId = _b[0], setShowEditEditorId = _b[1];
var _c = useState(''), editorCommentId = _c[0], setEditorCommentId = _c[1];
var requestedToShowReplyEditor = function (commentId) {
setShowReplyEditorId(commentId);
setShowEditEditorId('');
};
var requestedToShowEditEditor = function (commentId) {
setShowEditEditorId(commentId);
setShowReplyEditorId('');
};
var hideReplyEditor = function () {
setShowReplyEditorId('');
};
var hideEditEditor = function () {
setShowEditEditorId('');
};
var decorateCommentsWithExtraProperties = function (comments) {
var decoratedComments = __spreadArrays(comments);
if (props.options.isChronologicalOrder) {
return decoratedComments;
}
else {
return decoratedComments.reverse();
}
};
var loop = function (comments) {
return (
// <ul className='RootCommentsUL'>
comments.map(function (comment) {
return (
// <li>
React.createElement(Comment, { options: props.options, likeComment: props.likeComment, dislikeComment: props.dislikeComment, bookmarkComment: props.bookmarkComment, comment: comment, user: props.user, key: comment.id, requestedToShowReplyEditor: requestedToShowReplyEditor, requestedToShowEditEditor: requestedToShowEditEditor, onLinkClick: onLinkClick, getTributeComponent: getTributeComponent, editEditor: showEditEditorId === comment.id && (React.createElement(EditorContainer, { getTributeComponent: getTributeComponent, initialValue: comment.content, parentConversation: {
id: comment.parentConversation.id
}, hideEditEditor: hideEditEditor, editorType: 'edit', user: props.user, onAddComment: props.addComment, onEditComment: props.editComment, submitting: undefined, tributes: tributes, comment: comment })), replyEditor: showReplyEditorId === comment.id && (React.createElement(EditorContainer, { getTributeComponent: getTributeComponent, initialValue: null, parentConversation: {
id: comment.parentConversation.id
}, hideReplyEditor: hideReplyEditor, editorType: 'reply', user: props.user, onAddComment: props.addComment, onEditComment: props.editComment, submitting: undefined, tributes: tributes, comment: comment })) }, loop(conversation.comments.filter(function (c) { return c.parentComment && c.parentComment.id === comment.id; })))
// {/* </li> */}
);
})
// {/* </ul> */}
);
};
var rootComments = conversation.comments.filter(function (c) { return c.parentComment === null; });
var comments = decorateCommentsWithExtraProperties(rootComments);
return (React.createElement("div", { className: 'talk-conversation', ref: conversationRef },
React.createElement("a", { id: 'top', href: '#top' }),
loop(comments),
React.createElement("a", { id: 'lastComment', href: '#lastComment' })));
};