mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-25 03:29:59 +08:00
Code Issues Actions 35 Packages Projects Releases Wiki Activity

✨ nested comment with demo

Browse Source
This commit is contained in:
Ilan 2018-10-22 16:28:58 +02:00 committed by 偏右
parent 53dd4731f1
commit 30db3f2a05
8 changed files with 292 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/comment/Nested.tsx Normal file
View File

@ -0,0 +1,14 @@
import * as React from 'react';
import classNames from 'classnames';
export interface NestedCommentProps {
prefixCls?: string;
style?: React.CSSProperties;
className?: string;
}
export default (props: NestedCommentProps) => {
const { prefixCls = 'ant-comment', className, ...others } = props;
const classString = classNames(`${prefixCls}-nested`, className);
return <div {...others} className={classString} />;
};

162
components/comment/__tests__/__snapshots__/demo.test.js.snap
View File

@ -266,3 +266,165 @@ exports[`renders ./components/comment/demo/list.md correctly 1`] = `
</div>
</div>
`;
exports[`renders ./components/comment/demo/nested.md correctly 1`] = `
Array [
<div
class="ant-comment-comment"
>
<div
class="ant-comment-inner"
>
<div
class="ant-comment-header"
>
<span
class="ant-comment-header-avatar"
>
<span
class="ant-avatar ant-avatar-circle ant-avatar-image"
>
<img
alt="Han Solo"
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
/>
</span>
</span>
<div
class="ant-comment-header-author"
>
<span
class="ant-comment-header-author-name"
>
<a>
Han Solo
</a>
</span>
<span
class="ant-comment-header-author-time"
>
a few seconds ago
</span>
</div>
</div>
<div
class="ant-comment-content"
>
<div
class="ant-comment-content-detail"
>
<p>
Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Pellentesque massa placerat duis ultricies lacus sed turpis. Tempus urna et pharetra pharetra massa massa.
</p>
</div>
</div>
</div>
</div>,
<div
class="ant-comment-nested"
>
<div
class="ant-comment-comment"
>
<div
class="ant-comment-inner"
>
<div
class="ant-comment-header"
>
<span
class="ant-comment-header-avatar"
>
<span
class="ant-avatar ant-avatar-circle ant-avatar-image"
>
<img
alt="Han Solo"
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
/>
</span>
</span>
<div
class="ant-comment-header-author"
>
<span
class="ant-comment-header-author-name"
>
<a>
Han Solo
</a>
</span>
<span
class="ant-comment-header-author-time"
>
a few seconds ago
</span>
</div>
</div>
<div
class="ant-comment-content"
>
<div
class="ant-comment-content-detail"
>
<p>
Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Pellentesque massa placerat duis ultricies lacus sed turpis. Tempus urna et pharetra pharetra massa massa.
</p>
</div>
</div>
</div>
</div>
<div
class="ant-comment-comment"
>
<div
class="ant-comment-inner"
>
<div
class="ant-comment-header"
>
<span
class="ant-comment-header-avatar"
>
<span
class="ant-avatar ant-avatar-circle ant-avatar-image"
>
<img
alt="Han Solo"
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
/>
</span>
</span>
<div
class="ant-comment-header-author"
>
<span
class="ant-comment-header-author-name"
>
<a>
Han Solo
</a>
</span>
<span
class="ant-comment-header-author-time"
>
a few seconds ago
</span>
</div>
</div>
<div
class="ant-comment-content"
>
<div
class="ant-comment-content-detail"
>
<p>
Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Pellentesque massa placerat duis ultricies lacus sed turpis. Tempus urna et pharetra pharetra massa massa.
</p>
</div>
</div>
</div>
</div>
</div>,
]
`;

47
components/comment/demo/nested.md Normal file
View File

