feat(progress): 兼容并支持taro components的progressProps & v15适配

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

@@ -10,7 +10,7 @@ exports[`should render progress when use props 1`] = `
     >
       <div
         class="nut-progress-inner"
-        style="width: 100%; background: #FF0F23;"
+        style="width: 100%; background: #FF0F23; transition: width 300ms ease-in-out;"
       />
     </div>
   </div>

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

@@ -13,11 +13,64 @@ test('should render different height and color when use color height props', asy
     <Progress percent={50} color="blue" strokeWidth="20" />
   )
   const inner = container.querySelector('.nut-progress-inner')
-  expect(inner?.getAttribute('style')).toBe('width: 50%; background: blue;')
+  expect(inner?.getAttribute('style')).toBe(
+    'width: 50%; background: blue; transition: width 300ms ease-in-out;'
+  )
 })
 
 test('should show percent when use showText props', () => {
   const { container } = render(<Progress percent={30} showText />)
   const text = container.querySelector('.nut-progress-text')
   expect(text).toBeTruthy()
 })
+test('should render with custom style props', () => {
+  const { container } = render(
+    <Progress percent={50} borderRadius="8px" fontSize="16px" showText />
+  )
+  const inner = container.querySelector('.nut-progress-text')
+  expect(inner).toHaveStyle({
+    fontSize: '16px',
+  })
+  const outerDiv = container.querySelector('.nut-progress-outer')
+  expect(outerDiv).toHaveStyle({
+    borderRadius: '8px',
+  })
+})
+
+test('should handle animation mode and duration', () => {
+  const onActiveEndMock = vi.fn()
+  const { container, rerender } = render(
+    <Progress
+      percent={30}
+      activeMode="backwards"
+      duration={500}
+      onActiveEnd={onActiveEndMock}
+    />
+  )
+
+  const inner = container.querySelector('.nut-progress-inner')
+  expect(inner?.getAttribute('style')).toContain(
+    'transition: width 500ms ease-in-out'
+  )
+
+  // 测试动画完成回调
+  rerender(
+    <Progress
+      percent={100}
+      activeMode="backwards"
+      duration={500}
+      onActiveEnd={onActiveEndMock}
+    />
+  )
+  setTimeout(() => {
+    expect(onActiveEndMock).toHaveBeenCalled()
+  }, 600)
+})
+
+test('should render with aria-label', () => {
+  const { container } = render(
+    <Progress percent={50} ariaLabel="当前进度50%" />
+  )
+  const progressDiv = container.querySelector('.nut-progress')
+  expect(progressDiv?.getAttribute('aria-label')).toBe('当前进度50%')
+})

src/packages/progress/demo.taro.tsx

@@ -11,6 +11,7 @@ import Demo5 from './demos/taro/demo5'
 import Demo6 from './demos/taro/demo6'
 import Demo7 from './demos/taro/demo7'
 import Demo8 from './demos/taro/demo8'
+import Demo9 from './demos/taro/demo9'
 
 const ProgressDemo = () => {
   const [translated] = useTranslate({
@@ -23,16 +24,18 @@ const ProgressDemo = () => {
       statusDisplay: '状态显示',
       dynamicChange: '动态改变',
       lazy: '延迟加载数据',
+      activeMode: '设置动画时长与播放方式',
     },
     'zh-TW': {
       basic: '基礎用法',
-      customStyle: '設置顏色與寛度',
+      customStyle: '設置顏色與寬度',
       noShowPercentage: '顯示百分比',
       customContent: '自定義顯示內容',
       customSize: '自定義尺寸',
       statusDisplay: '狀態顯示',
       dynamicChange: '動態改變',
-      lazy: '延迟加载数据',
+      lazy: '延遲加載數據',
+      activeMode: '設置動畫時長與播放方式',
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -43,6 +46,7 @@ const ProgressDemo = () => {
       statusDisplay: 'Status Display',
       dynamicChange: 'Dynamic Change',
       lazy: 'Delay Time',
+      activeMode: 'Duration And Animation Mode',
     },
   })
 
@@ -71,6 +75,8 @@ const ProgressDemo = () => {
             <Demo8 />
           </>
         )}
+        <View className="h2">{translated.activeMode}</View>
+        <Demo9 />
       </ScrollView>
     </>
   )

src/packages/progress/demo.tsx

@@ -8,6 +8,7 @@ import Demo5 from './demos/h5/demo5'
 import Demo6 from './demos/h5/demo6'
 import Demo7 from './demos/h5/demo7'
 import Demo8 from './demos/h5/demo8'
+import Demo9 from './demos/h5/demo9'
 
 const ProgressDemo = () => {
   const [translated] = useTranslate({
@@ -20,16 +21,18 @@ const ProgressDemo = () => {
       statusDisplay: '状态显示',
       dynamicChange: '动态改变',
       lazy: '延迟加载数据',
+      activeMode: '设置动画时长与播放方式',
     },
     'zh-TW': {
       basic: '基礎用法',
-      customStyle: '設置顏色與寛度',
+      customStyle: '設置顏色與寬度',
       noShowPercentage: '顯示百分比',
       customContent: '自定義顯示內容',
       customSize: '自定義尺寸',
       statusDisplay: '狀態顯示',
       dynamicChange: '動態改變',
-      lazy: '延迟加载数据',
+      lazy: '延遲加載數據',
+      activeMode: '設置動畫時長與播放方式',
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -40,6 +43,7 @@ const ProgressDemo = () => {
       statusDisplay: 'Status Display',
       dynamicChange: 'Dynamic Change',
       lazy: 'Delay Time',
+      activeMode: 'Duration And Animation Mode',
     },
   })
 
@@ -62,6 +66,8 @@ const ProgressDemo = () => {
         <Demo7 />
         <h2>{translated.lazy}</h2>
         <Demo8 />
+        <h2>{translated.activeMode}</h2>
+        <Demo9 />
       </div>
     </>
   )

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

@@ -3,15 +3,22 @@ import { Progress, Image, Cell } from '@nutui/nutui-react'
 
 const Demo4 = () => {
   return (
-    <Cell>
-      <Progress percent={60} showText>
-        <Image
-          width="20"
-          height="20"
-          src="https://img12.360buyimg.com/imagetools/jfs/t1/229362/18/22746/11607/669f8bfeF5fcbeaab/d4162bbf29bb1b00.png"
-        />
-      </Progress>
-    </Cell>
+    <>
+      <Cell>
+        <Progress percent={50} showText>
+          已完成15/30
+        </Progress>
+      </Cell>
+      <Cell>
+        <Progress percent={60} showText>
+          <Image
+            width="20"
+            height="20"
+            src="https://img12.360buyimg.com/imagetools/jfs/t1/229362/18/22746/11607/669f8bfeF5fcbeaab/d4162bbf29bb1b00.png"
+          />
+        </Progress>
+      </Cell>
+    </>
   )
 }
 export default Demo4

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

@@ -0,0 +1,39 @@
+import React, { useState } from 'react'
+import { Cell, Button, Progress } from '@nutui/nutui-react'
+
+const Demo7 = () => {
+  const [value, setValue] = useState(0)
+  return (
+    <Cell.Group>
+      <Cell align="center" style={{ flexWrap: 'wrap' }}>
+        <Progress
+          percent={value}
+          duration={800}
+          style={{ marginBottom: 10 }}
+          activeMode="forwards"
+        />
+        <Progress percent={value} activeMode="backwards" />
+      </Cell>
+      <Cell align="center">
+        <Button
+          type="default"
+          style={{ marginRight: 16 }}
+          onClick={() => {
+            setValue(Math.max(0, value - 10))
+          }}
+        >
+          减少
+        </Button>
+        <Button
+          type="primary"
+          onClick={() => {
+            setValue(Math.min(100, value + 10))
+          }}
+        >
+          增加
+        </Button>
+      </Cell>
+    </Cell.Group>
+  )
+}
+export default Demo7

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

@@ -3,15 +3,22 @@ import { Progress, Image, Cell } from '@nutui/nutui-react-taro'
 
 const Demo4 = () => {
   return (
-    <Cell>
-      <Progress percent={60} showText>
-        <Image
-          width={20}
-          height={20}
-          src="https://img12.360buyimg.com/imagetools/jfs/t1/229362/18/22746/11607/669f8bfeF5fcbeaab/d4162bbf29bb1b00.png"
-        />
-      </Progress>
-    </Cell>
+    <>
+      <Cell>
+        <Progress percent={50} showText>
+          已完成15/30
+        </Progress>
+      </Cell>
+      <Cell>
+        <Progress percent={60} showText>
+          <Image
+            width={20}
+            height={20}
+            src="https://img12.360buyimg.com/imagetools/jfs/t1/229362/18/22746/11607/669f8bfeF5fcbeaab/d4162bbf29bb1b00.png"
+          />
+        </Progress>
+      </Cell>
+    </>
   )
 }
 export default Demo4

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

@@ -0,0 +1,39 @@
+import React, { useState } from 'react'
+import { Cell, Button, Progress, pxTransform } from '@nutui/nutui-react-taro'
+
+const Demo7 = () => {
+  const [value, setValue] = useState(0)
+  return (
+    <Cell.Group>
+      <Cell align="center" style={{ flexWrap: 'wrap' }}>
+        <Progress
+          percent={value}
+          duration={800}
+          style={{ marginBottom: 10 }}
+          activeMode="forwards"
+        />
+        <Progress percent={value} activeMode="backwards" />
+      </Cell>
+      <Cell align="center">
+        <Button
+          type="default"
+          style={{ marginRight: pxTransform(16) }}
+          onClick={() => {
+            setValue(Math.max(0, value - 10))
+          }}
+        >
+          减少
+        </Button>
+        <Button
+          type="primary"
+          onClick={() => {
+            setValue(Math.min(100, value + 10))
+          }}
+        >
+          增加
+        </Button>
+      </Cell>
+    </Cell.Group>
+  )
+}
+export default Demo7

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

@@ -74,6 +74,12 @@ import { Progress } from '@nutui/nutui-react'
 
 :::
 
+### Set animation duration and playback mode
+
+:::demo
+<CodeBlock src='h5/demo9.tsx'></CodeBlock>
+:::
+
 ## Progress
 
 ### Props
@@ -88,6 +94,12 @@ import { Progress } from '@nutui/nutui-react'
 | animated | Whether to show animation | `boolean` | `false` |
 | lazy | Show animation when intersect | `boolean` | `false` |
 | delay | Delay time to set percent, ms | `number` | `0` |
+| borderRadius | Progress bar corner size | `string` | `0` |
+| fontSize | Progress text size | `string` | `12px` |
+| activeMode | Animation playback mode | `forwards \| backwards` | `forwards` |
+| duration | Animation completion time (in milliseconds) | `number` | `30` |
+| ariaLabel | AccessibilityLabel | `string` | `-` |
+| onActiveEnd | Callback function after animation is completed | `() => void` | `-` |
 
 ## Theming
 
@@ -101,9 +113,9 @@ The component provides the following CSS variables, which can be used to customi
 | \--nutui-progress-border-radius | borderRadius | `12px` |
 | \--nutui-progress-color | progress color | `linear-gradient(135deg, #FF0F23 0%, #fa6419 100%)` |
 | \--nutui-progress-background | progress background | `#f3f3f3` |
-| \--nutui-progress-text-color | text color | `$color-primary-text` |
+| \--nutui-progress-text-color | text color | `$color-text-help` |
 | \--nutui-progress-text-padding | text padding | `0 5px` |
-| \--nutui-progress-text-font-size | text fontSize | `9px` |
+| \--nutui-progress-text-font-size | text fontSize | `13px` |
 | \--nutui-progress-text-position-top | text top | `-4px` |
 | \--nutui-progress-text-position-bottom | text bottom | `-4px` |
 | \--nutui-progress-text-border-radius | text borderRadius | `5px` |

src/packages/progress/doc.md

@@ -74,6 +74,12 @@ import { Progress } from '@nutui/nutui-react'
 
 :::
 
+### 设置动画时长与播放方式
+
+:::demo
+<CodeBlock src='h5/demo9.tsx'></CodeBlock>
+:::
+
 ## Progress
 
 ### Props
@@ -88,6 +94,12 @@ import { Progress } from '@nutui/nutui-react'
 | animated | 是否展示动画效果 | `boolean` | `false` |
 | lazy | 每次进入可视区展示进度条动画 | `boolean` | `false` |
 | delay | 延迟数据加载时长，单位 ms | `number` | `0` |
+| borderRadius | 进度条圆角大小 | `string` | `0` |
+| fontSize | 进度文字大小 | `string` | `12px` |
+| activeMode | 动画播放方式 | `forwards \| backwards` | `forwards` |
+| duration | 动画完成时间（单位：毫秒） | `number` | `30` |
+| ariaLabel | 无障碍标签 | `string` | `-` |
+| onActiveEnd | 动画完成后的回调函数 | `() => void` | `-` |
 
 ## 主题定制
 
@@ -101,9 +113,9 @@ import { Progress } from '@nutui/nutui-react'
 | \--nutui-progress-border-radius | 进度条边框圆角 | `12px` |
 | \--nutui-progress-color | 进度条颜色 | `linear-gradient(135deg, #FF0F23 0%, #fa6419 100%)` |
 | \--nutui-progress-background | 进度条背景色 | `#f3f3f3` |
-| \--nutui-progress-text-color | 文本颜色 | `$color-primary-text` |
+| \--nutui-progress-text-color | 文本颜色 | `$color-text-help` |
 | \--nutui-progress-text-padding | 文本内边距 | `0 5px` |
-| \--nutui-progress-text-font-size | 文本字体大小 | `9px` |
+| \--nutui-progress-text-font-size | 文本字体大小 | `13px` |
 | \--nutui-progress-text-position-top | 文本定位 top | `-4px` |
 | \--nutui-progress-text-position-bottom | 文本定位 bottom | `-4px` |
 | \--nutui-progress-text-border-radius | 文本边框圆角 | `5px` |