Skip to content

Commit 854658e

Browse files
Miles-hxyMiles-hxy
authored
feat(progress): 兼容并支持taro components的progressProps & v15适配 (#3202)
1 parent 9b99c2c commit 854658e

File tree

18 files changed

+367
-133
lines changed

18 files changed

+367
-133
lines changed

‎src/packages/progress/__tests__/__snapshots__/progress.spec.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ exports[`should render progress when use props 1`] = `
1010
>
1111
<div
1212
class="nut-progress-inner"
13-
style="width: 100%; background: #FF0F23;"
13+
style="width: 100%; background: #FF0F23; transition: width 300ms ease-in-out;"
1414
/>
1515
</div>
1616
</div>

‎src/packages/progress/__tests__/progress.spec.tsx‎

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,64 @@ test('should render different height and color when use color height props', asy
1313
<Progress percent={50} color="blue" strokeWidth="20" />
1414
)
1515
const inner = container.querySelector('.nut-progress-inner')
16-
expect(inner?.getAttribute('style')).toBe('width: 50%; background: blue;')
16+
expect(inner?.getAttribute('style')).toBe(
17+
'width: 50%; background: blue; transition: width 300ms ease-in-out;'
18+
)
1719
})
1820

1921
test('should show percent when use showText props', () => {
2022
const { container } = render(<Progress percent={30} showText />)
2123
const text = container.querySelector('.nut-progress-text')
2224
expect(text).toBeTruthy()
2325
})
26+
test('should render with custom style props', () => {
27+
const { container } = render(
28+
<Progress percent={50} borderRadius="8px" fontSize="16px" showText />
29+
)
30+
const inner = container.querySelector('.nut-progress-text')
31+
expect(inner).toHaveStyle({
32+
fontSize: '16px',
33+
})
34+
const outerDiv = container.querySelector('.nut-progress-outer')
35+
expect(outerDiv).toHaveStyle({
36+
borderRadius: '8px',
37+
})
38+
})
39+
40+
test('should handle animation mode and duration', () => {
41+
const onActiveEndMock = vi.fn()
42+
const { container, rerender } = render(
43+
<Progress
44+
percent={30}
45+
activeMode="backwards"
46+
duration={500}
47+
onActiveEnd={onActiveEndMock}
48+
/>
49+
)
50+
51+
const inner = container.querySelector('.nut-progress-inner')
52+
expect(inner?.getAttribute('style')).toContain(
53+
'transition: width 500ms ease-in-out'
54+
)
55+
56+
// 测试动画完成回调
57+
rerender(
58+
<Progress
59+
percent={100}
60+
activeMode="backwards"
61+
duration={500}
62+
onActiveEnd={onActiveEndMock}
63+
/>
64+
)
65+
setTimeout(() => {
66+
expect(onActiveEndMock).toHaveBeenCalled()
67+
}, 600)
68+
})
69+
70+
test('should render with aria-label', () => {
71+
const { container } = render(
72+
<Progress percent={50} ariaLabel="当前进度50%" />
73+
)
74+
const progressDiv = container.querySelector('.nut-progress')
75+
expect(progressDiv?.getAttribute('aria-label')).toBe('当前进度50%')
76+
})

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import Demo5 from './demos/taro/demo5'
1111
import Demo6 from './demos/taro/demo6'
1212
import Demo7 from './demos/taro/demo7'
1313
import Demo8 from './demos/taro/demo8'
14+
import Demo9 from './demos/taro/demo9'
1415

1516
const ProgressDemo = () => {
1617
const [translated] = useTranslate({
@@ -23,16 +24,18 @@ const ProgressDemo = () => {
2324
statusDisplay: '状态显示',
2425
dynamicChange: '动态改变',
2526
lazy: '延迟加载数据',
27+
activeMode: '设置动画时长与播放方式',
2628
},
2729
'zh-TW': {
2830
basic: '基礎用法',
29-
customStyle: '設置顏色與寛度',
31+
customStyle: '設置顏色與寬度',
3032
noShowPercentage: '顯示百分比',
3133
customContent: '自定義顯示內容',
3234
customSize: '自定義尺寸',
3335
statusDisplay: '狀態顯示',
3436
dynamicChange: '動態改變',
35-
lazy: '延迟加载数据',
37+
lazy: '延遲加載數據',
38+
activeMode: '設置動畫時長與播放方式',
3639
},
3740
'en-US': {
3841
basic: 'Basic Usage',
@@ -43,6 +46,7 @@ const ProgressDemo = () => {
4346
statusDisplay: 'Status Display',
4447
dynamicChange: 'Dynamic Change',
4548
lazy: 'Delay Time',
49+
activeMode: 'Duration And Animation Mode',
4650
},
4751
})
4852

@@ -71,6 +75,8 @@ const ProgressDemo = () => {
7175
<Demo8 />
7276
</>
7377
)}
78+
<View className="h2">{translated.activeMode}</View>
79+
<Demo9 />
7480
</ScrollView>
7581
</>
7682
)

‎src/packages/progress/demo.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import Demo5 from './demos/h5/demo5'
88
import Demo6 from './demos/h5/demo6'
99
import Demo7 from './demos/h5/demo7'
1010
import Demo8 from './demos/h5/demo8'
11+
import Demo9 from './demos/h5/demo9'
1112

1213
const ProgressDemo = () => {
1314
const [translated] = useTranslate({
@@ -20,16 +21,18 @@ const ProgressDemo = () => {
2021
statusDisplay: '状态显示',
2122
dynamicChange: '动态改变',
2223
lazy: '延迟加载数据',
24+
activeMode: '设置动画时长与播放方式',
2325
},
2426
'zh-TW': {
2527
basic: '基礎用法',
26-
customStyle: '設置顏色與寛度',
28+
customStyle: '設置顏色與寬度',
2729
noShowPercentage: '顯示百分比',
2830
customContent: '自定義顯示內容',
2931
customSize: '自定義尺寸',
3032
statusDisplay: '狀態顯示',
3133
dynamicChange: '動態改變',
32-
lazy: '延迟加载数据',
34+
lazy: '延遲加載數據',
35+
activeMode: '設置動畫時長與播放方式',
3336
},
3437
'en-US': {
3538
basic: 'Basic Usage',
@@ -40,6 +43,7 @@ const ProgressDemo = () => {
4043
statusDisplay: 'Status Display',
4144
dynamicChange: 'Dynamic Change',
4245
lazy: 'Delay Time',
46+
activeMode: 'Duration And Animation Mode',
4347
},
4448
})
4549

@@ -62,6 +66,8 @@ const ProgressDemo = () => {
6266
<Demo7 />
6367
<h2>{translated.lazy}</h2>
6468
<Demo8 />
69+
<h2>{translated.activeMode}</h2>
70+
<Demo9 />
6571
</div>
6672
</>
6773
)

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

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,22 @@ import { Progress, Image, Cell } from '@nutui/nutui-react'
33

44
const Demo4 = () => {
55
return (
6-
<Cell>
7-
<Progress percent={60} showText>
8-
<Image
9-
width="20"
10-
height="20"
11-
src="https://img12.360buyimg.com/imagetools/jfs/t1/229362/18/22746/11607/669f8bfeF5fcbeaab/d4162bbf29bb1b00.png"
12-
/>
13-
</Progress>
14-
</Cell>
6+
<>
7+
<Cell>
8+
<Progress percent={50} showText>
9+
已完成15/30
10+
</Progress>
11+
</Cell>
12+
<Cell>
13+
<Progress percent={60} showText>
14+
<Image
15+
width="20"
16+
height="20"
17+
src="https://img12.360buyimg.com/imagetools/jfs/t1/229362/18/22746/11607/669f8bfeF5fcbeaab/d4162bbf29bb1b00.png"
18+
/>
19+
</Progress>
20+
</Cell>
21+
</>
1522
)
1623
}
1724
export default Demo4

‎src/packages/progress/demos/h5/demo9.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React, { useState } from 'react'
2+
import { Cell, Button, Progress } from '@nutui/nutui-react'
3+
4+
const Demo7 = () => {
5+
const [value, setValue] = useState(0)
6+
return (
7+
<Cell.Group>
8+
<Cell align="center" style={{ flexWrap: 'wrap' }}>
9+
<Progress
10+
percent={value}
11+
duration={800}
12+
style={{ marginBottom: 10 }}
13+
activeMode="forwards"
14+
/>
15+
<Progress percent={value} activeMode="backwards" />
16+
</Cell>
17+
<Cell align="center">
18+
<Button
19+
type="default"
20+
style={{ marginRight: 16 }}
21+
onClick={() => {
22+
setValue(Math.max(0, value - 10))
23+
}}
24+
>
25+
减少
26+
</Button>
27+
<Button
28+
type="primary"
29+
onClick={() => {
30+
setValue(Math.min(100, value + 10))
31+
}}
32+
>
33+
增加
34+
</Button>
35+
</Cell>
36+
</Cell.Group>
37+
)
38+
}
39+
export default Demo7

‎src/packages/progress/demos/taro/demo4.tsx‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,22 @@ import { Progress, Image, Cell } from '@nutui/nutui-react-taro'
33

44
const Demo4 = () => {
55
return (
6-
<Cell>
7-
<Progress percent={60} showText>
8-
<Image
9-
width={20}
10-
height={20}
11-
src="https://img12.360buyimg.com/imagetools/jfs/t1/229362/18/22746/11607/669f8bfeF5fcbeaab/d4162bbf29bb1b00.png"
12-
/>
13-
</Progress>
14-
</Cell>
6+
<>
7+
<Cell>
8+
<Progress percent={50} showText>
9+
已完成15/30
10+
</Progress>
11+
</Cell>
12+
<Cell>
13+
<Progress percent={60} showText>
14+
<Image
15+
width={20}
16+
height={20}
17+
src="https://img12.360buyimg.com/imagetools/jfs/t1/229362/18/22746/11607/669f8bfeF5fcbeaab/d4162bbf29bb1b00.png"
18+
/>
19+
</Progress>
20+
</Cell>
21+
</>
1522
)
1623
}
1724
export default Demo4

‎src/packages/progress/demos/taro/demo9.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React, { useState } from 'react'
2+
import { Cell, Button, Progress, pxTransform } from '@nutui/nutui-react-taro'
3+
4+
const Demo7 = () => {
5+
const [value, setValue] = useState(0)
6+
return (
7+
<Cell.Group>
8+
<Cell align="center" style={{ flexWrap: 'wrap' }}>
9+
<Progress
10+
percent={value}
11+
duration={800}
12+
style={{ marginBottom: 10 }}
13+
activeMode="forwards"
14+
/>
15+
<Progress percent={value} activeMode="backwards" />
16+
</Cell>
17+
<Cell align="center">
18+
<Button
19+
type="default"
20+
style={{ marginRight: pxTransform(16) }}
21+
onClick={() => {
22+
setValue(Math.max(0, value - 10))
23+
}}
24+
>
25+
减少
26+
</Button>
27+
<Button
28+
type="primary"
29+
onClick={() => {
30+
setValue(Math.min(100, value + 10))
31+
}}
32+
>
33+
增加
34+
</Button>
35+
</Cell>
36+
</Cell.Group>
37+
)
38+
}
39+
export default Demo7

‎src/packages/progress/doc.en-US.md‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,12 @@ import { Progress } from '@nutui/nutui-react'
7474

7575
:::
7676

77+
### Set animation duration and playback mode
78+
79+
:::demo
80+
<CodeBlock src='h5/demo9.tsx'></CodeBlock>
81+
:::
82+
7783
## Progress
7884

7985
### Props
@@ -88,6 +94,12 @@ import { Progress } from '@nutui/nutui-react'
8894
| animated | Whether to show animation | `boolean` | `false` |
8995
| lazy | Show animation when intersect | `boolean` | `false` |
9096
| delay | Delay time to set percent, ms | `number` | `0` |
97+
| borderRadius | Progress bar corner size | `string` | `0` |
98+
| fontSize | Progress text size | `string` | `12px` |
99+
| activeMode | Animation playback mode | `forwards \| backwards` | `forwards` |
100+
| duration | Animation completion time (in milliseconds) | `number` | `30` |
101+
| ariaLabel | AccessibilityLabel | `string` | `-` |
102+
| onActiveEnd | Callback function after animation is completed | `() => void` | `-` |
91103

92104
## Theming
93105

@@ -101,9 +113,9 @@ The component provides the following CSS variables, which can be used to customi
101113
| \--nutui-progress-border-radius | borderRadius | `12px` |
102114
| \--nutui-progress-color | progress color | `linear-gradient(135deg, #FF0F23 0%, #fa6419 100%)` |
103115
| \--nutui-progress-background | progress background | `#f3f3f3` |
104-
| \--nutui-progress-text-color | text color | `$color-primary-text` |
116+
| \--nutui-progress-text-color | text color | `$color-text-help` |
105117
| \--nutui-progress-text-padding | text padding | `0 5px` |
106-
| \--nutui-progress-text-font-size | text fontSize | `9px` |
118+
| \--nutui-progress-text-font-size | text fontSize | `13px` |
107119
| \--nutui-progress-text-position-top | text top | `-4px` |
108120
| \--nutui-progress-text-position-bottom | text bottom | `-4px` |
109121
| \--nutui-progress-text-border-radius | text borderRadius | `5px` |

‎src/packages/progress/doc.md‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,12 @@ import { Progress } from '@nutui/nutui-react'
7474

7575
:::
7676

77+
### 设置动画时长与播放方式
78+
79+
:::demo
80+
<CodeBlock src='h5/demo9.tsx'></CodeBlock>
81+
:::
82+
7783
## Progress
7884

7985
### Props
@@ -88,6 +94,12 @@ import { Progress } from '@nutui/nutui-react'
8894
| animated | 是否展示动画效果 | `boolean` | `false` |
8995
| lazy | 每次进入可视区展示进度条动画 | `boolean` | `false` |
9096
| delay | 延迟数据加载时长，单位 ms | `number` | `0` |
97+
| borderRadius | 进度条圆角大小 | `string` | `0` |
98+
| fontSize | 进度文字大小 | `string` | `12px` |
99+
| activeMode | 动画播放方式 | `forwards \| backwards` | `forwards` |
100+
| duration | 动画完成时间（单位：毫秒） | `number` | `30` |
101+
| ariaLabel | 无障碍标签 | `string` | `-` |
102+
| onActiveEnd | 动画完成后的回调函数 | `() => void` | `-` |
91103

92104
## 主题定制
93105

@@ -101,9 +113,9 @@ import { Progress } from '@nutui/nutui-react'
101113
| \--nutui-progress-border-radius | 进度条边框圆角 | `12px` |
102114
| \--nutui-progress-color | 进度条颜色 | `linear-gradient(135deg, #FF0F23 0%, #fa6419 100%)` |
103115
| \--nutui-progress-background | 进度条背景色 | `#f3f3f3` |
104-
| \--nutui-progress-text-color | 文本颜色 | `$color-primary-text` |
116+
| \--nutui-progress-text-color | 文本颜色 | `$color-text-help` |
105117
| \--nutui-progress-text-padding | 文本内边距 | `0 5px` |
106-
| \--nutui-progress-text-font-size | 文本字体大小 | `9px` |
118+
| \--nutui-progress-text-font-size | 文本字体大小 | `13px` |
107119
| \--nutui-progress-text-position-top | 文本定位 top | `-4px` |
108120
| \--nutui-progress-text-position-bottom | 文本定位 bottom | `-4px` |
109121
| \--nutui-progress-text-border-radius | 文本边框圆角 | `5px` |

0 commit comments

Comments
 (0)