taro-uno-ui 1.0.1 → 1.0.2

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

@@ -1,193 +0,0 @@
-import { rafThrottle } from '@/utils/performance/performance';
-
-export interface AnimationOptions {
-  duration: number;
-  easing?: (t: number) => number;
-  delay?: number;
-  onStart?: () => void;
-  onComplete?: () => void;
-  onUpdate?: (progress: number) => void;
-}
-
-export interface AnimationController {
-  start: () => void;
-  pause: () => void;
-  resume: () => void;
-  cancel: () => void;
-  isRunning: () => boolean;
-}
-
-/**
- * 缓动函数集合
- */
-export const easingFunctions = {
-  linear: (t: number) => t,
-  easeIn: (t: number) => t * t,
-  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,
-  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;
-
-  let startTime: number | null = null;
-  let pausedTime = 0;
-  let rafId: number | null = null;
-  let isRunningFlag = false;
-  let isPaused = false;
-
-  const animate = (timestamp: number) => {
-    if (!startTime) startTime = timestamp + delay;
-
-    if (timestamp < startTime) {
-      rafId = requestAnimationFrame(animate);
-      return;
-    }
-
-    if (isPaused) {
-      pausedTime = timestamp - startTime;
-      rafId = requestAnimationFrame(animate);
-      return;
-    }
-
-    const elapsed = timestamp - startTime - pausedTime;
-    const progress = Math.min(elapsed / duration, 1);
-    const easedProgress = easing(progress);
-    const currentValue = startValue + (endValue - startValue) * easedProgress;
-
-    onUpdate?.(currentValue);
-
-    if (progress < 1) {
-      rafId = requestAnimationFrame(animate);
-    } else {
-      onComplete?.();
-      isRunningFlag = false;
-    }
-  };
-
-  const start = () => {
-    if (isRunningFlag) return;
-
-    isRunningFlag = true;
-    isPaused = false;
-    startTime = null;
-    pausedTime = 0;
-
-    onStart?.();
-    rafId = requestAnimationFrame(animate);
-  };
-
-  const pause = () => {
-    if (!isRunningFlag || isPaused) return;
-    isPaused = true;
-  };
-
-  const resume = () => {
-    if (!isRunningFlag || !isPaused) return;
-    isPaused = false;
-  };
-
-  const cancel = () => {
-    if (rafId) {
-      cancelAnimationFrame(rafId);
-      rafId = null;
-    }
-    isRunningFlag = false;
-    isPaused = false;
-    startTime = null;
-    pausedTime = 0;
-  };
-
-  const isRunning = () => isRunningFlag && !isPaused;
-
-  return {
-    start,
-    pause,
-    resume,
-    cancel,
-    isRunning,
-  };
-}
-
-/**
- * 创建优化的进度动画
- */
-export function createProgressAnimation(
-  startPercent: number,
-  endPercent: number,
-  onUpdate: (percent: number) => void,
-  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,
-    delay: options.delay || 0,
-    onStart: options.onStart,
-    onComplete: options.onComplete,
-    onUpdate: (value) => onUpdate(Math.round(value * 100) / 100),
-  });
-}
-
-/**
- * 节流化的动画更新函数
- */
-export const throttledAnimationUpdate = (callback: () => void) => {
-  const fn = rafThrottle(callback);
-  fn();
-};
-
-/**
- * 批量动画管理器
- */
-export class AnimationBatchManager {
-  private animations: Map<string, AnimationController> = new Map();
-  private onUpdateCallbacks: Set<() => void> = new Set();
-
-  addAnimation(id: string, animation: AnimationController): void {
-    this.animations.set(id, animation);
-  }
-
-  removeAnimation(id: string): void {
-    const animation = this.animations.get(id);
-    if (animation) {
-      animation.cancel();
-      this.animations.delete(id);
-    }
-  }
-
-  pauseAll(): void {
-    this.animations.forEach((animation) => animation.pause());
-  }
-
-  resumeAll(): void {
-    this.animations.forEach((animation) => animation.resume());
-  }
-
-  cancelAll(): void {
-    this.animations.forEach((animation) => animation.cancel());
-    this.animations.clear();
-  }
-
-  addUpdateCallback(callback: () => void): void {
-    this.onUpdateCallbacks.add(callback);
-  }
-
-  removeUpdateCallback(callback: () => void): void {
-    this.onUpdateCallbacks.delete(callback);
-  }
-
-  triggerUpdate(): void {
-    this.onUpdateCallbacks.forEach((callback) => callback());
-  }
-}
-
-export const animationBatchManager = new AnimationBatchManager();

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

