chore: refactor comment and icon

components/_util/util.ts

@@ -1,11 +1,11 @@
-export const isFunction = val => typeof val === 'function';
+export const isFunction = (val: unknown): val is Function => typeof val === 'function';
 
 export const isArray = Array.isArray;
-export const isString = val => typeof val === 'string';
+export const isString = (val: unknown): val is string => typeof val === 'string';
-export const isSymbol = val => typeof val === 'symbol';
+export const isSymbol = (val: unknown): val is symbol => typeof val === 'symbol';
-export const isObject = val => val !== null && typeof val === 'object';
+export const isObject = (val: unknown): val is object => val !== null && typeof val === 'object';
 const onRE = /^on[^a-z]/;
-const isOn = key => onRE.test(key);
+const isOn = (key: string) => onRE.test(key);
 
 const cacheStringFunction = fn => {
   const cache = Object.create(null);
@@ -20,16 +20,16 @@ const camelize = cacheStringFunction(str => {
 });
 
 const hyphenateRE = /\B([A-Z])/g;
-const hyphenate = cacheStringFunction(str => {
+const hyphenate = cacheStringFunction((str: string) => {
   return str.replace(hyphenateRE, '-$1').toLowerCase();
 });
 
-const capitalize = cacheStringFunction(str => {
+const capitalize = cacheStringFunction((str: string) => {
   return str.charAt(0).toUpperCase() + str.slice(1);
 });
 
 const hasOwnProperty = Object.prototype.hasOwnProperty;
-const hasOwn = (val, key) => hasOwnProperty.call(val, key);
+const hasOwn = (val: object, key: string) => hasOwnProperty.call(val, key);
 
 // change from vue sourcecode
 function resolvePropValue(options, props, key, value) {

components/comment/index.jsx

@@ -1,99 +0,0 @@
-import { inject } from 'vue';
-import PropsTypes from '../_util/vue-types';
-import { getComponent, getSlot } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
-export const CommentProps = {
-  actions: PropsTypes.array,
-  /** The element to display as the comment author. */
-  author: PropsTypes.any,
-  /** The element to display as the comment avatar - generally an antd Avatar */
-  avatar: PropsTypes.any,
-  /** The main content of the comment */
-  content: PropsTypes.any,
-  /** Comment prefix defaults to '.ant-comment' */
-  prefixCls: PropsTypes.string,
-  /** A datetime element containing the time to be displayed */
-  datetime: PropsTypes.any,
-};
-
-const Comment = {
-  name: 'AComment',
-  props: CommentProps,
-  setup() {
-    return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
-    };
-  },
-  methods: {
-    getAction(actions) {
-      if (!actions || !actions.length) {
-        return null;
-      }
-      const actionList = actions.map((action, index) => <li key={`action-${index}`}>{action}</li>);
-      return actionList;
-    },
-    renderNested(prefixCls, children) {
-      return <div class={`${prefixCls}-nested`}>{children}</div>;
-    },
-  },
-
-  render() {
-    const { prefixCls: customizePrefixCls } = this.$props;
-
-    const getPrefixCls = this.configProvider.getPrefixCls;
-    const prefixCls = getPrefixCls('comment', customizePrefixCls);
-
-    const actions = getComponent(this, 'actions');
-    const author = getComponent(this, 'author');
-    const avatar = getComponent(this, 'avatar');
-    const content = getComponent(this, 'content');
-    const datetime = getComponent(this, 'datetime');
-
-    const avatarDom = (
-      <div class={`${prefixCls}-avatar`}>
-        {typeof avatar === 'string' ? <img src={avatar} alt="comment-avatar" /> : avatar}
-      </div>
-    );
-
-    const actionDom = actions ? (
-      <ul class={`${prefixCls}-actions`}>
-        {this.getAction(Array.isArray(actions) ? actions : [actions])}
-      </ul>
-    ) : null;
-
-    const authorContent = (
-      <div class={`${prefixCls}-content-author`}>
-        {author && <span class={`${prefixCls}-content-author-name`}>{author}</span>}
-        {datetime && <span class={`${prefixCls}-content-author-time`}>{datetime}</span>}
-      </div>
-    );
-
-    const contentDom = (
-      <div class={`${prefixCls}-content`}>
-        {authorContent}
-        <div class={`${prefixCls}-content-detail`}>{content}</div>
-        {actionDom}
-      </div>
-    );
-
-    const comment = (
-      <div class={`${prefixCls}-inner`}>
-        {avatarDom}
-        {contentDom}
-      </div>
-    );
-    const children = getSlot(this);
-    return (
-      <div class={prefixCls}>
-        {comment}
-        {children && children.length ? this.renderNested(prefixCls, children) : null}
-      </div>
-    );
-  },
-};
-
-/* istanbul ignore next */
-Comment.install = function(app) {
-  app.component(Comment.name, Comment);
-};
-export default Comment;

components/comment/index.tsx

@@ -0,0 +1,93 @@
+import { inject, VNodeTypes, CSSProperties, App, SetupContext } from 'vue';
+import classNames from '../_util/classNames';
+import { ConfigConsumerProps } from '../config-provider';
+
+export interface CommentProps {
+  /** List of action items rendered below the comment content */
+  actions?: Array<VNodeTypes>;
+  /** The element to display as the comment author. */
+  author?: VNodeTypes;
+  /** The element to display as the comment avatar - generally an antd Avatar */
+  avatar?: VNodeTypes;
+  /** The main content of the comment */
+  content: VNodeTypes;
+  /** Comment prefix defaults to '.ant-comment' */
+  prefixCls?: string;
+  /** Additional style for the comment */
+  style?: CSSProperties;
+  /** A datetime element containing the time to be displayed */
+  datetime?: VNodeTypes;
+}
+
+const Comment = (
+  {
+    actions,
+    author,
+    avatar,
+    content,
+    prefixCls: customizePrefixCls,
+    datetime,
+    ...otherProps
+  }: CommentProps,
+  { slots }: SetupContext,
+) => {
+  const { getPrefixCls } = inject('configProvider', ConfigConsumerProps);
+
+  const renderNested = (prefixCls: string, nestedChildren: any) => {
+    return <div class={classNames(`${prefixCls}-nested`)}>{nestedChildren}</div>;
+  };
+
+  const prefixCls = getPrefixCls('comment', customizePrefixCls);
+
+  const avatarDom = avatar ? (
+    <div class={`${prefixCls}-avatar`}>
+      {typeof avatar === 'string' ? <img src={avatar} alt="comment-avatar" /> : avatar}
+    </div>
+  ) : null;
+
+  const actionDom =
+    actions && actions.length ? (
+      <ul class={`${prefixCls}-actions`}>
+        {actions.map((action, index) => (
+          <li key={`action-${index}`}>{action}</li> // eslint-disable-line react/no-array-index-key
+        ))}
+      </ul>
+    ) : null;
+
+  const authorContent = (author || datetime) && (
+    <div class={`${prefixCls}-content-author`}>
+      {author && <span class={`${prefixCls}-content-author-name`}>{author}</span>}
+      {datetime && <span class={`${prefixCls}-content-author-time`}>{datetime}</span>}
+    </div>
+  );
+
+  const contentDom = (
+    <div class={`${prefixCls}-content`}>
+      {authorContent}
+      <div class={`${prefixCls}-content-detail`}>{content}</div>
+      {actionDom}
+    </div>
+  );
+  const cls = classNames(prefixCls);
+
+  const children = slots.default?.();
+
+  return (
+    <div {...otherProps} class={cls}>
+      <div class={`${prefixCls}-inner`}>
+        {avatarDom}
+        {contentDom}
+      </div>
+      {children ? renderNested(prefixCls, children) : null}
+    </div>
+  );
+};
+
+Comment.displayName = 'AComment';
+
+/* istanbul ignore next */
+Comment.install = function(app: App) {
+  app.component(Comment.name, Comment);
+};
+
+export default Comment;

components/icon/index.js

@@ -1,16 +0,0 @@
-import warning from '../_util/warning';
-
-const Icon = {
-  name: 'AIcon',
-  render() {
-    warning(false, 'Icon', 'Empty Icon');
-    return null;
-  },
-};
-
-/* istanbul ignore next */
-Icon.install = function(app) {
-  app.component(Icon.name, Icon);
-};
-
-export default Icon;

components/icon/index.tsx

@@ -0,0 +1,16 @@
+import { App } from 'vue';
+import warning from '../_util/warning';
+
+const Icon = () => {
+  warning(false, 'Icon', 'Empty Icon');
+  return null;
+};
+
+Icon.displayName = 'AIcon';
+
+/* istanbul ignore next */
+Icon.install = function(app: App) {
+  app.component(Icon.displayName, Icon);
+};
+
+export default Icon;