mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

refactor: Card loading (#35525)

Browse Source 
* feat: card loading with skeleton

* test: update snapshot

* test: add style deps

* chore: import
This commit is contained in:
MadCcc 2022-05-13 11:32:40 +08:00 committed by GitHub
parent 5af26807a9
commit d4f23bae2a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 35 additions and 406 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
components/card/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -434,127 +434,21 @@ Array [
class="ant-card-body"
>
<div
class="ant-card-loading-content"
class="ant-skeleton ant-skeleton-active"
>
<div
class="ant-row"
role="row"
style="margin-left:-4px;margin-right:-4px"
class="ant-skeleton-content"
>
<div
class="ant-col ant-col-22"
role="cell"
style="padding-left:4px;padding-right:4px"
<ul
class="ant-skeleton-paragraph"
>
<div
class="ant-card-loading-block"
<li />
<li />
<li />
<li
style="width:61%"
/>
</div>
</div>
<div
class="ant-row"
role="row"
style="margin-left:-4px;margin-right:-4px"
>
<div
class="ant-col ant-col-8"
role="cell"
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-card-loading-block"
/>
</div>
<div
class="ant-col ant-col-15"
role="cell"
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-card-loading-block"
/>
</div>
</div>
<div
class="ant-row"
role="row"
style="margin-left:-4px;margin-right:-4px"
>
<div
class="ant-col ant-col-6"
role="cell"
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-card-loading-block"
/>
</div>
<div
class="ant-col ant-col-18"
role="cell"
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-card-loading-block"
/>
</div>
</div>
<div
class="ant-row"
role="row"
style="margin-left:-4px;margin-right:-4px"
>
<div
class="ant-col ant-col-13"
role="cell"
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-card-loading-block"
/>
</div>
<div
class="ant-col ant-col-9"
role="cell"
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-card-loading-block"
/>
</div>
</div>
<div
class="ant-row"
role="row"
style="margin-left:-4px;margin-right:-4px"
>
<div
class="ant-col ant-col-4"
role="cell"
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-card-loading-block"
/>
</div>
<div
class="ant-col ant-col-3"
role="cell"
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-card-loading-block"
/>
</div>
<div
class="ant-col ant-col-16"
role="cell"
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-card-loading-block"
/>
</div>
</ul>
</div>
</div>
</div>

126
components/card/__tests__/__snapshots__/demo.test.js.snap
View File

@ -434,127 +434,21 @@ Array [
class="ant-card-body"
>
<div
class="ant-card-loading-content"
class="ant-skeleton ant-skeleton-active"
>
<div
class="ant-row"
role="row"
style="margin-left:-4px;margin-right:-4px"
class="ant-skeleton-content"
>
<div
class="ant-col ant-col-22"
role="cell"
style="padding-left:4px;padding-right:4px"
<ul
class="ant-skeleton-paragraph"
>
<div
class="ant-card-loading-block"
<li />
<li />
<li />
<li
style="width:61%"
/>
</div>
</div>
<div
class="ant-row"
role="row"
style="margin-left:-4px;margin-right:-4px"
>
<div
class="ant-col ant-col-8"
role="cell"
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-card-loading-block"
/>
</div>
<div
class="ant-col ant-col-15"
role="cell"
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-card-loading-block"
/>
</div>
</div>
<div
class="ant-row"
role="row"
style="margin-left:-4px;margin-right:-4px"
>
<div
class="ant-col ant-col-6"
role="cell"
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-card-loading-block"
/>
</div>
<div
class="ant-col ant-col-18"
role="cell"
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-card-loading-block"
/>
</div>
</div>
<div
class="ant-row"
role="row"
style="margin-left:-4px;margin-right:-4px"
>
<div
class="ant-col ant-col-13"
role="cell"
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-card-loading-block"
/>
</div>
<div
class="ant-col ant-col-9"
role="cell"
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-card-loading-block"
/>
</div>
</div>
<div
class="ant-row"
role="row"
style="margin-left:-4px;margin-right:-4px"
>
<div
class="ant-col ant-col-4"
role="cell"
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-card-loading-block"
/>
</div>
<div
class="ant-col ant-col-3"
role="cell"
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-card-loading-block"
/>
</div>
<div
class="ant-col ant-col-16"
role="cell"
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-card-loading-block"
/>
</div>
</ul>
</div>
</div>
</div>

127
components/card/__tests__/__snapshots__/index.test.js.snap
View File

@ -19,128 +19,21 @@ exports[`Card should still have padding when card which set padding to 0 is load
style="padding: 0px;"
>
<div
class="ant-card-loading-content"
style="padding: 24px;"
class="ant-skeleton ant-skeleton-active"
>
<div
class="ant-row"
role="row"
style="margin-left: -4px; margin-right: -4px;"
class="ant-skeleton-content"
>
<div
class="ant-col ant-col-22"
role="cell"
style="padding-left: 4px; padding-right: 4px;"
<ul
class="ant-skeleton-paragraph"
>
<div
class="ant-card-loading-block"
<li />
<li />
<li />
<li
style="width: 61%;"
/>
</div>
</div>
<div
class="ant-row"
role="row"
style="margin-left: -4px; margin-right: -4px;"
>
<div
class="ant-col ant-col-8"
role="cell"
style="padding-left: 4px; padding-right: 4px;"
>
<div
class="ant-card-loading-block"
/>
</div>
<div
class="ant-col ant-col-15"
role="cell"
style="padding-left: 4px; padding-right: 4px;"
>
<div
class="ant-card-loading-block"
/>
</div>
</div>
<div
class="ant-row"
role="row"
style="margin-left: -4px; margin-right: -4px;"
>
<div
class="ant-col ant-col-6"
role="cell"
style="padding-left: 4px; padding-right: 4px;"
>
<div
class="ant-card-loading-block"
/>
</div>
<div
class="ant-col ant-col-18"
role="cell"
style="padding-left: 4px; padding-right: 4px;"
>
<div
class="ant-card-loading-block"
/>
</div>
</div>
<div
class="ant-row"
role="row"
style="margin-left: -4px; margin-right: -4px;"
>
<div
class="ant-col ant-col-13"
role="cell"
style="padding-left: 4px; padding-right: 4px;"
>
<div
class="ant-card-loading-block"
/>
</div>
<div
class="ant-col ant-col-9"
role="cell"
style="padding-left: 4px; padding-right: 4px;"
>
<div
class="ant-card-loading-block"
/>
</div>
</div>
<div
class="ant-row"
role="row"
style="margin-left: -4px; margin-right: -4px;"
>
<div
class="ant-col ant-col-4"
role="cell"
style="padding-left: 4px; padding-right: 4px;"
>
<div
class="ant-card-loading-block"
/>
</div>
<div
class="ant-col ant-col-3"
role="cell"
style="padding-left: 4px; padding-right: 4px;"
>
<div
class="ant-card-loading-block"
/>
</div>
<div
class="ant-col ant-col-16"
role="cell"
style="padding-left: 4px; padding-right: 4px;"
>
<div
class="ant-card-loading-block"
/>
</div>
</ul>
</div>
</div>
</div>

33
components/card/index.tsx
View File

@ -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<HTMLDivElement>)
const prefixCls = getPrefixCls('card', customizePrefixCls);
const loadingBlockStyle =
bodyStyle.padding === 0 || bodyStyle.padding === '0px' ? { padding: 24 } : undefined;
const block = <div className={`${prefixCls}-loading-block`} />;
const loadingBlock = (
<div className={`${prefixCls}-loading-content`} style={loadingBlockStyle}>
<Row gutter={8}>
<Col span={22}>{block}</Col>
</Row>
<Row gutter={8}>
<Col span={8}>{block}</Col>
<Col span={15}>{block}</Col>
</Row>
<Row gutter={8}>
<Col span={6}>{block}</Col>
<Col span={18}>{block}</Col>
</Row>
<Row gutter={8}>
<Col span={13}>{block}</Col>
<Col span={9}>{block}</Col>
</Row>
<Row gutter={8}>
<Col span={4}>{block}</Col>
<Col span={3}>{block}</Col>
<Col span={16}>{block}</Col>
</Row>
</div>
<Skeleton loading active paragraph={{ rows: 4 }} title={false}>
{children}
</Skeleton>
);
const hasActiveTabKey = activeTabKey !== undefined;

26
components/card/style/index.less
View File

@ -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';

3
components/card/style/index.tsx
View File

@ -3,5 +3,4 @@ import './index.less';
// style dependencies
import '../../tabs/style';
import '../../row/style';
import '../../col/style';
import '../../skeleton/style';