feat: Add forwardRef for Card

oceanbase · Nov 2, 2023 · 1305842 · 1305842
1 parent 2cbbf6c
commit 1305842
Showing 1 changed file with 46 additions and 40 deletions.
diff --git a/packages/design/src/card/index.tsx b/packages/design/src/card/index.tsx
@@ -21,49 +21,55 @@ export interface CardProps extends AntCardProps {
   divided?: boolean;
   tabList?: CardTabListType[];
 }
+type CardType = typeof AntCard;
 
-const Card = ({
-  children,
-  divided = true,
-  tabList,
-  prefixCls: customizePrefixCls,
-  className,
-  ...restProps
-}: CardProps) => {
-  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-  const prefixCls = getPrefixCls('card', customizePrefixCls);
-  const tabsPrefixCls = getPrefixCls('tabs', customizePrefixCls);
-  const { wrapSSR } = useStyle(prefixCls, tabsPrefixCls);
-  const cardCls = classNames(
-    {
-      [`${prefixCls}-no-divider`]: !divided,
-    },
-    className
-  );
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  (
+    { children, divided = true, tabList, prefixCls: customizePrefixCls, className, ...restProps },
+    ref
+  ) => {
+    const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+    const prefixCls = getPrefixCls('card', customizePrefixCls);
+    const tabsPrefixCls = getPrefixCls('tabs', customizePrefixCls);
+    const { wrapSSR } = useStyle(prefixCls, tabsPrefixCls);
 
-  const newTabList = tabList?.map(item => {
-    if (!isNullValue(item.tag)) {
-      return {
-        ...item,
-        tab: (
-          <Space size={4}>
-            {item.tab}
-            <Tag bordered={false} className={`${tabsPrefixCls}-tab-tag`}>
-              {item.tag}
-            </Tag>
-          </Space>
-        ),
-      };
-    }
-    return item;
-  });
+    const cardCls = classNames(
+      {
+        [`${prefixCls}-no-divider`]: !divided,
+      },
+      className
+    );
 
-  return wrapSSR(
-    <AntCard tabList={newTabList} prefixCls={customizePrefixCls} className={cardCls} {...restProps}>
-      {children}
-    </AntCard>
-  );
-};
+    const newTabList = tabList?.map(item => {
+      if (!isNullValue(item.tag)) {
+        return {
+          ...item,
+          tab: (
+            <Space size={4}>
+              {item.tab}
+              <Tag bordered={false} className={`${tabsPrefixCls}-tab-tag`}>
+                {item.tag}
+              </Tag>
+            </Space>
+          ),
+        };
+      }
+      return item;
+    });
+
+    return wrapSSR(
+      <AntCard
+        ref={ref}
+        tabList={newTabList}
+        prefixCls={customizePrefixCls}
+        className={cardCls}
+        {...restProps}
+      >
+        {children}
+      </AntCard>
+    );
+  }
+);
 
 Card.Grid = AntCard.Grid;
 Card.Meta = AntCard.Meta;