| 1 |
- {"version":3,"sources":["../../../src/components/ContentItem/index.js"],"names":["dayjs","extend","relativeTime","LOCALES","CommentItem","props","state","showInput","showPreviewer","previewerIndex","handleToggleInput","bind","renderTextWithReply","hidePreviewer","index","setState","text","content","newText","reply","user_name","commentId","replyId","action","showReply","onShowReply","app","locale","newContent","images","indexOf","IMAGE_SPLIT","split","pop","join","imageList","needClear","length","imgs","splice","type","user_avatar","avatar","intl","get","marginLeft","created","format","fromNow","__html","map","item","i","backgroundImage","reply_count","total","userId","user_id","sDeleteReply","id","sDeleteComment","sReplyFavor","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\";\r\nimport PropTypes from \"prop-types\";\r\nimport { Avatar, Icon, Tooltip, Popconfirm } from \"antd\";\r\nimport dayjs from \"dayjs\";\r\nimport \"dayjs/locale/zh-cn\";\r\n// import 'dayjs/locale/es';\r\nimport relativeTime from \"dayjs/plugin/relativeTime\";\r\nimport intl from \"react-intl-universal\";\r\nimport Comment from \"../../Comment\";\r\nimport CommentInput from \"../CommentInput\";\r\nimport avatar from \"../../avatar\";\r\nimport { renderContent } from \"../../helper\";\r\nimport { IMAGE_SPLIT } from \"../../constant\";\r\nimport \"./index.css\";\r\nimport ImagePreviewer from \"../ImagePreviewer/ImagePreviewer\";\r\n\r\n// dayjs.locale(\"zh-cn\");\r\ndayjs.extend(relativeTime);\r\n\r\nconst LOCALES = {\r\n \"zh-CN\": \"zh-cn\"\r\n};\r\n\r\nclass CommentItem extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n showInput: false,\r\n showPreviewer: false,\r\n previewerIndex: 0\r\n };\r\n this.handleToggleInput = this.handleToggleInput.bind(this);\r\n this.renderTextWithReply = this.renderTextWithReply.bind(this);\r\n this.showPreviewer = this.showPreviewer.bind(this);\r\n this.hidePreviewer = this.hidePreviewer.bind(this);\r\n }\r\n\r\n showPreviewer(index) {\r\n this.setState({\r\n showPreviewer: true,\r\n previewerIndex: index\r\n });\r\n }\r\n\r\n hidePreviewer() {\r\n this.setState({\r\n showPreviewer: false\r\n });\r\n }\r\n\r\n handleToggleInput() {\r\n this.setState({ showInput: !this.state.showInput });\r\n }\r\n\r\n renderTextWithReply(text, content) {\r\n let newText = text;\r\n const { reply } = content;\r\n if (reply) {\r\n // newText = `${newText} //@<a href=\"/${reply.user_id}\">${\r\n // reply.user_name\r\n // }</a> ${reply.content}`;\r\n newText = `${newText} //@${reply.user_name} ${reply.content}`;\r\n // newText = (\r\n // <span>\r\n // {newText}\r\n // @<a href={`/${reply.user_id}`}>{reply.user_name}</a>{reply.content}\r\n // </span>\r\n // )\r\n if (reply.reply) {\r\n return this.renderTextWithReply(newText, reply);\r\n }\r\n }\r\n return newText;\r\n }\r\n\r\n render() {\r\n const {\r\n commentId,\r\n replyId,\r\n content,\r\n action,\r\n showReply,\r\n onShowReply,\r\n app\r\n } = this.props;\r\n\r\n const { locale } = this.props.app;\r\n const { showInput } = this.state;\r\n\r\n let newContent = content.content;\r\n let images = \"\";\r\n if (newContent.indexOf(IMAGE_SPLIT) !== -1) {\r\n newContent = newContent.split(IMAGE_SPLIT);\r\n images = newContent.pop();\r\n newContent = newContent.join(\"\");\r\n }\r\n\r\n const imageList = images.split(\",\");\r\n\r\n // 在3, 7前需要换行\r\n const needClear =\r\n imageList.length === 5 ||\r\n imageList.length === 6 ||\r\n imageList.length === 9;\r\n const imgs = [...imageList];\r\n if (needClear) {\r\n if (imgs.length > 6) {\r\n imgs.splice(3, 0, { type: \"divider\" });\r\n imgs.splice(7, 0, { type: \"divider\" });\r\n } else {\r\n imgs.splice(3, 0, { type: \"divider\" });\r\n }\r\n }\r\n\r\n return (\r\n <div className=\"comment-item-box\">\r\n <div className=\"comment-item-left\">\r\n <Avatar src={content.user_avatar || avatar} size=\"large\" />\r\n </div>\r\n <div className=\"comment-item-right\">\r\n <div>\r\n {/* <a href={`/${content.user_id}`}>\r\n {content.user_name || \"暂无昵称\"}\r\n </a> */}\r\n <strong>{content.user_name || intl.get(\"comment.tourist\")}</strong>\r\n <span style={{ marginLeft: 10 }}>\r\n <Tooltip\r\n placement=\"top\"\r\n title={dayjs(content.created * 1000).format(\r\n \"YYYY-MM-DD HH:mm:ss\"\r\n )}\r\n >\r\n {LOCALES[locale]\r\n ? dayjs(content.created * 1000)\r\n .locale(LOCALES[locale])\r\n .fromNow()\r\n : dayjs(content.created * 1000).fromNow()}\r\n </Tooltip>\r\n </span>\r\n </div>\r\n <div\r\n className=\"comment-item-content\"\r\n dangerouslySetInnerHTML={{\r\n __html: renderContent(\r\n this.renderTextWithReply(newContent, content)\r\n )\r\n }}\r\n />\r\n {// image为空时不渲染comment-item-image\r\n imageList.length > 0 && imageList[0] !== \"\" && (\r\n <div className=\"comment-item-image\">\r\n {!this.state.showPreviewer &&\r\n imgs.map((item, index) => {\r\n if (item.type === \"divider\") {\r\n return (\r\n <div className=\"comment-item-image-wrapper\" key={index}>\r\n <div className=\"comment-img-divider\" />\r\n {/* <img src={item} alt={item} className=\"comment-img\" /> */}\r\n </div>\r\n );\r\n }\r\n return (\r\n <div\r\n className=\"comment-item-image-wrapper\"\r\n key={index}\r\n onClick={() => {\r\n let i = index;\r\n if (needClear) {\r\n if (index > 3) {\r\n i -= 1;\r\n }\r\n if (index > 7) {\r\n i -= 1;\r\n }\r\n }\r\n this.showPreviewer(i);\r\n }}\r\n >\r\n <div\r\n style={{ backgroundImage: `url(${item})` }}\r\n className=\"comment-img-thumbnail\"\r\n />\r\n {/* <img src={item} alt={item} className=\"comment-img\" /> */}\r\n </div>\r\n );\r\n })}\r\n {this.state.showPreviewer && (\r\n <ImagePreviewer\r\n list={imageList}\r\n index={this.state.previewerIndex}\r\n onFold={this.hidePreviewer}\r\n />\r\n )}\r\n <div className=\"clearfix\" />\r\n </div>\r\n )}\r\n <div className=\"comment-item-bottom\">\r\n {content.reply_count ? (\r\n <div>\r\n <a className=\"comment-item-bottom-left\" onClick={onShowReply}>\r\n {/* {content.reply_count} 条回复 */}\r\n {intl.get(\"reply.totalReply\", { total: content.reply_count })}\r\n {showReply ? <Icon type=\"up\" /> : <Icon type=\"down\" />}\r\n </a>\r\n </div>\r\n ) : null}\r\n {app.userId === content.user_id && (\r\n <Popconfirm\r\n // title=\"确定要删除吗?\"\r\n title={intl.get(\"popConfirm.title\")}\r\n onConfirm={() => {\r\n if (replyId) {\r\n app.sDeleteReply(content.id, commentId);\r\n return;\r\n }\r\n app.sDeleteComment(content.id);\r\n }}\r\n okText={intl.get(\"popConfirm.ok\")}\r\n cancelText={intl.get(\"popConfirm.cancel\")}\r\n >\r\n <a className=\"comment-item-bottom-right\">\r\n {intl.get(\"popConfirm.delete\")}\r\n </a>\r\n </Popconfirm>\r\n )}\r\n <a\r\n onClick={this.handleToggleInput}\r\n className=\"comment-item-bottom-right\"\r\n >\r\n {intl.get(\"comment.reply\")}\r\n </a>\r\n <div\r\n className=\"comment-item-bottom-right\"\r\n onClick={() => {\r\n if (replyId) {\r\n // 如果有 replyId，则说明是评论的回复\r\n app.sReplyFavor(content.id, commentId, content.favored);\r\n return;\r\n }\r\n app.sCommentFavor(content.id, content.favored);\r\n }}\r\n >\r\n <Icon\r\n type=\"like-o\"\r\n className={\r\n content.favored\r\n ? \"comment-favor comment-favored\"\r\n : \"comment-favor\"\r\n }\r\n />\r\n {content.favor_count}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n {showInput && (\r\n <CommentInput\r\n content={app.children}\r\n action={action}\r\n replyId={replyId}\r\n commentId={commentId}\r\n userId={content.user_id}\r\n callback={this.handleToggleInput}\r\n />\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n\r\nCommentItem.propTypes = {\r\n content: PropTypes.object.isRequired,\r\n // comment 评论\r\n // reply 评论的回复\r\n // replyToReply 回复的回复\r\n action: PropTypes.oneOf([\"comment\", \"reply\", \"replyToReply\"]),\r\n onShowReply: PropTypes.func\r\n};\r\n\r\nCommentItem.defaultProps = {\r\n action: \"comment\",\r\n onShowReply: () => {}\r\n};\r\n\r\nexport default Comment(CommentItem);\r\n"]}
|
