npmcomment/lib/components/ContentItem/index.js.map

{"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_id","user_name","commentId","replyId","action","showReply","onShowReply","app","user_avatar","avatar","marginLeft","created","format","fromNow","__html","reply_count","userSelect","cursor","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 './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      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    return (\n      <div className=\"box\">\n        <div className=\"left\">\n          <Avatar src={content.user_avatar || avatar} size=\"large\" />\n        </div>\n        <div className=\"right\">\n          <div className=\"name\">\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=\"content\"\n            dangerouslySetInnerHTML={{\n              __html: renderContent(\n                this.renderTextWithReply(content.content, content)\n              ),\n            }}\n          />\n          <div className=\"bottom\">\n            {content.reply_count ? (\n              <div>\n                <a\n                  className=\"itemLeft\"\n                  onClick={onShowReply}\n                  style={{ userSelect: 'none' }}\n                >\n                  {content.reply_count} 条回复\n                  {showReply ? <Icon type=\"up\" /> : <Icon type=\"down\" />}\n                </a>\n              </div>\n            ) : null}\n\n            <a onClick={this.handleToggleInput} className=\"itemRight\">\n              &nbsp; 回复\n            </a>\n            <div\n              className=\"itemRight\"\n              style={{ cursor: 'pointer' }}\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={content.favored ? 'favored' : ''}\n              />\n              &nbsp;{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"]}