comment/src/components/ContentItem/index.js

import React, { Component } from "react";
import PropTypes from "prop-types";
import { Avatar, Icon } from "antd";
import dayjs from "dayjs";
import Comment from "../../Comment";
import CommentInput from "../CommentInput";
import avatar from "../../avatar";
import { renderContent } from "../../helper";
import "./index.css";

class CommentItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isShowInput: false
    };
    this.handleToggleInput = this.handleToggleInput.bind(this);
    this.renderTextWithReply = this.renderTextWithReply.bind(this);
  }

  handleToggleInput() {
    this.setState({ isShowInput: !this.state.isShowInput });
  }

  renderTextWithReply(text, content) {
    let newText = text;
    const { reply } = content;
    if (reply) {
      newText = `${newText} //@<a href="/${reply.user_id}">${
        reply.user_name
      }</a> ${reply.content}`;
      if (reply.reply) {
        return this.renderTextWithReply(newText, reply);
      }
    }
    return newText;
  }

  render() {
    const {
      commentId,
      replyId,
      content,
      action,
      showReply,
      onShowReply,
      app
    } = this.props;
    // console.log("this.props: ", this.props);

    const { isShowInput } = this.state;

    return (
      <div className="box">
        <div className="left">
          <Avatar src={content.user_avatar || avatar} size="large" />
        </div>
        <div className="right">
          <div className="name">
            <a href={`/${content.user_id}`}>
              {content.user_name || "暂无昵称"}
            </a>

            <span style={{ marginLeft: 10 }}>
              {dayjs(content.created * 1000).format("YYYY-MM-DD HH:mm:ss")}
            </span>
          </div>
          <div
            className="content"
            dangerouslySetInnerHTML={{
              __html: renderContent(
                this.renderTextWithReply(content.content, content)
              )
            }}
          />
          <div className="bottom">
            {content.reply_count ? (
              <div>
                <a
                  className="itemLeft"
                  onClick={onShowReply}
                  style={{ userSelect: "none" }}
                >
                  {content.reply_count} 条回复
                  {showReply ? <Icon type="up" /> : <Icon type="down" />}
                </a>
              </div>
            ) : null}

            <a onClick={this.handleToggleInput} className="itemRight">
              &nbsp; 回复
            </a>
            <div
              className="itemRight"
              style={{ cursor: "pointer" }}
              onClick={() => {
                if (replyId) {
                  // 如果有 replyId，则说明是评论的回复
                  app.sReplyFavor(content.id, commentId, content.favored);
                  return;
                }
                app.sCommentFavor(content.id, content.favored);
              }}
            >
              <Icon
                type="like-o"
                className={content.favored ? "favored" : ""}
              />
              &nbsp;{content.favor_count}
            </div>
          </div>
        </div>

        {isShowInput && (
          <CommentInput
            content={app.children}
            action={action}
            replyId={replyId}
            commentId={commentId}
            callback={this.handleToggleInput}
          />
        )}
      </div>
    );
  }
}

CommentItem.propTypes = {
  content: PropTypes.object.isRequired,
  // comment 评论
  // reply 评论的回复
  // replyToReply 回复的回复
  action: PropTypes.oneOf(["comment", "reply", "replyToReply"]),
  onShowReply: PropTypes.func
};

CommentItem.defaultProps = {
  action: "comment",
  onShowReply: () => {}
};

export default Comment(CommentItem);