taro-uno-ui 1.0.1 → 1.0.2

package/src/components/feedback/Tooltip/Tooltip.tsx

@@ -1,302 +0,0 @@
-import React, { forwardRef } from 'react';
-import { View, Text } from '@tarojs/components';
-import type { ITouchEvent } from '@tarojs/components';
-import { TooltipProps, TooltipRef, TooltipTrigger, TooltipEventHandler } from './Tooltip.types';
-import { tooltipStyles } from './Tooltip.styles';
-
-export const Tooltip = forwardRef<TooltipRef, TooltipProps>((props, ref) => {
-  const {
-    title,
-    trigger = 'hover',
-    placement = 'top',
-    arrow = true,
-    visible: controlledVisible,
-    defaultVisible = false,
-    color,
-    overlayStyle,
-    overlayClassName,
-    children,
-    mouseEnterDelay = 100,
-    mouseLeaveDelay = 100,
-    clickOutsideToClose = true,
-    alignPoint = false,
-    className,
-    style,
-    onVisibleChange,
-    onShow,
-    onHide,
-    animation: _animation, // Extract to avoid conflict with Taro.js View
-    showDelay,
-    hideDelay,
-    popupStyle,
-    disabled = false,
-    ...rest
-  } = props;
-
-  const [internalVisible, setInternalVisible] = React.useState(defaultVisible);
-  const [internalTitle, setInternalTitle] = React.useState(title);
-  const [timer, setTimer] = React.useState<NodeJS.Timeout | null>(null);
-  const visibleRef = React.useRef(internalVisible);
-
-  // Update ref when state changes
-  React.useEffect(() => {
-    visibleRef.current = internalVisible;
-  }, [internalVisible]);
-
-  // 处理受控模式
-  const visible = controlledVisible !== undefined ? controlledVisible : internalVisible;
-
-  // 清除定时器
-  const clearTimer = React.useCallback(() => {
-    if (timer) {
-      clearTimeout(timer);
-      setTimer(null);
-    }
-  }, [timer]);
-
-  // 设置定时器
-  const setTimerCallback = React.useCallback(
-    (callback: () => void, delay: number) => {
-      clearTimer();
-      const newTimer = setTimeout(callback, delay);
-      setTimer(newTimer);
-    },
-    [clearTimer],
-  );
-
-  // 显示提示
-  const showTooltip = React.useCallback(() => {
-    if (!visibleRef.current) {
-      setInternalVisible(true);
-      onVisibleChange?.(true);
-      onShow?.();
-    }
-  }, [onVisibleChange, onShow]);
-
-  // 隐藏提示
-  const hideTooltip = React.useCallback(() => {
-    if (visibleRef.current) {
-      setInternalVisible(false);
-      onVisibleChange?.(false);
-      onHide?.();
-    }
-  }, [onVisibleChange, onHide]);
-
-  // 获取触发器数组
-  const getTriggers = React.useCallback((triggers: TooltipTrigger | TooltipTrigger[]) => {
-    return Array.isArray(triggers) ? triggers : [triggers];
-  }, []);
-
-  // 处理触摸开始（hover触发）
-  const handleTouchStart = React.useCallback(() => {
-    if (disabled) return;
-    const triggers = getTriggers(trigger);
-    if (triggers.includes('hover')) {
-      const delay = showDelay !== undefined ? showDelay : mouseEnterDelay;
-      setTimerCallback(showTooltip, delay);
-    }
-  }, [disabled, trigger, mouseEnterDelay, showDelay, showTooltip, setTimerCallback, getTriggers]);
-
-  // 处理触摸结束（hover触发）
-  const handleTouchEnd = React.useCallback(() => {
-    if (disabled) return;
-    const triggers = getTriggers(trigger);
-    if (triggers.includes('hover')) {
-      const delay = hideDelay !== undefined ? hideDelay : mouseLeaveDelay;
-      setTimerCallback(hideTooltip, delay);
-    }
-  }, [disabled, trigger, mouseLeaveDelay, hideDelay, hideTooltip, setTimerCallback, getTriggers]);
-
-  // 处理鼠标进入（hover触发 - web环境）
-  const handleMouseEnter = React.useCallback(() => {
-    if (disabled) return;
-    const triggers = getTriggers(trigger);
-    if (triggers.includes('hover')) {
-      const delay = showDelay !== undefined ? showDelay : mouseEnterDelay;
-      setTimerCallback(showTooltip, delay);
-    }
-  }, [disabled, trigger, mouseEnterDelay, showDelay, showTooltip, setTimerCallback, getTriggers]);
-
-  // 处理鼠标离开（hover触发 - web环境）
-  const handleMouseLeave = React.useCallback(() => {
-    if (disabled) return;
-    const triggers = getTriggers(trigger);
-    if (triggers.includes('hover')) {
-      const delay = hideDelay !== undefined ? hideDelay : mouseLeaveDelay;
-      setTimerCallback(hideTooltip, delay);
-    }
-  }, [disabled, trigger, mouseLeaveDelay, hideDelay, hideTooltip, setTimerCallback, getTriggers]);
-
-  // 处理点击
-  const handleClick = React.useCallback(
-    (_event: ITouchEvent) => {
-      if (disabled) return;
-      const triggers = getTriggers(trigger);
-      if (triggers.includes('click')) {
-        if (visible) {
-          hideTooltip();
-        } else {
-          showTooltip();
-        }
-      }
-    },
-    [disabled, trigger, visible, showTooltip, hideTooltip, getTriggers],
-  );
-
-  // 处理焦点
-  const handleFocus = React.useCallback(() => {
-    if (disabled) return;
-    const triggers = getTriggers(trigger);
-    if (triggers.includes('focus')) {
-      showTooltip();
-    }
-  }, [disabled, trigger, showTooltip, getTriggers]);
-
-  // 处理失焦
-  const handleBlur = React.useCallback(() => {
-    if (disabled) return;
-    const triggers = getTriggers(trigger);
-    if (triggers.includes('focus')) {
-      hideTooltip();
-    }
-  }, [disabled, trigger, hideTooltip, getTriggers]);
-
-  // 处理长按（contextMenu触发）
-  const handleLongPress = React.useCallback(
-    (_event: ITouchEvent) => {
-      if (disabled) return;
-      const triggers = getTriggers(trigger);
-      if (triggers.includes('contextMenu')) {
-        if (visible) {
-          hideTooltip();
-        } else {
-          showTooltip();
-        }
-      }
-    },
-    [disabled, trigger, visible, showTooltip, hideTooltip, getTriggers],
-  );
-
-  // 组件卸载时清除定时器
-  React.useEffect(() => {
-    return () => {
-      clearTimer();
-    };
-  }, [clearTimer]);
-
-  // 更新标题
-  React.useEffect(() => {
-    setInternalTitle(title);
-  }, [title]);
-
-  // 暴露给外部的引用方法
-  React.useImperativeHandle(
-    ref,
-    () => ({
-      show: showTooltip,
-      hide: hideTooltip,
-      getVisible: () => visible,
-      updateTitle: (newTitle: React.ReactNode) => {
-        setInternalTitle(newTitle);
-      },
-      reposition: () => {
-        // Taro环境中的重新定位逻辑
-        console.log('Reposition tooltip - Taro environment');
-      },
-    }),
-    [showTooltip, hideTooltip, visible],
-  );
-
-  // 渲染箭头
-  const renderArrow = React.useCallback(() => {
-    if (!arrow) return null;
-
-    const arrowStyle = tooltipStyles['getArrowStyle'](placement, color, arrow);
-
-    return <View style={arrowStyle} />;
-  }, [arrow, placement, color]);
-
-  // 渲染提示内容
-  const renderTooltip = React.useCallback(() => {
-    if (!visible || !internalTitle) return null;
-
-    const tooltipStyle = tooltipStyles['getTooltipStyle'](placement, color, overlayStyle);
-    const contentStyle = tooltipStyles['getContentStyle'](color);
-
-    return (
-      <View
-        data-tooltip="true"
-        style={tooltipStyle}
-        className={overlayClassName}
-        role="tooltip"
-        aria-hidden={!visible}
-        id="tooltip-content"
-      >
-        {renderArrow()}
-        <View style={contentStyle}>
-          <Text>{internalTitle}</Text>
-        </View>
-      </View>
-    );
-  }, [visible, placement, color, overlayStyle, overlayClassName, internalTitle, renderArrow]);
-
-  // 获取容器事件处理器
-  const getContainerEvents = React.useCallback(() => {
-    const triggers = getTriggers(trigger);
-    const events: Record<string, TooltipEventHandler> = {};
-
-    if (triggers.includes('hover')) {
-      events['onTouchStart'] = handleTouchStart;
-      events['onTouchEnd'] = handleTouchEnd;
-      events['onMouseEnter'] = handleMouseEnter;
-      events['onMouseLeave'] = handleMouseLeave;
-    }
-
-    if (triggers.includes('click')) {
-      events['onClick'] = handleClick;
-    }
-
-    if (triggers.includes('focus')) {
-      events['onFocus'] = handleFocus;
-      events['onBlur'] = handleBlur;
-    }
-
-    if (triggers.includes('contextMenu')) {
-      events['onLongPress'] = handleLongPress;
-    }
-
-    return events;
-  }, [
-    trigger,
-    getTriggers,
-    handleTouchStart,
-    handleTouchEnd,
-    handleMouseEnter,
-    handleMouseLeave,
-    handleClick,
-    handleFocus,
-    handleBlur,
-    handleLongPress,
-  ]);
-
-  const containerStyle = tooltipStyles['getContainerStyle'](style);
-  const containerEvents = getContainerEvents();
-
-  return (
-    <View
-      style={containerStyle}
-      className={className}
-      {...containerEvents}
-      {...rest}
-      aria-describedby={visible ? 'tooltip-content' : undefined}
-      aria-expanded={visible}
-    >
-      {children}
-      {renderTooltip()}
-    </View>
-  );
-});
-
-Tooltip.displayName = 'Tooltip';
-
-export default Tooltip;

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

