Feat v4 progress

src/packages/configprovider/types.ts

@@ -691,6 +691,23 @@ export type NutCSSVariables =
   | 'nutuiProgressTextPositionTop'
   | 'nutuiProgressTextPositionBottom'
   | 'nutuiProgressTextBorderRadius'
+  | 'nutuiProgressVideoTrackColor'
+  | 'nutuiProgressVideoFillColor'
+  | 'nutuiProgressVideoThumbColor'
+  | 'nutuiProgressVideoHeight'
+  | 'nutuiProgressVideoActiveHeight'
+  | 'nutuiProgressVideoPausedHeight'
+  | 'nutuiProgressVideoThumbWidth'
+  | 'nutuiProgressVideoThumbHeight'
+  | 'nutuiProgressVideoThumbRadius'
+  | 'nutuiProgressVideoThumbActiveWidth'
+  | 'nutuiProgressVideoThumbActiveHeight'
+  | 'nutuiProgressVideoThumbActiveRadius'
+  | 'nutuiProgressVideoThumbPausedWidth'
+  | 'nutuiProgressVideoThumbPausedHeight'
+  | 'nutuiProgressVideoThumbPausedRadius'
+  | 'nutuiProgressVideoOpacityStatic'
+  | 'nutuiProgressVideoOpacityPaused'
   | 'nutuiPaginationColor'
   | 'nutuiPaginationLiteColor'
   | 'nutuiPaginationFontSize'

src/packages/loading/demo.taro.tsx

