Skip to content

Commit

Permalink
New Component Skeleton (ant-design#11226)
Browse files Browse the repository at this point in the history 
* Add new component Skeleton
* Add related doc
* Add sample
* Add test case

ref: ant-design#10308
  • Loading branch information
@zombieJ
zombieJ authored Aug 22, 2018
1 parent cc2bd76 commit 796b56d
Show file tree
Hide file tree
Showing 24 changed files with 1,342 additions and 192 deletions.
1 change: 1 addition & 0 deletions components/__tests__/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ Array [
"Rate",
"Row",
"Select",
"Skeleton",
"Slider",
"Spin",
"Steps",
Expand Down
207 changes: 58 additions & 149 deletions components/card/__tests__/__snapshots__/demo.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -372,174 +372,83 @@ exports[`renders ./components/card/demo/inner.md correctly 1`] = `

exports[`renders ./components/card/demo/loading.md correctly 1`] = `
<div>
<span
class="ant-switch"
tabindex="0"
>
<span
class="ant-switch-inner"
/>
</span>
<div
class="ant-card ant-card-loading ant-card-bordered"
class="ant-card ant-card-bordered"
style="width:300px;margin-top:16px"
>
<div
class="ant-card-head"
>
<div
class="ant-card-head-wrapper"
>
<div
class="ant-card-head-title"
>
Card title
</div>
</div>
</div>
<div
class="ant-card-body"
>
<div
class="ant-card-loading-content"
class="ant-skeleton ant-skeleton-with-avatar ant-skeleton-active"
>
<div
class="ant-row"
style="margin-left:-4px;margin-right:-4px"
>
<div
class="ant-col-22"
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-card-loading-block"
/>
</div>
</div>
<div
class="ant-row"
style="margin-left:-4px;margin-right:-4px"
>
<div
class="ant-col-8"
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-card-loading-block"
/>
</div>
<div
class="ant-col-15"
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-card-loading-block"
/>
</div>
</div>
<div
class="ant-row"
style="margin-left:-4px;margin-right:-4px"
>
<div
class="ant-col-6"
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-card-loading-block"
/>
</div>
<div
class="ant-col-18"
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-card-loading-block"
/>
</div>
</div>
<div
class="ant-row"
style="margin-left:-4px;margin-right:-4px"
>
<div
class="ant-col-13"
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-card-loading-block"
/>
</div>
<div
class="ant-col-9"
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-card-loading-block"
/>
</div>
</div>
<div
class="ant-row"
style="margin-left:-4px;margin-right:-4px"
class="ant-skeleton-header"
>
<div
class="ant-col-4"
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-card-loading-block"
/>
</div>
<div
class="ant-col-3"
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-card-loading-block"
/>
</div>
<div
class="ant-col-16"
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-card-loading-block"
/>
</div>
<span
class="ant-skeleton-avatar ant-skeleton-avatar-lg ant-skeleton-avatar-circle"
/>
</div>
<div
class="ant-row"
style="margin-left:-4px;margin-right:-4px"
class="ant-skeleton-content"
>
<div
class="ant-col-8"
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-card-loading-block"
/>
</div>
<div
class="ant-col-6"
style="padding-left:4px;padding-right:4px"
<h3
class="ant-skeleton-title"
style="width:50%"
/>
<ul
class="ant-skeleton-paragraph"
>
<div
class="ant-card-loading-block"
<li
style="width:100%"
/>
</div>
<div
class="ant-col-8"
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-card-loading-block"
<li
style="width:100%"
/>
</div>
</ul>
</div>
</div>
</div>
<ul
class="ant-card-actions"
>
<li
style="width:33.333333333333336%"
>
<span>
<i
class="anticon anticon-setting"
/>
</span>
</li>
<li
style="width:33.333333333333336%"
>
<span>
<i
class="anticon anticon-edit"
/>
</span>
</li>
<li
style="width:33.333333333333336%"
>
<span>
<i
class="anticon anticon-ellipsis"
/>
</span>
</li>
</ul>
</div>
<button
class="ant-btn"
style="margin-top:16px"
type="button"
>
<span>
Toggle loading
</span>
</button>
</div>
`;

Expand Down
32 changes: 22 additions & 10 deletions components/card/demo/loading.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,30 +14,42 @@ title:
Shows a loading indicator while the contents of the card is being fetched.

````jsx
import { Card, Button } from 'antd';
import { Skeleton, Switch, Card, Icon, Avatar } from 'antd';

class LoadingCard extends React.Component {
const { Meta } = Card;

class App extends React.Component {
state = {
loading: true,
}

handleClick = () => {
this.setState({ loading: !this.state.loading });
onChange = (checked) => {
this.setState({ loading: !checked });
}

render() {
const { loading } = this.state;

return (
<div>
<Card loading={this.state.loading} title="Card title">
Whatever content
<Switch checked={!loading} onChange={this.onChange} />

<Card
style={{ width: 300, marginTop: 16 }}
actions={[<Icon type="setting" />, <Icon type="edit" />, <Icon type="ellipsis" />]}
>
<Skeleton loading={loading} avatar active>
<Meta
avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
title="Card title"
description="This is the description"
/>
</Skeleton>
</Card>
<Button onClick={this.handleClick} style={{ marginTop: 16 }}>Toggle loading</Button>
</div>
);
}
}

ReactDOM.render(
<LoadingCard />,
mountNode);
ReactDOM.render(<App />, mountNode);
````
2 changes: 2 additions & 0 deletions components/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,8 @@ export { default as Row } from './row';

export { default as Select } from './select';

export { default as Skeleton } from './skeleton';

export { default as Slider } from './slider';

export { default as Spin } from './spin';
Expand Down
14 changes: 1 addition & 13 deletions components/list/__tests__/__snapshots__/demo.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -365,7 +365,7 @@ exports[`renders ./components/list/demo/infinite-virtualized-load.md correctly 1

exports[`renders ./components/list/demo/loadmore.md correctly 1`] = `
<div
class="ant-list demo-loadmore-list ant-list-split ant-list-loading ant-list-something-after-last-item"
class="ant-list demo-loadmore-list ant-list-split ant-list-loading"
>
<div
class="ant-spin-nested-loading"
Expand All @@ -392,18 +392,6 @@ exports[`renders ./components/list/demo/loadmore.md correctly 1`] = `
/>
</div>
</div>
<div
style="text-align:center;margin-top:12px;height:32px;line-height:32px"
>
<button
class="ant-btn"
type="button"
>
<span>
loading more
</span>
</button>
</div>
</div>
`;

Expand Down
Loading

0 comments on commit 796b56d

Please sign in to comment.