Skip to content

Commit 68014c6

Browse files
tangjinzhoutangjinzhou
committed
feat: skeleton add avatar support number type
1 parent 19354b0 commit 68014c6

File tree

9 files changed

+74
-31
lines changed

9 files changed

+74
-31
lines changed

‎build/config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
module.exports = {
22
dev: {
3-
componentName: 'radio', // dev components
3+
componentName: 'skeleton', // dev components
44
},
55
};

‎components/skeleton/Avatar.jsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { initDefaultProps } from '../_util/props-util';
44

55
const skeletonAvatarProps = {
66
prefixCls: PropTypes.string,
7-
size: PropTypes.oneOf(['large', 'small', 'default']),
7+
size: PropTypes.oneOfType([PropTypes.oneOf(['large', 'small', 'default']), PropTypes.number]),
88
shape: PropTypes.oneOf(['circle', 'square']),
99
};
1010

@@ -27,7 +27,16 @@ const Avatar = {
2727
[`${prefixCls}-square`]: shape === 'square',
2828
});
2929

30-
return <span class={classNames(prefixCls, sizeCls, shapeCls)} />;
30+
const sizeStyle =
31+
typeof size === 'number'
32+
? {
33+
width: `${size}px`,
34+
height: `${size}px`,
35+
lineHeight: `${size}px`,
36+
}
37+
: {};
38+
39+
return <span class={classNames(prefixCls, sizeCls, shapeCls)} style={sizeStyle} />;
3140
},
3241
};
3342

‎components/skeleton/__tests__/__snapshots__/demo.test.js.snap‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,12 @@ exports[`renders ./components/skeleton/demo/list.md correctly 1`] = `
5959
<div class="ant-list ant-list-vertical ant-list-lg ant-list-split">
6060
<div class="ant-spin-nested-loading">
6161
<div class="ant-spin-container">
62-
<div class="ant-list-item">
63-
<div class="ant-list-item-content ant-list-item-content-single">
62+
<ul class="ant-list-items">
63+
<li class="ant-list-item ant-list-item-no-flex">
64+
<!---->
65+
<!---->
66+
<!---->
67+
<!---->
6468
<div class="ant-skeleton ant-skeleton-with-avatar ant-skeleton-active">
6569
<div class="ant-skeleton-header"><span class="ant-skeleton-avatar ant-skeleton-avatar-lg ant-skeleton-avatar-circle"></span></div>
6670
<div class="ant-skeleton-content">
@@ -71,10 +75,12 @@ exports[`renders ./components/skeleton/demo/list.md correctly 1`] = `
7175
</ul>
7276
</div>
7377
</div>
74-
</div>
75-
</div>
76-
<div class="ant-list-item">
77-
<div class="ant-list-item-content ant-list-item-content-single">
78+
</li>
79+
<li class="ant-list-item ant-list-item-no-flex">
80+
<!---->
81+
<!---->
82+
<!---->
83+
<!---->
7884
<div class="ant-skeleton ant-skeleton-with-avatar ant-skeleton-active">
7985
<div class="ant-skeleton-header"><span class="ant-skeleton-avatar ant-skeleton-avatar-lg ant-skeleton-avatar-circle"></span></div>
8086
<div class="ant-skeleton-content">
@@ -85,10 +91,12 @@ exports[`renders ./components/skeleton/demo/list.md correctly 1`] = `
8591
</ul>
8692
</div>
8793
</div>
88-
</div>
89-
</div>
90-
<div class="ant-list-item">
91-
<div class="ant-list-item-content ant-list-item-content-single">
94+
</li>
95+
<li class="ant-list-item ant-list-item-no-flex">
96+
<!---->
97+
<!---->
98+
<!---->
99+
<!---->
92100
<div class="ant-skeleton ant-skeleton-with-avatar ant-skeleton-active">
93101
<div class="ant-skeleton-header"><span class="ant-skeleton-avatar ant-skeleton-avatar-lg ant-skeleton-avatar-circle"></span></div>
94102
<div class="ant-skeleton-content">
@@ -99,8 +107,8 @@ exports[`renders ./components/skeleton/demo/list.md correctly 1`] = `
99107
</ul>
100108
</div>
101109
</div>
102-
</div>
103-
</div>
110+
</li>
111+
</ul>
104112
</div>
105113
</div>
106114
</div>

‎components/skeleton/__tests__/__snapshots__/index.test.js.snap‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,19 @@ exports[`Skeleton avatar size 3`] = `
6565
</div>
6666
`;
6767

