Skip to content

Commit 546e005

Browse files
oasis-cloudoasis-cloud
authored
feat(skeleton): v15 (#3086)
* feat: 暂存 * feat: 暂存 * feat: 暂存 * feat: 修订文档 * feat: 修订文档 * feat: 修订文档 * test: update * test: update * feat: 动效适配鸿蒙 * feat: 动效适配鸿蒙 * feat: 动效适配鸿蒙 * test: update * fix: ui review * fix: ui review * fix: ui review * test: 修复单测 * fix: review * fix: review
1 parent a745bf7 commit 546e005

30 files changed

Lines changed: 516 additions & 392 deletions

‎src/config.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1013,7 +1013,7 @@
10131013
"sort": 15,
10141014
"show": true,
10151015
"taro": true,
1016-
"v15": 2,
1016+
"v15": 1,
10171017
"author": "swag~jun",
10181018
"dd": true
10191019
},

‎src/packages/skeleton/__test__/skeleton.spec.tsx‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,13 @@ import { Skeleton } from '../skeleton'
66

77
test('should allow to disable animation', () => {
88
const { container } = render(<Skeleton rows={1} animated={false} />)
9-
expect(container.querySelector('.skeleton-animation')).toBeFalsy()
9+
expect(container.querySelector('.nut-skeleton-animation')).toBeFalsy()
1010
})
1111

