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

   1 import { colorList } from "@utils/app";
   2 import classNames from "classnames";
   3 import { Component } from "inferno";
   4 import {
   5   AddAdmin,
   6   AddModToCommunity,
   7   BanFromCommunity,
   8   BanPerson,
   9   BlockPerson,
  10   CommentId,
  11   CommunityModeratorView,
  12   CreateComment,
  13   CreateCommentLike,
  14   CreateCommentReport,
  15   DeleteComment,
  16   DistinguishComment,
  17   EditComment,
  18   GetComments,
  19   Language,
  20   MarkCommentReplyAsRead,
  21   MarkPersonMentionAsRead,
  22   PersonView,
  23   PurgeComment,
  24   PurgePerson,
  25   RemoveComment,
  26   SaveComment,
  27   TransferCommunity,
  28 } from "lemmy-js-client";
  29 import { CommentNodeI, CommentViewType } from "../../interfaces";
  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 - 1) % 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={
  93             this.props.isChild
  94               ? `border-left: 2px solid ${borderColor} !important;`
  95               : undefined
  96           }
  97         >
  98           {this.props.nodes.slice(0, maxComments).map(node => (
  99             <CommentNode
 100               key={node.comment_view.comment.id}
 101               node={node}
 102               noBorder={this.props.noBorder}
 103               noIndent={this.props.noIndent}
 104               viewOnly={this.props.viewOnly}
 105               locked={this.props.locked}
 106               moderators={this.props.moderators}
 107               admins={this.props.admins}
 108               markable={this.props.markable}
 109               showContext={this.props.showContext}
 110               showCommunity={this.props.showCommunity}
 111               enableDownvotes={this.props.enableDownvotes}
 112               viewType={this.props.viewType}
 113               allLanguages={this.props.allLanguages}
 114               siteLanguages={this.props.siteLanguages}
 115               hideImages={this.props.hideImages}
 116               onCommentReplyRead={this.props.onCommentReplyRead}
 117               onPersonMentionRead={this.props.onPersonMentionRead}
 118               finished={this.props.finished}
 119               onCreateComment={this.props.onCreateComment}
 120               onEditComment={this.props.onEditComment}
 121               onCommentVote={this.props.onCommentVote}
 122               onBlockPerson={this.props.onBlockPerson}
 123               onSaveComment={this.props.onSaveComment}
 124               onDeleteComment={this.props.onDeleteComment}
 125               onRemoveComment={this.props.onRemoveComment}
 126               onDistinguishComment={this.props.onDistinguishComment}
 127               onAddModToCommunity={this.props.onAddModToCommunity}
 128               onAddAdmin={this.props.onAddAdmin}
 129               onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
 130               onBanPerson={this.props.onBanPerson}
 131               onTransferCommunity={this.props.onTransferCommunity}
 132               onFetchChildren={this.props.onFetchChildren}
 133               onCommentReport={this.props.onCommentReport}
 134               onPurgePerson={this.props.onPurgePerson}
 135               onPurgeComment={this.props.onPurgeComment}
 136             />
 137           ))}
 138         </ul>
 139       )
 140     );
 141   }
 142 }