@nodeject/ui-components
Version:
UI library for non-trivial components
58 lines (57 loc) • 2.55 kB
JavaScript
import cc from 'classcat';
import * as React from 'react';
import { Comment } from './Comment';
var CommentList = function (_a) {
var _b;
var align = _a.align, bottomRef = _a.bottomRef, children = _a.children, order = _a.order, topRef = _a.topRef;
var childrenFinal = order === 'asc'
? children
: (_b = children) === null || _b === void 0 ? void 0 : _b.slice().reverse();
var commentListArray = React.Children.toArray(childrenFinal).map(function (comment) { return comment.props; });
var commentList = React.Children.map(childrenFinal, function (commentComponent, index) {
var leftPadding = 0;
var commentId = commentComponent.props.author.id;
var commentParentId = commentComponent.props.parent;
var previousCommentId = index > 0
? children[index - 1].props.author.id
: children[index].props.author.id;
// Get left padding
var parentComment = commentListArray.find(function (c) { return c.id === commentParentId; });
var commentIndex = index;
var ancestorsCount = 0;
while (parentComment) {
ancestorsCount = ancestorsCount + 1;
commentIndex = commentIndex - 1;
parentComment = commentListArray.find(function (c) { return c.id === parentComment.parent; });
}
leftPadding = ancestorsCount * 4;
var isFirstComment = index === 0;
var showHeader = isFirstComment
? true
: commentId !== previousCommentId;
var showSider = showHeader;
return React.cloneElement(commentComponent, {
className: cc({
'py-1': !isFirstComment,
'pb-1': isFirstComment,
'mt-5': isFirstComment,
'pt-2': isFirstComment || showHeader
}),
key: commentComponent.props.id,
showHeader: showHeader,
showSider: showSider,
style: { paddingLeft: leftPadding + "rem" }
});
});
return (React.createElement("div", { className: "flex h-full w-full " + (align === 'top' ? 'items-start' : 'items-end') },
React.createElement("div", { className: "bg-white w-full" },
React.createElement("div", { ref: topRef }),
commentList,
React.createElement("div", { ref: bottomRef }))));
};
CommentList.Comment = Comment;
CommentList.defaultProps = {
order: 'asc',
align: 'top'
};
export { CommentList };