@@ -1,166 +0,0 @@
-import React from 'react';
-import type { ITouchEvent } from '@tarojs/components';
-
-export type TooltipPlacement =
-  | 'top'
-  | 'bottom'
-  | 'left'
-  | 'right'
-  | 'topLeft'
-  | 'topRight'
-  | 'bottomLeft'
-  | 'bottomRight'
-  | 'leftTop'
-  | 'leftBottom'
-  | 'rightTop'
-  | 'rightBottom';
-
-export type TooltipTrigger = 'hover' | 'click' | 'focus' | 'contextMenu';
-
-export interface TooltipProps {
-  /** 提示内容 */
-  title: React.ReactNode;
-  /** 触发方式 */
-  trigger?: TooltipTrigger | TooltipTrigger[];
-  /** 提示位置 */
-  placement?: TooltipPlacement;
-  /** 是否显示箭头 */
-  arrow?: boolean;
-  /** 是否显示 */
-  visible?: boolean;
-  /** 默认是否显示 */
-  defaultVisible?: boolean;
-  /** 颜色主题 */
-  color?: string;
-  /** 主题样式 */
-  theme?: 'light' | 'dark' | string;
-  /** 背景色 */
-  overlayStyle?: React.CSSProperties;
-  /** 提示框类名 */
-  overlayClassName?: string;
-  /** 子元素 */
-  children: React.ReactNode;
-  /** 延迟显示时间（毫秒） */
-  mouseEnterDelay?: number;
-  /** 延迟隐藏时间（毫秒） */
-  mouseLeaveDelay?: number;
-  /** 点击外部是否关闭 */
-  clickOutsideToClose?: boolean;
-  /** 是否在子元素变化时重新定位 */
-  alignPoint?: boolean;
-  /** 自定义类名 */
-  className?: string;
-  /** 自定义样式 */
-  style?: React.CSSProperties;
-  /** 显示/隐藏回调 */
-  onVisibleChange?: (_visible: boolean) => void;
-  /** 显示回调 */
-  onShow?: () => void;
-  /** 隐藏回调 */
-  onHide?: () => void;
-  /** 无障碍标签 */
-  accessibilityLabel?: string;
-  /** 无障碍角色 */
-  accessibilityRole?: string;
-  /** 无障碍提示 */
-  accessibilityHint?: string;
-  /** 动画效果 */
-  animation?: TooltipAnimation;
-  /** 显示延迟时间（毫秒） */
-  showDelay?: number;
-  /** 隐藏延迟时间（毫秒） */
-  hideDelay?: number;
-  /** 弹出层样式 */
-  popupStyle?: React.CSSProperties;
-  /** 是否禁用 */
-  disabled?: boolean;
-  /** 是否支持嵌套 */
-  nested?: boolean;
-  /** 最大宽度 */
-  maxWidth?: number;
-  /** 偏移量 */
-  offset?: [number, number];
-  /** 是否包裹子元素 */
-  wrap?: boolean;
-}
-
-export interface TooltipRef {
-  /** 显示提示 */
-  show: () => void;
-  /** 隐藏提示 */
-  hide: () => void;
-  /** 获取当前显示状态 */
-  getVisible: () => boolean;
-  /** 更新提示内容 */
-  updateTitle: (_title: React.ReactNode) => void;
-  /** 重新定位 */
-  reposition: () => void;
-}
-
-// 事件处理器类型
-export type TooltipEventHandler = (_event: ITouchEvent) => void;
-
-// Tooltip 状态类型
-export interface TooltipState {
-  visible: boolean;
-  title: React.ReactNode;
-  placement: TooltipPlacement;
-}
-
-// Tooltip 主题类型
-export type TooltipTheme = 'light' | 'dark' | 'primary' | 'success' | 'warning' | 'error' | 'info';
-
-// Tooltip 动画类型
-export type TooltipAnimation = 'fade' | 'scale' | 'slide' | 'none';
-
-// Tooltip 位置类型
-export type TooltipPosition = {
-  x: number;
-  y: number;
-};
-
-// Tooltip 主题配置类型
-export interface TooltipThemeConfig {
-  backgroundColor: string;
-  textColor: string;
-  borderColor: string;
-  arrowColor: string;
-  shadow: string;
-}
-
-// Tooltip 动画配置类型
-export interface TooltipAnimationConfig {
-  duration: number;
-  easing: string;
-}
-
-// Tooltip 事件类型
-export type TooltipEventType = 'mouseenter' | 'mouseleave' | 'click' | 'focus' | 'blur' | 'contextmenu';
-
-// Tooltip 选项类型
-export interface TooltipOptions {
-  trigger?: TooltipTrigger | TooltipTrigger[];
-  placement?: TooltipPlacement;
-  theme?: TooltipTheme;
-  animation?: TooltipAnimation;
-  delay?: number;
-  arrow?: boolean;
-  maxWidth?: number;
-  zIndex?: number;
-  autoAdjustPosition?: boolean;
-  clickOutsideToHide?: boolean;
-  nestedTrigger?: boolean;
-  accessible?: boolean;
-}
-
-// Tooltip 实例类型
-export interface TooltipInstance {
-  id: string;
-  props: TooltipProps;
-  visible: boolean;
-  show: () => void;
-  hide: () => void;
-  toggle: () => void;
-  update: (_props: Partial<TooltipProps>) => void;
-  destroy: () => void;
-}

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

