Tencent · uyarn · Dec 23, 2023 · Dec 23, 2023 · Dec 23, 2023 · Dec 23, 2023
@@ -31,6 +31,7 @@ const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {
     title,
     theme,
     status,
+    loadingProps,
   } = useDefaultProps<CardProps>(props, cardDefaultProps);
 
   const { classPrefix } = useConfig();
@@ -132,15 +133,21 @@ const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {
   );
 
   const card = (
-    <div ref={ref} className={cardClass} style={style}>
+    <div ref={ref} className={cardClass}>
       {showHeader ? renderHeader() : null}
       {renderCover}
       {renderChildren}
       {renderFooter}
     </div>
   );
 
-  return loading ? <Loading>{card}</Loading> : card;
+  return loading ? (
+    <Loading {...loadingProps} style={style}>
+      {card}
+    </Loading>
+  ) : (
+    React.cloneElement(card, { style })
+  );
 });
 
 Card.displayName = 'Card';

@@ -2,7 +2,6 @@ import { render } from '@test/utils';
 import React from 'react';
 import Card from '../Card';
 import Avatar from '../../avatar';
-import Loading from '../../loading';
 
 const cover = 'https://tdesign.gtimg.com/site/source/card-demo.png';
 const avatar = 'https://tdesign.gtimg.com/site/avatar.jpg';
@@ -56,11 +55,23 @@ describe('Card', () => {
   });
 
   test('loading', () => {
+    const { container } = render(<Card loading></Card>);
+    expect(container.querySelector('.t-loading')).toBeInTheDocument();
+  });
+  test('custom loading props', () => {
+    const customProps = {
+      text: 'TDesign努力加载中...',
+    };
     const { container } = render(
-      <Loading>
-        <Card></Card>
-      </Loading>,
+      <Card
+        title="自定义loadingProps Card"
+        loading={true}
+        bordered
+        style={{ width: '400px' }}
+        loadingProps={customProps}
+      ></Card>,
     );
     expect(container.querySelector('.t-loading')).toBeInTheDocument();
+    expect(container.querySelector('.t-loading__text').textContent).toBe('TDesign努力加载中...');
   });
 });
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Card } from 'tdesign-react';
+
+export default function CustomLoadingProps() {
+  const customProps = {
+    text: 'TDesign努力加载中...',
+  };
+
+  return (
+    <Card title="自定义loadingProps Card" loading bordered style={{ width: '400px' }} loadingProps={customProps}>
+      仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
+    </Card>
+  );
+}
@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Card Props
 
 name | type | default | description | required
@@ -20,9 +19,10 @@ header | TNode | - | Typescript：`string \| TNode`。[see more ts definition](h
 headerBordered | Boolean | false | \- | N
 hoverShadow | Boolean | false | \- | N
 loading | TNode | false | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+loadingProps | Object | - | Loading Component Props。Typescript：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/card/type.ts) | N
 shadow | Boolean | false | \- | N
-size | String | medium | options：medium/small | N
+size | String | medium | options: medium/small | N
 status | String | - | \- | N
 subtitle | TNode | - | card subtitle。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-theme | String | normal | options：normal/poster1/poster2 | N
+theme | String | normal | options: normal/poster1/poster2 | N
 title | TNode | - | card title。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
