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 (
  86       this.props.nodes.length > 0 && (
  87         <ul
  88           className={classNames("comments", {
  89             "ms-1": !!this.props.isChild,
  90             "border-top border-light": !this.props.noBorder,
  91           })}
  92           style={`border-left: 2px solid ${borderColor} !important;`}
  93         >
  94           {this.props.nodes.slice(0, maxComments).map(node => (
  95             <CommentNode
  96               key={node.comment_view.comment.id}
  97               node={node}
  98               noBorder={this.props.noBorder}
  99               noIndent={this.props.noIndent}
 100               viewOnly={this.props.viewOnly}
 101               locked={this.props.locked}
 102               moderators={this.props.moderators}
 103               admins={this.props.admins}
 104               markable={this.props.markable}
 105               showContext={this.props.showContext}
 106               showCommunity={this.props.showCommunity}
 107               enableDownvotes={this.props.enableDownvotes}
 108               viewType={this.props.viewType}
 109               allLanguages={this.props.allLanguages}
 110               siteLanguages={this.props.siteLanguages}
 111               hideImages={this.props.hideImages}
 112               onCommentReplyRead={this.props.onCommentReplyRead}
 113               onPersonMentionRead={this.props.onPersonMentionRead}
 114               finished={this.props.finished}
 115               onCreateComment={this.props.onCreateComment}
 116               onEditComment={this.props.onEditComment}
 117               onCommentVote={this.props.onCommentVote}
 118               onBlockPerson={this.props.onBlockPerson}
 119               onSaveComment={this.props.onSaveComment}
 120               onDeleteComment={this.props.onDeleteComment}
 121               onRemoveComment={this.props.onRemoveComment}
 122               onDistinguishComment={this.props.onDistinguishComment}
 123               onAddModToCommunity={this.props.onAddModToCommunity}
 124               onAddAdmin={this.props.onAddAdmin}
 125               onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
 126               onBanPerson={this.props.onBanPerson}
 127               onTransferCommunity={this.props.onTransferCommunity}
 128               onFetchChildren={this.props.onFetchChildren}
 129               onCommentReport={this.props.onCommentReport}
 130               onPurgePerson={this.props.onPurgePerson}
 131               onPurgeComment={this.props.onPurgeComment}
 132             />
 133           ))}
 134         </ul>
 135       )
 136     );
 137   }
 138 }