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

   1 import classNames from "classnames";
   2 import { Component } from "inferno";
   3 import { CommunityModeratorView, Language, PersonView } from "lemmy-js-client";
   4 import { CommentNodeI, CommentViewType } from "../../interfaces";
   5 import { colorList } from "../../utils";
   6 import { CommentNode } from "./comment-node";
   7
   8 interface CommentNodesProps {
   9   nodes: CommentNodeI[];
  10   moderators?: CommunityModeratorView[];
  11   admins?: PersonView[];
  12   maxCommentsShown?: number;
  13   noBorder?: boolean;
  14   noIndent?: boolean;
  15   viewOnly?: boolean;
  16   locked?: boolean;
  17   markable?: boolean;
  18   showContext?: boolean;
  19   showCommunity?: boolean;
  20   enableDownvotes?: boolean;
  21   viewType: CommentViewType;
  22   allLanguages: Language[];
  23   siteLanguages: number[];
  24   hideImages?: boolean;
  25   isChild?: boolean;
  26   depth?: number;
  27 }
  28
  29 export class CommentNodes extends Component<CommentNodesProps, any> {
  30   constructor(props: CommentNodesProps, context: any) {
  31     super(props, context);
  32   }
  33
  34   render() {
  35     const maxComments = this.props.maxCommentsShown ?? this.props.nodes.length;
  36
  37     const borderColor = this.props.depth
  38       ? colorList[this.props.depth % colorList.length]
  39       : colorList[0];
  40
  41     return this.props.nodes.length > 0 ? (
  42       <ul
  43         className={classNames("comments", {
  44           "ms-1": !!this.props.isChild,
  45           "border-top border-light": !this.props.noBorder,
  46         })}
  47         style={`border-left: 2px solid ${borderColor} !important;`}
  48       >
  49         {this.props.nodes.slice(0, maxComments).map(node => (
  50           <CommentNode
  51             key={node.comment_view.comment.id}
  52             node={node}
  53             noBorder={this.props.noBorder}
  54             noIndent={this.props.noIndent}
  55             viewOnly={this.props.viewOnly}
  56             locked={this.props.locked}
  57             moderators={this.props.moderators}
  58             admins={this.props.admins}
  59             markable={this.props.markable}
  60             showContext={this.props.showContext}
  61             showCommunity={this.props.showCommunity}
  62             enableDownvotes={this.props.enableDownvotes}
  63             viewType={this.props.viewType}
  64             allLanguages={this.props.allLanguages}
  65             siteLanguages={this.props.siteLanguages}
  66             hideImages={this.props.hideImages}
  67           />
  68         ))}
  69       </ul>
  70     ) : null;
  71   }
  72 }