taro-uno-ui 0.9.0-beta

package/src/components/display/Rate/Rate.styles.ts

@@ -0,0 +1,266 @@
+import type { RateSize, StarState } from './Rate.types';
+
+/** Rate组件样式管理器 */
+export const rateStyles = {
+  /** 尺寸映射表 */
+  SIZE_MAP: {
+    small: { size: 16, gap: 4 },
+    medium: { size: 20, gap: 6 },
+    large: { size: 24, gap: 8 },
+    default: { size: 20, gap: 6 },
+  } as const,
+
+  /** 颜色配置 */
+  COLORS: {
+    default: '#fadb14',
+    unselected: '#f0f0f0',
+    disabled: '#d9d9d9',
+  },
+
+  /**
+   * 获取容器样式
+   */
+  getContainerStyle: (props: {
+    size?: RateSize;
+    disabled?: boolean;
+    readonly?: boolean;
+    style?: React.CSSProperties;
+  }): React.CSSProperties => {
+    const { size = 'default', disabled = false, readonly = false, style = {} } = props;
+    const sizeConfig = rateStyles.SIZE_MAP[size as keyof typeof rateStyles.SIZE_MAP];
+
+    return {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: `${sizeConfig.gap}px`,
+      fontSize: `${sizeConfig.size}px`,
+      lineHeight: 1,
+      color: disabled ? rateStyles['COLORS'].disabled : rateStyles['COLORS'].default,
+      cursor: disabled || readonly ? 'default' : 'pointer',
+      outline: 'none',
+      opacity: disabled ? 0.5 : 1,
+      transition: 'all 0.3s ease',
+      ...style,
+    };
+  },
+
+  /**
+   * 获取星星样式
+   */
+  getStarStyle: (props: {
+    size: RateSize;
+    state: StarState;
+    disabled?: boolean;
+    readonly?: boolean;
+    color?: string;
+    unselectedColor?: string;
+    isHovering?: boolean;
+  }): React.CSSProperties => {
+    const {
+      size,
+      state,
+      disabled = false,
+      readonly = false,
+      color = rateStyles['COLORS'].default,
+      unselectedColor = rateStyles['COLORS'].unselected,
+      isHovering = false,
+    } = props;
+
+    const sizeConfig = rateStyles.SIZE_MAP[size as keyof typeof rateStyles.SIZE_MAP];
+
+    // 计算颜色
+    let starColor = unselectedColor;
+    if (state === 'full') {
+      starColor = disabled ? rateStyles['COLORS'].disabled : color;
+    } else if (state === 'half') {
+      starColor = disabled ? rateStyles['COLORS'].disabled : color;
+    }
+
+    return {
+      position: 'relative',
+      display: 'inline-block',
+      width: `${sizeConfig.size}px`,
+      height: `${sizeConfig.size}px`,
+      fontSize: `${sizeConfig.size}px`,
+      lineHeight: 1,
+      color: starColor,
+      cursor: disabled || readonly ? 'default' : 'pointer',
+      transition: 'all 0.3s ease',
+      transform: isHovering && !disabled && !readonly ? 'scale(1.1)' : 'scale(1)',
+      userSelect: 'none',
+      WebkitUserSelect: 'none',
+    };
+  },
+
+  /**
+   * 获取半星遮罩样式
+   */
+  getHalfStarMaskStyle: (props: {
+    color?: string;
+    unselectedColor?: string;
+  }): React.CSSProperties => {
+    const { color = rateStyles['COLORS'].default } = props;
+
+    return {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '50%',
+      height: '100%',
+      overflow: 'hidden',
+      color,
+      zIndex: 1,
+    };
+  },
+
+  /**
+   * 获取工具提示样式
+   */
+  getTooltipStyle: (): React.CSSProperties => {
+    return {
+      position: 'absolute',
+      top: '-32px',
+      left: '50%',
+      transform: 'translateX(-50%)',
+      padding: '4px 8px',
+      backgroundColor: 'rgba(0, 0, 0, 0.8)',
+      color: '#fff',
+      fontSize: '12px',
+      borderRadius: '4px',
+      whiteSpace: 'nowrap',
+      pointerEvents: 'none',
+      zIndex: 10,
+      opacity: 0,
+      transition: 'opacity 0.3s ease',
+    };
+  },
+
+  /**
+   * 获取容器类名
+   */
+  getClassName: (props: {
+    size?: RateSize;
+    disabled?: boolean;
+    readonly?: boolean;
+    className?: string;
+  }): string => {
+    const { size = 'default', disabled = false, readonly = false, className = '' } = props;
+
+    const baseClass = 'taro-uno-rate';
+    const sizeClass = `${baseClass}--${size}`;
+    const disabledClass = disabled ? `${baseClass}--disabled` : '';
+    const readonlyClass = readonly ? `${baseClass}--readonly` : '';
+
+    return [baseClass, sizeClass, disabledClass, readonlyClass, className].filter(Boolean).join(' ');
+  },
+
+  /**
+   * 获取星星类名
+   */
+  getStarClassName: (props: {
+    state: StarState;
+    isActive?: boolean;
+    isHovering?: boolean;
+  }): string => {
+    const { state, isActive = false, isHovering = false } = props;
+
+    const baseClass = 'taro-uno-rate__star';
+    const stateClass = `${baseClass}--${state}`;
+    const activeClass = isActive ? `${baseClass}--active` : '';
+    const hoverClass = isHovering ? `${baseClass}--hover` : '';
+
+    return [baseClass, stateClass, activeClass, hoverClass].filter(Boolean).join(' ');
+  },
+
+  /**
+   * 获取可访问性样式
+   */
+  getAccessibilityStyle: (focused: boolean): React.CSSProperties => {
+    return {
+      outline: focused ? '2px solid var(--primary-color, #1890ff)' : 'none',
+      outlineOffset: '2px',
+    };
+  },
+
+  /**
+   * 获取动画样式
+   */
+  getAnimationStyle: (props: {
+    isAnimating?: boolean;
+    animationType?: 'scale' | 'bounce' | 'pulse';
+  }): React.CSSProperties => {
+    const { isAnimating = false, animationType = 'scale' } = props;
+
+    if (!isAnimating) return {};
+
+    const animations = {
+      scale: {
+        animation: 'rateScale 0.3s ease',
+      },
+      bounce: {
+        animation: 'rateBounce 0.6s ease',
+      },
+      pulse: {
+        animation: 'ratePulse 1s ease infinite',
+      },
+    };
+
+    return animations[animationType] || {};
+  },
+
+  /**
+   * 生成CSS动画关键帧
+   */
+  generateKeyframes: (): string => {
+    return `
+      @keyframes rateScale {
+        0% { transform: scale(1); }
+        50% { transform: scale(1.2); }
+        100% { transform: scale(1); }
+      }
+
+      @keyframes rateBounce {
+        0%, 20%, 53%, 80%, 100% {
+          animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+          transform: translate3d(0, 0, 0);
+        }
+        40%, 43% {
+          animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+          transform: translate3d(0, -8px, 0);
+        }
+        70% {
+          animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+          transform: translate3d(0, -4px, 0);
+        }
+        90% {
+          transform: translate3d(0, -1px, 0);
+        }
+      }
+
+      @keyframes ratePulse {
+        0% { opacity: 1; }
+        50% { opacity: 0.5; }
+        100% { opacity: 1; }
+      }
+    `;
+  },
+
+  /**
+   * 获取响应式样式
+   */
+  getResponsiveStyle: (props: {
+    breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    size: RateSize;
+  }): React.CSSProperties => {
+    const { breakpoint = 'md', size } = props;
+    
+    // 在小屏幕上调整尺寸
+    const responsiveSize = breakpoint === 'xs' || breakpoint === 'sm' ? 'small' : size;
+    const sizeConfig = rateStyles.SIZE_MAP[responsiveSize as keyof typeof rateStyles.SIZE_MAP];
+
+    return {
+      fontSize: `${sizeConfig.size}px`,
+      gap: `${sizeConfig.gap}px`,
+    };
+  },
+};