@@ -10,6 +10,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 LoadingDemo = () => {
   const [translated] = useTranslate({
@@ -65,6 +66,7 @@ const LoadingDemo = () => {
         <Demo7 />
         <View className="h2">{translated.title8}</View>
         <Demo8 />
+        <Demo9 />
       </ScrollView>
     </>
   )

src/packages/loading/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 LoadingDemo = () => {
   const [translated] = useTranslate({
@@ -61,6 +62,7 @@ const LoadingDemo = () => {
         <Demo7 />
         <h2>{translated.title8}</h2>
         <Demo8 />
+        <Demo9 />
       </div>
     </>
   )

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

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Loading, Cell, Lottie } from '@nutui/nutui-react'
+import lightLoading from '@nutui/nutui-react/dist/es/lottie/animation/light/loading.json'
+
+const Demo9 = () => {
+  const WrapperStyle = {
+    padding: 8,
+    borderRadius: 8,
+    backgroundColor: '#11141A05',
+  }
+
+  const WrapperTextStyle = {
+    height: 18,
+    padding: 0,
+  }
+
+  const lottie = (
+    <Lottie source={lightLoading} style={{ width: 40, height: 40 }} />
+  )
+
+  return (
+    <>
+      <Cell>
+        <Loading
+          style={WrapperStyle}
+          icon={lottie}
+          direction="vertical"
+          textStyle={WrapperTextStyle}
+        >
+          内容加载中
+        </Loading>
+      </Cell>
+    </>
+  )
+}
+export default Demo9

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

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Loading, Cell, Lottie } from '@nutui/nutui-react-taro'
+import lightLoading from '@nutui/nutui-react-taro/dist/es/lottie/animation/light/loading.json'
+
+const Demo9 = () => {
+  const WrapperStyle = {
+    padding: 8,
+    borderRadius: 8,
+    backgroundColor: '#11141A05',
+  }
+
+  const WrapperTextStyle = {
+    height: 18,
+    padding: 0,
+  }
+
+  const lottie = (
+    <Lottie source={lightLoading} style={{ width: 40, height: 40 }} />
+  )
+
+  return (
+    <>
+      <Cell>
+        <Loading
+          style={WrapperStyle}
+          icon={lottie}
+          direction="vertical"
+          textStyle={WrapperTextStyle}
+        >
+          内容加载中
+        </Loading>
+      </Cell>
+    </>
+  )
+}
+export default Demo9

src/packages/loading/loading.taro.tsx

@@ -23,10 +23,11 @@ const defaultProps = {
 
 export const Loading = React.forwardRef<LoadingRef, Partial<TaroLoadingProps>>(
   (props, ref) => {
-    const { className, style, children, direction, icon, ...rest } = {
-      ...defaultProps,
-      ...props,
-    }
+    const { className, style, children, direction, icon, textStyle, ...rest } =
+      {
+        ...defaultProps,
+        ...props,
+      }
 
     const classPrefix = 'nut-loading'
     const getLoadingIcon = () => {
@@ -47,7 +48,9 @@ export const Loading = React.forwardRef<LoadingRef, Partial<TaroLoadingProps>>(
       >
         <View className={iconboxClassName()}>{icon || getLoadingIcon()}</View>
         {children ? (
-          <View className={`${classPrefix}-text`}>{children}</View>
+          <View className={`${classPrefix}-text`} style={textStyle}>
+            {children}
+          </View>
         ) : null}
       </View>
     )

src/packages/loading/loading.tsx

@@ -19,14 +19,16 @@ const defaultProps = {
   type: 'circular',
   direction: 'horizontal',
   lottieProps: {},
+  textStyle: {},
 } as WebLoadingProps
 
 export const Loading = React.forwardRef<LoadingRef, Partial<WebLoadingProps>>(
   (props, ref) => {
-    const { className, style, children, direction, icon, ...rest } = {
-      ...defaultProps,
-      ...props,
-    }
+    const { className, style, children, direction, icon, textStyle, ...rest } =
+      {
+        ...defaultProps,
+        ...props,
+      }
 
     const classPrefix = 'nut-loading'
     const getLoadingIcon = () => {
@@ -47,7 +49,9 @@ export const Loading = React.forwardRef<LoadingRef, Partial<WebLoadingProps>>(
       >
         <div className={iconboxClassName()}>{icon || getLoadingIcon()}</div>
         {children ? (
-          <div className={`${classPrefix}-text`}>{children}</div>
+          <div className={`${classPrefix}-text`} style={textStyle}>
+            {children}
+          </div>
         ) : null}
       </div>
     )

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

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { render } from '@testing-library/react'
+import { fireEvent, render } from '@testing-library/react'
 import '@testing-library/jest-dom'
 
 import { Progress } from '../progress'
@@ -53,7 +53,6 @@ test('should handle animation mode and duration', () => {
     'transition: width 500ms ease-in-out'
   )
 
-  // 测试动画完成回调
   rerender(
     <Progress
       percent={100}
@@ -66,3 +65,105 @@ test('should handle animation mode and duration', () => {
     expect(onActiveEndMock).toHaveBeenCalled()
   }, 600)
 })
+
+// ==== video mode ====
+describe('Progress video mode', () => {
+  test('renders track/fill/thumb structure with is-static by default', () => {
+    const { container } = render(<Progress mode="video" percent={40} />)
+    const root = container.querySelector('.nut-progress--video')
+    expect(root).toBeTruthy()
+    expect(root?.classList.contains('is-static')).toBe(true)
+    expect(container.querySelector('.nut-progress-track')).toBeTruthy()
+    const fill = container.querySelector('.nut-progress-fill') as HTMLElement
+    expect(fill.style.width).toBe('40%')
+    const thumb = container.querySelector('.nut-progress-thumb') as HTMLElement
+    expect(thumb.style.left).toBe('40%')
+  })
+
+  test('applies is-paused state and renders paused icon', () => {
+    const { container } = render(
+      <Progress
+        mode="video"
+        percent={50}
+        status="paused"
+        pausedIcon={<span data-testid="paused-icon" />}
+      />
+    )
+    const root = container.querySelector('.nut-progress--video')
+    expect(root?.classList.contains('is-paused')).toBe(true)
+    expect(container.querySelector('[data-testid="paused-icon"]')).toBeTruthy()
+  })
+
+  test('hides thumb when showThumb=false', () => {
+    const { container } = render(
+      <Progress mode="video" percent={20} showThumb={false} />
+    )
+    expect(container.querySelector('.nut-progress-thumb')).toBeNull()
+  })
+
+  test('clamps percent to [min, max]', () => {
+    const { container, rerender } = render(
+      <Progress mode="video" percent={-50} />
+    )
+    const fill = () =>
+      container.querySelector('.nut-progress-fill') as HTMLElement
+    expect(fill().style.width).toBe('0%')
+    rerender(<Progress mode="video" percent={9999} />)
+    expect(fill().style.width).toBe('100%')
+  })
+
+  test('drag with mouse triggers onDragStart / onDragEnd and onChange', () => {
+    const onDragStart = vi.fn()
+    const onDragEnd = vi.fn()
+    const onChange = vi.fn()
+    const { container } = render(
+      <Progress
+        mode="video"
+        percent={0}
+        draggable
+        onDragStart={onDragStart}
+        onDragEnd={onDragEnd}
+        onChange={onChange}
+      />
+    )
+    const root = container.querySelector('.nut-progress--video') as HTMLElement
+    root.getBoundingClientRect = () =>
+      ({
+        left: 0,
+        top: 0,
+        right: 200,
+        bottom: 10,
+        width: 200,
+        height: 10,
+        x: 0,
+        y: 0,
+        toJSON: () => ({}),
+      }) as DOMRect
+
+    fireEvent.mouseDown(root, { clientX: 100 })
+    expect(onDragStart).toHaveBeenCalled()
+    expect(onChange).toHaveBeenCalledWith(50)
+    fireEvent.mouseUp(window, { clientX: 160 })
+    expect(onDragEnd).toHaveBeenCalledWith(80)
+  })
+
+  test('keyboard ArrowRight increments percent by step', () => {
+    const onChange = vi.fn()
+    const { container } = render(
+      <Progress
+        mode="video"
+        percent={50}
+        draggable
+        step={5}
+        onChange={onChange}
+      />
+    )
+    const root = container.querySelector('.nut-progress--video') as HTMLElement
+    fireEvent.keyDown(root, { key: 'ArrowRight' })
+    expect(onChange).toHaveBeenCalledWith(55)
+    fireEvent.keyDown(root, { key: 'Home' })
+    expect(onChange).toHaveBeenCalledWith(0)
+    fireEvent.keyDown(root, { key: 'End' })
+    expect(onChange).toHaveBeenCalledWith(100)
+  })
+})

src/packages/progress/demo.taro.tsx

@@ -12,6 +12,7 @@ import Demo6 from './demos/taro/demo6'
 import Demo7 from './demos/taro/demo7'
 import Demo8 from './demos/taro/demo8'
 import Demo9 from './demos/taro/demo9'
+import Demo10 from './demos/taro/demo10'
 
 const ProgressDemo = () => {
   const [translated] = useTranslate({
@@ -25,6 +26,7 @@ const ProgressDemo = () => {
       dynamicChange: '动态改变',
       lazy: '延迟加载数据',
       activeMode: '设置动画时长与播放方式',
+      videoBasic: '视频进度条',
     },
     'zh-TW': {
       basic: '基礎用法',
@@ -36,6 +38,7 @@ const ProgressDemo = () => {
       dynamicChange: '動態改變',
       lazy: '延遲加載數據',
       activeMode: '設置動畫時長與播放方式',
+      videoBasic: '視頻進度條',
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -47,6 +50,7 @@ const ProgressDemo = () => {
       dynamicChange: 'Dynamic Change',
       lazy: 'Delay Time',
       activeMode: 'Duration And Animation Mode',
+      videoBasic: 'Video Progress',
     },
   })
 
@@ -77,6 +81,8 @@ const ProgressDemo = () => {
         )}
         <View className="h2">{translated.activeMode}</View>
         <Demo9 />
+        <View className="h2">{translated.videoBasic}</View>
+        <Demo10 />
       </ScrollView>
     </>
   )

src/packages/progress/demo.tsx

@@ -9,6 +9,7 @@ import Demo6 from './demos/h5/demo6'
 import Demo7 from './demos/h5/demo7'
 import Demo8 from './demos/h5/demo8'
 import Demo9 from './demos/h5/demo9'
+import Demo10 from './demos/h5/demo10'
 
 const ProgressDemo = () => {
   const [translated] = useTranslate({
@@ -22,6 +23,7 @@ const ProgressDemo = () => {
       dynamicChange: '动态改变',
       lazy: '延迟加载数据',
       activeMode: '设置动画时长与播放方式',
+      videoBasic: '视频进度条',
     },
     'zh-TW': {
       basic: '基礎用法',
@@ -33,6 +35,7 @@ const ProgressDemo = () => {
       dynamicChange: '動態改變',
       lazy: '延遲加載數據',
       activeMode: '設置動畫時長與播放方式',
+      videoBasic: '視頻進度條',
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -44,6 +47,7 @@ const ProgressDemo = () => {
       dynamicChange: 'Dynamic Change',
       lazy: 'Delay Time',
       activeMode: 'Duration And Animation Mode',
+      videoBasic: 'Video Progress',
     },
   })
 
@@ -68,6 +72,8 @@ const ProgressDemo = () => {
         <Demo8 />
         <h2>{translated.activeMode}</h2>
         <Demo9 />
+        <h2>{translated.videoBasic}</h2>
+        <Demo10 />
       </div>
     </>
   )