mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-01 11:39:28 +08:00
🐛 comment cleanup
This commit is contained in:
parent
60b20d3cbf
commit
2be48ead91
@ -3,7 +3,6 @@ import classNames from 'classnames';
|
||||
|
||||
export interface CommentEditorProps {
|
||||
avatar: React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
editorStyle?: React.CSSProperties;
|
||||
headStyle?: React.CSSProperties;
|
||||
@ -16,7 +15,6 @@ export interface CommentEditorProps {
|
||||
export default (props: CommentEditorProps) => {
|
||||
const {
|
||||
avatar,
|
||||
children,
|
||||
className,
|
||||
content,
|
||||
editorStyle,
|
||||
|
@ -1,15 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export interface NestedCommentProps {
|
||||
prefixCls?: string;
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export default (props: NestedCommentProps) => {
|
||||
const { prefixCls = 'ant-comment', className, ...others } = props;
|
||||
const classString = classNames(`${prefixCls}-nested`, className);
|
||||
return <div {...others} className={classString} />;
|
||||
};
|
@ -18,8 +18,8 @@ Comments can be used to enable discussions on an entity for example page, blog p
|
||||
| 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 | Nested comments should be provided as children of the Comment | ReactNode | - |
|
||||
| className | className of comment | string | - |
|
||||
| content | 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 | - |
|
||||
@ -34,11 +34,11 @@ Comments can be used to enable discussions on an entity for example page, blog p
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| avatar | The element to display as the comment avatar - generally an antd `Avatar` | ReactNode | - |
|
||||
| className | className of editor | string | - |
|
||||
| content | The element to display as the editor | ReactNode | - |
|
||||
| editorStyle | Inline style to apply to the comment editor | object | - |
|
||||
| headStyle | Inline style to apply to the comment head | object | - |
|
||||
| innerStyle | Inline style to apply to the comment inner comment editor | object | - |
|
||||
| prefixCls | prefix className defaults to `.ant-comment` | string | .ant-comment |
|
||||
| style | Additional style for the editor | object | - |
|
||||
| className | className of editor | string | - |
|
||||
| headStyle | Inline style to apply to the comment head | object | - |
|
||||
| editorStyle | Inline style to apply to the comment editor | object | - |
|
||||
| innerStyle | Inline style to apply to the comment inner comment editor | object | - |
|
||||
| avatar | The element to display as the comment avatar - generally an antd `Avatar` | ReactNode | - |
|
||||
| children | The element to display as the editor | ReactNode | - |
|
||||
|
@ -1,10 +1,8 @@
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import Tooltip from '../tooltip';
|
||||
import Nested from './Nested';
|
||||
import Editor from './Editor';
|
||||
|
||||
export { NestedCommentProps } from './Nested';
|
||||
export { CommentEditorProps } from './Editor';
|
||||
|
||||
export interface CommentProps {
|
||||
@ -54,6 +52,17 @@ export default class Comment extends React.Component<CommentProps, {}> {
|
||||
return actionList;
|
||||
}
|
||||
|
||||
renderNested = (child: React.ReactElement<any>) => {
|
||||
const { prefixCls = 'ant-comment' } = this.props;
|
||||
const classString = classNames(`${prefixCls}-nested`);
|
||||
|
||||
return (
|
||||
<div className={classString}>
|
||||
{child}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
actions,
|
||||
@ -131,7 +140,7 @@ export default class Comment extends React.Component<CommentProps, {}> {
|
||||
|
||||
const nestedComments =
|
||||
React.Children.toArray(children).map((child: React.ReactElement<any>) =>
|
||||
React.cloneElement(<Nested>{child}</Nested>, {}));
|
||||
React.cloneElement(this.renderNested(child), {}));
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
@ -19,8 +19,8 @@ cols: 1
|
||||
| actions | 在评论内容下面呈现的操作项列表 | Array<ReactNode> | - |
|
||||
| author | 要显示为注释作者的元素 | ReactNode | - |
|
||||
| avatar | 要显示为评论头像的元素 - 通常是antd `Avatar` | ReactNode | - |
|
||||
| className | 网格容器类名 | string | - |
|
||||
| children | 嵌套注释应作为注释的子项提供 | ReactNode | - |
|
||||
| className | 网格容器类名 | string | - |
|
||||
| content | 评论的主要内容 | ReactNode | - |
|
||||
| contentStyle | 要应用于评论内容的内联样式 | object | - |
|
||||
| headStyle | 要应用于注释头的内联样式 | object | - |
|
||||
@ -35,11 +35,11 @@ cols: 1
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| avatar | 要显示为评论头像的元素 - 通常是antd `Avatar` | ReactNode | - |
|
||||
| className | 编辑器的className | string | - |
|
||||
| content | 要显示为编辑器的元素 | ReactNode | - |
|
||||
| editorStyle | 要应用于注释编辑器的内联样式 | object | - |
|
||||
| headStyle | 要应用于注释头的内联样式 | object | - |
|
||||
| innerStyle | 要应用于注释内部注释编辑器的内联样式 | object | - |
|
||||
| prefixCls | prefix className默认为`.ant-comment` | string | .ant-comment |
|
||||
| style | 编辑器的其他样式 | object | - |
|
||||
| className | 编辑器的className | string | - |
|
||||
| headStyle | 要应用于注释头的内联样式 | object | - |
|
||||
| editorStyle | 要应用于注释编辑器的内联样式 | object | - |
|
||||
| innerStyle | 要应用于注释内部注释编辑器的内联样式 | object | - |
|
||||
| avatar | 要显示为评论头像的元素 - 通常是antd `Avatar` | ReactNode | - |
|
||||
| children | 要显示为编辑器的元素 | ReactNode | - |
|
||||
|
Loading…
Reference in New Issue
Block a user