123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127 |
- 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 "./index.css";
-
- class CommentBox extends Component {
- constructor(props) {
- super(props);
- this.state = {
- showReply: true,
- page: 1
- };
-
- this.handleToggleReply = this.handleToggleReply.bind(this);
- this.handleGetMoreReply = this.handleGetMoreReply.bind(this);
- this.renderReplies = this.renderReplies.bind(this);
- }
-
- /**
- * 切换是否显示回复列表
- */
- handleToggleReply() {
- this.setState({ showReply: !this.state.showReply });
- }
-
- /**
- * 获取更多评论
- * @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) {
- 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;
- }
-
- 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);
|