From d4f23bae2abd9cb15a62e6ed0a63c622775e6d9a Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Fri, 13 May 2022 11:32:40 +0800
Subject: [PATCH] refactor: Card loading (#35525)
* feat: card loading with skeleton
* test: update snapshot
* test: add style deps
* chore: import
---
.../__snapshots__/demo-extend.test.ts.snap | 126 ++---------------
.../__tests__/__snapshots__/demo.test.js.snap | 126 ++---------------
.../__snapshots__/index.test.js.snap | 127 ++----------------
components/card/index.tsx | 33 +----
components/card/style/index.less | 26 ----
components/card/style/index.tsx | 3 +-
6 files changed, 35 insertions(+), 406 deletions(-)
diff --git a/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap
index 044c2381a7..3aff0bb0b1 100644
--- a/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -434,127 +434,21 @@ Array [
class="ant-card-body"
>
diff --git a/components/card/__tests__/__snapshots__/demo.test.js.snap b/components/card/__tests__/__snapshots__/demo.test.js.snap
index 9c9c9400c4..412c8a6ed8 100644
--- a/components/card/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/card/__tests__/__snapshots__/demo.test.js.snap
@@ -434,127 +434,21 @@ Array [
class="ant-card-body"
>
diff --git a/components/card/__tests__/__snapshots__/index.test.js.snap b/components/card/__tests__/__snapshots__/index.test.js.snap
index fa7080e240..ca5fee27fc 100644
--- a/components/card/__tests__/__snapshots__/index.test.js.snap
+++ b/components/card/__tests__/__snapshots__/index.test.js.snap
@@ -19,128 +19,21 @@ exports[`Card should still have padding when card which set padding to 0 is load
style="padding: 0px;"
>
diff --git a/components/card/index.tsx b/components/card/index.tsx
index 7c7387aa50..e4e2776b17 100644
--- a/components/card/index.tsx
+++ b/components/card/index.tsx
@@ -5,10 +5,9 @@ import Grid from './Grid';
import Meta from './Meta';
import type { TabsProps } from '../tabs';
import Tabs from '../tabs';
-import Row from '../row';
-import Col from '../col';
import { ConfigContext } from '../config-provider';
import SizeContext from '../config-provider/SizeContext';
+import Skeleton from '../skeleton';
function getAction(actions: React.ReactNode[]) {
const actionList = actions.map((action, index) => (
@@ -105,34 +104,10 @@ const Card = React.forwardRef((props: CardProps, ref: React.Ref)
const prefixCls = getPrefixCls('card', customizePrefixCls);
- const loadingBlockStyle =
- bodyStyle.padding === 0 || bodyStyle.padding === '0px' ? { padding: 24 } : undefined;
-
- const block = ;
-
const loadingBlock = (
-
-
- {block}
-
-
- {block}
- {block}
-
-
- {block}
- {block}
-
-
- {block}
- {block}
-
-
- {block}
- {block}
- {block}
-
-
+
+ {children}
+
);
const hasActiveTabKey = activeTabKey !== undefined;
diff --git a/components/card/style/index.less b/components/card/style/index.less
index b2668249fa..cc4995fc8f 100644
--- a/components/card/style/index.less
+++ b/components/card/style/index.less
@@ -271,32 +271,6 @@
&-loading &-body {
user-select: none;
}
-
- &-loading-content {
- p {
- margin: 0;
- }
- }
-
- &-loading-block {
- height: 14px;
- margin: 4px 0;
- background: linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min);
- background-size: 600% 600%;
- border-radius: @card-radius;
- animation: card-loading 1.4s ease infinite;
- }
-}
-
-@keyframes card-loading {
- 0%,
- 100% {
- background-position: 0 50%;
- }
-
- 50% {
- background-position: 100% 50%;
- }
}
@import './size';
diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx
index 1ab67bfcc5..00066e6905 100644
--- a/components/card/style/index.tsx
+++ b/components/card/style/index.tsx
@@ -3,5 +3,4 @@ import './index.less';
// style dependencies
import '../../tabs/style';
-import '../../row/style';
-import '../../col/style';
+import '../../skeleton/style';