src/shared/components/comment/comment-nodes.tsx

   1 import classNames from "classnames";
   2 import { Component } from "inferno";
   3 import {
   4   AddAdmin,
   5   AddModToCommunity,
   6   BanFromCommunity,
   7   BanPerson,
   8   BlockPerson,
   9   CommentId,
  10   CommunityModeratorView,
  11   CreateComment,
  12   CreateCommentLike,
  13   CreateCommentReport,
  14   DeleteComment,
  15   DistinguishComment,
  16   EditComment,
  17   GetComments,
  18   Language,
  19   MarkCommentReplyAsRead,
  20   MarkPersonMentionAsRead,
  21   PersonView,
  22   PurgeComment,
  23   PurgePerson,
  24   RemoveComment,
  25   SaveComment,
  26   TransferCommunity,
  27 } from "lemmy-js-client";
  28 import { CommentNodeI, CommentViewType } from "../../interfaces";
  29 import { colorList } from "../../utils";
  30 import { CommentNode } from "./comment-node";
  31
  32 interface CommentNodesProps {
  33   nodes: CommentNodeI[];
  34   moderators?: CommunityModeratorView[];
  35   admins?: PersonView[];
  36   maxCommentsShown?: number;
  37   noBorder?: boolean;
  38   noIndent?: boolean;
  39   viewOnly?: boolean;
  40   locked?: boolean;
  41   markable?: boolean;
  42   showContext?: boolean;
  43   showCommunity?: boolean;
  44   enableDownvotes?: boolean;
  45   viewType: CommentViewType;
  46   allLanguages: Language[];
  47   siteLanguages: number[];
  48   hideImages?: boolean;
  49   isChild?: boolean;
  50   depth?: number;
  51   finished: Map<CommentId, boolean | undefined>;
  52   onSaveComment(form: SaveComment): void;
  53   onCommentReplyRead(form: MarkCommentReplyAsRead): void;
  54   onPersonMentionRead(form: MarkPersonMentionAsRead): void;
  55   onCreateComment(form: EditComment | CreateComment): void;
  56   onEditComment(form: EditComment | CreateComment): void;
  57   onCommentVote(form: CreateCommentLike): void;
  58   onBlockPerson(form: BlockPerson): void;
  59   onDeleteComment(form: DeleteComment): void;
  60   onRemoveComment(form: RemoveComment): void;
  61   onDistinguishComment(form: DistinguishComment): void;
  62   onAddModToCommunity(form: AddModToCommunity): void;
  63   onAddAdmin(form: AddAdmin): void;
  64   onBanPersonFromCommunity(form: BanFromCommunity): void;
  65   onBanPerson(form: BanPerson): void;
  66   onTransferCommunity(form: TransferCommunity): void;
  67   onFetchChildren?(form: GetComments): void;
  68   onCommentReport(form: CreateCommentReport): void;
  69   onPurgePerson(form: PurgePerson): void;
  70   onPurgeComment(form: PurgeComment): void;
  71 }
  72
  73 export class CommentNodes extends Component<CommentNodesProps, any> {
  74   constructor(props: CommentNodesProps, context: any) {
  75     super(props, context);
  76   }
  77
  78   render() {
  79     const maxComments = this.props.maxCommentsShown ?? this.props.nodes.length;
  80
  81     const borderColor = this.props.depth
  82       ? colorList[this.props.depth % colorList.length]
  83       : colorList[0];
  84
  85     return this.props.nodes.length > 0 ? (
  86       <ul
  87         className={classNames("comments", {
  88           "ms-1": !!this.props.isChild,
  89           "border-top border-light": !this.props.noBorder,
  90         })}
  91         style={`border-left: 2px solid ${borderColor} !important;`}
  92       >
  93         {this.props.nodes.slice(0, maxComments).map(node => (
  94           <CommentNode
  95             key={node.comment_view.comment.id}
  96             node={node}
  97             noBorder={this.props.noBorder}
  98             noIndent={this.props.noIndent}
  99             viewOnly={this.props.viewOnly}
 100             locked={this.props.locked}
 101             moderators={this.props.moderators}
 102             admins={this.props.admins}
 103             markable={this.props.markable}
 104             showContext={this.props.showContext}
 105             showCommunity={this.props.showCommunity}
 106             enableDownvotes={this.props.enableDownvotes}
 107             viewType={this.props.viewType}
 108             allLanguages={this.props.allLanguages}
 109             siteLanguages={this.props.siteLanguages}
 110             hideImages={this.props.hideImages}
 111             onCommentReplyRead={this.props.onCommentReplyRead}
 112             onPersonMentionRead={this.props.onPersonMentionRead}
 113             finished={this.props.finished}
 114             onCreateComment={this.props.onCreateComment}
 115             onEditComment={this.props.onEditComment}
 116             onCommentVote={this.props.onCommentVote}
 117             onBlockPerson={this.props.onBlockPerson}
 118             onSaveComment={this.props.onSaveComment}
 119             onDeleteComment={this.props.onDeleteComment}
 120             onRemoveComment={this.props.onRemoveComment}
 121             onDistinguishComment={this.props.onDistinguishComment}
 122             onAddModToCommunity={this.props.onAddModToCommunity}
 123             onAddAdmin={this.props.onAddAdmin}
 124             onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
 125             onBanPerson={this.props.onBanPerson}
 126             onTransferCommunity={this.props.onTransferCommunity}
 127             onFetchChildren={this.props.onFetchChildren}
 128             onCommentReport={this.props.onCommentReport}
 129             onPurgePerson={this.props.onPurgePerson}
 130             onPurgeComment={this.props.onPurgeComment}
 131           />
 132         ))}
 133       </ul>
 134     ) : null;
 135   }
 136 }