@ -0,0 +1,47 @@
---
order: 3
title:
zh-CN: 嵌套评论
en-US: Nested comment
---
## zh-CN
评论可以嵌套
## en-US
Comment can be nested
````jsx
import { Comment, Icon, Tooltip, Avatar } from 'antd';
import moment from 'moment';
const NestedComment = Comment.Nested;
const ExampleComment = () => (
<Comment
author={<a>Han Solo</a>}
avatar={
<Avatar
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
alt="Han Solo"
/>
}
time={moment().fromNow()}
>
<p>Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Pellentesque massa placerat duis ultricies lacus sed turpis. Tempus urna et pharetra pharetra massa massa.</p>
</Comment>
);
ReactDOM.render(
<React.Fragment>
<ExampleComment />
<NestedComment>
<ExampleComment />
<ExampleComment />
</NestedComment>
</React.Fragment>,
mountNode
);
````

33
components/comment/index.en-US.md
View File

@ -15,15 +15,24 @@ Comments can be used to enable discussions on an entity for example page, blog p
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
actions | List of action items rendered below the comment content | Array<ReactNode> | - |
author | The element to display as the comment author | ReactNode | - |
avatar | The element to display as the comment avatar - generally an antd `Avatar` | ReactNode | - |
children | The main content of the comment | ReactNode | - |
contentStyle | Inline style to apply to the comment content | object | - |
headStyle | Inline style to apply to the comment head | object | - |
id | Optional ID for the comment | string | - |
innerStyle | Additional style for the inner content | object | - |
prefixCls | Comment prefix className defaults to `.ant-comment` | string | .ant-comment |
style | Additional style for the comment | object | - |
time | A time element containing the time to be displayed | ReactNode | - |
tooltipTime | A time element to be displayed as the time tooltip | ReactNode | - |
| actions | List of action items rendered below the comment content | Array<ReactNode> | - |
| author | The element to display as the comment author | ReactNode | - |
| avatar | The element to display as the comment avatar - generally an antd `Avatar` | ReactNode | - |
| className | className of comment | string | - |
| children | The main content of the comment | ReactNode | - |
| contentStyle | Inline style to apply to the comment content | object | - |
| headStyle | Inline style to apply to the comment head | object | - |
| id | Optional ID for the comment | string | - |
| innerStyle | Additional style for the inner content | object | - |
| prefixCls | Comment prefix className defaults to `.ant-comment` | string | .ant-comment |
| style | Additional style for the comment | object | - |
| time | A time element containing the time to be displayed | ReactNode | - |
| tooltipTime | A time element to be displayed as the time tooltip | ReactNode | - |
# Comment.Nested
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| className | className of nested comment | string | - |
| prefixCls | prefix className defaults to `.ant-comment-nested` | string | .ant-comment-nested |
| style | Additional style for the comment | object | - |

19
components/comment/index.tsx
View File