package/src/components/display/Rate/Rate.tsx

@@ -0,0 +1,332 @@
+import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
+import { View, Text } from '@tarojs/components';
+import { rateStyles } from './Rate.styles';
+import type { RateProps, RateRef, StarState, StarProps, RateCharacter } from './Rate.types';
+
+/** 默认星星字符 */
+const DEFAULT_CHARACTER = '★';
+
+/** 单个星星组件 */
+const Star: React.FC<StarProps> = ({
+  index,
+  state,
+  disabled = false,
+  readonly = false,
+  size,
+  character = DEFAULT_CHARACTER,
+  color,
+  unselectedColor,
+  onClick,
+  // onHover and onLeave not supported in Taro.js
+}) => {
+  // isHovering removed as mouse events are not supported in Taro.js
+
+  const handleClick = useCallback(
+    (e: any) => {
+      if (disabled || readonly) return;
+      
+      const rect = e.currentTarget.getBoundingClientRect?.();
+      if (rect) {
+        const clickX = e.clientX || (e.touches?.[0]?.clientX);
+        const position = clickX - rect.left < rect.width / 2 ? 0.5 : 1;
+        onClick?.(index, position);
+      } else {
+        onClick?.(index, 1);
+      }
+    },
+    [disabled, readonly, index, onClick],
+  );
+
+  // Taro.js doesn't support mouse events, but we can keep touch events
+  // Mouse event handlers are removed as they're not supported in Taro
+
+  const starStyle = rateStyles['getStarStyle']({
+    size,
+    state,
+    disabled,
+    readonly,
+    color,
+    unselectedColor,
+    // isHovering removed as mouse events are not supported in Taro.js
+  });
+
+  const starClassName = rateStyles['getStarClassName']({
+    state,
+    // isHovering removed as mouse events are not supported in Taro.js
+  });
+
+  const renderCharacter = () => {
+    if (typeof character === 'function') {
+      try {
+        const result = (character as (index: number) => RateCharacter)(index);
+        return result || <Text>{DEFAULT_CHARACTER}</Text>;
+      } catch (error) {
+        return <Text>{DEFAULT_CHARACTER}</Text>;
+      }
+    }
+    if (typeof character === 'string') {
+      return <Text>{character}</Text>;
+    }
+    if (character) {
+      return character;
+    }
+    return <Text>{DEFAULT_CHARACTER}</Text>;
+  };
+
+  const renderHalfStar = () => {
+    if (state !== 'half') return null;
+
+    return (
+      <View
+        style={rateStyles['getHalfStarMaskStyle']({ color, unselectedColor })}
+        className="taro-uno-rate__star-half"
+      >
+        {renderCharacter()}
+      </View>
+    );
+  };
+
+  return (
+    <View
+      className={starClassName}
+      style={starStyle}
+      onClick={handleClick}
+      onTouchStart={handleClick}
+    >
+      {renderCharacter()}
+      {renderHalfStar()}
+    </View>
+  );
+};
+
+/** Rate评分组件 */
+export const RateComponent = forwardRef<RateRef, RateProps>((props, ref) => {
+  const {
+    value: controlledValue,
+    defaultValue = 0,
+    count = 5,
+    allowHalf = false,
+    allowClear = true,
+    disabled = false,
+    readonly = false,
+    size = 'default',
+    character = DEFAULT_CHARACTER,
+    tooltips = [],
+    showTooltips = false,
+    color,
+    unselectedColor,
+    autoFocus = false,
+    keyboard = true,
+    onChange,
+    onHoverChange,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    className,
+    style,
+    ...restProps
+  } = props;
+
+  const rateRef = useRef<any>(null);
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [hoverValue, setHoverValue] = useState<number | null>(null);
+  const [focused, setFocused] = useState(false);
+  const [showTooltip, setShowTooltip] = useState<number | null>(null);
+
+  // 处理受控模式
+  const currentValue = controlledValue !== undefined ? controlledValue : internalValue;
+
+  useEffect(() => {
+    if (controlledValue !== undefined) {
+      setInternalValue(controlledValue);
+    }
+  }, [controlledValue]);
+
+  // 自动聚焦
+  useEffect(() => {
+    if (autoFocus && !disabled && rateRef.current) {
+      // 在Taro中，可能需要特殊处理聚焦
+      setFocused(true);
+      onFocus?.();
+    }
+  }, [autoFocus, disabled, onFocus]);
+
+  // 计算星星状态
+  const getStarState = useCallback(
+    (index: number): StarState => {
+      const displayValue = hoverValue !== null ? hoverValue : currentValue;
+      const starValue = index + 1;
+
+      if (displayValue >= starValue) {
+        return 'full';
+      }
+      if (allowHalf && displayValue >= starValue - 0.5) {
+        return 'half';
+      }
+      return 'empty';
+    },
+    [currentValue, hoverValue, allowHalf],
+  );
+
+  // 处理值变化
+  const handleValueChange = useCallback(
+    (newValue: number) => {
+      // 如果允许清除且点击相同值，则清除
+      if (allowClear && newValue === currentValue) {
+        newValue = 0;
+      }
+
+      if (controlledValue === undefined) {
+        setInternalValue(newValue);
+      }
+
+      onChange?.(newValue);
+    },
+    [allowClear, currentValue, controlledValue, onChange],
+  );
+
+  // 处理星星点击
+  const handleStarClick = useCallback(
+    (index: number, position: number) => {
+      if (disabled || readonly) return;
+
+      const newValue = allowHalf && position < 1 ? index + 0.5 : index + 1;
+      handleValueChange(newValue);
+    },
+    [disabled, readonly, allowHalf, handleValueChange],
+  );
+
+  // 处理星星悬停
+  const handleStarHover = useCallback(
+    (index: number, position: number) => {
+      if (disabled || readonly) return;
+
+      const newHoverValue = allowHalf && position < 1 ? index + 0.5 : index + 1;
+      setHoverValue(newHoverValue);
+      onHoverChange?.(newHoverValue);
+
+      // 显示工具提示
+      if (showTooltips && tooltips[index]) {
+        setShowTooltip(index);
+      }
+    },
+    [disabled, readonly, allowHalf, showTooltips, tooltips, onHoverChange],
+  );
+
+  // 处理鼠标离开
+  const handleMouseLeave = useCallback(() => {
+    if (disabled || readonly) return;
+
+    setHoverValue(null);
+    setShowTooltip(null);
+    onHoverChange?.(currentValue);
+  }, [disabled, readonly, currentValue, onHoverChange]);
+
+  // 键盘事件处理移除，因为 Taro.js 不支持 onKeyDown 事件
+
+  // 处理聚焦
+  const handleFocus = useCallback(() => {
+    if (disabled) return;
+    setFocused(true);
+    onFocus?.();
+  }, [disabled, onFocus]);
+
+  // 处理失焦
+  
+  // 渲染工具提示
+  const renderTooltip = (index: number) => {
+    if (!showTooltips || !tooltips[index] || showTooltip !== index) return null;
+
+    return (
+      <View className="taro-uno-rate__tooltip" style={rateStyles['getTooltipStyle']()}>
+        <Text>{tooltips[index]}</Text>
+      </View>
+    );
+  };
+
+  // 计算样式
+  const containerStyle = rateStyles['getContainerStyle']({
+    size,
+    disabled,
+    readonly,
+    style: {
+      ...rateStyles['getAccessibilityStyle'](focused),
+      ...style,
+    },
+  });
+
+  const containerClassName = rateStyles['getClassName']({
+    size,
+    disabled,
+    readonly,
+    className,
+  });
+
+  // 暴露给外部的引用方法
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      element: rateRef.current,
+      getValue: () => currentValue,
+      setValue: (value: number) => {
+        if (value >= 0 && value <= count) {
+          handleValueChange(value);
+        }
+      },
+      reset: () => handleValueChange(0),
+      focus: () => {
+        setFocused(true);
+        onFocus?.();
+      },
+      blur: () => {
+        setFocused(false);
+        onBlur?.();
+      },
+    }),
+    [currentValue, count, handleValueChange, onFocus, onBlur],
+  );
+
+  return (
+    <View
+      ref={rateRef}
+      className={containerClassName}
+      style={containerStyle}
+      onClick={keyboard ? handleFocus : undefined}
+      // tabIndex, onBlur and onKeyDown not supported in Taro.js
+      role="slider"
+      aria-valuemin={0}
+      aria-valuemax={count}
+      aria-valuenow={currentValue}
+      aria-valuetext={`${currentValue} out of ${count} stars`}
+      aria-label={`Rating: ${currentValue} out of ${count} stars`}
+      aria-disabled={disabled}
+      aria-readonly={readonly}
+      {...restProps}
+    >
+      {Array.from({ length: count }, (_, index) => (
+        <View key={index} style={{ position: 'relative' }}>
+          <Star
+            index={index}
+            state={getStarState(index)}
+            disabled={disabled}
+            readonly={readonly}
+            size={size}
+            character={character as RateCharacter}
+            color={color}
+            unselectedColor={unselectedColor}
+            onClick={handleStarClick}
+            onHover={handleStarHover}
+            onLeave={handleMouseLeave}
+          />
+          {renderTooltip(index)}
+        </View>
+      ))}
+    </View>
+  );
+});
+
+/** Rate组件显示名称 */
+RateComponent.displayName = 'Rate';
+
+/** 导出Rate组件 */
+export const Rate = RateComponent;

