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 {
|
export interface CommentEditorProps {
|
||||||
avatar: React.ReactNode;
|
avatar: React.ReactNode;
|
||||||
children?: React.ReactNode;
|
|
||||||
className?: string;
|
className?: string;
|
||||||
editorStyle?: React.CSSProperties;
|
editorStyle?: React.CSSProperties;
|
||||||
headStyle?: React.CSSProperties;
|
headStyle?: React.CSSProperties;
|
||||||
@ -16,7 +15,6 @@ export interface CommentEditorProps {
|
|||||||
export default (props: CommentEditorProps) => {
|
export default (props: CommentEditorProps) => {
|
||||||
const {
|
const {
|
||||||
avatar,
|
avatar,
|
||||||
children,
|
|
||||||
className,
|
className,
|
||||||
content,
|
content,
|
||||||
editorStyle,
|
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> | - |
|
| actions | List of action items rendered below the comment content | Array<ReactNode> | - |
|
||||||
| author | The element to display as the comment author | 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 | - |
|
| 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 | - |
|
| 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 | - |
|
| content | The main content of the comment | ReactNode | - |
|
||||||
| contentStyle | Inline style to apply to the comment content | object | - |
|
| contentStyle | Inline style to apply to the comment content | object | - |
|
||||||
| headStyle | Inline style to apply to the comment head | 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 |
|
| 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 |
|
| prefixCls | prefix className defaults to `.ant-comment` | string | .ant-comment |
|
||||||
| style | Additional style for the editor | object | - |
|
| 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 * as React from 'react';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import Tooltip from '../tooltip';
|
import Tooltip from '../tooltip';
|
||||||
import Nested from './Nested';
|
|
||||||
import Editor from './Editor';
|
import Editor from './Editor';
|
||||||
|
|
||||||
export { NestedCommentProps } from './Nested';
|
|
||||||
export { CommentEditorProps } from './Editor';
|
export { CommentEditorProps } from './Editor';
|
||||||
|
|
||||||
export interface CommentProps {
|
export interface CommentProps {
|
||||||
@ -54,6 +52,17 @@ export default class Comment extends React.Component<CommentProps, {}> {
|
|||||||
return actionList;
|
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() {
|
render() {
|
||||||
const {
|
const {
|
||||||
actions,
|
actions,
|
||||||
@ -131,7 +140,7 @@ export default class Comment extends React.Component<CommentProps, {}> {
|
|||||||
|
|
||||||
const nestedComments =
|
const nestedComments =
|
||||||
React.Children.toArray(children).map((child: React.ReactElement<any>) =>
|
React.Children.toArray(children).map((child: React.ReactElement<any>) =>
|
||||||
React.cloneElement(<Nested>{child}</Nested>, {}));
|
React.cloneElement(this.renderNested(child), {}));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
@ -19,8 +19,8 @@ cols: 1
|
|||||||
| actions | 在评论内容下面呈现的操作项列表 | Array<ReactNode> | - |
|
| actions | 在评论内容下面呈现的操作项列表 | Array<ReactNode> | - |
|
||||||
| author | 要显示为注释作者的元素 | ReactNode | - |
|
| author | 要显示为注释作者的元素 | ReactNode | - |
|
||||||
| avatar | 要显示为评论头像的元素 - 通常是antd `Avatar` | ReactNode | - |
|
| avatar | 要显示为评论头像的元素 - 通常是antd `Avatar` | ReactNode | - |
|
||||||
| className | 网格容器类名 | string | - |
|
|
||||||
| children | 嵌套注释应作为注释的子项提供 | ReactNode | - |
|
| children | 嵌套注释应作为注释的子项提供 | ReactNode | - |
|
||||||
|
| className | 网格容器类名 | string | - |
|
||||||
| content | 评论的主要内容 | ReactNode | - |
|
| content | 评论的主要内容 | ReactNode | - |
|
||||||
| contentStyle | 要应用于评论内容的内联样式 | object | - |
|
| contentStyle | 要应用于评论内容的内联样式 | object | - |
|
||||||
| headStyle | 要应用于注释头的内联样式 | object | - |
|
| headStyle | 要应用于注释头的内联样式 | object | - |
|
||||||
@ -35,11 +35,11 @@ cols: 1
|
|||||||
|
|
||||||
| Property | Description | Type | Default |
|
| 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 |
|
| prefixCls | prefix className默认为`.ant-comment` | string | .ant-comment |
|
||||||
| style | 编辑器的其他样式 | object | - |
|
| 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