UNPKG

ant-design-vue

Version:

An enterprise-class UI design language and Vue-based implementation

97 lines (85 loc) 3.31 kB
import { createVNode as _createVNode } from "vue"; import { defineComponent, inject } from 'vue'; import PropsTypes from '../_util/vue-types'; import { getComponent, getSlot } from '../_util/props-util'; import { defaultConfigProvider } from '../config-provider'; import { withInstall } from '../_util/type'; export var CommentProps = { actions: PropsTypes.array, /** The element to display as the comment author. */ author: PropsTypes.VNodeChild, /** The element to display as the comment avatar - generally an antd Avatar */ avatar: PropsTypes.VNodeChild, /** The main content of the comment */ content: PropsTypes.VNodeChild, /** Comment prefix defaults to '.ant-comment' */ prefixCls: PropsTypes.string, /** A datetime element containing the time to be displayed */ datetime: PropsTypes.VNodeChild }; var Comment = defineComponent({ name: 'AComment', props: CommentProps, setup: function setup() { return { configProvider: inject('configProvider', defaultConfigProvider) }; }, methods: { getAction: function getAction(actions) { if (!actions || !actions.length) { return null; } var actionList = actions.map(function (action, index) { return _createVNode("li", { "key": "action-".concat(index) }, [action]); }); return actionList; }, renderNested: function renderNested(prefixCls, children) { return _createVNode("div", { "class": "".concat(prefixCls, "-nested") }, [children]); } }, render: function render() { var customizePrefixCls = this.$props.prefixCls; var getPrefixCls = this.configProvider.getPrefixCls; var prefixCls = getPrefixCls('comment', customizePrefixCls); var actions = getComponent(this, 'actions'); var author = getComponent(this, 'author'); var avatar = getComponent(this, 'avatar'); var content = getComponent(this, 'content'); var datetime = getComponent(this, 'datetime'); var avatarDom = _createVNode("div", { "class": "".concat(prefixCls, "-avatar") }, [typeof avatar === 'string' ? _createVNode("img", { "src": avatar, "alt": "comment-avatar" }, null) : avatar]); var actionDom = actions ? _createVNode("ul", { "class": "".concat(prefixCls, "-actions") }, [this.getAction(Array.isArray(actions) ? actions : [actions])]) : null; var authorContent = _createVNode("div", { "class": "".concat(prefixCls, "-content-author") }, [author && _createVNode("span", { "class": "".concat(prefixCls, "-content-author-name") }, [author]), datetime && _createVNode("span", { "class": "".concat(prefixCls, "-content-author-time") }, [datetime])]); var contentDom = _createVNode("div", { "class": "".concat(prefixCls, "-content") }, [authorContent, _createVNode("div", { "class": "".concat(prefixCls, "-content-detail") }, [content]), actionDom]); var comment = _createVNode("div", { "class": "".concat(prefixCls, "-inner") }, [avatarDom, contentDom]); var children = getSlot(this); return _createVNode("div", { "class": prefixCls }, [comment, children && children.length ? this.renderNested(prefixCls, children) : null]); } }); export default withInstall(Comment);