From 6401da20827fba7d5cda5eae2f160c1e06372d78 Mon Sep 17 00:00:00 2001
From: Tom Xu <ycxzhkx@gmail.com>
Date: Thu, 23 Apr 2020 20:52:15 +0800
Subject: [PATCH] refactor(comment): rewrite with hook (#23498)

* refactor(comment): rewrite with hook

* improve comment code
---
 components/comment/index.tsx | 118 +++++++++++++++++------------------
 1 file changed, 57 insertions(+), 61 deletions(-)

diff --git a/components/comment/index.tsx b/components/comment/index.tsx
index 3287d24ecc..c457ff89ae 100644
--- a/components/comment/index.tsx
+++ b/components/comment/index.tsx
@@ -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;