🐛 comment cleanup

This commit is contained in:
ilanus 2018-10-28 18:17:00 +01:00 committed by 偏右
parent 60b20d3cbf
commit 2be48ead91
5 changed files with 26 additions and 34 deletions

View File

@ -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,

View File

@ -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} />;
};

View File

@ -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 | - |

View File

@ -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>

View File

@ -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 | - |