1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374 |
- import React, { Component } from "react";
- // import PropTypes from 'prop-type';
- import { Icon } from "antd";
- import Comment from "../../Comment";
- import CommentInput from "../CommentInput";
- import "./index.css";
-
- class ReplyItem extends Component {
- constructor(props) {
- super(props);
- this.state = {
- showInput: false
- };
- this.handleToggleInput = this.handleToggleInput.bind(this);
- }
-
- handleToggleInput() {
- this.setState({ showInput: !this.state.showInput });
- }
-
- render() {
- const { commentId, replyItem, replyId, action, app } = this.props;
-
- const { showInput } = this.state;
-
- return (
- <div className="reply-item">
- <div className="reply-item-content">
- @<strong>{replyItem.user_name}</strong>
- {replyItem.reply ? ` 回复 @${replyItem.reply.user_name}` : null}:
-
- {replyItem.content}
- </div>
- <div className="reply-item-icon">
- <span className="reply-item-span">
- <Icon
- type="heart"
- onClick={() => {
- if (replyId) {
- // 如果有 replyId,则说明是评论的回复
- app.sReplyFavor(replyItem.id, commentId, replyItem.favored);
- return;
- }
- app.sCommentFavor(replyItem.id, replyItem.favored);
- }}
- className={
- replyItem.favored
- ? "comment-favor comment-favored"
- : "comment-favor"
- }
- />
- {replyItem.favor_count}
- </span>
- <span className="reply-item-span">
- <Icon type="message" onClick={this.handleToggleInput} /> {" "}
- {replyItem.reply_count || 0}
- </span>
- </div>
- {showInput && (
- <CommentInput
- content={app.children}
- action={action}
- replyId={replyId}
- commentId={commentId}
- callback={this.handleToggleInput}
- />
- )}
- </div>
- );
- }
- }
-
- export default Comment(ReplyItem);
|