-
Notifications
You must be signed in to change notification settings - Fork 140
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(comp:comment): add comment component (#822)
fix #358
- Loading branch information
1 parent
e367009
commit e3f1e98
Showing
24 changed files
with
757 additions
and
0 deletions.
There are no files selected for viewing
18 changes: 18 additions & 0 deletions
18
packages/components/comment/__tests__/__snapshots__/comment.spec.ts.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`Comment render work 1`] = ` | ||
"<div class=\\"ix-comment\\"> | ||
<div class=\\"ix-comment-inner\\"> | ||
<!----> | ||
<div class=\\"ix-comment-content\\"> | ||
<div class=\\"ix-comment-content-author\\"> | ||
<!----> | ||
<!----> | ||
</div> | ||
<div class=\\"ix-comment-content-detail\\">comment content</div> | ||
<!----> | ||
</div> | ||
</div> | ||
<!----> | ||
</div>" | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,129 @@ | ||
import { MountingOptions, mount } from '@vue/test-utils' | ||
import { h } from 'vue' | ||
|
||
import { renderWork } from '@tests' | ||
|
||
import { IxAvatar } from '@idux/components/avatar' | ||
import { IxIcon } from '@idux/components/icon' | ||
|
||
import Comment from '../src/Comment' | ||
import { CommentProps } from '../src/types' | ||
|
||
describe('Comment', () => { | ||
const CommentMount = (options?: MountingOptions<Partial<CommentProps>>) => mount(Comment, { ...options }) | ||
|
||
renderWork<CommentProps>(Comment, { | ||
props: { | ||
content: 'comment content', | ||
}, | ||
}) | ||
const authorText = 'Han Solo' | ||
|
||
test('author work', async () => { | ||
const wrapper = CommentMount({ props: { author: authorText } }) | ||
|
||
expect(wrapper.find('.ix-comment-content-author-name').text()).toBe(authorText) | ||
}) | ||
|
||
test('author slot work', async () => { | ||
const wrapper = CommentMount({ slots: { author: () => authorText } }) | ||
|
||
expect(wrapper.find('.ix-comment-content-author-name').text()).toBe(authorText) | ||
}) | ||
|
||
const avatarSrc = '/images/avatar/0.png' | ||
|
||
test('avatar string work', async () => { | ||
const wrapper = CommentMount({ props: { avatar: avatarSrc } }) | ||
|
||
expect(wrapper.find('.ix-comment-avatar').exists()).toBe(true) | ||
expect(wrapper.find('img').element.src).toContain(avatarSrc) | ||
}) | ||
|
||
const squareShape = 'square' | ||
const circleShape = 'circle' | ||
|
||
test('avatar object work', async () => { | ||
const wrapper = CommentMount({ | ||
props: { | ||
avatar: { src: avatarSrc, shape: squareShape }, | ||
}, | ||
}) | ||
|
||
expect(wrapper.find('.ix-avatar-square').exists()).toBe(true) | ||
expect(wrapper.find('img').element.src).toContain(avatarSrc) | ||
|
||
await wrapper.setProps({ avatar: { src: avatarSrc, shape: circleShape } }) | ||
expect(wrapper.find('.ix-avatar-circle').exists()).toBe(true) | ||
expect(wrapper.find('.ix-avatar-square').exists()).toBe(false) | ||
}) | ||
|
||
test('avatar slot work', async () => { | ||
const wrapper = CommentMount({ | ||
slots: { avatar: () => [h(IxAvatar, { src: avatarSrc })] }, | ||
}) | ||
|
||
expect(wrapper.find('img').element.src).toContain(avatarSrc) | ||
}) | ||
|
||
const commentContent = 'this is comment text !' | ||
|
||
test('content work', async () => { | ||
const wrapper = CommentMount({ | ||
props: { content: commentContent }, | ||
}) | ||
|
||
expect(wrapper.find('.ix-comment-content-detail').text()).toBe(commentContent) | ||
}) | ||
|
||
test('content slot work', async () => { | ||
const wrapper = CommentMount({ | ||
slots: { content: () => [h('p', commentContent)] }, | ||
}) | ||
|
||
expect(wrapper.find('p').text()).toContain(commentContent) | ||
}) | ||
|
||
const datetime1 = '2022/3/24' | ||
const datetime2 = '2022/3/25' | ||
|
||
test('datetime work', async () => { | ||
const wrapper = CommentMount({ | ||
props: { datetime: datetime1 }, | ||
}) | ||
|
||
expect(wrapper.find('.ix-comment-content-author-time').text()).toBe(datetime1) | ||
|
||
await wrapper.setProps({ datetime: datetime2 }) | ||
expect(wrapper.find('.ix-comment-content-author-time').text()).toBe(datetime2) | ||
}) | ||
|
||
test('default slot work', async () => { | ||
const wrapper = CommentMount({ | ||
slots: { | ||
default: () => [ | ||
h(Comment, { | ||
content: commentContent, | ||
}), | ||
], | ||
}, | ||
}) | ||
|
||
expect(wrapper.find('.ix-comment-nested').text()).toContain(commentContent) | ||
}) | ||
|
||
test('actions slot work', async () => { | ||
const wrapper = CommentMount({ | ||
slots: { | ||
actions: () => [ | ||
h(IxIcon, { | ||
name: 'like', | ||
}), | ||
], | ||
}, | ||
}) | ||
|
||
const action = wrapper.find('.ix-icon-like') | ||
expect(action.exists()).toBe(true) | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
--- | ||
order: 0 | ||
title: | ||
zh: 基本评论 | ||
en: Basic comment | ||
--- | ||
|
||
## zh | ||
|
||
一个基本的评论组件,带有作者、头像、时间和操作。 | ||
|
||
## en | ||
|
||
A basic comment with author, avatar, time and actions. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,75 @@ | ||
<template> | ||
<IxComment :datetime="datetime"> | ||
<template #author> | ||
<a>Han Solo</a> | ||
</template> | ||
<template #avatar> | ||
<IxAvatar src="/images/avatar/0.png" /> | ||
</template> | ||
<template #content> | ||
<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> | ||
</template> | ||
<template #actions> | ||
<IxTooltip title="Like"> | ||
<span @click="handleLike"> | ||
<IxIcon :name="likeIconName" /> | ||
<span className="comment-action">{{ likes }}</span> | ||
</span> | ||
</IxTooltip> | ||
<IxTooltip title="disLike"> | ||
<span @click="handleDislike"> | ||
<IxIcon :name="dislikeIconName" /> | ||
<span className="comment-action">{{ dislikes }}</span> | ||
</span> | ||
</IxTooltip> | ||
<span key="comment-basic-reply-to">Reply to</span> | ||
</template> | ||
<slot></slot> | ||
</IxComment> | ||
</template> | ||
|
||
<script lang="ts"> | ||
import { computed, defineComponent, ref } from 'vue' | ||
import { format } from 'date-fns' | ||
export default defineComponent({ | ||
setup() { | ||
const datetime = ref(format(new Date(), 'yyyy-MM-dd HH:mm')) | ||
const likes = ref(0) | ||
const dislikes = ref(0) | ||
const action = ref('') | ||
const likeStatus = 'liked' | ||
const dislikedStatus = 'disliked' | ||
const likeIconName = computed(() => (action.value === likeStatus ? 'like-filled' : 'like')) | ||
const dislikeIconName = computed(() => (action.value === dislikedStatus ? 'dislike-filled' : 'dislike')) | ||
const setAction = (status: string) => { | ||
action.value = status | ||
} | ||
const setLikes = (value: number) => { | ||
likes.value = value | ||
} | ||
const setDislikes = (value: number) => { | ||
dislikes.value = value | ||
} | ||
const handleLike = () => { | ||
setAction(likeStatus) | ||
setLikes(1) | ||
setDislikes(0) | ||
} | ||
const handleDislike = () => { | ||
setAction('disliked') | ||
setLikes(0) | ||
setDislikes(1) | ||
} | ||
return { datetime, likes, dislikes, action, likeIconName, dislikeIconName, handleLike, handleDislike } | ||
}, | ||
}) | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
--- | ||
order: 3 | ||
title: | ||
zh: 回复框 | ||
en: Reply Editor | ||
--- | ||
|
||
## zh-CN | ||
|
||
评论编辑器组件提供了相同样式的封装以支持自定义评论编辑器。 | ||
|
||
## en-US | ||
|
||
Comment can be used as an editor, so the user can customize the contents of the component. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
<template> | ||
<IxList :header="`${listData.length} replies`"> | ||
<li v-for="item in listData" :key="item.id"> | ||
<IxComment :author="item.author" :avatar="item.avatar" :datetime="item.datetime"> | ||
<template #content> | ||
<p>{{ item.content }}</p> | ||
</template> | ||
</IxComment> | ||
</li> | ||
</IxList> | ||
<IxComment> | ||
<template #avatar> | ||
<IxAvatar src="/images/avatar/0.png" /> | ||
</template> | ||
<template #content> | ||
<IxForm> | ||
<IxFormItem> | ||
<IxTextarea v-model:value="commentValue" placeholder="Basic usage"></IxTextarea> | ||
</IxFormItem> | ||
<IxFormItem> | ||
<IxButton mode="primary" :loading="submitting" @click="handleSubmit">submit</IxButton> | ||
</IxFormItem> | ||
</IxForm> | ||
</template> | ||
</IxComment> | ||
</template> | ||
|
||
<script lang="ts"> | ||
import { defineComponent, reactive, ref } from 'vue' | ||
import { format } from 'date-fns' | ||
interface listDataNode { | ||
author: string | ||
avatar: string | ||
content: string | ||
datetime: string | ||
} | ||
export default defineComponent({ | ||
setup() { | ||
const submitting = ref(false) | ||
const commentValue = ref('') | ||
const listData: listDataNode[] = reactive([]) | ||
const handleSubmit = () => { | ||
if (!commentValue.value) { | ||
return | ||
} | ||
submitting.value = true | ||
setTimeout(() => { | ||
listData.push({ | ||
author: 'Han Solo', | ||
avatar: '/images/avatar/0.png', | ||
content: commentValue.value, | ||
datetime: format(new Date(), 'yyyy-MM-dd HH:mm'), | ||
}) | ||
commentValue.value = '' | ||
submitting.value = false | ||
}, 1000) | ||
} | ||
return { submitting, commentValue, listData, handleSubmit } | ||
}, | ||
}) | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
--- | ||
order: 1 | ||
title: | ||
zh: 配合 List 组件 | ||
en: Usage with list | ||
--- | ||
|
||
## zh-CN | ||
|
||
配合 List 组件展现评论列表。 | ||
|
||
## en-US | ||
|
||
Displaying a series of comments using the `antd` List Component. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
<template> | ||
<IxList :header="`${listData.length} replies`"> | ||
<li v-for="item in listData" :key="item.id"> | ||
<IxComment :author="item.author" :avatar="item.avatar"> | ||
<template #content> | ||
<p>{{ item.content }}</p> | ||
</template> | ||
<template #actions> | ||
<span key="comment-basic-reply-to">Reply to</span> | ||
</template> | ||
<template #datetime> | ||
<p> | ||
<IxTooltip :title="item.datetime"> | ||
<span>{{ item.datetime }}</span> | ||
</IxTooltip> | ||
</p> | ||
</template> | ||
</IxComment> | ||
</li> | ||
</IxList> | ||
</template> | ||
|
||
<script lang="ts"> | ||
import { defineComponent } from 'vue' | ||
import { format } from 'date-fns' | ||
export default defineComponent({ | ||
setup() { | ||
const datetime = format(new Date(), 'yyyy-MM-dd HH:mm') | ||
const listData = [ | ||
{ | ||
author: 'Han Solo', | ||
avatar: '/images/avatar/0.png', | ||
content: `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.`, | ||
datetime: datetime, | ||
}, | ||
{ | ||
author: 'Han Solo', | ||
avatar: '/images/avatar/0.png', | ||
content: `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.`, | ||
datetime: datetime, | ||
}, | ||
] | ||
return { listData } | ||
}, | ||
}) | ||
</script> |
Oops, something went wrong.