mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

refactor(comment): rewrite with hook (#23498)

Browse Source 
* refactor(comment): rewrite with hook

* improve comment code
This commit is contained in:
Tom Xu 2020-04-23 20:52:15 +08:00 committed by GitHub
parent d2c541b4e2
commit 6401da2082
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 57 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
components/comment/index.tsx
View File

@ -1,6 +1,6 @@
import * as React from 'react';
import classNames from 'classnames';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import { ConfigContext } from '../config-provider';
function getAction(actions: React.ReactNode[]) {
if (!actions || !actions.length) {
@ -32,72 +32,68 @@ export interface CommentProps {
datetime?: React.ReactNode;
}
export default class Comment extends React.Component<CommentProps, {}> {
renderNested = (prefixCls: string, children: any) => {
return <div className={classNames(`${prefixCls}-nested`)}>{children}</div>;
const Comment: React.FC<CommentProps> = ({
actions,
author,
avatar,
children,
className,
content,
prefixCls: customizePrefixCls,
style,
datetime,
...otherProps
}) => {
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const renderNested = (prefixCls: string, nestedChildren: any) => {
return <div className={classNames(`${prefixCls}-nested`)}>{nestedChildren}</div>;
};
renderComment = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
const {
actions,
author,
avatar,
children,
className,
content,
prefixCls: customizePrefixCls,
style,
datetime,
...otherProps
} = this.props;
const prefixCls = getPrefixCls('comment', customizePrefixCls);
const prefixCls = getPrefixCls('comment', customizePrefixCls);
const avatarDom = (
<div className={`${prefixCls}-avatar`}>
{typeof avatar === 'string' ? <img src={avatar} alt="comment-avatar" /> : avatar}
</div>
);
const avatarDom = (
<div className={`${prefixCls}-avatar`}>
{typeof avatar === 'string' ? <img src={avatar} alt="comment-avatar" /> : avatar}
</div>
);
const actionDom =
actions && actions.length ? (
<ul className={`${prefixCls}-actions`}>{getAction(actions)}</ul>
) : null;
const actionDom =
actions && actions.length ? (
<ul className={`${prefixCls}-actions`}>{getAction(actions)}</ul>
) : null;
const authorContent = (
<div className={`${prefixCls}-content-author`}>
{author && <span className={`${prefixCls}-content-author-name`}>{author}</span>}
{datetime && <span className={`${prefixCls}-content-author-time`}>{datetime}</span>}
</div>
);
const authorContent = (
<div className={`${prefixCls}-content-author`}>
{author && <span className={`${prefixCls}-content-author-name`}>{author}</span>}
{datetime && <span className={`${prefixCls}-content-author-time`}>{datetime}</span>}
</div>
);
const contentDom = (
<div className={`${prefixCls}-content`}>
{authorContent}
<div className={`${prefixCls}-content-detail`}>{content}</div>
{actionDom}
</div>
);
const contentDom = (
<div className={`${prefixCls}-content`}>
{authorContent}
<div className={`${prefixCls}-content-detail`}>{content}</div>
{actionDom}
</div>
);
const comment = (
<div className={`${prefixCls}-inner`}>
{avatarDom}
{contentDom}
</div>
);
const comment = (
<div className={`${prefixCls}-inner`}>
{avatarDom}
{contentDom}
</div>
);
const cls = classNames(prefixCls, className, {
[`${prefixCls}-rtl`]: direction === 'rtl',
});
return (
<div {...otherProps} className={cls} style={style}>
{comment}
{children ? renderNested(prefixCls, children) : null}
</div>
);
};
const cls = classNames(prefixCls, className, {
[`${prefixCls}-rtl`]: direction === 'rtl',
});
return (
<div {...otherProps} className={cls} style={style}>
{comment}
{children ? this.renderNested(prefixCls, children) : null}
</div>
);
};
render() {
return <ConfigConsumer>{this.renderComment}</ConfigConsumer>;
}
}
export default Comment;