From 429e7f4b7202e00c887117628b398db9027e04a5 Mon Sep 17 00:00:00 2001 From: wangxueliang Date: Tue, 1 Jan 2019 15:33:43 +0800 Subject: [PATCH] feat: add comment --- .../__tests__/__snapshots__/demo.test.js.snap | 167 ++++++++++++++++++ components/comment/__tests__/demo.test.js | 3 + components/comment/demo/basic.md | 78 ++++++++ components/comment/demo/editor.md | 93 ++++++++++ components/comment/demo/index.vue | 52 ++++++ components/comment/demo/list.md | 61 +++++++ components/comment/demo/nested.md | 74 ++++++++ components/comment/index.en-US.md | 10 ++ components/comment/index.jsx | 96 ++++++++++ components/comment/index.zh-CN.md | 24 +++ components/comment/style/index.js | 2 + components/comment/style/index.less | 93 ++++++++++ components/index.js | 4 + components/style.js | 1 + components/style/themes/default.less | 9 + site/components.js | 2 + site/demo.js | 6 + site/demoRoutes.js | 8 + 18 files changed, 783 insertions(+) create mode 100644 components/comment/__tests__/__snapshots__/demo.test.js.snap create mode 100755 components/comment/__tests__/demo.test.js create mode 100644 components/comment/demo/basic.md create mode 100644 components/comment/demo/editor.md create mode 100644 components/comment/demo/index.vue create mode 100644 components/comment/demo/list.md create mode 100644 components/comment/demo/nested.md create mode 100644 components/comment/index.en-US.md create mode 100644 components/comment/index.jsx create mode 100644 components/comment/index.zh-CN.md create mode 100644 components/comment/style/index.js create mode 100644 components/comment/style/index.less diff --git a/components/comment/__tests__/__snapshots__/demo.test.js.snap b/components/comment/__tests__/__snapshots__/demo.test.js.snap new file mode 100644 index 000000000..6ebcdcd34 --- /dev/null +++ b/components/comment/__tests__/__snapshots__/demo.test.js.snap @@ -0,0 +1,167 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders ./components/comment/demo/basic.md correctly 1`] = ` +
+
+
Han Solo
+
+
Han Soloa few seconds ago
+
+

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.

+
+
    +
  • + 0 +
    • +
    • +
  • + 0 +
    • +
    • +
  • Reply to
    • +
+
+
+
+`; + +exports[`renders ./components/comment/demo/editor.md correctly 1`] = ` +
+ +
+
+
Han Solo
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+`; + +exports[`renders ./components/comment/demo/list.md correctly 1`] = ` +
+
2 replies
+
+
+
+
+
+
+
+
+
Han Solo
+
+

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.

+
+
    +
  • Reply to
    • +
+
+
+
+
+
+
+
+
+
+
+
+
Han Solo
+
+

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.

+
+
    +
  • Reply to
    • +
+
+
+
+
+
+
+
+
+`; + +exports[`renders ./components/comment/demo/nested.md correctly 1`] = ` +
+
+
Han Solo
+
+
Han Solo
+
+

We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).

+
+
    +
  • Reply to
    • +
+
+
+
+
+
+
Han Solo
+
+
Han Solo
+
+

We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).

+
+
    +
  • Reply to
    • +
+
+
+
+
+
+
Han Solo
+
+
Han Solo
+
+

We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).

+
+
    +
  • Reply to
    • +
+
+
+
+
+
+
Han Solo
+
+
Han Solo
+
+

We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).

+
+
    +
  • Reply to
    • +
