@nodeject/ui-components
Version:
UI library for non-trivial components
103 lines (102 loc) • 5.98 kB
JavaScript
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 { Comment as AntdComment, Tooltip, Avatar } from 'antd';
import * as React from 'react';
import { useRef } from 'react';
import moment from 'moment';
import { DislikeFilledIcon, DislikeIcon, LikeFilledIcon, LikeIcon, FavoriteFilledIcon, FavoriteIcon } from '../../icons';
import { RichTextViewer } from '../../rich-text-editor';
export var Comment = function (props) {
var comment = props.comment, user = props.user, replyEditor = props.replyEditor, editEditor = props.editEditor, events = props.events, getTributeComponent = props.getTributeComponent, requestedToShowReplyEditor = props.requestedToShowReplyEditor, requestedToShowEditEditor = props.requestedToShowEditEditor, bookmarkComment = props.bookmarkComment, likeComment = props.likeComment, dislikeComment = props.dislikeComment, onLinkClick = props.onLinkClick, options = props.options;
var commentRef = useRef(null);
var bookmark = function () {
bookmarkComment(comment.id);
};
var like = function () {
likeComment(comment.id);
};
var dislike = function () {
dislikeComment(comment.id);
};
var onRequestToReply = function () {
requestedToShowReplyEditor(comment.id);
};
var onRequestToEdit = function () {
requestedToShowEditEditor(comment.id);
};
// handle invalid states
if (comment.likedBy === undefined) {
comment.likedBy = [];
}
if (comment.dislikedBy === undefined) {
comment.dislikedBy = [];
}
if (comment.bookmarkedBy === undefined) {
comment.bookmarkedBy = [];
}
var isLikedByUser = comment.likedBy.find(function (u) { return u.oauthId === user.id; }) !== undefined;
var isDislikedByUser = comment.dislikedBy.find(function (u) { return u.oauthId === user.id; }) !== undefined;
var action = '';
if (isLikedByUser) {
action = 'liked';
}
else if (isDislikedByUser) {
action = 'disliked';
}
var isBookmarkedByUser = comment.bookmarkedBy.find(function (u) { return u.oauthId === user.id; }) !== undefined ? true : false;
var actions = [
React.createElement("span", null,
React.createElement(Tooltip, { title: comment.likedBy.length > 0 ? (comment.likedBy.map(function (like) {
return React.createElement("div", { key: like.id }, like.display);
})) : ('Like') }, action === 'liked' ? React.createElement(LikeFilledIcon, { onClick: like }) : React.createElement(LikeIcon, { onClick: like })),
React.createElement("span", { style: { paddingLeft: 8, cursor: 'auto' } }, comment.likedBy.length)),
options.canDislike && (React.createElement("span", null,
React.createElement(Tooltip, { title: comment.dislikedBy.length > 0 ? (comment.dislikedBy.map(function (dislike) {
return React.createElement("div", { key: dislike.id }, dislike.display);
})) : ('Dislike') }, action === 'disliked' ? (React.createElement(DislikeFilledIcon, { onClick: dislike })) : (React.createElement(DislikeIcon, { onClick: dislike }))),
React.createElement("span", { style: { paddingLeft: 8, cursor: 'auto' } }, comment.dislikedBy.length))),
React.createElement("span", { onClick: onRequestToReply, style: { paddingLeft: 8 } }, "Reply"),
comment.author &&
user.id === comment.author.oauthId && (React.createElement("span", { onClick: onRequestToEdit, style: { paddingLeft: 8 } }, "Edit"))
];
var onAuthorClick = function () {
events && events.onAuthorClick(comment.author.id);
};
return (React.createElement("div", { id: comment.id, ref: commentRef },
React.createElement(AntdComment, { actions: actions, author: React.createElement("a", null, comment.author && comment.author.display), avatar: React.createElement("div", { onClick: onAuthorClick },
React.createElement(Avatar, { size: 'small', src: comment.author && comment.author.picture, alt: comment.author && comment.author.display })), content: editEditor || (React.createElement(RichTextViewer, { content: comment.content, getTributeComponent: getTributeComponent, onLinkClick: onLinkClick })), datetime: React.createElement("div", null,
React.createElement(Tooltip, { title: moment(comment.createdAt).format('YYYY-MM-DD HH:mm:ss') },
React.createElement("span", null, moment(comment.createdAt).fromNow())),
React.createElement(Tooltip, { title: 'bookmark' }, isBookmarkedByUser ? (React.createElement(FavoriteFilledIcon, { onClick: bookmark, style: {
marginLeft: '16px',
color: isBookmarkedByUser ? '#fadb14' : ''
} })) : (React.createElement(FavoriteIcon, { onClick: bookmark, style: {
marginLeft: '16px',
color: isBookmarkedByUser ? '#fadb14' : ''
} })))) },
props.children,
replyEditor)));
};
export var createNewComment = function (args) {
var comments = args.comments, content = args.content, parentComment = args.parentComment, parentConversation = args.parentConversation, user = args.user;
var comment = {
author: user,
content: content,
parentConversation: parentConversation
};
if (!parentComment) {
return comment;
}
else {
return __assign(__assign({}, comment), { parentComment: parentComment });
}
};