fix(card): fix props and className (#1726)

Co-authored-by: maxin <maxin@growingio.com>
growingio · Dec 23, 2021 · c2cab83 · c2cab83 · vercel · Dec 23, 2021
1 parent 997a2a4
commit c2cab83
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 35 deletions.
diff --git a/src/card/Card.tsx b/src/card/Card.tsx
@@ -3,9 +3,8 @@ import classNames from 'classnames';
 import { usePrefixCls } from '@gio-design/utils';
 import { CardProps } from './interfaces';
 import WithRef from '../utils/withRef';
-import { WithCommonProps } from '../utils/interfaces';
 
-export const Card = WithRef<HTMLDivElement, WithCommonProps<CardProps>>(
+export const Card = WithRef<HTMLDivElement, CardProps>(
   (
     {
       fullWidthContent = false,

diff --git a/src/card/CardMeta.tsx b/src/card/CardMeta.tsx
@@ -4,42 +4,35 @@ import classNames from 'classnames';
 import { isString } from 'lodash/fp';
 import { CardMetaProps } from './interfaces';
 
-const CardMeta: React.FC<CardMetaProps> = ({
-  image = '',
-  title,
-  description,
-  action,
-  ...resetProps
-}: CardMetaProps) => {
-  const prefixCls = usePrefixCls('card-meta');
+const CardMeta = React.forwardRef<HTMLDivElement, CardMetaProps>(
+  ({ image = '', title, description, action, className, ...resetProps }, ref) => {
+    const prefixCls = usePrefixCls('card-meta');
 
-  const renderImage = () => {
-    if (isString(image)) return image ? <img src={image} className={`${prefixCls}-image`} alt="" /> : null;
-    return React.cloneElement(image, { className: classNames(`${prefixCls}-image`, image.props.className) });
-  };
+    const renderImage = () => {
+      if (isString(image)) return image ? <img src={image} className={`${prefixCls}-image`} alt="" /> : null;
+      return React.cloneElement(image, { className: classNames(`${prefixCls}-image`, image.props.className) });
+    };
 
-  const renderOption = (opt: React.ReactNode, type: 'title' | 'description') =>
-    opt && React.cloneElement(<div />, { title: isString(opt) ? opt : '', className: `${prefixCls}-${type}` }, opt);
+    const renderOption = (opt: React.ReactNode, type: 'title' | 'description') =>
+      opt && React.cloneElement(<div />, { title: isString(opt) ? opt : '', className: `${prefixCls}-${type}` }, opt);
 
-  const renderDetail = () =>
-    (title || description) && (
-      <div className={`${prefixCls}-detail`}>
-        {renderOption(title, 'title')}
-        {renderOption(description, 'description')}
-      </div>
-    );
+    const renderDetail = () =>
+      (title || description) && (
+        <div className={`${prefixCls}-detail`}>
+          {renderOption(title, 'title')}
+          {renderOption(description, 'description')}
+        </div>
+      );
 
-  const renderAction = () => (title || description || image) && <div className={`${prefixCls}-action`}>{action}</div>;
+    const renderAction = () => (title || description || image) && <div className={`${prefixCls}-action`}>{action}</div>;
 
-  const renderHeader =
-    title || description || image ? (
-      <div className={`${prefixCls}`} {...resetProps}>
+    return title || description || image ? (
+      <div className={classNames(className, prefixCls)} ref={ref} {...resetProps}>
         {renderImage()}
         {renderDetail()}
         {renderAction()}
       </div>
     ) : null;
-
-  return renderHeader;
-};
+  }
+);
 export default CardMeta;
diff --git a/src/card/interfaces.ts b/src/card/interfaces.ts
@@ -23,7 +23,7 @@ export interface CardMetaProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   action?: React.ReactNode;
 }
 
-export interface CardProps {
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * 是否宽度平铺
    */
@@ -44,8 +44,4 @@ export interface CardProps {
    * 自定义className前缀
    */
   prefixCls?: string;
-  /**
-   * 自定义className
-   */
-  className?: string;
 }