+
+
+
+
+
+
+
+`; diff --git a/components/comment/__tests__/demo.test.js b/components/comment/__tests__/demo.test.js new file mode 100755 index 000000000..83f648004 --- /dev/null +++ b/components/comment/__tests__/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../../../tests/shared/demoTest' + +demoTest('comment') diff --git a/components/comment/demo/basic.md b/components/comment/demo/basic.md new file mode 100644 index 000000000..d851d211f --- /dev/null +++ b/components/comment/demo/basic.md @@ -0,0 +1,78 @@ + +#### 基本评论 +一个基本的评论组件，带有作者、头像、时间和操作。 + + + +#### Basic comment +A basic comment with author, avatar, time and actions. + + +```html + + +``` diff --git a/components/comment/demo/editor.md b/components/comment/demo/editor.md new file mode 100644 index 000000000..6fd229342 --- /dev/null +++ b/components/comment/demo/editor.md @@ -0,0 +1,93 @@ + +#### 回复框 +评论编辑器组件提供了相同样式的封装以支持自定义评论编辑器。 + + + +#### Reply Editor +Comment can be used as editor, user can customize the editor component. + + +```html + + +``` diff --git a/components/comment/demo/index.vue b/components/comment/demo/index.vue new file mode 100644 index 000000000..4dde88949 --- /dev/null +++ b/components/comment/demo/index.vue @@ -0,0 +1,52 @@ + diff --git a/components/comment/demo/list.md b/components/comment/demo/list.md new file mode 100644 index 000000000..0fe00d454 --- /dev/null +++ b/components/comment/demo/list.md @@ -0,0 +1,61 @@ + +#### 配合 List 组件 +配合 List 组件展现评论列表。 + + + +#### Usage with list +Displaying a series of comments using the `antd` List Component. + + +```html + + +``` diff --git a/components/comment/demo/nested.md b/components/comment/demo/nested.md new file mode 100644 index 000000000..4f28249e5 --- /dev/null +++ b/components/comment/demo/nested.md @@ -0,0 +1,74 @@ + +#### 嵌套评论 +评论可以嵌套。 + + + +#### Nested comments +Comments can be nested. + + +```html + +``` diff --git a/components/comment/index.en-US.md b/components/comment/index.en-US.md new file mode 100644 index 000000000..6c66ecbb9 --- /dev/null +++ b/components/comment/index.en-US.md @@ -0,0 +1,10 @@ +## API + +| Property | Description | Type | Default | +| -------- | ----------- | ---- | ------- | +| 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 new file mode 100644 index 000000000..0d9ffd1ff --- /dev/null +++ b/components/comment/index.jsx @@ -0,0 +1,96 @@ +import PropsTypes from '../_util/vue-types' +import { initDefaultProps, getComponentFromProp } from '../_util/props-util' +import classNames from 'classnames' + +export const CommentProps = { + actions: PropsTypes.array, + /** The element to display as the comment author. */ + author: PropsTypes.any, + /** The element to display as the comment avatar - generally an antd Avatar */ + avatar: PropsTypes.any, + /** The main content of the comment */ + content: PropsTypes.any, + /** Comment prefix defaults to '.ant-comment' */ + prefixCls: PropsTypes.string, + /** A datetime element containing the time to be displayed */ + datetime: PropsTypes.any, +} + +const Comment = { + name: 'AComment', + props: initDefaultProps(CommentProps, { + prefixCls: 'ant-comment', + }), + methods: { + getAction (actions) { + if (!actions || !actions.length) { + return null + } + const actionList = actions.map((action, index) =>
  • {action}
    • ) + return actionList + }, + renderNested (children) { + const { prefixCls } = this.$props + + return
    {children}
    + }, + }, + + render () { + const { + 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 avatarDom = ( +
    + {typeof avatar === 'string' ? : avatar} +
    + ) + + const actionDom = + actions && actions.length ? ( + + ) : null + + const authorContent = ( +
    + {author && {author}} + {datetime && {datetime}} +
    + ) + + const contentDom = ( +
    + {authorContent} +
    {content}
    + {actionDom} +
    + ) + + const comment = ( +
    + {avatarDom} + {contentDom} +
    + ) + const children = this.$slots.default + return ( +
    + {comment} + {children ? this.renderNested(children) : null} +
    + ) + }, +} + +/* istanbul ignore next */ +Comment.install = function (Vue) { + Vue.component(Comment.name, Comment) +} +export default Comment diff --git a/components/comment/index.zh-CN.md b/components/comment/index.zh-CN.md new file mode 100644 index 000000000..115fb79c9 --- /dev/null +++ b/components/comment/index.zh-CN.md @@ -0,0 +1,24 @@ +--- +category: Components +type: 数据展示 +title: Comment +subtitle: 评论 +cols: 1 +--- + +对网站内容的反馈、评价和讨论。 + +## 何时使用 + +评论组件可用于对事物的讨论，例如页面、博客文章、问题等等。 + +## API + +| Property | Description | Type | Default | +| -------- | ----------- | ---- | ------- | +| actions | 在评论内容下面呈现的操作项列表 | Array|slot | - | +| author | 要显示为注释作者的元素 | string\|slot | - | +| avatar | 要显示为评论头像的元素 - 通常是 antd `Avatar` 或者src | string\|slot | - | +| children | 嵌套注释应作为注释的子项提供 | slot | - | +| content | 评论的主要内容 | string\|slot | - | +| datetime | 展示时间描述 | string\|slot | - | diff --git a/components/comment/style/index.js b/components/comment/style/index.js new file mode 100644 index 000000000..cf31ed80f --- /dev/null +++ b/components/comment/style/index.js @@ -0,0 +1,2 @@ +import '../../style/index.less' +import './index.less' diff --git a/components/comment/style/index.less b/components/comment/style/index.less new file mode 100644 index 000000000..891ea4209 --- /dev/null +++ b/components/comment/style/index.less @@ -0,0 +1,93 @@ +@import '../../style/themes/default'; +@import '../../style/mixins/index'; + +@comment-prefix-cls: ~'@{ant-prefix}-comment'; + +.@{comment-prefix-cls} { + position: relative; + + &-inner { + padding: @comment-padding-base; + display: flex; + } + + &-avatar { + flex-shrink: 0; + position: relative; + margin-right: 12px; + cursor: pointer; + img { + width: 32px; + height: 32px; + border-radius: 50%; + } + } + + &-content { + position: relative; + font-size: 14px; + flex: 1 1 auto; + min-width: 1px; + word-wrap: break-word; + + &-author { + margin-bottom: 4px; + font-size: 14px; + display: flex; + justify-content: flex-start; + & > a, + & > span { + height: 18px; + font-size: 12px; + line-height: 18px; + padding-right: 8px; + } + + &-name { + transition: color 0.3s; + font-size: 14px; + color: @comment-author-name-color; + > * { + color: @comment-author-name-color; + &:hover { + color: @comment-author-name-color; + } + } + } + + &-time { + cursor: auto; + color: @comment-author-time-color; + white-space: nowrap; + } + } + + &-detail p { + white-space: pre-wrap; + } + } + + &-actions { + margin-top: 12px; + padding-left: 0; + > li { + display: inline-block; + color: @comment-action-color; + > span { + padding-right: 10px; + transition: color 0.3s; + font-size: 12px; + color: @comment-action-color; + cursor: pointer; + user-select: none; + &:hover { + color: @comment-action-hover-color; + } + } + } + } + + &-nested { + margin-left: @comment-nest-indent; + } +} diff --git a/components/index.js b/components/index.js index 79d18c6c5..9d70e0f7e 100644 --- a/components/index.js +++ b/components/index.js @@ -124,6 +124,8 @@ import { default as Drawer } from './drawer' import { default as Skeleton } from './skeleton' +import { default as Comment } from './comment' + const components = [ Affix, Anchor, @@ -177,6 +179,7 @@ const components = [ Upload, Drawer, Skeleton, + Comment, ] const install = function (Vue) { @@ -255,6 +258,7 @@ export { Upload, Drawer, Skeleton, + Comment, } export default { diff --git a/components/style.js b/components/style.js index 4b4bbda16..25cf8b5b7 100644 --- a/components/style.js +++ b/components/style.js @@ -51,3 +51,4 @@ import './carousel/style' import './tree-select/style' import './drawer/style' import './skeleton/style' +import './comment/style' diff --git a/components/style/themes/default.less b/components/style/themes/default.less index a5a6fc9e8..db5d8bcf1 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -402,6 +402,15 @@ @card-actions-background: @background-color-light; @card-shadow: 0 2px 8px rgba(0, 0, 0, .09); +// Comment +// --- +@comment-padding-base: 16px 0; +@comment-nest-indent: 44px; +@comment-author-name-color: @text-color-secondary; +@comment-author-time-color: #ccc; +@comment-action-color: @text-color-secondary; +@comment-action-hover-color: #595959; + // Tabs // --- @tabs-card-head-background: @background-color-light; diff --git a/site/components.js b/site/components.js index 54b59717e..ad20b73bf 100644 --- a/site/components.js +++ b/site/components.js @@ -56,6 +56,7 @@ import { // version, Drawer, Skeleton, + Comment, } from 'ant-design-vue' Vue.prototype.$message = message @@ -119,6 +120,7 @@ Vue.use(Timeline) Vue.use(Tooltip) Vue.use(Upload) Vue.use(Skeleton) +Vue.use(Comment) /* v1.1.2 registration methods */ // Vue.component(Affix.name, Affix) // a-affix diff --git a/site/demo.js b/site/demo.js index 5bd8906cf..7f9a07cec 100644 --- a/site/demo.js +++ b/site/demo.js @@ -11,6 +11,12 @@ export default { type: 'Data Display', title: 'Badge', }, + comment: { + category: 'Components', + subtitle: '评论', + type: 'Data Display', + title: 'Comment', + }, breadcrumb: { category: 'Components', subtitle: '面包屑', diff --git a/site/demoRoutes.js b/site/demoRoutes.js index 3177842a6..64ee6f647 100644 --- a/site/demoRoutes.js +++ b/site/demoRoutes.js @@ -423,4 +423,12 @@ export default [ path: 'skeleton-cn', component: () => import('../components/skeleton/demo/index.vue'), }, + { + path: 'comment', + component: () => import('../components/comment/demo/index.vue'), + }, + { + path: 'comment-cn', + component: () => import('../components/comment/demo/index.vue'), + }, ]