68+
exports[`Skeleton avatar size 4`] = `
69+
<div class="ant-skeleton ant-skeleton-with-avatar">
70+
<div class="ant-skeleton-header"><span class="ant-skeleton-avatar ant-skeleton-avatar-circle" style="width: 20px; height: 20px; line-height: 20px;"></span></div>
71+
<div class="ant-skeleton-content">
72+
<h3 class="ant-skeleton-title" style="width: 50%;"></h3>
73+
<ul class="ant-skeleton-paragraph">
74+
<li></li>
75+
<li></li>
76+
</ul>
77+
</div>
78+
</div>
79+
`;
80+
6881
exports[`Skeleton paragraph rows 1`] = `
6982
<div class="ant-skeleton">
7083
<div class="ant-skeleton-content">

‎components/skeleton/__tests__/index.test.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { mount } from '@vue/test-utils';
22
import { asyncExpect } from '@/tests/utils';
33
import Skeleton from '..';
4+
import mountTest from '../../../tests/shared/mountTest';
45

56
describe('Skeleton', () => {
67
const genSkeleton = props => {
@@ -16,7 +17,7 @@ describe('Skeleton', () => {
1617
};
1718
return mount(Skeleton, skeletonProps);
1819
};
19-
20+
mountTest(Skeleton);
2021
describe('avatar', () => {
2122
it('size', async () => {
2223
const wrapperSmall = genSkeleton({ avatar: { size: 'small' } });
@@ -35,6 +36,12 @@ describe('Skeleton', () => {
3536
await asyncExpect(() => {
3637
expect(wrapperLarge.html()).toMatchSnapshot();
3738
});
39+
40+
const wrapperNumber = genSkeleton({ avatar: { size: 20 } });
41+
42+
await asyncExpect(() => {
43+
expect(wrapperNumber.html()).toMatchSnapshot();
44+
});
3845
});
3946

4047
it('shape', async () => {

‎components/skeleton/demo/index.vue‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,23 @@ const md = {
1414
1515
## 何时使用
1616
17-
- 网络较慢，需要长时间等待加载处理的情况下。
18-
- 图文信息内容较多的列表/卡片中。
17+
- 网络较慢，需要长时间等待加载处理的情况下。
18+
- 图文信息内容较多的列表/卡片中。
19+
- 只在第一次加载数据的时候使用。
20+
- 可以被 Spin 完全代替，但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验。
21+
1922
## 代码演示`,
2023
us: `# Skeleton
2124
22-
Provide a placeholder at the place which need waiting for loading.
25+
Provide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet.
26+
27+
## When To Use
2328
24-
# When To Use
29+
- When a resource needs long time to load.
30+
- When the component contains lots of information, such as List or Card.
31+
- Only works when loading data for the first time.
32+
- Could be replaced by Spin in any situation, but can provide a better user experience.
2533
26-
- When resource needs long time to load, like low network speed.
27-
- The component contains much information. Such as List or Card.
2834
## Examples
2935
`,
3036
};

‎components/skeleton/index.en-US.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@
1212

1313
### SkeletonAvatarProps
1414

15-
| Property | Description | Type | Default |
16-
| -------- | ----------------------- | ----------------------------------- | ------- |
17-
| size | Set the size of avatar | Enum{ 'large', 'small', 'default' } | - |
18-
| shape | Set the shape of avatar | Enum{ 'circle', 'square' } | - |
15+
| Property | Description | Type | Default |
16+
| -------- | ----------------------- | --------------------------------------------- | ------- |
17+
| size | Set the size of avatar | number \| Enum{ 'large', 'small', 'default' } | - |
18+
| shape | Set the shape of avatar | Enum{ 'circle', 'square' } | - |
1919

2020
### SkeletonTitleProps
2121

‎components/skeleton/index.zh-CN.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@
1212

1313
### SkeletonAvatarProps
1414

15-
| 属性 | 说明 | 类型 | 默认值 |
16-
| ----- | -------------------- | ----------------------------------- | ------ |
17-
| size | 设置头像占位图的大小 | Enum{ 'large', 'small', 'default' } | - |
18-
| shape | 指定头像的形状 | Enum{ 'circle', 'square' } | - |
15+
| 属性 | 说明 | 类型 | 默认值 |
16+
| ----- | -------------------- | --------------------------------------------- | ------ |
17+
| size | 设置头像占位图的大小 | number \| Enum{ 'large', 'small', 'default' } | - |
18+
| shape | 指定头像的形状 | Enum{ 'circle', 'square' } | - |
1919

2020
### SkeletonTitleProps
2121

‎types/skeleton.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
import { AntdComponent } from './component';
66

77
export interface SkeletonAvatarProps {
8-
size?: 'large' | 'small' | 'default';
8+
size?: 'large' | 'small' | 'default' | number;
99
shape?: 'circle' | 'square';
1010
}
1111

0 commit comments

Comments
 (0)