{"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","imageList","user_avatar","avatar","marginLeft","created","format","fromNow","__html","length","map","item","index","maxWidth","reply_count","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\nimport relativeTime from \"dayjs/plugin/relativeTime\";\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\n\r\ndayjs.locale(\"zh-cn\");\r\ndayjs.extend(relativeTime);\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    };\r\n    this.handleToggleInput = this.handleToggleInput.bind(this);\r\n    this.renderTextWithReply = this.renderTextWithReply.bind(this);\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 { 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    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 || \"游客\"}</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                {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 &&\r\n            imageList[0] !== \"\" && (\r\n              <div className=\"comment-item-image\">\r\n                {imageList.map((item, index) => {\r\n                  return (\r\n                    <img\r\n                      key={index}\r\n                      src={item}\r\n                      alt={item}\r\n                      style={{ maxWidth: \"100%\" }}\r\n                    />\r\n                  );\r\n                })}\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                  {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                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=\"确定\"\r\n                cancelText=\"取消\"\r\n              >\r\n                <a className=\"comment-item-bottom-right\">&nbsp; 删除</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              &nbsp; 回复\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              &nbsp;{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            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"]}