import React, { Component } from "react"; import PropTypes from "prop-types"; import { Avatar, Icon, Tooltip, Popconfirm } 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 { IMAGE_SPLIT } from "../../constant"; import "./index.css"; import ImagePreviewer from "../ImagePreviewer/ImagePreviewer"; dayjs.locale("zh-cn"); dayjs.extend(relativeTime); class CommentItem extends Component { constructor(props) { super(props); this.state = { showInput: false, showPreviewer: false, previewerIndex: 0 }; this.handleToggleInput = this.handleToggleInput.bind(this); this.renderTextWithReply = this.renderTextWithReply.bind(this); this.showPreviewer = this.showPreviewer.bind(this); this.hidePreviewer = this.hidePreviewer.bind(this); } showPreviewer(index) { this.setState({ showPreviewer: true, previewerIndex: index }); } hidePreviewer() { this.setState({ showPreviewer: false }); } handleToggleInput() { this.setState({ showInput: !this.state.showInput }); } renderTextWithReply(text, content) { let newText = text; const { reply } = content; if (reply) { // newText = `${newText} //@${ // reply.user_name // } ${reply.content}`; newText = `${newText} //@${reply.user_name} ${reply.content}`; // newText = ( // // {newText} // @{reply.user_name}{reply.content} // // ) if (reply.reply) { return this.renderTextWithReply(newText, reply); } } return newText; } render() { const { commentId, replyId, content, action, showReply, onShowReply, isMobile, app } = this.props; const { showInput } = this.state; let newContent = content.content; let images = ""; if (newContent.indexOf(IMAGE_SPLIT) !== -1) { newContent = newContent.split(IMAGE_SPLIT); images = newContent.pop(); newContent = newContent.join(""); } const imageList = images.split(","); // 在3, 7前需要换行 const needClear = imageList.length === 5 || imageList.length === 6 || imageList.length === 9; const imgs = [...imageList]; if (needClear) { if (imgs.length > 6) { imgs.splice(3, 0, { type: "divider" }); imgs.splice(7, 0, { type: "divider" }); } else { imgs.splice(3, 0, { type: "divider" }); } } if (isMobile) { return (