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-2": !!this.props.isChild,
  45           "border-top border-light": !this.props.noBorder,
  46         })}
  47         style={{
  48           "border-left-color": borderColor,
  49           "border-left-style": "solid",
  50           "border-left-width": `2px`,
  51         }}
  52       >
  53         {this.props.nodes.slice(0, maxComments).map(node => (
  54           <CommentNode
  55             key={node.comment_view.comment.id}
  56             node={node}
  57             noBorder={this.props.noBorder}
  58             noIndent={this.props.noIndent}
  59             viewOnly={this.props.viewOnly}
  60             locked={this.props.locked}
  61             moderators={this.props.moderators}
  62             admins={this.props.admins}
  63             markable={this.props.markable}
  64             showContext={this.props.showContext}
  65             showCommunity={this.props.showCommunity}
  66             enableDownvotes={this.props.enableDownvotes}
  67             viewType={this.props.viewType}
  68             allLanguages={this.props.allLanguages}
  69             siteLanguages={this.props.siteLanguages}
  70             hideImages={this.props.hideImages}
  71           />
  72         ))}
  73       </ul>
  74     ) : null;
  75   }
  76 }