taro-uno-ui 0.9.0 → 1.0.0

package/src/components/feedback/Progress/Progress.tsx

@@ -1,28 +1,16 @@
 import React, { forwardRef, useRef, useEffect, useCallback } from 'react';
 import { View, Text } from '@tarojs/components';
-import { 
-  ProgressProps, 
-  ProgressRef, 
-  ProgressStatus,
-  ProgressLineCap,
-} from './Progress.types';
-import { 
-  getLineStyle, 
-  getCircleStyle, 
-  getDashboardStyle, 
-  getInfoStyle, 
+import { ProgressProps, ProgressRef, ProgressStatus, ProgressLineCap } from './Progress.types';
+import {
+  getLineStyle,
+  getCircleStyle,
+  getDashboardStyle,
+  getInfoStyle,
   getContainerStyle,
   getSvgStyle,
 } from './Progress.styles';
-import { 
-  createProgressAnimation, 
-  easingFunctions,
-} from './utils/animation';
-import {
-  validatePercent,
-  formatProgressValue,
-  calculateProgressStatus,
-} from './utils/progress-calculator';
+import { createProgressAnimation, easingFunctions } from './utils/animation';
+import { validatePercent, formatProgressValue, calculateProgressStatus } from './utils/progress-calculator';
 
 interface SVGCircleProps {
   cx: number;
@@ -39,37 +27,39 @@ interface SVGCircleProps {
   style?: React.CSSProperties;
 }
 
-const SVGCircle: React.FC<SVGCircleProps> = React.memo(({
-  cx,
-  cy,
-  r,
-  fill = 'none',
-  stroke,
-  strokeWidth,
-  strokeLinecap = 'round',
-  strokeDasharray,
-  strokeDashoffset,
-  transform,
-  transformOrigin,
-  style,
-}) => {
-  const circleProps = {
+const SVGCircle: React.FC<SVGCircleProps> = React.memo(
+  ({
     cx,
     cy,
     r,
-    fill,
+    fill = 'none',
     stroke,
     strokeWidth,
-    strokeLinecap,
+    strokeLinecap = 'round',
     strokeDasharray,
     strokeDashoffset,
     transform,
     transformOrigin,
     style,
-  };
+  }) => {
+    const circleProps = {
+      cx,
+      cy,
+      r,
+      fill,
+      stroke,
+      strokeWidth,
+      strokeLinecap,
+      strokeDasharray,
+      strokeDashoffset,
+      transform,
+      transformOrigin,
+      style,
+    };
 
-  return <circle {...circleProps} />;
-});
+    return <circle {...circleProps} />;
+  },
+);
 
 SVGCircle.displayName = 'SVGCircle';
 
@@ -110,58 +100,61 @@ export const Progress = forwardRef<ProgressRef, ProgressProps>((props, ref) => {
   // State
   const [internalPercent, setInternalPercent] = React.useState(() => validatePercent(percent));
   const [isAnimating, setIsAnimating] = React.useState(false);
-  const [status, setStatus] = React.useState<ProgressStatus>(() =>
-    propStatus || (calculateProgressStatus(internalPercent, 'normal') as ProgressStatus)
+  const [status, setStatus] = React.useState<ProgressStatus>(
+    () => propStatus || (calculateProgressStatus(internalPercent, 'normal') as ProgressStatus),
   );
 
   // 优化后的动画处理
-  const animateProgress = useCallback((targetPercent: number) => {
-    if (animationRef.current) {
-      animationRef.current.cancel();
-    }
+  const animateProgress = useCallback(
+    (targetPercent: number) => {
+      if (animationRef.current) {
+        animationRef.current.cancel();
+      }
 
-    const validatedTarget = validatePercent(targetPercent);
-    
-    if (animated && Math.abs(validatedTarget - internalPercent) > 0.1) {
-      setIsAnimating(true);
-      events?.onAnimationStart?.();
+      const validatedTarget = validatePercent(targetPercent);
+
+      if (animated && Math.abs(validatedTarget - internalPercent) > 0.1) {
+        setIsAnimating(true);
+        events?.onAnimationStart?.();
 
-      animationRef.current = createProgressAnimation(
-        internalPercent,
-        validatedTarget,
-        (newPercent) => {
-          setInternalPercent(newPercent);
-          events?.onChange?.(newPercent);
-        },
-        {
-          duration: animationDuration,
-          easing: easingFunctions.easeInOut,
-          onStart: () => {
-            setIsAnimating(true);
+        animationRef.current = createProgressAnimation(
+          internalPercent,
+          validatedTarget,
+          (newPercent) => {
+            setInternalPercent(newPercent);
+            events?.onChange?.(newPercent);
           },
-          onComplete: () => {
-            setIsAnimating(false);
-            events?.onAnimationEnd?.();
-            
-            if (validatedTarget >= 100) {
-              setStatus('success');
-              events?.onComplete?.();
-            }
+          {
+            duration: animationDuration,
+            easing: easingFunctions.easeInOut,
+            onStart: () => {
+              setIsAnimating(true);
+            },
+            onComplete: () => {
+              setIsAnimating(false);
+              events?.onAnimationEnd?.();
+
+              if (validatedTarget >= 100) {
+                setStatus('success');
+                events?.onComplete?.();
+              }
+            },
           },
+        );
+
+        animationRef.current.start();
+      } else {
+        setInternalPercent(validatedTarget);
+        events?.onChange?.(validatedTarget);
+
+        if (validatedTarget >= 100) {
+          setStatus('success');
+          events?.onComplete?.();
         }
-      );
-
-      animationRef.current.start();
-    } else {
-      setInternalPercent(validatedTarget);
-      events?.onChange?.(validatedTarget);
-      
-      if (validatedTarget >= 100) {
-        setStatus('success');
-        events?.onComplete?.();
       }
-    }
-  }, [internalPercent, animated, animationDuration, events]);
+    },
+    [internalPercent, animated, animationDuration, events],
+  );
 
   // 处理外部percent变化
   useEffect(() => {
@@ -188,23 +181,26 @@ export const Progress = forwardRef<ProgressRef, ProgressProps>((props, ref) => {
   }, []);
 
   // 格式化进度信息
-  const formatProgress = useCallback((percentValue: number): React.ReactNode => {
-    return formatProgressValue(percentValue, format);
-  }, [format]);
+  const formatProgress = useCallback(
+    (percentValue: number): React.ReactNode => {
+      return formatProgressValue(percentValue, format);
+    },
+    [format],
+  );
 
   // 获取当前进度条颜色
   const getProgressColor = useCallback(() => {
     if (strokeColor) {
       return typeof strokeColor === 'string' ? strokeColor : theme?.primaryColor || '#1890ff';
     }
-    
+
     const statusColors = {
       normal: theme?.primaryColor || '#1890ff',
       success: theme?.successColor || '#52c41a',
       exception: theme?.errorColor || '#ff4d4f',
       active: theme?.warningColor || '#faad14',
     };
-    
+
     return statusColors[status];
   }, [strokeColor, status, theme]);
 
@@ -296,9 +292,7 @@ export const Progress = forwardRef<ProgressRef, ProgressProps>((props, ref) => {
           </svg>
           {showInfo && (
             <View style={circleStyles['inner']}>
-              <Text style={getInfoStyle(size)}>
-                {formatProgress(internalPercent)}
-              </Text>
+              <Text style={getInfoStyle(size)}>{formatProgress(internalPercent)}</Text>
             </View>
           )}
         </View>
@@ -369,9 +363,7 @@ export const Progress = forwardRef<ProgressRef, ProgressProps>((props, ref) => {
           </svg>
           {showInfo && (
             <View style={dashboardStyles['inner']}>
-              <Text style={getInfoStyle(size)}>
-                {formatProgress(internalPercent)}
-              </Text>
+              <Text style={getInfoStyle(size)}>{formatProgress(internalPercent)}</Text>
             </View>
           )}
         </View>
@@ -464,7 +456,9 @@ export const Progress = forwardRef<ProgressRef, ProgressProps>((props, ref) => {
     status && `taro-uno-h5-progress--${status}`,
     size && `taro-uno-h5-progress--${size}`,
     animated && `taro-uno-h5-progress--animated`,
-  ].filter(Boolean).join(' ');
+  ]
+    .filter(Boolean)
+    .join(' ');
 
   // Generate accessibility attributes
   const accessibilityProps = {
@@ -480,24 +474,10 @@ export const Progress = forwardRef<ProgressRef, ProgressProps>((props, ref) => {
   };
 
   return (
-    <View
-      ref={containerRef}
-      className={progressClasses}
-      style={containerStyle}
-      {...accessibilityProps}
-      {...rest}
-    >
-      {title && (
-        <Text style={{ fontSize: '14px', fontWeight: 500, marginBottom: '8px' }}>
-          {title}
-        </Text>
-      )}
+    <View ref={containerRef} className={progressClasses} style={containerStyle} {...accessibilityProps} {...rest}>
+      {title && <Text style={{ fontSize: '14px', fontWeight: 500, marginBottom: '8px' }}>{title}</Text>}
       {renderProgress()}
-      {description && (
-        <Text style={{ fontSize: '12px', color: '#666', marginTop: '8px' }}>
-          {description}
-        </Text>
-      )}
+      {description && <Text style={{ fontSize: '12px', color: '#666', marginTop: '8px' }}>{description}</Text>}
       {children}
     </View>
   );
@@ -505,4 +485,4 @@ export const Progress = forwardRef<ProgressRef, ProgressProps>((props, ref) => {
 
 Progress.displayName = 'Progress';
 
-export default Progress;
+export default Progress;

package/src/components/feedback/Progress/Progress.types.ts

@@ -160,4 +160,4 @@ export interface ProgressContextProps {
   animationDuration: number;
 }
 
-export type ProgressContext = React.Context<ProgressContextProps>;
+export type ProgressContext = React.Context<ProgressContextProps>;

package/src/components/feedback/Progress/index.ts

@@ -1,3 +1,3 @@
 export { Progress } from './Progress';
 export type { ProgressProps, ProgressRef, ProgressType, ProgressSize, ProgressStatus } from './Progress.types';
-export { progressStyles } from './Progress.styles';
+export { progressStyles } from './Progress.styles';

package/src/components/feedback/Progress/utils/animation.ts

@@ -26,26 +26,15 @@ export const easingFunctions = {
   easeOut: (t: number) => t * (2 - t),
   easeInOut: (t: number) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
   easeInCubic: (t: number) => t * t * t,
-  easeOutCubic: (t: number) => (--t) * t * t + 1,
+  easeOutCubic: (t: number) => --t * t * t + 1,
   easeInOutCubic: (t: number) => (t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1),
 };
 
 /**
  * 创建动画控制器
  */
-export function createAnimation(
-  startValue: number,
-  endValue: number,
-  options: AnimationOptions
-): AnimationController {
-  const { 
-    duration, 
-    easing = easingFunctions.linear, 
-    delay = 0,
-    onStart,
-    onComplete,
-    onUpdate 
-  } = options;
+export function createAnimation(startValue: number, endValue: number, options: AnimationOptions): AnimationController {
+  const { duration, easing = easingFunctions.linear, delay = 0, onStart, onComplete, onUpdate } = options;
 
   let startTime: number | null = null;
   let pausedTime = 0;
@@ -55,7 +44,7 @@ export function createAnimation(
 
   const animate = (timestamp: number) => {
     if (!startTime) startTime = timestamp + delay;
-    
+
     if (timestamp < startTime) {
       rafId = requestAnimationFrame(animate);
       return;
@@ -84,12 +73,12 @@ export function createAnimation(
 
   const start = () => {
     if (isRunningFlag) return;
-    
+
     isRunningFlag = true;
     isPaused = false;
     startTime = null;
     pausedTime = 0;
-    
+
     onStart?.();
     rafId = requestAnimationFrame(animate);
   };
@@ -133,11 +122,11 @@ export function createProgressAnimation(
   startPercent: number,
   endPercent: number,
   onUpdate: (percent: number) => void,
-  options: Partial<Omit<AnimationOptions, 'onUpdate'>> = {}
+  options: Partial<Omit<AnimationOptions, 'onUpdate'>> = {},
 ): AnimationController {
   const clampedStart = Math.max(0, Math.min(100, startPercent));
   const clampedEnd = Math.max(0, Math.min(100, endPercent));
-  
+
   return createAnimation(clampedStart, clampedEnd, {
     duration: options.duration || 300,
     easing: options.easing || easingFunctions.linear,
@@ -176,15 +165,15 @@ export class AnimationBatchManager {
   }
 
   pauseAll(): void {
-    this.animations.forEach(animation => animation.pause());
+    this.animations.forEach((animation) => animation.pause());
   }
 
   resumeAll(): void {
-    this.animations.forEach(animation => animation.resume());
+    this.animations.forEach((animation) => animation.resume());
   }
 
   cancelAll(): void {
-    this.animations.forEach(animation => animation.cancel());
+    this.animations.forEach((animation) => animation.cancel());
     this.animations.clear();
   }
 
@@ -197,7 +186,7 @@ export class AnimationBatchManager {
   }
 
   triggerUpdate(): void {
-    this.onUpdateCallbacks.forEach(callback => callback());
+    this.onUpdateCallbacks.forEach((callback) => callback());
   }
 }
 

package/src/components/feedback/Progress/utils/index.ts

@@ -5,7 +5,7 @@ export {
   easingFunctions,
   throttledAnimationUpdate,
   animationBatchManager,
-  AnimationBatchManager
+  AnimationBatchManager,
 } from './animation';
 
 // 导出进度计算相关工具函数
@@ -22,5 +22,5 @@ export {
   calculateBorderRadius,
   generateId,
   formatProgressValue,
-  calculateProgressStatus
+  calculateProgressStatus,
 } from './progress-calculator';

package/src/components/feedback/Progress/utils/progress-calculator.ts

@@ -20,10 +20,7 @@ export interface CircleProgressData {
 /**
  * 计算圆形进度条的尺寸
  */
-export function calculateCircleDimensions(
-  size: number,
-  strokeWidth: number
-): CircleDimensions {
+export function calculateCircleDimensions(size: number, strokeWidth: number): CircleDimensions {
   const radius = (size - strokeWidth) / 2;
   const circumference = 2 * Math.PI * radius;
   const centerX = size / 2;
@@ -42,10 +39,7 @@ export function calculateCircleDimensions(
 /**
  * 计算圆形进度条的进度数据
  */
-export function calculateCircleProgress(
-  dimensions: CircleDimensions,
-  percent: number
-): CircleProgressData {
+export function calculateCircleProgress(dimensions: CircleDimensions, percent: number): CircleProgressData {
   const { circumference } = dimensions;
   const strokeDasharray = circumference;
   const strokeDashoffset = circumference - (percent / 100) * circumference;
@@ -69,13 +63,13 @@ export function calculateDashboardProgress(
   dimensions: CircleDimensions,
   percent: number,
   gapDegree: number,
-  gapPosition: ProgressGapPosition = 'top'
+  gapPosition: ProgressGapPosition = 'top',
 ): CircleProgressData {
   const { circumference } = dimensions;
   const effectiveCircumference = circumference * (1 - gapDegree / 360);
   const strokeDasharray = effectiveCircumference;
   const strokeDashoffset = effectiveCircumference - (percent / 100) * effectiveCircumference;
-  
+
   // 根据缺口位置计算旋转角度
   const rotationMap: Record<ProgressGapPosition, number> = {
     top: -90,
@@ -83,7 +77,7 @@ export function calculateDashboardProgress(
     bottom: 90,
     left: 180,
   };
-  
+
   const baseRotation = rotationMap[gapPosition];
   const rotation = baseRotation + gapDegree / 2;
   const transform = `rotate(${rotation}deg)`;
@@ -101,20 +95,14 @@ export function calculateDashboardProgress(
 /**
  * 计算线型进度条的宽度
  */
-export function calculateLineWidth(
-  containerWidth: number,
-  percent: number
-): number {
+export function calculateLineWidth(containerWidth: number, percent: number): number {
   return Math.max(0, Math.min(containerWidth, (containerWidth * percent) / 100));
 }
 
 /**
  * 根据状态获取颜色
  */
-export function getStatusColor(
-  status: string,
-  theme: Record<string, string>
-): string {
+export function getStatusColor(status: string, theme: Record<string, string>): string {
   return theme[status] || theme['normal'] || '#1890ff';
 }
 
@@ -131,7 +119,7 @@ export function validatePercent(percent: number): number {
 export function calculateAnimationDuration(
   percentDiff: number,
   baseDuration: number = 300,
-  maxDuration: number = 1000
+  maxDuration: number = 1000,
 ): number {
   const duration = (percentDiff / 100) * baseDuration;
   return Math.min(duration, maxDuration);
@@ -142,10 +130,10 @@ export function calculateAnimationDuration(
  */
 export function calculateSegmentPositions(
   segments: Array<{ color: string; percent: number }>,
-  containerWidth: number
+  containerWidth: number,
 ): Array<{ color: string; left: number; width: number }> {
   let currentLeft = 0;
-  return segments.map(segment => {
+  return segments.map((segment) => {
     const width = (containerWidth * segment.percent) / 100;
     const position = {
       color: segment.color,
@@ -167,10 +155,7 @@ export function getLineCapStyle(lineCap: ProgressLineCap): string {
 /**
  * 计算圆角半径
  */
-export function calculateBorderRadius(
-  strokeWidth: number,
-  lineCap: ProgressLineCap
-): number {
+export function calculateBorderRadius(strokeWidth: number, lineCap: ProgressLineCap): number {
   if (lineCap === 'round') {
     return strokeWidth / 2;
   }
@@ -189,7 +174,7 @@ export function generateId(prefix: string = 'progress'): string {
  */
 export function formatProgressValue(
   percent: number,
-  formatter?: (percent: number) => React.ReactNode
+  formatter?: (percent: number) => React.ReactNode,
 ): React.ReactNode {
   if (formatter) {
     return formatter(percent);
@@ -200,10 +185,7 @@ export function formatProgressValue(
 /**
  * 计算进度状态
  */
-export function calculateProgressStatus(
-  percent: number,
-  currentStatus?: string
-): string {
+export function calculateProgressStatus(percent: number, currentStatus?: string): string {
   if (percent >= 100) {
     return 'success';
   }
@@ -214,4 +196,4 @@ export function calculateProgressStatus(
     return 'active';
   }
   return 'normal';
-}
+}