diff --git a/components/comment/demo/basic.md b/components/comment/demo/basic.md index 08e0e0addd..2f995b8651 100644 --- a/components/comment/demo/basic.md +++ b/components/comment/demo/basic.md @@ -84,7 +84,7 @@ class App extends React.Component { content={

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.

} - time={ + datetime={ {moment().fromNow()} diff --git a/components/comment/demo/editor.md b/components/comment/demo/editor.md index cef5a32f69..40a36733e6 100644 --- a/components/comment/demo/editor.md +++ b/components/comment/demo/editor.md @@ -97,7 +97,7 @@ class App extends React.Component { author: 'Han Solo', avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png', content: values.message, - time: moment().fromNow(), + datetime: moment().fromNow(), }, ...this.state.comments, ] diff --git a/components/comment/demo/list.md b/components/comment/demo/list.md index 0792bc32e4..67c41d3319 100644 --- a/components/comment/demo/list.md +++ b/components/comment/demo/list.md @@ -25,7 +25,7 @@ const data = [ content: (

Nisl nisi scelerisque eu ultrices vitae auctor eu augue. Nulla at volutpat diam ut venenatis tellus in metus vulputate.

), - time: ( + datetime: ( {moment().subtract(1, 'days').fromNow()} @@ -38,7 +38,7 @@ const data = [ content: (

Sed turpis tincidunt id aliquet risus feugiat in ante metus. Faucibus nisl tincidunt eget nullam non.

), - time: ( + datetime: ( {moment().subtract(2, 'days').fromNow()} @@ -58,7 +58,7 @@ ReactDOM.render( author={item.author} avatar={item.avatar} content={item.content} - time={item.time} + datetime={item.datetime} /> )} />, diff --git a/components/comment/index.en-US.md b/components/comment/index.en-US.md index ba7f104cb8..d5906984a0 100644 --- a/components/comment/index.en-US.md +++ b/components/comment/index.en-US.md @@ -21,10 +21,6 @@ Comments can be used to enable discussions on an entity for example page, blog p | children | Nested comments should be provided as children of the Comment | ReactNode | - | | className | Addtional className for comment | string | - | | content | The main content of the comment | ReactNode | - | -| contentStyle | Inline style to apply to the comment content | object | - | -| avatarStyle | Inline style to apply to the comment avatar | 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 | - | +| datetime | A datetime element containing the time to be displayed | ReactNode | - | diff --git a/components/comment/index.tsx b/components/comment/index.tsx index 7bf7b85e53..acab8622c4 100644 --- a/components/comment/index.tsx +++ b/components/comment/index.tsx @@ -14,20 +14,14 @@ export interface CommentProps { content: React.ReactNode; /** Nested comments should be provided as children of the Comment */ children?: any; - /** Additional style for the comment content */ - contentStyle?: React.CSSProperties; - /** Additional style for the comment avatar */ - avatarStyle?: React.CSSProperties; /** Optional ID for the comment */ id?: string; - /** Additional style for the comment inner wrapper */ - innerStyle?: React.CSSProperties; /** Comment prefix defaults to '.ant-comment' */ prefixCls?: string; /** Additional style for the comment */ style?: React.CSSProperties; - /** A time element containing the time to be displayed */ - time?: React.ReactNode; + /** A datetime element containing the time to be displayed */ + datetime?: React.ReactNode; /** Direction of the comment left or right */ direction?: 'left' | 'right'; } @@ -62,16 +56,13 @@ export default class Comment extends React.Component { actions, author, avatar, - avatarStyle = {}, children, className, content, - contentStyle = {}, direction = 'left', - innerStyle = {}, prefixCls = 'ant-comment', style = {}, - time, + datetime, ...otherProps } = this.props; @@ -90,14 +81,14 @@ export default class Comment extends React.Component { ); } - if (time) { + if (datetime) { authorElements.push( - {time}, + {datetime}, ); } const avatarDom = ( -
+
{typeof avatar === 'string' ? : avatar}
); @@ -113,7 +104,7 @@ export default class Comment extends React.Component { ); const contentDom = ( -
+
{authorContent}
{content} @@ -124,7 +115,7 @@ export default class Comment extends React.Component { const comment = (
-
+
{direction === 'left' ? [avatarDom, contentDom] : [contentDom, avatarDom] diff --git a/components/comment/index.zh-CN.md b/components/comment/index.zh-CN.md index 664f97ef87..ca41abf7ac 100644 --- a/components/comment/index.zh-CN.md +++ b/components/comment/index.zh-CN.md @@ -2,17 +2,17 @@ category: Components type: Data Display title: Comment -subtitle: 分割线 +subtitle: 评论 cols: 1 --- - 单一评论组件。 +单一评论组件。 - ## When To Use +## 何时使用 - 评论可用于启用对实体的讨论,例如页面,博客文章,问题或其他。 +评论组件可用于对事物的讨论,例如页面、博客文章、问题等等。 - ## API +## API | Property | Description | Type | Default | | -------- | ----------- | ---- | ------- | @@ -22,10 +22,6 @@ cols: 1 | children | 嵌套注释应作为注释的子项提供 | ReactNode | - | | className | 网格容器类名 | string | - | | content | 评论的主要内容 | ReactNode | - | -| contentStyle | 要应用于评论内容的内联样式 | object | - | -| headStyle | 内联样式应用于评论头像 | object | - | | id | 评论的可选ID | string | - | -| innerStyle | 内容的附加风格 | object | - | -| prefixCls | 注释前缀className默认为`.ant-comment` | string | .ant-comment | | style | 评论的其他风格 | object | - | -| time | 包含要显示的时间的时间元素 | ReactNode | - | +| datetime | 包含要显示的时间的时间元素 | ReactNode | - | diff --git a/components/comment/style/index.less b/components/comment/style/index.less index d7017f0f46..e1bfa1aa0a 100644 --- a/components/comment/style/index.less +++ b/components/comment/style/index.less @@ -65,7 +65,7 @@ &-actions { margin-top: 12px; - & > li { + > li { display: inline-block; color: @comment-action-color; > span {