From 5e940cc97fd36f0baf9059e214e7db4983e99941 Mon Sep 17 00:00:00 2001 From: "Alex.hxy" <1872591453@qq.com> Date: Thu, 24 Apr 2025 17:01:26 +0800 Subject: [PATCH 01/12] =?UTF-8?q?feat(progress):=20=E5=85=BC=E5=AE=B9?= =?UTF-8?q?=E5=B9=B6=E6=94=AF=E6=8C=81taro=20components=E7=9A=84props?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/progress/progress.taro.tsx | 77 +++++++++++++++++++------ 1 file changed, 58 insertions(+), 19 deletions(-) diff --git a/src/packages/progress/progress.taro.tsx b/src/packages/progress/progress.taro.tsx index 98af8c5b6f..14bdcd23ba 100644 --- a/src/packages/progress/progress.taro.tsx +++ b/src/packages/progress/progress.taro.tsx @@ -1,7 +1,7 @@ import React, { FunctionComponent, useEffect, useRef, useState } from 'react' import classNames from 'classnames' import Taro, { PageInstance } from '@tarojs/taro' -import { View } from '@tarojs/components' +import { View, ProgressProps } from '@tarojs/components' import { pxTransform } from '@/utils/taro/px-transform' import { ComponentDefaults } from '@/utils/typings' import { useRtl } from '../configprovider/index.taro' @@ -19,7 +19,8 @@ const defaultProps = { } as TaroProgressProps export const Progress: FunctionComponent< - Partial & React.HTMLAttributes + Partial & + React.HTMLAttributes > = (props) => { const rtl = useRtl() const { @@ -34,6 +35,17 @@ export const Progress: FunctionComponent< children, lazy, delay, + // tc + showInfo, // ✅ + borderRadius, + fontSize, + activeColor, + backgroundColor, + active, + activeMode, + duration, + ariaLabel, + onActiveEnd, ...rest } = { ...defaultProps, @@ -41,27 +53,44 @@ export const Progress: FunctionComponent< } const classPrefix = 'nut-progress' + const effectiveShowText = props.showText ?? showInfo ?? defaultProps.showText + const effectiveColor = props.color ?? activeColor ?? defaultProps.color + const effectiveBgColor = + props.background ?? backgroundColor ?? defaultProps.background + const effectiveAnimated = props.animated ?? active ?? defaultProps.animated const classesInner = classNames({ [`${classPrefix}-inner`]: true, - [`${classPrefix}-active`]: animated, + [`${classPrefix}-active`]: effectiveAnimated, }) - const stylesOuter: React.CSSProperties = { - width: '100%', - backgroundColor: background, - } - const [displayPercent, setDispalyPercent] = useState(percent) + const getStyles = () => { + // 基础样式 + const baseStyles = { + height: strokeWidth && pxTransform(Number(strokeWidth)), + borderRadius: borderRadius && pxTransform(Number(borderRadius)), + } + const transitionStyle = { + transition: `width ${duration || 300}ms ease-in-out`, + } - const stylesInner: React.CSSProperties = { - width: `${displayPercent}%`, - background: color || '#FF0F23', + return { + outer: { + width: '100%', + backgroundColor: effectiveBgColor, + ...baseStyles, + }, + inner: { + width: `${displayPercent}%`, + background: effectiveColor || '#FF0F23', + ...baseStyles, + ...transitionStyle, + }, + } } - if (strokeWidth) { - stylesOuter.height = pxTransform(Number(strokeWidth)) - stylesInner.height = pxTransform(Number(strokeWidth)) - } + const { outer: stylesOuter, inner: stylesInner } = getStyles() + const handlePercent = () => { let timer: any = null if (delay) { @@ -77,8 +106,15 @@ export const Progress: FunctionComponent< } } useEffect(() => { - setDispalyPercent(percent) - }, [percent]) + if (activeMode === 'backwards') { + setDispalyPercent(0) + setTimeout(() => { + setDispalyPercent(percent) + }, duration || 300) + } else { + setDispalyPercent(percent) + } + }, [percent, activeMode]) const [intersecting, setIntersecting] = useState(false) const progressRef = useRef(null) @@ -163,7 +199,8 @@ export const Progress: FunctionComponent< } const computeInnerStyle = () => { const style: any = { - backgroundColor: color || '#ff0f23', + backgroundColor: effectiveColor || '#ff0f23', + fontSize: fontSize && pxTransform(Number(fontSize)), } if (harmony()) { style.width = harmony() @@ -178,14 +215,16 @@ export const Progress: FunctionComponent< id={selector} className={classNames(classPrefix, className)} style={style} + aria-label={ariaLabel} {...(rest as any)} > - {showText && ( + {effectiveShowText && ( Date: Thu, 24 Apr 2025 17:02:35 +0800 Subject: [PATCH 02/12] =?UTF-8?q?feat(progress):=20=E5=85=BC=E5=AE=B9?= =?UTF-8?q?=E5=B9=B6=E6=94=AF=E6=8C=81taro=20components=E7=9A=84props?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/progress/progress.taro.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/packages/progress/progress.taro.tsx b/src/packages/progress/progress.taro.tsx index 14bdcd23ba..575f64b7e3 100644 --- a/src/packages/progress/progress.taro.tsx +++ b/src/packages/progress/progress.taro.tsx @@ -36,7 +36,7 @@ export const Progress: FunctionComponent< lazy, delay, // tc - showInfo, // ✅ + showInfo, borderRadius, fontSize, activeColor, From 6f69804bbb5aabb0e8dd17e6d0b0c1dc8993f351 Mon Sep 17 00:00:00 2001 From: "Alex.hxy" <1872591453@qq.com> Date: Thu, 24 Apr 2025 17:35:50 +0800 Subject: [PATCH 03/12] =?UTF-8?q?feat(progress):=20=E5=85=BC=E5=AE=B9?= =?UTF-8?q?=E5=B9=B6=E6=94=AF=E6=8C=81taro=20components=E7=9A=84props?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/progress/progress.taro.tsx | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/packages/progress/progress.taro.tsx b/src/packages/progress/progress.taro.tsx index 575f64b7e3..43dfa5cc74 100644 --- a/src/packages/progress/progress.taro.tsx +++ b/src/packages/progress/progress.taro.tsx @@ -68,7 +68,8 @@ export const Progress: FunctionComponent< // 基础样式 const baseStyles = { height: strokeWidth && pxTransform(Number(strokeWidth)), - borderRadius: borderRadius && pxTransform(Number(borderRadius)), + borderRadius: + borderRadius && pxTransform(parseInt(borderRadius.toString())), } const transitionStyle = { transition: `width ${duration || 300}ms ease-in-out`, @@ -106,15 +107,22 @@ export const Progress: FunctionComponent< } } useEffect(() => { + let timer: any = null if (activeMode === 'backwards') { setDispalyPercent(0) - setTimeout(() => { + timer = setTimeout(() => { setDispalyPercent(percent) }, duration || 300) } else { setDispalyPercent(percent) } - }, [percent, activeMode]) + + return () => { + if (timer) { + clearTimeout(timer) + } + } + }, [percent, activeMode, duration]) const [intersecting, setIntersecting] = useState(false) const progressRef = useRef(null) @@ -200,7 +208,7 @@ export const Progress: FunctionComponent< const computeInnerStyle = () => { const style: any = { backgroundColor: effectiveColor || '#ff0f23', - fontSize: fontSize && pxTransform(Number(fontSize)), + fontSize: fontSize && pxTransform(parseInt(fontSize.toString())), } if (harmony()) { style.width = harmony() From 03dd7f106d73851814d94d94d2a61eb773fe9904 Mon Sep 17 00:00:00 2001 From: "Alex.hxy" <1872591453@qq.com> Date: Mon, 28 Apr 2025 17:30:19 +0800 Subject: [PATCH 04/12] feat: add docs and demos for progress --- src/packages/progress/demo.taro.tsx | 20 +++++++---- src/packages/progress/demos/taro/demo9.tsx | 39 ++++++++++++++++++++++ src/packages/progress/doc.taro.md | 6 ++++ 3 files changed, 58 insertions(+), 7 deletions(-) create mode 100644 src/packages/progress/demos/taro/demo9.tsx diff --git a/src/packages/progress/demo.taro.tsx b/src/packages/progress/demo.taro.tsx index f1cbffca24..150525c4d9 100644 --- a/src/packages/progress/demo.taro.tsx +++ b/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: '設置顏色與寛度', - noShowPercentage: '顯示百分比', - customContent: '自定義顯示內容', - customSize: '自定義尺寸', - statusDisplay: '狀態顯示', - dynamicChange: '動態改變', + basic: '基础用法', + customStyle: '设置颜色与宽度', + noShowPercentage: '显示百分比', + customContent: '自定义显示内容', + customSize: '自定义尺寸', + statusDisplay: '状态显示', + dynamicChange: '动态改变', 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 = () => { )} + {translated.activeMode} + ) diff --git a/src/packages/progress/demos/taro/demo9.tsx b/src/packages/progress/demos/taro/demo9.tsx new file mode 100644 index 0000000000..90c97ac73a --- /dev/null +++ b/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 ( + + + + + + + + + + + ) +} +export default Demo7 diff --git a/src/packages/progress/doc.taro.md b/src/packages/progress/doc.taro.md index 402264bb9f..ef8c7453b3 100644 --- a/src/packages/progress/doc.taro.md +++ b/src/packages/progress/doc.taro.md @@ -88,6 +88,12 @@ import { Progress } from '@nutui/nutui-react-taro' | 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` | `-` | ## 主题定制 From 966b3f6395faec2f924ca058ab751fd951a691c2 Mon Sep 17 00:00:00 2001 From: "Alex.hxy" <1872591453@qq.com> Date: Tue, 6 May 2025 10:36:05 +0800 Subject: [PATCH 05/12] =?UTF-8?q?feat:=20=E5=B1=9E=E6=80=A7=E5=AF=B9?= =?UTF-8?q?=E9=BD=90web=20h5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/progress/demo.taro.tsx | 16 +++++----- src/packages/progress/demo.tsx | 10 ++++-- src/packages/progress/demos/h5/demo9.tsx | 39 ++++++++++++++++++++++++ src/packages/progress/doc.en-US.md | 6 ++++ src/packages/progress/doc.md | 6 ++++ src/packages/progress/doc.zh-TW.md | 6 ++++ src/packages/progress/progress.tsx | 37 ++++++++++++++++++++-- src/types/spec/progress/base.ts | 6 ++++ 8 files changed, 113 insertions(+), 13 deletions(-) create mode 100644 src/packages/progress/demos/h5/demo9.tsx diff --git a/src/packages/progress/demo.taro.tsx b/src/packages/progress/demo.taro.tsx index 150525c4d9..5b0750bab3 100644 --- a/src/packages/progress/demo.taro.tsx +++ b/src/packages/progress/demo.taro.tsx @@ -27,14 +27,14 @@ const ProgressDemo = () => { activeMode: '设置动画时长与播放方式', }, 'zh-TW': { - basic: '基础用法', - customStyle: '设置颜色与宽度', - noShowPercentage: '显示百分比', - customContent: '自定义显示内容', - customSize: '自定义尺寸', - statusDisplay: '状态显示', - dynamicChange: '动态改变', - lazy: '延迟加载数据', + basic: '基礎用法', + customStyle: '設置顏色與寬度', + noShowPercentage: '顯示百分比', + customContent: '自定義顯示內容', + customSize: '自定義尺寸', + statusDisplay: '狀態顯示', + dynamicChange: '動態改變', + lazy: '延遲加載數據', activeMode: '設置動畫時長與播放方式', }, 'en-US': { diff --git a/src/packages/progress/demo.tsx b/src/packages/progress/demo.tsx index b67be254bc..a58feaf69e 100644 --- a/src/packages/progress/demo.tsx +++ b/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 = () => {

{translated.lazy}

+

{translated.activeMode}

+ ) diff --git a/src/packages/progress/demos/h5/demo9.tsx b/src/packages/progress/demos/h5/demo9.tsx new file mode 100644 index 0000000000..852a571e95 --- /dev/null +++ b/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 ( + + + + + + + + + + + ) +} +export default Demo7 diff --git a/src/packages/progress/doc.en-US.md b/src/packages/progress/doc.en-US.md index 5f3b032a54..eac8844845 100644 --- a/src/packages/progress/doc.en-US.md +++ b/src/packages/progress/doc.en-US.md @@ -88,6 +88,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 diff --git a/src/packages/progress/doc.md b/src/packages/progress/doc.md index 447bbd3baa..e1a412b12f 100644 --- a/src/packages/progress/doc.md +++ b/src/packages/progress/doc.md @@ -88,6 +88,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` | `-` | ## 主题定制 diff --git a/src/packages/progress/doc.zh-TW.md b/src/packages/progress/doc.zh-TW.md index 34ce57ef2f..d1072075d6 100644 --- a/src/packages/progress/doc.zh-TW.md +++ b/src/packages/progress/doc.zh-TW.md @@ -88,6 +88,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` | `-` | ## 主題定制 diff --git a/src/packages/progress/progress.tsx b/src/packages/progress/progress.tsx index a6eebf1031..9f4630415c 100644 --- a/src/packages/progress/progress.tsx +++ b/src/packages/progress/progress.tsx @@ -29,6 +29,12 @@ export const Progress: FunctionComponent< children, lazy, delay, + borderRadius, + fontSize, + activeMode, + duration, + ariaLabel, + onActiveEnd, ...rest } = { ...defaultProps, @@ -44,6 +50,7 @@ export const Progress: FunctionComponent< const stylesOuter: React.CSSProperties = { height: `${strokeWidth}px`, + borderRadius: borderRadius && parseInt(borderRadius.toString()), background, } @@ -52,11 +59,27 @@ export const Progress: FunctionComponent< const stylesInner: React.CSSProperties = { width: `${displayPercent}%`, background: color || '#FF0F23', + borderRadius: borderRadius && parseInt(borderRadius.toString()), + transition: `width ${duration || 300}ms ease-in-out`, } useEffect(() => { - setDispalyPercent(percent) - }, [percent]) + let timer: any = null + if (activeMode === 'backwards') { + setDispalyPercent(0) + timer = setTimeout(() => { + setDispalyPercent(percent) + }, duration || 300) + } else { + setDispalyPercent(percent) + } + + return () => { + if (timer) { + clearTimeout(timer) + } + } + }, [percent, activeMode, duration]) const [intersecting, setIntersecting] = useState(false) @@ -112,10 +135,17 @@ export const Progress: FunctionComponent< ref={progressRef} className={classNames(classPrefix, className)} style={style} + aria-label={ariaLabel} {...rest} >
-
+
{ + onActiveEnd?.() + }} + > {showText && (
{percent}% diff --git a/src/types/spec/progress/base.ts b/src/types/spec/progress/base.ts index 015b313d89..09dac4968d 100644 --- a/src/types/spec/progress/base.ts +++ b/src/types/spec/progress/base.ts @@ -9,4 +9,10 @@ export interface BaseProgress extends BaseProps { animated: boolean lazy: boolean delay: number + borderRadius: string + fontSize: string + activeMode: string + duration: number + ariaLabel: string + onActiveEnd: () => void } From f3aa312404d8828e9e2ad0e847d156c2fa2471f9 Mon Sep 17 00:00:00 2001 From: "Alex.hxy" <1872591453@qq.com> Date: Tue, 6 May 2025 10:56:07 +0800 Subject: [PATCH 06/12] =?UTF-8?q?feat:=20=E5=B1=9E=E6=80=A7=E5=AF=B9?= =?UTF-8?q?=E9=BD=90web=20h5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../progress/__tests__/__snapshots__/progress.spec.tsx.snap | 2 +- src/packages/progress/__tests__/progress.spec.tsx | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/packages/progress/__tests__/__snapshots__/progress.spec.tsx.snap b/src/packages/progress/__tests__/__snapshots__/progress.spec.tsx.snap index 80701d06e4..e9c9b19f36 100644 --- a/src/packages/progress/__tests__/__snapshots__/progress.spec.tsx.snap +++ b/src/packages/progress/__tests__/__snapshots__/progress.spec.tsx.snap @@ -10,7 +10,7 @@ exports[`should render progress when use props 1`] = ` >
diff --git a/src/packages/progress/__tests__/progress.spec.tsx b/src/packages/progress/__tests__/progress.spec.tsx index 81e0413f8b..d702df407d 100644 --- a/src/packages/progress/__tests__/progress.spec.tsx +++ b/src/packages/progress/__tests__/progress.spec.tsx @@ -13,7 +13,9 @@ test('should render different height and color when use color height props', asy ) 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', () => { From d1df3675905396aa8a789beaa66ff32d3aa80fef Mon Sep 17 00:00:00 2001 From: "Alex.hxy" <1872591453@qq.com> Date: Tue, 6 May 2025 11:04:56 +0800 Subject: [PATCH 07/12] feat: add unit vitest --- .../progress/__tests__/progress.spec.tsx | 51 +++++++++++++++++++ 1 file changed, 51 insertions(+) diff --git a/src/packages/progress/__tests__/progress.spec.tsx b/src/packages/progress/__tests__/progress.spec.tsx index d702df407d..3cb7ea88fb 100644 --- a/src/packages/progress/__tests__/progress.spec.tsx +++ b/src/packages/progress/__tests__/progress.spec.tsx @@ -23,3 +23,54 @@ test('should show percent when use showText props', () => { const text = container.querySelector('.nut-progress-text') expect(text).toBeTruthy() }) +test('should render with custom style props', () => { + const { container } = render( + + ) + const inner = container.querySelector('.nut-progress-text-inner') + 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( + + ) + + const inner = container.querySelector('.nut-progress-inner') + expect(inner?.getAttribute('style')).toContain( + 'transition: width 500ms ease-in-out' + ) + + // 测试动画完成回调 + rerender( + + ) + setTimeout(() => { + expect(onActiveEndMock).toHaveBeenCalled() + }, 600) +}) + +test('should render with aria-label', () => { + const { container } = render( + + ) + const progressDiv = container.querySelector('.nut-progress') + expect(progressDiv?.getAttribute('aria-label')).toBe('当前进度50%') +}) From 81d06a35a2d2fe961f70acaf081789dc3b11e2d2 Mon Sep 17 00:00:00 2001 From: "Alex.hxy" <1872591453@qq.com> Date: Thu, 15 May 2025 16:35:11 +0800 Subject: [PATCH 08/12] feat: cr review --- src/packages/progress/progress.taro.tsx | 5 ++--- src/types/spec/progress/taro.ts | 7 ++++++- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/packages/progress/progress.taro.tsx b/src/packages/progress/progress.taro.tsx index 43dfa5cc74..b159ccab03 100644 --- a/src/packages/progress/progress.taro.tsx +++ b/src/packages/progress/progress.taro.tsx @@ -1,7 +1,7 @@ import React, { FunctionComponent, useEffect, useRef, useState } from 'react' import classNames from 'classnames' import Taro, { PageInstance } from '@tarojs/taro' -import { View, ProgressProps } from '@tarojs/components' +import { View } from '@tarojs/components' import { pxTransform } from '@/utils/taro/px-transform' import { ComponentDefaults } from '@/utils/typings' import { useRtl } from '../configprovider/index.taro' @@ -19,8 +19,7 @@ const defaultProps = { } as TaroProgressProps export const Progress: FunctionComponent< - Partial & - React.HTMLAttributes + Partial & React.HTMLAttributes > = (props) => { const rtl = useRtl() const { diff --git a/src/types/spec/progress/taro.ts b/src/types/spec/progress/taro.ts index 2fb310f7cc..9360370aea 100644 --- a/src/types/spec/progress/taro.ts +++ b/src/types/spec/progress/taro.ts @@ -1,3 +1,8 @@ import { BaseProgress } from './base' -export interface TaroProgressProps extends BaseProgress {} +export interface TaroProgressProps extends BaseProgress { + showInfo: boolean + activeColor: string + backgroundColor: string + active: boolean +} From 00cb18a91c2957cc7b463571cf89b11271c60d6a Mon Sep 17 00:00:00 2001 From: "Alex.hxy" <1872591453@qq.com> Date: Fri, 16 May 2025 14:10:15 +0800 Subject: [PATCH 09/12] feat: v15 --- src/packages/progress/demos/h5/demo4.tsx | 25 ++++++++----- src/packages/progress/demos/taro/demo4.tsx | 25 ++++++++----- src/packages/progress/doc.en-US.md | 4 +- src/packages/progress/doc.md | 4 +- src/packages/progress/doc.taro.md | 4 +- src/packages/progress/doc.zh-TW.md | 4 +- src/packages/progress/progress.scss | 26 +++---------- src/packages/progress/progress.taro.tsx | 43 +++------------------- src/packages/progress/progress.tsx | 28 ++------------ src/styles/variables.scss | 4 +- 10 files changed, 57 insertions(+), 110 deletions(-) diff --git a/src/packages/progress/demos/h5/demo4.tsx b/src/packages/progress/demos/h5/demo4.tsx index d5251f632b..4a53c6f486 100644 --- a/src/packages/progress/demos/h5/demo4.tsx +++ b/src/packages/progress/demos/h5/demo4.tsx @@ -3,15 +3,22 @@ import { Progress, Image, Cell } from '@nutui/nutui-react' const Demo4 = () => { return ( - - - - - + <> + + + 已完成15/30 + + + + + + + + ) } export default Demo4 diff --git a/src/packages/progress/demos/taro/demo4.tsx b/src/packages/progress/demos/taro/demo4.tsx index 2740c9fdf7..50d7ed16b4 100644 --- a/src/packages/progress/demos/taro/demo4.tsx +++ b/src/packages/progress/demos/taro/demo4.tsx @@ -3,15 +3,22 @@ import { Progress, Image, Cell } from '@nutui/nutui-react-taro' const Demo4 = () => { return ( - - - - - + <> + + + 已完成15/30 + + + + + + + + ) } export default Demo4 diff --git a/src/packages/progress/doc.en-US.md b/src/packages/progress/doc.en-US.md index eac8844845..337c151504 100644 --- a/src/packages/progress/doc.en-US.md +++ b/src/packages/progress/doc.en-US.md @@ -107,9 +107,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` | diff --git a/src/packages/progress/doc.md b/src/packages/progress/doc.md index e1a412b12f..666a14aaea 100644 --- a/src/packages/progress/doc.md +++ b/src/packages/progress/doc.md @@ -107,9 +107,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` | diff --git a/src/packages/progress/doc.taro.md b/src/packages/progress/doc.taro.md index ef8c7453b3..6cc5f6369c 100644 --- a/src/packages/progress/doc.taro.md +++ b/src/packages/progress/doc.taro.md @@ -107,9 +107,9 @@ import { Progress } from '@nutui/nutui-react-taro' | \--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` | diff --git a/src/packages/progress/doc.zh-TW.md b/src/packages/progress/doc.zh-TW.md index d1072075d6..6c27e6c55c 100644 --- a/src/packages/progress/doc.zh-TW.md +++ b/src/packages/progress/doc.zh-TW.md @@ -107,9 +107,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` | diff --git a/src/packages/progress/progress.scss b/src/packages/progress/progress.scss index aaf0574783..9b7a7685e3 100644 --- a/src/packages/progress/progress.scss +++ b/src/packages/progress/progress.scss @@ -5,11 +5,10 @@ width: 100%; &-outer { - flex: auto; + flex: 1; border-radius: $progress-border-radius; height: $progress-height; background: $progress-background; - .nut-progress-active:before { content: ''; position: absolute; @@ -35,26 +34,11 @@ &-text { display: flex; align-items: center; - position: absolute; - top: $progress-text-position-top; - bottom: $progress-text-position-bottom; transition: all 0.4s; - transform: translate(-50%); - - &-inner { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - height: 100%; - width: 100%; - color: $progress-text-color; - padding: $progress-text-padding; - border-radius: $progress-text-border-radius; - font-size: $progress-text-font-size; - line-height: 1; - background: $progress-text-background; - } + margin-left: 12px; + color: $color-text-help; + font-family: PingFang SC; + font-size: $progress-text-font-size; } @keyframes progressActive { diff --git a/src/packages/progress/progress.taro.tsx b/src/packages/progress/progress.taro.tsx index b159ccab03..913b93765b 100644 --- a/src/packages/progress/progress.taro.tsx +++ b/src/packages/progress/progress.taro.tsx @@ -230,44 +230,13 @@ export const Progress: FunctionComponent< className={classesInner} style={{ ...stylesInner, position: 'relative' }} onTransitionEnd={onActiveEnd} - > - {effectiveShowText && ( - - - {children || ( - - {`${percent}%`} - - )} - - - )} - + /> + {effectiveShowText && ( + + {children || `${percent}%`} + + )} ) } diff --git a/src/packages/progress/progress.tsx b/src/packages/progress/progress.tsx index 9f4630415c..27ae1a8a23 100644 --- a/src/packages/progress/progress.tsx +++ b/src/packages/progress/progress.tsx @@ -145,31 +145,11 @@ export const Progress: FunctionComponent< onTransitionEnd={() => { onActiveEnd?.() }} - > - {showText && ( -
- {children || ( -
- {percent}% -
- )} -
- )} -
+ />
+ {showText && ( +
{children || `${percent}%`}
+ )}
) } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 095ae69393..a7ea02b8b3 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1665,14 +1665,14 @@ $progress-background: var( $progress-border-radius: var(--nutui-progress-border-radius, 12px) !default; $progress-text-color: var( --nutui-progress-text-color, - $color-primary-text + $color-text-help ) !default; $progress-text-background: var( --nutui-progress-text-background, $color-primary-gradient-1 ) !default; $progress-text-padding: var(--nutui-progress-text-padding, 0 5px) !default; -$progress-text-font-size: var(--nutui-progress-text-font-size, 9px) !default; +$progress-text-font-size: var(--nutui-progress-text-font-size, 13px) !default; $progress-text-position-top: var( --nutui-progress-text-position-top, -4px From cbf9a72ee23790d267d33cdf2b509669b2ba8a6f Mon Sep 17 00:00:00 2001 From: "Alex.hxy" <1872591453@qq.com> Date: Fri, 16 May 2025 14:18:57 +0800 Subject: [PATCH 10/12] feat: v15 --- src/packages/progress/__tests__/progress.spec.tsx | 2 +- src/packages/progress/progress.taro.tsx | 5 ++++- src/packages/progress/progress.tsx | 7 ++++++- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/packages/progress/__tests__/progress.spec.tsx b/src/packages/progress/__tests__/progress.spec.tsx index 3cb7ea88fb..b455f02565 100644 --- a/src/packages/progress/__tests__/progress.spec.tsx +++ b/src/packages/progress/__tests__/progress.spec.tsx @@ -27,7 +27,7 @@ test('should render with custom style props', () => { const { container } = render( ) - const inner = container.querySelector('.nut-progress-text-inner') + const inner = container.querySelector('.nut-progress-text') expect(inner).toHaveStyle({ fontSize: '16px', }) diff --git a/src/packages/progress/progress.taro.tsx b/src/packages/progress/progress.taro.tsx index 913b93765b..2b48bd8492 100644 --- a/src/packages/progress/progress.taro.tsx +++ b/src/packages/progress/progress.taro.tsx @@ -233,7 +233,10 @@ export const Progress: FunctionComponent< /> {effectiveShowText && ( - + {children || `${percent}%`} )} diff --git a/src/packages/progress/progress.tsx b/src/packages/progress/progress.tsx index 27ae1a8a23..9c7e7ae506 100644 --- a/src/packages/progress/progress.tsx +++ b/src/packages/progress/progress.tsx @@ -148,7 +148,12 @@ export const Progress: FunctionComponent< /> {showText && ( -
{children || `${percent}%`}
+
+ {children || `${percent}%`} +
)} ) From a0f892d2667b64240124b82fbeb049a0f2ae091f Mon Sep 17 00:00:00 2001 From: "Alex.hxy" <1872591453@qq.com> Date: Sat, 17 May 2025 16:20:45 +0800 Subject: [PATCH 11/12] fix: cr --- src/packages/progress/doc.en-US.md | 6 ++++++ src/packages/progress/doc.md | 6 ++++++ src/packages/progress/doc.taro.md | 6 ++++++ src/packages/progress/doc.zh-TW.md | 6 ++++++ 4 files changed, 24 insertions(+) diff --git a/src/packages/progress/doc.en-US.md b/src/packages/progress/doc.en-US.md index 337c151504..85f6530563 100644 --- a/src/packages/progress/doc.en-US.md +++ b/src/packages/progress/doc.en-US.md @@ -74,6 +74,12 @@ import { Progress } from '@nutui/nutui-react' ::: +### Set animation duration and playback mode + +:::demo + +::: + ## Progress ### Props diff --git a/src/packages/progress/doc.md b/src/packages/progress/doc.md index 666a14aaea..7a3164589d 100644 --- a/src/packages/progress/doc.md +++ b/src/packages/progress/doc.md @@ -74,6 +74,12 @@ import { Progress } from '@nutui/nutui-react' ::: +### 设置动画时长与播放方式 + +:::demo + +::: + ## Progress ### Props diff --git a/src/packages/progress/doc.taro.md b/src/packages/progress/doc.taro.md index 6cc5f6369c..49d5ac63f6 100644 --- a/src/packages/progress/doc.taro.md +++ b/src/packages/progress/doc.taro.md @@ -74,6 +74,12 @@ import { Progress } from '@nutui/nutui-react-taro' ::: +### 设置动画时长与播放方式 + +:::demo + +::: + ## Progress ### Props diff --git a/src/packages/progress/doc.zh-TW.md b/src/packages/progress/doc.zh-TW.md index 6c27e6c55c..fa93f275f8 100644 --- a/src/packages/progress/doc.zh-TW.md +++ b/src/packages/progress/doc.zh-TW.md @@ -74,6 +74,12 @@ import { Progress } from '@nutui/nutui-react' ::: +### 設置動畫時長與播放方式 + +:::demo + +::: + ## Progress ### Props From 158adc630507115711653d133de5f11fc96beceb Mon Sep 17 00:00:00 2001 From: "Alex.hxy" <1872591453@qq.com> Date: Sat, 17 May 2025 16:26:34 +0800 Subject: [PATCH 12/12] fix: cr --- src/packages/progress/doc.taro.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/packages/progress/doc.taro.md b/src/packages/progress/doc.taro.md index 49d5ac63f6..f3ba4e2bf9 100644 --- a/src/packages/progress/doc.taro.md +++ b/src/packages/progress/doc.taro.md @@ -77,7 +77,7 @@ import { Progress } from '@nutui/nutui-react-taro' ### 设置动画时长与播放方式 :::demo - + ::: ## Progress