From f59777501fd61b1447957e74da7c2b7a0b795dbe Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Wed, 2 Jan 2019 11:03:46 +0800
Subject: [PATCH] feat: update comment
---
.../__tests__/__snapshots__/demo.test.js.snap | 4 +-
components/comment/demo/basic.md | 4 +-
components/comment/demo/editor.md | 2 +-
components/comment/demo/list.md | 2 +-
components/comment/demo/nested.md | 68 +++++++------------
components/comment/index.en-US.md | 3 +-
components/comment/index.jsx | 14 ++--
components/comment/index.zh-CN.md | 3 +-
8 files changed, 39 insertions(+), 61 deletions(-)
diff --git a/components/comment/__tests__/__snapshots__/demo.test.js.snap b/components/comment/__tests__/__snapshots__/demo.test.js.snap
index 6ebcdcd34..038341bed 100644
--- a/components/comment/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/comment/__tests__/__snapshots__/demo.test.js.snap
@@ -68,7 +68,7 @@ exports[`renders ./components/comment/demo/list.md correctly 1`] = `
<div class="ant-comment-inner">
<div class="ant-comment-avatar"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></div>
<div class="ant-comment-content">
- <div class="ant-comment-content-author"><span class="ant-comment-content-author-name">Han Solo</span></div>
+ <div class="ant-comment-content-author"><span class="ant-comment-content-author-name">Han Solo</span><span class="ant-comment-content-author-time"><span class="">a day ago</span></span></div>
<div class="ant-comment-content-detail">
<p>We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.</p>
</div>
@@ -86,7 +86,7 @@ exports[`renders ./components/comment/demo/list.md correctly 1`] = `
<div class="ant-comment-inner">
<div class="ant-comment-avatar"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></div>
<div class="ant-comment-content">
- <div class="ant-comment-content-author"><span class="ant-comment-content-author-name">Han Solo</span></div>
+ <div class="ant-comment-content-author"><span class="ant-comment-content-author-name">Han Solo</span><span class="ant-comment-content-author-time"><span class="">2 days ago</span></span></div>
<div class="ant-comment-content-detail">
<p>We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.</p>
</div>
diff --git a/components/comment/demo/basic.md b/components/comment/demo/basic.md
index d851d211f..455f774da 100644
--- a/components/comment/demo/basic.md
+++ b/components/comment/demo/basic.md
@@ -20,7 +20,7 @@ A basic comment with author, avatar, time and actions.
@click="like"
/>
</a-tooltip>
- <span style="paddingLeft: '8px';cursor: 'auto'">
+ <span style="padding-left: '8px';cursor: 'auto'">
{{likes}}
</span>
</span>
@@ -32,7 +32,7 @@ A basic comment with author, avatar, time and actions.
@click="dislike"
/>
</a-tooltip>
- <span style="paddingLeft: '8px';cursor: 'auto'">
+ <span style="padding-left: '8px';cursor: 'auto'">
{{dislikes}}
</span>
</span>
diff --git a/components/comment/demo/editor.md b/components/comment/demo/editor.md
index 6fd229342..d2855251d 100644
--- a/components/comment/demo/editor.md
+++ b/components/comment/demo/editor.md
@@ -35,7 +35,7 @@ Comment can be used as editor, user can customize the editor component.
/>
<div slot="content">
<a-form-item>
- <a-textarea rows=4 @change="handleChange" :value="value" ></a-textarea>
+ <a-textarea :rows="4" @change="handleChange" :value="value" ></a-textarea>
</a-form-item>
<a-form-item>
<a-button
diff --git a/components/comment/demo/list.md b/components/comment/demo/list.md
index 0fe00d454..61f738f74 100644
--- a/components/comment/demo/list.md
+++ b/components/comment/demo/list.md
@@ -25,7 +25,7 @@ Displaying a series of comments using the `antd` List Component.
<span v-for="action in item.actions">{{action}}</span>
</template>
<p slot="content">{{item.content}}</p>
- <a-tooltip slot="dateTime" :title="item.datetime.format('YYYY-MM-DD HH:mm:ss')">
+ <a-tooltip slot="datetime" :title="item.datetime.format('YYYY-MM-DD HH:mm:ss')">
<span>{{item.datetime.fromNow()}}</span>
</a-tooltip>
</a-comment>
diff --git a/components/comment/demo/nested.md b/components/comment/demo/nested.md
index 4f28249e5..d8544d8b7 100644
--- a/components/comment/demo/nested.md
+++ b/components/comment/demo/nested.md
@@ -11,61 +11,41 @@ Comments can be nested.
```html
<template>
<a-comment>
- <template slot="actions">
- <span>Reply to</span>
- </template>
- <template slot="author">
- <a>Han Solo</a>
- </template>
- <template slot="avatar">
+ <span slot="actions">Reply to</span>
+ <a slot="author">Han Solo</a>
+ <a-avatar
+ slot="avatar"
+ src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+ alt="Han Solo"
+ />
+ <p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
+ <a-comment>
+ <span slot="actions">Reply to</span>
+ <a slot="author">Han Solo</a>
<a-avatar
+ slot="avatar"
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
alt="Han Solo"
/>
- </template>
- <p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
- <a-comment>
- <template slot="actions">
- <span>Reply to</span>
- </template>
- <template slot="author">
- <a>Han Solo</a>
- </template>
- <template slot="avatar">
+ <p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
+ <a-comment>
+ <span slot="actions">Reply to</span>
+ <a slot="author">Han Solo</a>
<a-avatar
+ slot="avatar"
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
alt="Han Solo"
/>
- </template>
- <p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
- <a-comment>
- <template slot="actions">
- <span>Reply to</span>
- </template>
- <template slot="author">
- <a>Han Solo</a>
- </template>
- <template slot="avatar">
- <a-avatar
- src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
- alt="Han Solo"
- />
- </template>
<p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
</a-comment>
<a-comment>
- <template slot="actions">
- <span>Reply to</span>
- </template>
- <template slot="author">
- <a>Han Solo</a>
- </template>
- <template slot="avatar">
- <a-avatar
- src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
- alt="Han Solo"
- />
- </template>
+ <span slot="actions">Reply to</span>
+ <a slot="author">Han Solo</a>
+ <a-avatar
+ slot="avatar"
+ src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+ alt="Han Solo"
+ />
<p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
</a-comment>
</a-comment>
diff --git a/components/comment/index.en-US.md b/components/comment/index.en-US.md
index 6c66ecbb9..ecde03e86 100644
--- a/components/comment/index.en-US.md
+++ b/components/comment/index.en-US.md
@@ -2,9 +2,8 @@
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
-| actions | List of action items rendered below the comment content | Array | slot | - |
+| actions | List of action items rendered below the comment content | Array \| slot | - |
| author | The element to display as the comment author | string\|slot | - |
| avatar | The element to display as the comment avatar - generally an antd `Avatar` or src | string\|slot | - |
-| children | Nested comments should be provided as children of the Comment | slot | - |
| content | The main content of the comment | string\|slot | - |
| datetime | A datetime element containing the time to be displayed | string\|slot | - |
diff --git a/components/comment/index.jsx b/components/comment/index.jsx
index 0d9ffd1ff..5e19f27be 100644
--- a/components/comment/index.jsx
+++ b/components/comment/index.jsx
@@ -32,7 +32,7 @@ const Comment = {
renderNested (children) {
const { prefixCls } = this.$props
- return <div class={classNames(`${prefixCls}-nested`)}>{children}</div>
+ return <div class={`${prefixCls}-nested`}>{children}</div>
},
},
@@ -41,11 +41,11 @@ const Comment = {
prefixCls,
} = this.$props
- const actions = this.$props.actions || getComponentFromProp(this, 'actions')
- const author = this.$props.author || getComponentFromProp(this, 'author')
- const avatar = this.$props.avatar || getComponentFromProp(this, 'avatar')
- const content = this.$props.content || getComponentFromProp(this, 'content')
- const datetime = this.$props.datetime || getComponentFromProp(this, 'datetime')
+ const actions = getComponentFromProp(this, 'actions')
+ const author = getComponentFromProp(this, 'author')
+ const avatar = getComponentFromProp(this, 'avatar')
+ const content = getComponentFromProp(this, 'content')
+ const datetime = getComponentFromProp(this, 'datetime')
const avatarDom = (
<div class={`${prefixCls}-avatar`}>
@@ -81,7 +81,7 @@ const Comment = {
)
const children = this.$slots.default
return (
- <div class={classNames(prefixCls)}>
+ <div class={prefixCls} {...{ on: this.$listeners }}>
{comment}
{children ? this.renderNested(children) : null}
</div>
diff --git a/components/comment/index.zh-CN.md b/components/comment/index.zh-CN.md
index c6f3e8efe..b7455b5b0 100644
--- a/components/comment/index.zh-CN.md
+++ b/components/comment/index.zh-CN.md
@@ -2,9 +2,8 @@
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
-| actions | 在评论内容下面呈现的操作项列表 | Array|slot | - |
+| actions | 在评论内容下面呈现的操作项列表 | Array\|slot | - |
| author | 要显示为注释作者的元素 | string\|slot | - |
| avatar | 要显示为评论头像的元素 - 通常是 antd `Avatar` 或者src | string\|slot | - |
-| children | 嵌套注释应作为注释的子项提供 | slot | - |
| content | 评论的主要内容 | string\|slot | - |
| datetime | 展示时间描述 | string\|slot | - |