package/src/components/display/Rate/Rate.types.ts

@@ -0,0 +1,111 @@
+import { ReactNode } from 'react';
+import { BaseComponentProps, Size } from '../../../types';
+
+/** 评分尺寸 */
+export type RateSize = Size | 'small' | 'medium' | 'large';
+
+/** 评分字符 */
+export type RateCharacter = ReactNode | string;
+
+/** 评分引用 */
+export interface RateRef {
+  /** 获取元素引用 */
+  element: any | null;
+  /** 获取当前评分值 */
+  getValue: () => number;
+  /** 设置评分值 */
+  setValue: (_value: number) => void;
+  /** 重置评分 */
+  reset: () => void;
+  /** 聚焦到组件 */
+  focus: () => void;
+  /** 失焦 */
+  blur: () => void;
+}
+
+/** 评分组件属性 */
+export interface RateProps extends BaseComponentProps {
+  /** 当前评分值 */
+  value?: number;
+  /** 默认评分值 */
+  defaultValue?: number;
+  /** 星星总数 */
+  count?: number;
+  /** 是否允许半星 */
+  allowHalf?: boolean;
+  /** 是否允许清除 */
+  allowClear?: boolean;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 是否只读 */
+  readonly?: boolean;
+  /** 评分尺寸 */
+  size?: RateSize;
+  /** 自定义字符 */
+  character?: RateCharacter | ((_index: number) => RateCharacter);
+  /** 提示文案数组 */
+  tooltips?: string[];
+  /** 是否显示提示文案 */
+  showTooltips?: boolean;
+  /** 自定义颜色 */
+  color?: string;
+  /** 自定义未选中颜色 */
+  unselectedColor?: string;
+  /** 是否自动聚焦 */
+  autoFocus?: boolean;
+  /** 键盘导航 */
+  keyboard?: boolean;
+  /** 评分改变时的回调 */
+  onChange?: (_value: number) => void;
+  /** hover时的回调 */
+  onHoverChange?: (_value: number) => void;
+  /** 聚焦时的回调 */
+  onFocus?: () => void;
+  /** 失焦时的回调 */
+  onBlur?: () => void;
+  /** 键盘事件回调 */
+  onKeyDown?: (_event: any) => void;
+}
+
+/** 评分工具函数接口 */
+export interface RateUtils {
+  /** 计算评分值 */
+  calculateValue: (_index: number, position: number, allowHalf: boolean) => number;
+  /** 获取星星状态 */
+  getStarState: (_index: number, value: number, hoverValue: number, allowHalf: boolean) => 'full' | 'half' | 'empty';
+  /** 格式化评分显示 */
+  formatValue: (_value: number, precision?: number) => string;
+  /** 验证评分值 */
+  validateValue: (_value: number, count: number) => boolean;
+  /** 获取可访问性属性 */
+  getAccessibilityProps: (_value: number, count: number, disabled: boolean) => Record<string, any>;
+}
+
+/** 星星状态 */
+export type StarState = 'full' | 'half' | 'empty';
+
+/** 星星属性 */
+export interface StarProps {
+  /** 星星索引 */
+  index: number;
+  /** 星星状态 */
+  state: StarState;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 是否只读 */
+  readonly?: boolean;
+  /** 尺寸 */
+  size: RateSize;
+  /** 自定义字符 */
+  character?: RateCharacter;
+  /** 颜色 */
+  color?: string;
+  /** 未选中颜色 */
+  unselectedColor?: string;
+  /** 点击回调 */
+  onClick?: (_index: number, position: number) => void;
+  /** hover回调 - not supported in Taro.js */
+  onHover?: (_index: number, position: number) => void;
+  /** 离开回调 - not supported in Taro.js */
+  onLeave?: () => void;
+}