12-
test('should change avatar size when using avatarSize prop', () => {
13-
const { container } = render(<Skeleton avatar avatarSize="20px" />)
14-
expect(container.querySelector('.nut-avatar')).toHaveStyle({
15-
width: '20px',
16-
height: '20px',
12+
test('should set duration', () => {
13+
const { container } = render(<Skeleton rows={1} duration={2} />)
14+
const animation = container.querySelector('.nut-skeleton-animated')
15+
expect(animation).toHaveStyle({
16+
animationDuration: '2s',
1717
})
18-
expect(container).toMatchSnapshot()
19-
})
20-
21-
test('should change avatar shape when using avatarShape prop', () => {
22-
const { container } = render(<Skeleton avatar avatarShape="square" />)
23-
expect(container.querySelector('.nut-avatar')).toMatchSnapshot()
2418
})

‎src/packages/skeleton/demo.scss‎

Whitespace-only changes.

‎src/packages/skeleton/demo.taro.tsx‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react'
22
import Taro from '@tarojs/taro'
33
import { ScrollView, View } from '@tarojs/components'
4-
import './demo.scss'
54
import { useTranslate } from '@/sites/assets/locale/taro'
65
import Header from '@/sites/components/header'
76
import Demo1 from './demos/taro/demo1'
@@ -13,25 +12,25 @@ import Demo5 from './demos/taro/demo5'
1312
const SkeletonDemo = () => {
1413
const [translated] = useTranslate({
1514
'zh-CN': {
16-
'84aa6bce': '基础用法',
17-
ea3bc18a: '传入多行',
18-
'02a53df5': '显示头像',
19-
'0a001122': '标题段落圆角风格',
15+
'84aa6bce': '标题',
16+
ea3bc18a: '正文',
17+
'02a53df5': '模拟头像',
18+
'0a001122': '标题段落',
2019
'07d62d5c': '显示子组件',
2120
},
2221
'zh-TW': {
23-
'84aa6bce': '基礎用法',
24-
ea3bc18a: '傳入多行',
25-
'02a53df5': '顯示頭像',
26-
'0a001122': '標題段落圓角風格',
27-
'07d62d5c': '圖片組合',
22+
'84aa6bce': '标题',
23+
ea3bc18a: '正文',
24+
'02a53df5': '模拟头像',
25+
'0a001122': '標題段落',
26+
'07d62d5c': '显示子组件',
2827
},
2928
'en-US': {
30-
'84aa6bce': 'Basic usage',
31-
ea3bc18a: 'Pass in multiple lines',
32-
'02a53df5': 'show avatar',
33-
'0a001122': 'Heading Paragraph Rounded Corner Style',
34-
'07d62d5c': 'show subcomponents',
29+
'84aa6bce': 'Title',
30+
ea3bc18a: 'Paragraph',
31+
'02a53df5': 'Mock Avatar',
32+
'0a001122': 'Heading Paragraph',
33+
'07d62d5c': 'Show Subcomponents',
3534
},
3635
})
3736

‎src/packages/skeleton/demo.tsx‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react'
22
import { useTranslate } from '@/sites/assets/locale'
3-
import './demo.scss'
43
import Demo1 from './demos/h5/demo1'
54
import Demo2 from './demos/h5/demo2'
65
import Demo3 from './demos/h5/demo3'
@@ -10,25 +9,25 @@ import Demo5 from './demos/h5/demo5'
109
const SkeletonDemo = () => {
1110
const [translated] = useTranslate({
1211
'zh-CN': {
13-
'84aa6bce': '基础用法',
14-
ea3bc18a: '传入多行',
15-
'02a53df5': '显示头像',
16-
'0a001122': '标题段落圆角风格',
12+
'84aa6bce': '标题',
13+
ea3bc18a: '正文',
14+
'02a53df5': '模拟头像',
15+
'0a001122': '标题段落',
1716
'07d62d5c': '显示子组件',
1817
},
1918
'zh-TW': {
20-
'84aa6bce': '基礎用法',
21-
ea3bc18a: '傳入多行',
22-
'02a53df5': '顯示頭像',
23-
'0a001122': '標題段落圓角風格',
24-
'07d62d5c': '圖片組合',
19+
'84aa6bce': '标题',
20+
ea3bc18a: '正文',
21+
'02a53df5': '模拟头像',
22+
'0a001122': '標題段落',
23+
'07d62d5c': '显示子组件',
2524
},
2625
'en-US': {
27-
'84aa6bce': 'Basic usage',
28-
ea3bc18a: 'Pass in multiple lines',
29-
'02a53df5': 'show avatar',
30-
'0a001122': 'Heading Paragraph Rounded Corner Style',
31-
'07d62d5c': 'show subcomponents',
26+
'84aa6bce': 'Title',
27+
ea3bc18a: 'Paragraph',
28+
'02a53df5': 'Mock Avatar',
29+
'0a001122': 'Heading Paragraph',
30+
'07d62d5c': 'Show Subcomponents',
3231
},
3332
})
3433

‎src/packages/skeleton/demos/h5/demo1.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { Cell, Skeleton } from '@nutui/nutui-react'
33

44
const Demo1 = () => {
55
return (
6-
<Cell style={{ display: 'block' }}>
7-
<Skeleton animated />
6+
<Cell>
7+
<Skeleton animated size="large" style={{ width: '100%' }} />
88
</Cell>
99
)
1010
}

‎src/packages/skeleton/demos/h5/demo2.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { Cell, Skeleton } from '@nutui/nutui-react'
33

44
const Demo2 = () => {
55
return (
6-
<Cell style={{ display: 'block', paddingTop: '3px' }}>
7-
<Skeleton rows={3} title animated />
6+
<Cell>
7+
<Skeleton rows={3} animated size="small" style={{ width: '100%' }} />
88
</Cell>
99
)
1010
}

‎src/packages/skeleton/demos/h5/demo3.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import React from 'react'
2-
import { Cell, Skeleton } from '@nutui/nutui-react'
2+
import { Cell, Skeleton, Space } from '@nutui/nutui-react'
33

44
const Demo3 = () => {
55
return (
66
<Cell>
7-
<Skeleton rows={3} title animated avatar avatarSize="100px" />
7+
<Space>
8+
<Skeleton width={60} height={60} />
9+
<Skeleton width={60} height={60} shape="circle" />
10+
</Space>
811
</Cell>
912
)
1013
}

‎src/packages/skeleton/demos/h5/demo4.tsx‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,22 @@
11
import React from 'react'
2-
import { Cell, Skeleton, ConfigProvider } from '@nutui/nutui-react'
2+
import { Cell, Skeleton } from '@nutui/nutui-react'
33

44
const Demo4 = () => {
55
return (
6-
<Cell style={{ display: 'block' }}>
7-
<ConfigProvider
8-
theme={{
9-
nutuiSkeletonLineBorderRadius: '10px',
6+
<Cell>
7+
<Skeleton width={132} height={132} />
8+
<div
9+
style={{
10+
display: 'flex',
11+
flexGrow: 1,
12+
flexDirection: 'column',
13+
marginLeft: 10,
1014
}}
1115
>
12-
<Skeleton rows={3} animated />
13-
</ConfigProvider>
16+
<Skeleton size="large" style={{ marginBottom: 5 }} />
17+
<Skeleton width="30%" style={{ marginBottom: 5 }} />
18+
<Skeleton width="80%" size="small" rows={3} />
19+
</div>
1420
</Cell>
1521
)
1622
}

‎src/packages/skeleton/demos/h5/demo5.tsx‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Cell, Avatar, Image, Skeleton, Switch } from '@nutui/nutui-react'
1+
import { Avatar, Cell, Image, Skeleton, Switch } from '@nutui/nutui-react'
22
import React, { useState } from 'react'
33

44
const Demo5 = () => {
@@ -17,8 +17,9 @@ const Demo5 = () => {
1717
onChange={(value, event) => changeStatus(value, event)}
1818
style={{ marginBottom: '8px' }}
1919
/>
20-
<Skeleton title animated avatar rows={3} visible={checked}>
21-
<div className="nut-skeleton-content">
20+
21+
<div style={{ display: 'flex' }}>
22+
<Skeleton visible={checked} width={50} height={50} shape="circle">
2223
<Avatar
2324
className="nut-skeleton-content-avatar"
2425
size="50"
@@ -29,14 +30,23 @@ const Demo5 = () => {
2930
/>
3031
}
3132
/>
32-
<div>
33+
</Skeleton>
34+
<div style={{ flexGrow: 1, marginLeft: 8 }}>
35+
<Skeleton
36+
visible={checked}
37+
size="large"
38+
width="30%"
39+
style={{ marginBottom: 8 }}
40+
>
3341
<span>NutUI-React</span>
42+
</Skeleton>
43+
<Skeleton visible={checked} size="small" rows={2}>
3444
<div>
3545
一套京东风格的轻量级移动端React组件库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。
3646
</div>
37-
</div>
47+
</Skeleton>
3848
</div>
39-
</Skeleton>
49+
</div>
4050
</div>
4151
</Cell>
4252
)

0 commit comments

Comments
 (0)