@@ -18,7 +18,8 @@ footer | TNode | - | 卡片底部内容，可完全自定义。TS 类型：`stri
 header | TNode | - | 卡片顶部内容，优先级高于其他所有元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 headerBordered | Boolean | false | 头部是否带分割线，仅在有header时有效 | N
 hoverShadow | Boolean | false | hover时是否有阴影 | N
-loading | TNode | false | 加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Sketon 组件完全自定义加载态呈现内容。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+loading | TNode | false | 加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Skeleton 组件完全自定义加载态呈现内容。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+loadingProps | Object | - | 透传加载组件(Loading)全部属性。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/card/type.ts) | N
 shadow | Boolean | false | 是否显示卡片阴影，默认不显示 | N
 size | String | medium | 尺寸。可选项：medium/small | N
 status | String | - | 卡片状态内容，仅在操作区域不在顶部时有效（即 `theme=poster2` ） | N

@@ -4,6 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
+import { LoadingProps } from '../loading';
 import { TNode } from '../common';
 
 export interface TdCardProps {
@@ -55,10 +56,14 @@ export interface TdCardProps {
    */
   hoverShadow?: boolean;
   /**
-   * 加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Sketon 组件完全自定义加载态呈现内容
+   * 加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Skeleton 组件完全自定义加载态呈现内容
    * @default false
    */
   loading?: TNode;
+  /**
+   * 透传加载组件(Loading)全部属性
+   */
+  loadingProps?: LoadingProps;
   /**
    * 是否显示卡片阴影，默认不显示
    * @default false

@@ -70,8 +70,8 @@ const Loading: React.FC<LoadingProps> = (props) => {
       styles.fontSize = size;
     }
 
-    return style ? { ...styles, ...style } : styles;
-  }, [size, zIndex, style]);
+    return styles;
+  }, [size, zIndex]);
 
   const sizeMap = {
     large: `${classPrefix}-size-l`,
@@ -113,15 +113,15 @@ const Loading: React.FC<LoadingProps> = (props) => {
 
   if (fullscreen) {
     return loading ? (
-      <div className={classnames(name, fullscreenClass, centerClass, overlayClass)} style={calcStyles}>
+      <div className={classnames(name, fullscreenClass, centerClass, overlayClass)} style={{ ...calcStyles, ...style }}>
         <div className={baseClasses}>{commonContent()}</div>
       </div>
     ) : null;
   }
 
   if (content || children) {
     return (
-      <div className={relativeClass}>
+      <div className={relativeClass} style={style}>
         {content || children}
         {showLoading ? (
           <div
@@ -140,7 +140,10 @@ const Loading: React.FC<LoadingProps> = (props) => {
     return (
       <Portal attach={attach}>
         {loading ? (
-          <div className={classnames(name, baseClasses, fullClass, { [overlayClass]: showOverlay })} style={calcStyles}>
+          <div
+            className={classnames(name, baseClasses, fullClass, { [overlayClass]: showOverlay })}
+            style={{ ...calcStyles, ...style }}
+          >
             {commonContent()}
           </div>
         ) : null}
@@ -149,7 +152,7 @@ const Loading: React.FC<LoadingProps> = (props) => {
   }
 
   return loading ? (
-    <div className={classnames(name, baseClasses)} style={calcStyles}>
+    <div className={classnames(name, baseClasses)} style={{ ...calcStyles, ...style }}>
       {commonContent()}
     </div>
   ) : null;

@@ -39169,6 +39169,183 @@ exports[`csr snapshot test > csr test src/card/_example/bordered-none.jsx 1`] =
 }
 `;
 
+exports[`csr snapshot test > csr test src/card/_example/custom-loading-props.jsx 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="t-loading__parent"
+        style="width: 400px;"
+      >
+        <div
+          class="t-card t-card--bordered"
+        >
+          <div
+            class="t-card__header"
+          >
+            <div
+              class="t-card__header-wrapper"
+            >
+              <div>
+                <div
+                  class="t-card__title"
+                >
+                  自定义loadingProps Card
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="t-card__body"
+          >
+            仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
+          </div>
+        </div>
+        <div
+          class="t-loading t-loading--center t-size-m t-loading--full t-loading__overlay"
+        >
+          <svg
+            class="t-loading__gradient t-icon-loading"
+            height="1em"
+            version="1.1"
+            viewBox="0 0 12 12"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <foreignobject
+              height="12"
+              width="12"
+              x="0"
+              y="0"
+            >
+              <div
+                class="t-loading__gradient-conic"
+              />
+            </foreignobject>
+          </svg>
+          <div
+            class="t-loading__text"
+          >
+            TDesign努力加载中...
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="t-loading__parent"
+      style="width: 400px;"
+    >
+      <div
+        class="t-card t-card--bordered"
+      >
+        <div
+          class="t-card__header"
+        >
+          <div
+            class="t-card__header-wrapper"
+          >
+            <div>
+              <div
+                class="t-card__title"
+              >
+                自定义loadingProps Card
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="t-card__body"
+        >
+          仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
+        </div>
+      </div>
+      <div
+        class="t-loading t-loading--center t-size-m t-loading--full t-loading__overlay"
+      >
+        <svg
+          class="t-loading__gradient t-icon-loading"
+          height="1em"
+          version="1.1"
+          viewBox="0 0 12 12"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <foreignobject
+            height="12"
+            width="12"
+            x="0"
+            y="0"
+          >
+            <div
+              class="t-loading__gradient-conic"
+            />
+          </foreignobject>
+        </svg>
+        <div
+          class="t-loading__text"
+        >
+          TDesign努力加载中...
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
 exports[`csr snapshot test > csr test src/card/_example/footer.jsx 1`] = `
 {
   "asFragment": [Function],