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 { 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,
      type,
      showReply,
      onShowReply,
      app
    } = this.props;
    const { isShowInput } = this.state;
    const isComment = type === "comment";
    return (
      <div className="box">
        <div className="left">
          <Avatar src={content.user_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">
            {isComment && 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={() => app.sCommentFavor(content.id, content.favored)}
            >
              <Icon
                type="like-o"
                className={content.favored ? "favored" : ""}
              />
              &nbsp;{content.favor_count}
            </div>
          </div>

          {isShowInput ? (
            <CommentInput
              type={type}
              replyId={replyId}
              commentId={commentId}
              handleToggleInput={this.handleToggleInput}
            />
          ) : null}
        </div>
      </div>
    );
  }
}

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

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

export default Comment(CommentItem);