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

Bugfix issue.9862 (#10052)

Browse Source 
* Fix issue 9862

* Update Card test snapshot
This commit is contained in:
Zheeeng 2018-04-20 10:44:33 +08:00 committed by 偏右
parent 0d0632b2f3
commit 572ae5ce14
4 changed files with 129 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -371,79 +371,89 @@ exports[`renders ./components/card/demo/inner.md correctly 1`] = `
`;
exports[`renders ./components/card/demo/loading.md correctly 1`] = `
<div
class="ant-card ant-card-loading ant-card-bordered"
style="width:34%"
>
<div>
<div
class="ant-card-head"
class="ant-card ant-card-loading ant-card-bordered"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Card title
<div
class="ant-card-head-title"
>
Card title
</div>
</div>
</div>
<div
class="ant-card-body"
>
<div
class="ant-card-loading-content"
>
<p
class="ant-card-loading-block"
style="width:94%"
/>
<p>
<span
class="ant-card-loading-block"
style="width:28%"
/>
<span
class="ant-card-loading-block"
style="width:62%"
/>
</p>
<p>
<span
class="ant-card-loading-block"
style="width:22%"
/>
<span
class="ant-card-loading-block"
style="width:66%"
/>
</p>
<p>
<span
class="ant-card-loading-block"
style="width:56%"
/>
<span
class="ant-card-loading-block"
style="width:39%"
/>
</p>
<p>
<span
class="ant-card-loading-block"
style="width:21%"
/>
<span
class="ant-card-loading-block"
style="width:15%"
/>
<span
class="ant-card-loading-block"
style="width:40%"
/>
</p>
</div>
</div>
</div>
<div
class="ant-card-body"
<button
class="ant-btn"
style="margin-top:16px"
type="button"
>
<div
class="ant-card-loading-content"
>
<p
class="ant-card-loading-block"
style="width:94%"
/>
<p>
<span
class="ant-card-loading-block"
style="width:28%"
/>
<span
class="ant-card-loading-block"
style="width:62%"
/>
</p>
<p>
<span
class="ant-card-loading-block"
style="width:22%"
/>
<span
class="ant-card-loading-block"
style="width:66%"
/>
</p>
<p>
<span
class="ant-card-loading-block"
style="width:56%"
/>
<span
class="ant-card-loading-block"
style="width:39%"
/>
</p>
<p>
<span
class="ant-card-loading-block"
style="width:21%"
/>
<span
class="ant-card-loading-block"
style="width:15%"
/>
<span
class="ant-card-loading-block"
style="width:40%"
/>
</p>
</div>
</div>
<span>
Toggle loading
</span>
</button>
</div>
`;

27
components/card/demo/loading.md
View File

@ -14,11 +14,30 @@ title:
Shows a loading indicator while the contents of the card is being fetched.
````jsx
import { Card } from 'antd';
import { Card, Button } from 'antd';
class LoadingCard extends React.Component {
state = {
loading: true,
}
handleClick = () => {
this.setState({ loading: !this.state.loading });
}
render() {
return (
<div>
<Card loading={this.state.loading} title="Card title">
Whatever content
</Card>
<Button onClick={this.handleClick} style={{ marginTop: 16 }}>Toggle loading</Button>
</div>
);
}
}
ReactDOM.render(
<Card loading title="Card title" style={{ width: '34%' }}>
Whatever content
</Card>
<LoadingCard />
, mountNode);
````

12
components/card/index.tsx
View File

@ -41,14 +41,20 @@ export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 't
defaultActiveTabKey?: string;
}
export default class Card extends React.Component<CardProps, {}> {
export interface CardState {
widerPadding: boolean;
}
export default class Card extends React.Component<CardProps, CardState> {
static Grid: typeof Grid = Grid;
static Meta: typeof Meta = Meta;
resizeEvent: any;
updateWiderPaddingCalled: boolean;
state = {
widerPadding: false,
};
private resizeEvent: any;
private updateWiderPaddingCalled: boolean = false;
private container: HTMLDivElement;
componentDidMount() {
this.updateWiderPadding();

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

@ -221,16 +221,20 @@
&-loading &-body {
user-select: none;
padding: 0;
}
&-loading-content {
padding: @card-padding-base;
padding: 0;
animation: loading-entering .3s;
p {
margin: 0;
}
}
&-wider-padding &-loading-content {
animation: wider-loading-entering .3s;
}
&-loading-block {
display: inline-block;
margin: 5px 2% 0 0;
@ -251,3 +255,21 @@
background-position: 100% 50%;
}
}
@keyframes loading-entering {
from {
padding: @card-padding-base;
}
to {
padding: 0;
}
}
@keyframes wider-loading-entering {
from {
padding: @card-padding-base @card-padding-wider;
}
to {
padding: 0;
}
}