@@ -1,26 +0,0 @@
-// 导出动画相关工具函数
-export {
-  createProgressAnimation,
-  createAnimation,
-  easingFunctions,
-  throttledAnimationUpdate,
-  animationBatchManager,
-  AnimationBatchManager,
-} from './animation';
-
-// 导出进度计算相关工具函数
-export {
-  calculateCircleDimensions,
-  calculateCircleProgress,
-  calculateDashboardProgress,
-  calculateLineWidth,
-  getStatusColor,
-  validatePercent,
-  calculateAnimationDuration,
-  calculateSegmentPositions,
-  getLineCapStyle,
-  calculateBorderRadius,
-  generateId,
-  formatProgressValue,
-  calculateProgressStatus,
-} from './progress-calculator';

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

@@ -1,199 +0,0 @@
-import { ProgressGapPosition, ProgressLineCap } from '../Progress.types';
-
-export interface CircleDimensions {
-  size: number;
-  strokeWidth: number;
-  radius: number;
-  circumference: number;
-  centerX: number;
-  centerY: number;
-}
-
-export interface CircleProgressData {
-  strokeDasharray: number;
-  strokeDashoffset: number;
-  rotation: number;
-  transform: string;
-  transformOrigin: string;
-}
-
-/**
- * 计算圆形进度条的尺寸
- */
-export function calculateCircleDimensions(size: number, strokeWidth: number): CircleDimensions {
-  const radius = (size - strokeWidth) / 2;
-  const circumference = 2 * Math.PI * radius;
-  const centerX = size / 2;
-  const centerY = size / 2;
-
-  return {
-    size,
-    strokeWidth,
-    radius,
-    circumference,
-    centerX,
-    centerY,
-  };
-}
-
-/**
- * 计算圆形进度条的进度数据
- */
-export function calculateCircleProgress(dimensions: CircleDimensions, percent: number): CircleProgressData {
-  const { circumference } = dimensions;
-  const strokeDasharray = circumference;
-  const strokeDashoffset = circumference - (percent / 100) * circumference;
-  const rotation = -90;
-  const transform = `rotate(${rotation}deg)`;
-  const transformOrigin = '50% 50%';
-
-  return {
-    strokeDasharray,
-    strokeDashoffset,
-    rotation,
-    transform,
-    transformOrigin,
-  };
-}
-
-/**
- * 计算仪表盘进度条的进度数据
- */
-export function calculateDashboardProgress(
-  dimensions: CircleDimensions,
-  percent: number,
-  gapDegree: number,
-  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,
-    right: 0,
-    bottom: 90,
-    left: 180,
-  };
-
-  const baseRotation = rotationMap[gapPosition];
-  const rotation = baseRotation + gapDegree / 2;
-  const transform = `rotate(${rotation}deg)`;
-  const transformOrigin = '50% 50%';
-
-  return {
-    strokeDasharray,
-    strokeDashoffset,
-    rotation,
-    transform,
-    transformOrigin,
-  };
-}
-
-/**
- * 计算线型进度条的宽度
- */
-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 {
-  return theme[status] || theme['normal'] || '#1890ff';
-}
-
-/**
- * 验证进度值
- */
-export function validatePercent(percent: number): number {
-  return Math.max(0, Math.min(100, percent));
-}
-
-/**
- * 计算动画时长
- */
-export function calculateAnimationDuration(
-  percentDiff: number,
-  baseDuration: number = 300,
-  maxDuration: number = 1000,
-): number {
-  const duration = (percentDiff / 100) * baseDuration;
-  return Math.min(duration, maxDuration);
-}
-
-/**
- * 计算分段进度的位置
- */
-export function calculateSegmentPositions(
-  segments: Array<{ color: string; percent: number }>,
-  containerWidth: number,
-): Array<{ color: string; left: number; width: number }> {
-  let currentLeft = 0;
-  return segments.map((segment) => {
-    const width = (containerWidth * segment.percent) / 100;
-    const position = {
-      color: segment.color,
-      left: currentLeft,
-      width,
-    };
-    currentLeft += width;
-    return position;
-  });
-}
-
-/**
- * 计算线帽样式
- */
-export function getLineCapStyle(lineCap: ProgressLineCap): string {
-  return lineCap;
-}
-
-/**
- * 计算圆角半径
- */
-export function calculateBorderRadius(strokeWidth: number, lineCap: ProgressLineCap): number {
-  if (lineCap === 'round') {
-    return strokeWidth / 2;
-  }
-  return 0;
-}
-
-/**
- * 生成唯一ID
- */
-export function generateId(prefix: string = 'progress'): string {
-  return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
-}
-
-/**
- * 格式化进度值
- */
-export function formatProgressValue(
-  percent: number,
-  formatter?: (percent: number) => React.ReactNode,
-): React.ReactNode {
-  if (formatter) {
-    return formatter(percent);
-  }
-  return `${Math.round(percent)}%`;
-}
-
-/**
- * 计算进度状态
- */
-export function calculateProgressStatus(percent: number, currentStatus?: string): string {
-  if (percent >= 100) {
-    return 'success';
-  }
-  if (currentStatus === 'exception') {
-    return 'exception';
-  }
-  if (percent > 0) {
-    return 'active';
-  }
-  return 'normal';
-}

