comment-vedio/src/components/CommentBox/index.js

import React, { Component } from "react";
import PropTypes from "prop-types";
import { Icon } from "antd";
import intl from "react-intl-universal";
import Comment from "../../Comment";
import ContentItem from "./../ContentItem";
import ReplyItem from "./../ReplyItem";
import "./index.css";

class CommentBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showReply: true,
      page: 1,
      isShowOver3: false
    };

    this.handleToggleReply = this.handleToggleReply.bind(this);
    this.handleGetMoreReply = this.handleGetMoreReply.bind(this);
    this.renderReplies = this.renderReplies.bind(this);
    this.handleClickCollapse = this.handleClickCollapse.bind(this);
  }

  /**
   * 切换是否显示回复列表
   */
  handleToggleReply() {
    this.setState({ showReply: !this.state.showReply });
  }

  /**
   * 点击收起按钮的时候只展示最多三条留言
   */
  handleClickCollapse() {
    this.setState({ isShowOver3: !this.state.isShowOver3 });
    console.log("this.isMore", this.state.isShowOver3);
  }

  /**
   * 获取更多评论
   * @param {string} commentId comment id
   */
  handleGetMoreReply(commentId) {
    // 从第一页开始获取评论
    const { page } = this.state;
    this.props.app.sGetReply({ commentId, page });
    this.setState({ page: page + 1 });
  }

  /**
   * 渲染回复 DOM
   * @param {array} replies 回复列表
   * @param {number} replies 回复的数量
   * @param {boolean} isNoMoreReply 是否没有更多回复
   */
  // renderReplies(replies, replyCount, isNoMoreReply) {
  //   console.log('replies', replies);
  //   console.log('replyCount', replyCount);
  //   console.log('isNoMoreReply', isNoMoreReply);
  //   const { commentId } = this.props;
  //   const { showReply } = this.state;
  //   if (showReply && replies && replies.length) {
  //     const len = replies.length;
  //     return (
  //       <div style={{ marginLeft: 50 }}>
  //         {replies.map((item, index) => {
  //           if (index === len - 1) {
  //             return [
  //               <ContentItem
  //                 commentId={commentId}
  //                 replyId={item.id}
  //                 key={item.id}
  //                 content={item}
  //                 action="replyToReply" // 回复的回复
  //               />,
  //               <div className="comment-more-box" key="show_more_button">
  //                 {!isNoMoreReply && replyCount !== len && (
  //                   <span
  //                     className="comment-show-more"
  //                     onClick={() => this.handleGetMoreReply(commentId)}
  //                   >
  //                     {intl.get("reply.moreReply")}
  //                   </span>
  //                 )}

  //                 <a
  //                   style={{ float: "right" }}
  //                   onClick={this.handleToggleReply}
  //                 >
  //                   <Icon type="up" /> {intl.get("reply.collapse")}
  //                 </a>
  //               </div>
  //             ];
  //           }
  //           return (
  //             <ContentItem
  //               commentId={commentId}
  //               replyId={item.id}
  //               key={item.id}
  //               content={item}
  //               action="replyToReply" // 评论的回复
  //             />
  //           );
  //         })}
  //       </div>
  //     );
  //   }
  //   return null;
  // }

  /**
   * 渲染回复 DOM
   * @param {array} replies 回复列表
   * @param {number} replyCount 回复的数量
   * @param {boolean} isNoMoreReply 是否没有更多回复
   */
  renderReplies(replies, replyCount, isNoMoreReply) {
    console.log("this.isMore3", this.state.isShowOver3);
    const { commentId } = this.props;
    const { showReply } = this.state;
    console.log("replies", replies);
    console.log("replyCount", replyCount);
    console.log("isNoMoreReply", isNoMoreReply);
    if (showReply && replies && replies.length) {
      console.log("showReply", showReply);
      const len = replies.length;
      return (
        <div
          style={{
            marginLeft: 50,
            borderTop: "1px solid #e3e3e3",
            paddingTop: 15,
            marginTop: -5
          }}
        >
          {replies.map((item, index) => {
            if (index === len - 1) {
              return [
                <ReplyItem replyItem={item} key={item.id} />,
                <div key="show_more_button">
                  {!isNoMoreReply && replyCount !== len && (
                    <span
                      // className="comment-show-more"
                      onClick={() => this.handleGetMoreReply(commentId)}
                    >
                      展开更多评论
                      <Icon type="down" />
                    </span>
                  )}
                  {replyCount === len && (
                    <span
                      // className="comment-show-more"
                      onClick={() => this.handleClickCollapse()}
                    >
                      收起
                      <Icon type="up" />
                    </span>
                  )}

                  {/* <a
                    style={{ float: "right" }}
                    onClick={this.handleToggleReply}
                  >
                    <Icon type="up" /> {intl.get("reply.collapse")}
                  </a> */}
                </div>
              ];
            }
            if (this.state.isShowOver3) {
              console.log("11111");
              return <ReplyItem replyItem={item} key={item.id} />;
            }
            if (!this.state.isShowOver3 && index < 3) {
              console.log("222222");
              return <ReplyItem replyItem={item} key={item.id} />;
            }
            console.log("3333");
            return null;
          })}
        </div>
      );
    }
  }

  render() {
    const { content } = this.props;
    const { showReply } = this.state;
    return (
      <div>
        <ContentItem
          content={content}
          onShowReply={this.handleToggleReply}
          showReply={showReply}
          commentId={content.id}
          action="reply" // 评论的回复
        />
        {this.renderReplies(
          content.replies,
          content.reply_count,
          content.isNoMoreReply
        )}
      </div>
    );
  }
}

CommentBox.propTypes = {
  commentId: PropTypes.string.isRequired
};

CommentBox.defaultProps = {};

export default Comment(CommentBox);