| 1 |
- {"version":3,"sources":["../../../src/components/ContentItem/index.js"],"names":["dayjs","locale","extend","relativeTime","CommentItem","props","state","showInput","handleToggleInput","bind","renderTextWithReply","setState","text","content","newText","reply","user_name","commentId","replyId","action","showReply","onShowReply","app","newContent","images","indexOf","IMAGE_SPLIT","split","pop","join","user_avatar","avatar","user_id","marginLeft","created","format","fromNow","__html","map","item","index","maxWidth","reply_count","sReplyFavor","id","favored","sCommentFavor","favor_count","children","Component","propTypes","PropTypes","object","isRequired","oneOf","func","defaultProps"],"mappings":"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","file":"index.js","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Avatar, Icon, Tooltip } from 'antd';\nimport dayjs from 'dayjs';\nimport 'dayjs/locale/zh-cn';\nimport relativeTime from 'dayjs/plugin/relativeTime';\nimport Comment from '../../Comment';\nimport CommentInput from '../CommentInput';\nimport avatar from '../../avatar';\nimport { renderContent } from '../../helper';\nimport { IMAGE_SPLIT } from '../../constant';\nimport './index.css';\n\ndayjs.locale('zh-cn');\ndayjs.extend(relativeTime);\n\nclass CommentItem extends Component {\n constructor(props) {\n super(props);\n this.state = {\n showInput: false,\n };\n this.handleToggleInput = this.handleToggleInput.bind(this);\n this.renderTextWithReply = this.renderTextWithReply.bind(this);\n }\n\n handleToggleInput() {\n this.setState({ showInput: !this.state.showInput });\n }\n\n renderTextWithReply(text, content) {\n let newText = text;\n const { reply } = content;\n if (reply) {\n // newText = `${newText} //@<a href=\"/${reply.user_id}\">${\n // reply.user_name\n // }</a> ${reply.content}`;\n newText = `${newText} //@${reply.user_name} ${reply.content}`;\n // newText = (\n // <span>\n // {newText}\n // @<a href={`/${reply.user_id}`}>{reply.user_name}</a>{reply.content}\n // </span>\n // )\n if (reply.reply) {\n return this.renderTextWithReply(newText, reply);\n }\n }\n return newText;\n }\n\n render() {\n const {\n commentId,\n replyId,\n content,\n action,\n showReply,\n onShowReply,\n app,\n } = this.props;\n\n const { showInput } = this.state;\n\n let newContent = content.content;\n let images = '';\n if (newContent.indexOf(IMAGE_SPLIT) !== -1) {\n newContent = newContent.split(IMAGE_SPLIT);\n images = newContent.pop();\n newContent = newContent.join('');\n }\n\n return (\n <div className=\"comment-item-box\">\n <div className=\"comment-item-left\">\n <Avatar src={content.user_avatar || avatar} size=\"large\" />\n </div>\n <div className=\"comment-item-right\">\n <div>\n <a href={`/${content.user_id}`}>\n {content.user_name || '暂无昵称'}\n </a>\n\n <span style={{ marginLeft: 10 }}>\n <Tooltip\n placement=\"top\"\n title={dayjs(content.created * 1000).format(\n 'YYYY-MM-DD HH:mm:ss'\n )}\n >\n {dayjs(content.created * 1000).fromNow()}\n </Tooltip>\n </span>\n </div>\n <div\n className=\"comment-item-content\"\n dangerouslySetInnerHTML={{\n __html: renderContent(\n this.renderTextWithReply(newContent, content)\n ),\n }}\n />\n <div className=\"comment-item-image\">\n {images.split(',').map((item, index) => {\n return (\n <img\n key={index}\n src={item}\n alt={item}\n style={{ maxWidth: '100%' }}\n />\n );\n })}\n </div>\n <div className=\"comment-item-bottom\">\n {content.reply_count ? (\n <div>\n <a className=\"comment-item-bottom-left\" onClick={onShowReply}>\n {content.reply_count} 条回复\n {showReply ? <Icon type=\"up\" /> : <Icon type=\"down\" />}\n </a>\n </div>\n ) : null}\n\n <a\n onClick={this.handleToggleInput}\n className=\"comment-item-bottom-right\"\n >\n 回复\n </a>\n <div\n className=\"comment-item-bottom-right\"\n onClick={() => {\n if (replyId) {\n // 如果有 replyId，则说明是评论的回复\n app.sReplyFavor(content.id, commentId, content.favored);\n return;\n }\n app.sCommentFavor(content.id, content.favored);\n }}\n >\n <Icon\n type=\"like-o\"\n className={\n content.favored\n ? 'comment-favor comment-favored'\n : 'comment-favor'\n }\n />\n {content.favor_count}\n </div>\n </div>\n </div>\n\n {showInput && (\n <CommentInput\n content={app.children}\n action={action}\n replyId={replyId}\n commentId={commentId}\n callback={this.handleToggleInput}\n />\n )}\n </div>\n );\n }\n}\n\nCommentItem.propTypes = {\n content: PropTypes.object.isRequired,\n // comment 评论\n // reply 评论的回复\n // replyToReply 回复的回复\n action: PropTypes.oneOf(['comment', 'reply', 'replyToReply']),\n onShowReply: PropTypes.func,\n};\n\nCommentItem.defaultProps = {\n action: 'comment',\n onShowReply: () => {},\n};\n\nexport default Comment(CommentItem);\n"]}
|