@@ -1,3 +0,0 @@
-export { Tooltip } from './Tooltip';
-export type { TooltipProps, TooltipRef, TooltipPlacement, TooltipTrigger } from './Tooltip.types';
-export { tooltipStyles } from './Tooltip.styles';

package/src/components/feedback/Tooltip/index.tsx

@@ -1,246 +0,0 @@
-/**
- * Tooltip 文字提示组件
- * 提供丰富的文字提示功能，支持多种触发方式、位置、主题和动画效果
- * 专为 Taro 环境优化，完全兼容多端开发
- */
-
-import { Tooltip as TooltipComponent } from './Tooltip';
-import type {
-  TooltipProps,
-  TooltipRef,
-  TooltipTrigger,
-  TooltipPlacement,
-  TooltipTheme,
-  TooltipAnimation,
-  TooltipState,
-  TooltipAnimationConfig,
-  TooltipPosition,
-  TooltipThemeConfig,
-  TooltipEventType,
-  TooltipEventHandler,
-  TooltipOptions,
-  TooltipInstance,
-} from './Tooltip.types';
-import tooltipStyles from './Tooltip.styles';
-import { getTooltipClasses, getArrowClasses, tooltipCssClasses } from './Tooltip.styles';
-
-// 主要导出
-export { TooltipComponent as Tooltip };
-export type {
-  TooltipProps,
-  TooltipRef,
-  TooltipTrigger,
-  TooltipPlacement,
-  TooltipTheme,
-  TooltipAnimation,
-  TooltipState,
-  TooltipAnimationConfig,
-  TooltipPosition,
-  TooltipThemeConfig,
-  TooltipEventType,
-  TooltipEventHandler,
-  TooltipOptions,
-  TooltipInstance,
-};
-
-// 样式相关导出
-export { tooltipStyles, getTooltipClasses, getArrowClasses, tooltipCssClasses };
-
-// 重新导出常用类型
-export type { TooltipProps as ITooltipProps, TooltipRef as ITooltipRef } from './Tooltip.types';
-
-// 导出工具函数 - 针对 Taro 环境优化
-export const TooltipUtils = {
-  /**
-   * 创建 Tooltip 实例 - Taro 兼容版本
-   */
-  create: (props: TooltipProps): TooltipInstance => {
-    // 返回 Tooltip 实例创建逻辑
-    return {
-      id: `tooltip-${Date.now()}`,
-      props,
-      visible: false,
-      show: () => {
-        // Taro 环境中的显示逻辑
-      },
-      hide: () => {
-        // Taro 环境中的隐藏逻辑
-      },
-      toggle: () => {
-        // Taro 环境中的切换逻辑
-      },
-      update: (newProps: Partial<TooltipProps>) => {
-        // Taro 环境中的更新逻辑
-      },
-      destroy: () => {
-        // Taro 环境中的销毁逻辑
-      },
-    };
-  },
-
-  /**
-   * 显示 Tooltip - Taro 兼容版本
-   */
-  show: (elementId: string, content: string, options?: Partial<TooltipProps>) => {
-    // 在 Taro 环境中通过选择器显示指定元素的 Tooltip
-    // 实际应用中可以使用 Taro 的选择器 API
-  },
-
-  /**
-   * 隐藏 Tooltip - Taro 兼容版本
-   */
-  hide: (elementId: string) => {
-    // 在 Taro 环境中隐藏指定元素的 Tooltip
-    // 实际应用中可以使用 Taro 的选择器 API
-  },
-
-  /**
-   * 更新 Tooltip 内容 - Taro 兼容版本
-   */
-  update: (elementId: string, content: string) => {
-    // 在 Taro 环境中更新指定元素的 Tooltip 内容
-    // 实际应用中可以使用 Taro 的选择器 API
-  },
-
-  /**
-   * 销毁 Tooltip - Taro 兼容版本
-   */
-  destroy: (elementId: string) => {
-    // 在 Taro 环境中销毁指定元素的 Tooltip
-    // 实际应用中可以使用 Taro 的选择器 API
-  },
-};
-
-// 导出默认配置 - 针对 Taro 环境优化
-export const TooltipConfig = {
-  // 默认配置
-  defaultTrigger: 'hover' as TooltipTrigger,
-  defaultPlacement: 'top' as TooltipPlacement,
-  defaultTheme: 'dark' as TooltipTheme,
-  defaultAnimation: 'fade' as TooltipAnimation,
-  defaultShowDelay: 100,
-  defaultHideDelay: 100,
-  defaultArrow: true,
-  defaultMaxWidth: 350,
-  defaultZIndex: 1060,
-  autoAdjustPosition: true,
-  clickOutsideToHide: true,
-  nestedTrigger: true,
-  accessible: true,
-
-  // 主题配置
-  themes: {
-    light: {
-      backgroundColor: '#ffffff',
-      textColor: '#111827',
-      borderColor: '#e5e7eb',
-      arrowColor: '#ffffff',
-      shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
-    },
-    dark: {
-      backgroundColor: '#1f2937',
-      textColor: '#f9fafb',
-      borderColor: '#374151',
-      arrowColor: '#1f2937',
-      shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.1)',
-    },
-    primary: {
-      backgroundColor: '#0ea5e9',
-      textColor: '#ffffff',
-      borderColor: '#0ea5e9',
-      arrowColor: '#0ea5e9',
-      shadow: '0 4px 6px -1px rgba(14, 165, 233, 0.3), 0 2px 4px -1px rgba(14, 165, 233, 0.1)',
-    },
-    success: {
-      backgroundColor: '#22c55e',
-      textColor: '#ffffff',
-      borderColor: '#22c55e',
-      arrowColor: '#22c55e',
-      shadow: '0 4px 6px -1px rgba(34, 197, 94, 0.3), 0 2px 4px -1px rgba(34, 197, 94, 0.1)',
-    },
-    warning: {
-      backgroundColor: '#f59e0b',
-      textColor: '#ffffff',
-      borderColor: '#f59e0b',
-      arrowColor: '#f59e0b',
-      shadow: '0 4px 6px -1px rgba(245, 158, 11, 0.3), 0 2px 4px -1px rgba(245, 158, 11, 0.1)',
-    },
-    error: {
-      backgroundColor: '#ef4444',
-      textColor: '#ffffff',
-      borderColor: '#ef4444',
-      arrowColor: '#ef4444',
-      shadow: '0 4px 6px -1px rgba(239, 68, 68, 0.3), 0 2px 4px -1px rgba(239, 68, 68, 0.1)',
-    },
-    info: {
-      backgroundColor: '#3b82f6',
-      textColor: '#ffffff',
-      borderColor: '#3b82f6',
-      arrowColor: '#3b82f6',
-      shadow: '0 4px 6px -1px rgba(59, 130, 246, 0.3), 0 2px 4px -1px rgba(59, 130, 246, 0.1)',
-    },
-  },
-
-  // 动画配置
-  animations: {
-    fade: {
-      duration: 150,
-      easing: 'ease-out',
-    },
-    scale: {
-      duration: 150,
-      easing: 'ease-out',
-    },
-    slide: {
-      duration: 150,
-      easing: 'ease-out',
-    },
-    none: {
-      duration: 0,
-      easing: 'linear',
-    },
-  },
-
-  // 位置配置
-  placements: {
-    top: {
-      offset: [0, -8],
-    },
-    bottom: {
-      offset: [0, 8],
-    },
-    left: {
-      offset: [-8, 0],
-    },
-    right: {
-      offset: [8, 0],
-    },
-    topLeft: {
-      offset: [0, -8],
-    },
-    topRight: {
-      offset: [0, -8],
-    },
-    bottomLeft: {
-      offset: [0, 8],
-    },
-    bottomRight: {
-      offset: [0, 8],
-    },
-    leftTop: {
-      offset: [-8, 0],
-    },
-    leftBottom: {
-      offset: [-8, 0],
-    },
-    rightTop: {
-      offset: [8, 0],
-    },
-    rightBottom: {
-      offset: [8, 0],
-    },
-  },
-};
-
-// 导出 Tooltip 组件作为默认导出
-export default TooltipComponent;