package/src/components/feedback/Result/Result.styles.ts

@@ -1,139 +0,0 @@
-import type { CSSProperties } from 'react';
-
-export const resultStyles: Record<string, CSSProperties> = {
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: '48px 32px',
-    textAlign: 'center',
-  },
-
-  iconContainer: {
-    marginBottom: '24px',
-  },
-
-  icon: {
-    fontSize: '72px',
-    fontWeight: 'bold',
-    lineHeight: 1,
-  },
-
-  iconSuccess: {
-    color: '#22c55e',
-  },
-
-  iconError: {
-    color: '#ef4444',
-  },
-
-  iconInfo: {
-    color: '#0ea5e9',
-  },
-
-  iconWarning: {
-    color: '#f59e0b',
-  },
-
-  iconLoading: {
-    color: '#6b7280',
-  },
-
-  icon404: {
-    color: '#6b7280',
-  },
-
-  icon403: {
-    color: '#6b7280',
-  },
-
-  icon500: {
-    color: '#6b7280',
-  },
-
-  content: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    gap: '16px',
-  },
-
-  title: {
-    fontSize: '24px',
-    fontWeight: '600',
-    color: '#1f2937',
-    margin: 0,
-  },
-
-  subTitle: {
-    fontSize: '16px',
-    color: '#6b7280',
-    margin: 0,
-    lineHeight: 1.5,
-    maxWidth: '400px',
-  },
-
-  children: {
-    marginTop: '24px',
-    width: '100%',
-  },
-
-  extra: {
-    marginTop: '24px',
-  },
-
-  // Status variations
-  success: {
-    color: '#22c55e',
-  },
-
-  error: {
-    color: '#ef4444',
-  },
-
-  info: {
-    color: '#0ea5e9',
-  },
-
-  warning: {
-    color: '#f59e0b',
-  },
-
-  loading: {
-    color: '#6b7280',
-  },
-
-  // Size variations
-  small: {
-    padding: '24px 16px',
-  },
-
-  smallIcon: {
-    fontSize: '48px',
-  },
-
-  smallTitle: {
-    fontSize: '18px',
-  },
-
-  smallSubTitle: {
-    fontSize: '14px',
-  },
-
-  large: {
-    padding: '64px 48px',
-  },
-
-  largeIcon: {
-    fontSize: '96px',
-  },
-
-  largeTitle: {
-    fontSize: '32px',
-  },
-
-  largeSubTitle: {
-    fontSize: '18px',
-  },
-};