@ -1,6 +1,10 @@
import * as React from 'react';
import classNames from 'classnames';
import Nested from './Nested';
import Tooltip from '../tooltip';
export { NestedCommentProps } from './Nested';
export interface CommentProps {
/** List of action items rendered below the comment content */
actions?: Array<React.ReactNode>;
@ -8,6 +12,8 @@ export interface CommentProps {
author: string;
/** The element to display as the comment avatar - generally an antd Avatar */
avatar: React.ReactNode;
/** className of comment */
className?: string;
/** The main content of the comment */
children: React.ReactNode;
/** Additional style for the comment content */
@ -18,7 +24,7 @@ export interface CommentProps {
id?: string;
/** Additional style for the comment inner wrapper */
innerStyle?: React.CSSProperties;
/** Comment prefix className defaults to '.ant-comment' */
/** Comment prefix defaults to '.ant-comment' */
prefixCls?: string;
/** Additional style for the comment */
style?: React.CSSProperties;
@ -29,6 +35,8 @@ export interface CommentProps {
}
export default class Comment extends React.Component<CommentProps, {}> {
static Nested: typeof Nested = Nested;
getAction(actions: React.ReactNode[]) {
if (!actions || !actions.length) {
return null;
@ -48,6 +56,7 @@ export default class Comment extends React.Component<CommentProps, {}> {
author,
avatar,
children,
className,
contentStyle = {},
headStyle = {},
innerStyle = {},
@ -58,11 +67,13 @@ export default class Comment extends React.Component<CommentProps, {}> {
...otherProps
} = this.props;
const classString = classNames(`${prefixCls}-comment`, className);
const avatarDom = typeof avatar === 'string'
? <img src={avatar} />
: avatar;
let timeDom;
if (time) {
timeDom = <span className={`${prefixCls}-header-author-time`}>{time}</span>
}
@ -70,7 +81,9 @@ export default class Comment extends React.Component<CommentProps, {}> {
if (time && tooltipTime) {
timeDom = (
<Tooltip title={tooltipTime}>
<span className={`${prefixCls}-header-author-time`}>{time}</span>
<span className={`${prefixCls}-header-author-time ${prefixCls}-header-author-time-tooltip`}>
{time}
</span>
</Tooltip>
)
}
@ -103,7 +116,7 @@ export default class Comment extends React.Component<CommentProps, {}> {
);
return (
<div {...otherProps} className={prefixCls} style={style}>
<div {...otherProps} className={classString} style={style}>
<div className={`${prefixCls}-inner`} style={innerStyle}>
{head}
{content}

33
components/comment/index.zh-CN.md
View File

@ -16,15 +16,24 @@ cols: 1
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
actions | 在评论内容下面呈现的操作项列表 | Array<ReactNode> | - |
author | 要显示为注释作者的元素 | ReactNode | - |
avatar | 要显示为评论头像的元素 - 通常是antd `Avatar` | ReactNode | - |
children | 评论的主要内容 | ReactNode | - |
contentStyle | 要应用于评论内容的内联样式 | object | - |
headStyle | 要应用于注释头的内联样式 | object | - |
id | 评论的可选ID | string | - |
innerStyle | 内容的附加风格 | object | - |
prefixCls | 注释前缀className默认为`.ant-comment` | string | .ant-comment |
style | 评论的其他风格 | object | - |
time | 包含要显示的时间的时间元素 | ReactNode | - |
tooltipTime | 要显示为时间工具提示的时间元素 | ReactNode | - |
| actions | 在评论内容下面呈现的操作项列表 | Array<ReactNode> | - |
| author | 要显示为注释作者的元素 | ReactNode | - |
| avatar | 要显示为评论头像的元素 - 通常是antd `Avatar` | ReactNode | - |
| className | 网格容器类名 | string | - |
| children | 评论的主要内容 | ReactNode | - |
| contentStyle | 要应用于评论内容的内联样式 | object | - |
| headStyle | 要应用于注释头的内联样式 | object | - |
| id | 评论的可选ID | string | - |
| innerStyle | 内容的附加风格 | object | - |
| prefixCls | 注释前缀className默认为`.ant-comment` | string | .ant-comment |
| style | 评论的其他风格 | object | - |
| time | 包含要显示的时间的时间元素 | ReactNode | - |
| tooltipTime | 要显示为时间工具提示的时间元素 | ReactNode | - |
# Comment.Nested
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| className | 网格容器类名 | string | - |
| prefixCls | 注释前缀className默认为`.ant-comment-nested` | string | .ant-comment-nested |
| style | 评论的其他风格 | object | - |

10
components/comment/style/index.less
View File

@ -47,18 +47,21 @@
}
}
&-time {
cursor: pointer;
cursor: auto;
color: @comment-author-time-color;
white-space: nowrap;
&-tooltip {
cursor: pointer;
&:hover {
text-decoration: underline;
}
}
}
}
}
&-content {
position: relative;
padding-left: 44px;
padding-left: @comment-pusher;
font-size: 14px;
}
&-actions {
@ -80,4 +83,7 @@
}
}
}
&-nested {
margin-left: @comment-pusher;
}
}

1
components/style/themes/default.less
View File

@ -399,6 +399,7 @@
@comment-padding-base: 16px 0;
@comment-header-margin: 4px;
@comment-header-padding: 8px;
@comment-pusher: 44px;
@comment-author-name-color: #8c8c8c;
@comment-author-time-color: #ccc;
@comment-action-color: #8c8c8c;