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 Editor from "../Editor";
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;

    const { isShowInput } = this.state;
    console.log("isShowInput ", isShowInput);

    const isComment = action === "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>
              )}

            <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
              action={action}
              replyId={replyId}
              commentId={commentId}
              callback={this.handleToggleInput}
            />
          )} */}
          {isShowInput && <CommentInput content={app.children} />}
        </div>
      </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);