index.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';
  2. import PropsTypes from '../_util/vue-types';
  3. import { getComponentFromProp, getListeners } from '../_util/props-util';
  4. import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
  5. import Base from '../base';
  6. export var CommentProps = {
  7. actions: PropsTypes.array,
  8. /** The element to display as the comment author. */
  9. author: PropsTypes.any,
  10. /** The element to display as the comment avatar - generally an antd Avatar */
  11. avatar: PropsTypes.any,
  12. /** The main content of the comment */
  13. content: PropsTypes.any,
  14. /** Comment prefix defaults to '.ant-comment' */
  15. prefixCls: PropsTypes.string,
  16. /** A datetime element containing the time to be displayed */
  17. datetime: PropsTypes.any
  18. };
  19. var Comment = {
  20. name: 'AComment',
  21. props: CommentProps,
  22. inject: {
  23. configProvider: { 'default': function _default() {
  24. return ConfigConsumerProps;
  25. } }
  26. },
  27. methods: {
  28. getAction: function getAction(actions) {
  29. var h = this.$createElement;
  30. if (!actions || !actions.length) {
  31. return null;
  32. }
  33. var actionList = actions.map(function (action, index) {
  34. return h(
  35. 'li',
  36. { key: 'action-' + index },
  37. [action]
  38. );
  39. });
  40. return actionList;
  41. },
  42. renderNested: function renderNested(prefixCls, children) {
  43. var h = this.$createElement;
  44. return h(
  45. 'div',
  46. { 'class': prefixCls + '-nested' },
  47. [children]
  48. );
  49. }
  50. },
  51. render: function render() {
  52. var h = arguments[0];
  53. var customizePrefixCls = this.$props.prefixCls;
  54. var getPrefixCls = this.configProvider.getPrefixCls;
  55. var prefixCls = getPrefixCls('comment', customizePrefixCls);
  56. var actions = getComponentFromProp(this, 'actions');
  57. var author = getComponentFromProp(this, 'author');
  58. var avatar = getComponentFromProp(this, 'avatar');
  59. var content = getComponentFromProp(this, 'content');
  60. var datetime = getComponentFromProp(this, 'datetime');
  61. var avatarDom = h(
  62. 'div',
  63. { 'class': prefixCls + '-avatar' },
  64. [typeof avatar === 'string' ? h('img', {
  65. attrs: { src: avatar, alt: 'comment-avatar' }
  66. }) : avatar]
  67. );
  68. var actionDom = actions && actions.length ? h(
  69. 'ul',
  70. { 'class': prefixCls + '-actions' },
  71. [this.getAction(actions)]
  72. ) : null;
  73. var authorContent = h(
  74. 'div',
  75. { 'class': prefixCls + '-content-author' },
  76. [author && h(
  77. 'span',
  78. { 'class': prefixCls + '-content-author-name' },
  79. [author]
  80. ), datetime && h(
  81. 'span',
  82. { 'class': prefixCls + '-content-author-time' },
  83. [datetime]
  84. )]
  85. );
  86. var contentDom = h(
  87. 'div',
  88. { 'class': prefixCls + '-content' },
  89. [authorContent, h(
  90. 'div',
  91. { 'class': prefixCls + '-content-detail' },
  92. [content]
  93. ), actionDom]
  94. );
  95. var comment = h(
  96. 'div',
  97. { 'class': prefixCls + '-inner' },
  98. [avatarDom, contentDom]
  99. );
  100. var children = this.$slots['default'];
  101. return h(
  102. 'div',
  103. _mergeJSXProps([{ 'class': prefixCls }, { on: getListeners(this) }]),
  104. [comment, children ? this.renderNested(prefixCls, children) : null]
  105. );
  106. }
  107. };
  108. /* istanbul ignore next */
  109. Comment.install = function (Vue) {
  110. Vue.use(Base);
  111. Vue.component(Comment.name, Comment);
  112. };
  113. export default Comment;