123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156 |
- import React, { Component } from "react";
- import PropTypes from "prop-types";
- import { Avatar, Icon, Tooltip } from "antd";
- import dayjs from "dayjs";
- import "dayjs/locale/zh-cn";
- import relativeTime from "dayjs/plugin/relativeTime";
- import Comment from "../../Comment";
- import CommentInput from "../CommentInput";
- import avatar from "../../avatar";
- import { renderContent } from "../../helper";
- import "./index.css";
-
- dayjs.locale("zh-cn");
- dayjs.extend(relativeTime);
-
- class CommentItem extends Component {
- constructor(props) {
- super(props);
- this.state = {
- showInput: false
- };
- this.handleToggleInput = this.handleToggleInput.bind(this);
- this.renderTextWithReply = this.renderTextWithReply.bind(this);
- }
-
- handleToggleInput() {
- this.setState({ showInput: !this.state.showInput });
- }
-
- 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 { showInput } = this.state;
-
- return (
- <div className="comment-item-box">
- <div className="comment-item-left">
- <Avatar src={content.user_avatar || avatar} size="large" />
- </div>
- <div className="comment-item-right">
- <div>
- <a href={`/${content.user_id}`}>
- {content.user_name || "暂无昵称"}
- </a>
-
- <span style={{ marginLeft: 10 }}>
- <Tooltip
- placement="top"
- title={dayjs(content.created * 1000).format(
- "YYYY-MM-DD HH:mm:ss"
- )}
- >
- {dayjs(content.created * 1000).fromNow()}
- </Tooltip>
- </span>
- </div>
- <div
- className="comment-item-content"
- dangerouslySetInnerHTML={{
- __html: renderContent(
- this.renderTextWithReply(content.content, content)
- )
- }}
- />
- <div className="comment-item-bottom">
- {content.reply_count ? (
- <div>
- <a className="comment-item-bottom-left" onClick={onShowReply}>
- {content.reply_count} 条回复
- {showReply ? <Icon type="up" /> : <Icon type="down" />}
- </a>
- </div>
- ) : null}
-
- <a
- onClick={this.handleToggleInput}
- className="comment-item-bottom-right"
- >
- 回复
- </a>
- <div
- className="comment-item-bottom-right"
- onClick={() => {
- if (replyId) {
- // 如果有 replyId,则说明是评论的回复
- app.sReplyFavor(content.id, commentId, content.favored);
- return;
- }
- app.sCommentFavor(content.id, content.favored);
- }}
- >
- <Icon
- type="like-o"
- className={
- content.favored
- ? "comment-favor comment-favored"
- : "comment-favor"
- }
- />
- {content.favor_count}
- </div>
- </div>
- </div>
-
- {showInput && (
- <CommentInput
- content={app.children}
- action={action}
- replyId={replyId}
- commentId={commentId}
- callback={this.handleToggleInput}
- />
- )}
- </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);
|