mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 16:06:28 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

⚡️ finalize comment

Browse Source
This commit is contained in:
ilanus 2018-10-31 13:53:10 +01:00 committed by 偏右
parent 49e8672e25
commit 423654430e
4 changed files with 446 additions and 468 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/comment/demo/basic.md correctly 1`] = `
<div>
<div
<div
class="ant-comment"
>
>
<div
class="ant-comment-inner"
>
@ -111,13 +110,11 @@ exports[`renders ./components/comment/demo/basic.md correctly 1`] = `
</ul>
</div>
</div>
</div>
</div>
`;
exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
<div>
<div>
<div
class="ant-comment"
>
@ -200,7 +197,6 @@ exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
</div>
</div>
</div>
</div>
</div>
`;
@ -219,7 +215,6 @@ exports[`renders ./components/comment/demo/list.md correctly 1`] = `
<div
class="ant-spin-container"
>
<div>
<div
class="ant-comment"
>
@ -271,8 +266,6 @@ exports[`renders ./components/comment/demo/list.md correctly 1`] = `
</div>
</div>
</div>
</div>
<div>
<div
class="ant-comment"
>
@ -326,15 +319,13 @@ exports[`renders ./components/comment/demo/list.md correctly 1`] = `
</div>
</div>
</div>
</div>
</div>
`;
exports[`renders ./components/comment/demo/nested.md correctly 1`] = `
<div>
<div
<div
class="ant-comment"
>
>
<div
class="ant-comment-inner"
>
@ -382,11 +373,9 @@ exports[`renders ./components/comment/demo/nested.md correctly 1`] = `
</ul>
</div>
</div>
</div>
<div
class="ant-comment-nested"
>
<div>
<div
class="ant-comment"
>
@ -437,11 +426,9 @@ exports[`renders ./components/comment/demo/nested.md correctly 1`] = `
</ul>
</div>
</div>
</div>
<div
class="ant-comment-nested"
>
<div>
<div
class="ant-comment"
>
@ -494,11 +481,9 @@ exports[`renders ./components/comment/demo/nested.md correctly 1`] = `
</div>
</div>
</div>
</div>
<div
class="ant-comment-nested"
>
<div>
<div
class="ant-comment"
>
@ -553,6 +538,5 @@ exports[`renders ./components/comment/demo/nested.md correctly 1`] = `
</div>
</div>
</div>
</div>
</div>
`;

6
components/comment/demo/nested.md
View File

@ -16,8 +16,7 @@ Comment can be nested
````jsx
import { Comment, Avatar } from 'antd';
function ExampleComment({ children }) {
return (
const ExampleComment = ({ children }) => (
<Comment
actions={[<span>Reply to</span>]}
author={<a>Han Solo</a>}
@ -31,8 +30,7 @@ function ExampleComment({ children }) {
>
{children}
</Comment>
);
}
);
ReactDOM.render(
<ExampleComment>

6
components/comment/index.tsx
View File

@ -14,8 +14,6 @@ export interface CommentProps {
content: React.ReactNode;
/** Nested comments should be provided as children of the Comment */
children?: any;
/** Optional ID for the comment */
id?: string;
/** Comment prefix defaults to '.ant-comment' */
prefixCls?: string;
/** Additional style for the comment */
@ -101,12 +99,10 @@ export default class Comment extends React.Component<CommentProps, {}> {
);
const comment = (
<div {...otherProps} className={classString} style={style}>
<div className={`${prefixCls}-inner`}>
{avatarDom}
{contentDom}
</div>
</div>
);
const nestedComments =
@ -114,7 +110,7 @@ export default class Comment extends React.Component<CommentProps, {}> {
.map(children, (child: React.ReactElement<any>) => this.renderNested(child));
return (
<div>
<div {...otherProps} className={classString} style={style}>
{comment}
{nestedComments}
</div>

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

@ -19,7 +19,7 @@
img {
width: 32px;
height: 32px;
border-radius: 16px;
border-radius: 50%;
}
}
@ -44,7 +44,7 @@
}
&-name {
transition: color 0.3s ease;
transition: color .3s;
font-size: 14px;
color: @comment-author-name-color;
> * {
@ -71,7 +71,7 @@
color: @comment-action-color;
> span {
padding-right: 10px;
transition: color 0.3s ease;
transition: color .3s;
font-size: 12px;
color: @comment-action-color;
cursor: pointer;