taro-uno-ui 1.0.0 → 1.0.2

package/src/components/feedback/Notification/Notification.tsx

@@ -1,347 +0,0 @@
-import React, { forwardRef, useRef, useEffect, useState, useCallback } from 'react';
-import { View, Text } from '@tarojs/components';
-import {
-  NotificationProps,
-  NotificationRef,
-  NotificationType,
-  DEFAULT_NOTIFICATION_CONFIG,
-} from './Notification.types';
-import { notificationStyles, notificationStyleHelpers } from './Notification.styles';
-import { cn } from '../../../utils';
-
-export const Notification = forwardRef<NotificationRef, NotificationProps>((props, ref) => {
-  const {
-    type = 'info',
-    title,
-    content,
-    icon,
-    closable = DEFAULT_NOTIFICATION_CONFIG.defaultClosable,
-    duration = DEFAULT_NOTIFICATION_CONFIG.defaultDuration,
-    placement = DEFAULT_NOTIFICATION_CONFIG.defaultPlacement,
-    className,
-    style,
-    onClose,
-    onClick,
-    showClose = DEFAULT_NOTIFICATION_CONFIG.defaultShowClose,
-    showIcon = DEFAULT_NOTIFICATION_CONFIG.defaultShowIcon,
-    autoClose = DEFAULT_NOTIFICATION_CONFIG.defaultAutoClose,
-    animation = DEFAULT_NOTIFICATION_CONFIG.defaultAnimation,
-    ...rest
-  } = props;
-
-  // 错误状态管理
-  const [hasError, setHasError] = useState(false);
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
-
-  // 错误边界处理
-  const handleError = useCallback(
-    (error: Error, context: string) => {
-      console.error(`Notification error in ${context}:`, error);
-      setHasError(true);
-      setErrorMessage(error.message);
-
-      // 自动关闭错误的通知
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
-      }
-
-      // 延迟关闭以显示错误状态
-      timerRef.current = setTimeout(() => {
-        setVisible(false);
-        setIsClosing(true);
-        onClose?.();
-      }, 3000) as unknown as number;
-    },
-    [onClose],
-  );
-
-  // 状态管理
-  const [visible, setVisible] = useState(true);
-  const [closeHovered, setCloseHovered] = useState(false);
-  const [isClosing, setIsClosing] = useState(false);
-  const [paused, setPaused] = useState(false);
-
-  // 定时器引用
-  const timerRef = useRef<number | null>(null);
-  const startTimeRef = useRef<number>(0);
-  const remainingTimeRef = useRef<number>(duration);
-
-  // 处理自动关闭
-  const handleAutoClose = useCallback(() => {
-    try {
-      if (!autoClose || duration <= 0 || paused) return;
-
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
-      }
-
-      // 使用更安全的定时器处理
-      const timeoutId = setTimeout(() => {
-        try {
-          setVisible(false);
-          setIsClosing(true);
-          onClose?.();
-        } catch (error) {
-          handleError(error as Error, 'autoCloseTimeout');
-        }
-      }, remainingTimeRef.current);
-
-      timerRef.current = timeoutId as unknown as number;
-      startTimeRef.current = Date.now();
-    } catch (error) {
-      handleError(error as Error, 'handleAutoClose');
-    }
-  }, [autoClose, duration, paused, onClose, remainingTimeRef, handleError]);
-
-  // 暂停自动关闭
-  const pauseProgress = useCallback(() => {
-    try {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-        const elapsed = Date.now() - startTimeRef.current;
-        remainingTimeRef.current = Math.max(0, remainingTimeRef.current - elapsed);
-        setPaused(true);
-        timerRef.current = null;
-      }
-    } catch (error) {
-      handleError(error as Error, 'pauseProgress');
-    }
-  }, [handleError]);
-
-  // 恢复自动关闭
-  const resumeProgress = useCallback(() => {
-    try {
-      setPaused(false);
-      handleAutoClose();
-    } catch (error) {
-      handleError(error as Error, 'resumeProgress');
-    }
-  }, [handleAutoClose, handleError]);
-
-  // 暴露方法给ref
-  React.useImperativeHandle(ref, () => ({
-    hide: () => {
-      setVisible(false);
-      setIsClosing(true);
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
-      }
-      onClose?.();
-      return true;
-    },
-    show: () => {
-      setVisible(true);
-      setIsClosing(false);
-      remainingTimeRef.current = duration;
-      handleAutoClose();
-      return true;
-    },
-    update: (newProps: Partial<NotificationProps>) => {
-      // 这里可以实现更新通知内容的逻辑
-      console.log('Update notification:', newProps);
-      return true;
-    },
-    pauseProgress,
-    resumeProgress,
-    getState: () => ({
-      visible,
-      paused,
-      closing: isClosing,
-    }),
-  }));
-
-  // 自动关闭效果
-  useEffect(() => {
-    handleAutoClose();
-
-    return () => {
-      // 清理定时器
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
-      }
-    };
-  }, [handleAutoClose]);
-
-  // 组件卸载时的清理
-  useEffect(() => {
-    return () => {
-      // 确保所有定时器都被清理
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
-      }
-
-      // 清理状态引用
-      setHasError(false);
-      setErrorMessage(null);
-    };
-  }, []);
-
-  // 关闭处理
-  const handleClose = useCallback(
-    (e?: any) => {
-      e?.stopPropagation();
-      setVisible(false);
-      setIsClosing(true);
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
-      }
-      onClose?.();
-    },
-    [onClose],
-  );
-
-  // 点击处理
-  const handleClick = useCallback(
-    (e?: any) => {
-      try {
-        onClick?.(e);
-      } catch (error) {
-        handleError(error as Error, 'handleClick');
-      }
-    },
-    [onClick, handleError],
-  );
-
-  // 触摸开始处理（替代鼠标悬停）
-  const handleTouchStart = useCallback(
-    (_e?: any) => {
-      try {
-        setCloseHovered(true);
-        if (autoClose) {
-          pauseProgress();
-        }
-      } catch (error) {
-        handleError(error as Error, 'handleTouchStart');
-      }
-    },
-    [autoClose, pauseProgress, handleError],
-  );
-
-  // 触摸结束处理（替代鼠标离开）
-  const handleTouchEnd = useCallback(
-    (_e?: any) => {
-      try {
-        setCloseHovered(false);
-        if (autoClose && paused) {
-          resumeProgress();
-        }
-      } catch (error) {
-        handleError(error as Error, 'handleTouchEnd');
-      }
-    },
-    [autoClose, paused, resumeProgress, handleError],
-  );
-
-  // 渲染图标
-  const renderIcon = useCallback(() => {
-    try {
-      if (!showIcon) return null;
-
-      if (icon) {
-        return <View className={notificationStyles['icon']}>{icon}</View>;
-      }
-
-      const defaultIcons: Record<NotificationType, string> = {
-        success: '✓',
-        error: '✕',
-        warning: '⚠',
-        info: 'ℹ',
-      };
-
-      return (
-        <View className={notificationStyles['icon']}>
-          <Text className={notificationStyles['iconText']}>{defaultIcons[type]}</Text>
-        </View>
-      );
-    } catch (error) {
-      handleError(error as Error, 'renderIcon');
-      return null;
-    }
-  }, [showIcon, icon, type, handleError]);
-
-  // 计算容器样式
-  const containerStyle = React.useMemo(() => {
-    try {
-      const baseStyle = notificationStyleHelpers.getBaseStyle(placement, style);
-      const typeStyle = notificationStyleHelpers.getTypeStyle(type);
-      const animationStyle = notificationStyleHelpers.getAnimationStyle(animation, visible);
-
-      return {
-        ...baseStyle,
-        ...typeStyle,
-        ...animationStyle,
-      };
-    } catch (error) {
-      handleError(error as Error, 'containerStyle');
-      return notificationStyleHelpers.getBaseStyle(placement, style);
-    }
-  }, [placement, style, type, animation, visible, handleError]);
-
-  // 计算类名
-  const containerClassName = React.useMemo(() => {
-    try {
-      const classes = [
-        'taro-uno-notification',
-        `taro-uno-notification-${type}`,
-        `taro-uno-notification-${placement}`,
-        isClosing && 'taro-uno-notification-closing',
-        closeHovered && 'taro-uno-notification-hovered',
-        paused && 'taro-uno-notification-paused',
-        hasError && 'taro-uno-notification-error',
-        className,
-      ];
-      return cn(...classes);
-    } catch (error) {
-      handleError(error as Error, 'containerClassName');
-      return 'taro-uno-notification taro-uno-notification-error';
-    }
-  }, [type, placement, isClosing, closeHovered, paused, hasError, className, handleError]);
-
-  // 如果不可见，返回null
-  if (!visible) return null;
-
-  return (
-    <View
-      style={containerStyle}
-      className={containerClassName}
-      onClick={handleClick}
-      onTouchStart={handleTouchStart}
-      onTouchEnd={handleTouchEnd}
-      {...rest}
-    >
-      {renderIcon()}
-
-      <View className={notificationStyles['content']}>
-        {hasError ? (
-          <Text className={notificationStyles['title']}>通知错误</Text>
-        ) : (
-          title && <Text className={notificationStyles['title']}>{title}</Text>
-        )}
-        {hasError ? (
-          <Text className={notificationStyles['text']}>{errorMessage || '通知显示异常'}</Text>
-        ) : (
-          content && <Text className={notificationStyles['text']}>{content}</Text>
-        )}
-      </View>
-
-      {showClose && closable && (
-        <View
-          className={cn(notificationStyles['close'], closeHovered && notificationStyles['closeHover'])}
-          onClick={handleClose}
-        >
-          <Text className={notificationStyles['closeIcon']}>✕</Text>
-        </View>
-      )}
-    </View>
-  );
-});
-
-Notification.displayName = 'Notification';
-
-export default Notification;

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

@@ -1,339 +0,0 @@
-import React from 'react';
-import { ITouchEvent } from '@tarojs/components';
-
-/** 通知类型 */
-export type NotificationType = 'success' | 'error' | 'warning' | 'info';
-
-/** 通知位置 */
-export type NotificationPlacement = 'topRight' | 'topLeft' | 'bottomRight' | 'bottomLeft' | 'top' | 'bottom';
-
-/** 通知动画类型 */
-export type NotificationAnimation = 'fade' | 'slide' | 'scale' | 'bounce' | 'none';
-
-/** 通知项接口 */
-export interface NotificationItem {
-  /** 通知唯一标识 */
-  key: string;
-  /** 通知类型 */
-  type?: NotificationType;
-  /** 通知标题 */
-  title?: React.ReactNode;
-  /** 通知内容 */
-  content?: React.ReactNode;
-  /** 自定义图标 */
-  icon?: React.ReactNode;
-  /** 是否可关闭 */
-  closable?: boolean;
-  /** 显示时长（毫秒） */
-  duration?: number;
-  /** 通知位置 */
-  placement?: NotificationPlacement;
-  /** 自定义类名 */
-  className?: string;
-  /** 自定义样式 */
-  style?: React.CSSProperties;
-  /** 关闭回调 */
-  onClose?: (_key: string) => void;
-  /** 点击回调 */
-  onClick?: () => void;
-  /** 显示关闭按钮 */
-  showClose?: boolean;
-  /** 显示图标 */
-  showIcon?: boolean;
-  /** 动画类型 */
-  animation?: NotificationAnimation;
-  /** 创建时间 */
-  createdAt: number;
-}
-
-/** 通知组件属性 */
-export interface NotificationProps {
-  /** 通知类型 */
-  type?: NotificationType;
-  /** 通知标题 */
-  title?: React.ReactNode;
-  /** 通知内容 */
-  content?: React.ReactNode;
-  /** 自定义图标 */
-  icon?: React.ReactNode;
-  /** 是否可关闭 */
-  closable?: boolean;
-  /** 显示时长（毫秒） */
-  duration?: number;
-  /** 通知位置 */
-  placement?: NotificationPlacement;
-  /** 自定义类名 */
-  className?: string;
-  /** 自定义样式 */
-  style?: React.CSSProperties;
-  /** 关闭回调 */
-  onClose?: () => void;
-  /** 点击回调 */
-  onClick?: (event?: ITouchEvent) => void;
-  /** 显示关闭按钮 */
-  showClose?: boolean;
-  /** 显示图标 */
-  showIcon?: boolean;
-  /** 动画类型 */
-  animation?: NotificationAnimation;
-  /** 是否自动关闭 */
-  autoClose?: boolean;
-  /** 是否可拖拽 */
-  draggable?: boolean;
-  /** 拖拽阈值 */
-  dragThreshold?: number;
-  /** 堆叠索引 */
-  stackIndex?: number;
-  /** 悬停状态 */
-  hovered?: boolean;
-  /** 是否正在关闭 */
-  isClosing?: boolean;
-}
-
-/** 通知组件引用 */
-export interface NotificationRef {
-  /** 显示通知 */
-  show: () => boolean;
-  /** 隐藏通知 */
-  hide: () => boolean;
-  /** 更新通知内容 */
-  update: (_props: Partial<NotificationProps>) => boolean;
-  /** 暂停自动关闭 */
-  pauseProgress?: () => void;
-  /** 恢复自动关闭 */
-  resumeProgress?: () => void;
-  /** 获取通知状态 */
-  getState: () => {
-    visible: boolean;
-    paused: boolean;
-    closing: boolean;
-  };
-}
-
-/** 通知管理器属性 */
-export interface NotificationManagerProps {
-  /** 最大通知数量 */
-  maxCount?: number;
-  /** 默认位置 */
-  defaultPlacement?: NotificationPlacement;
-  /** 默认时长 */
-  defaultDuration?: number;
-  /** 默认动画 */
-  defaultAnimation?: NotificationAnimation;
-  /** 是否堆叠 */
-  stack?: boolean;
-  /** 堆叠最大数量 */
-  stackMaxCount?: number;
-  /** 允许拖拽 */
-  allowDrag?: boolean;
-  /** 拖拽阈值 */
-  dragThreshold?: number;
-  /** 显示分组 */
-  showGroup?: boolean;
-  /** 分组间隔 */
-  groupInterval?: number;
-  /** 自定义样式 */
-  style?: React.CSSProperties;
-  /** 自定义类名 */
-  className?: string;
-  /** 容器样式 */
-  containerStyle?: React.CSSProperties;
-  /** 容器类名 */
-  containerClassName?: string;
-  /** 进入回调 */
-  onEnter?: (_key: string) => void;
-  /** 离开回调 */
-  onLeave?: (_key: string) => void;
-  /** 全部关闭回调 */
-  onAllClose?: () => void;
-  /** 通知配置更新回调 */
-  onUpdate?: (_key: string, config: Partial<NotificationItem>) => void;
-}
-
-/** 通知管理器引用 */
-export interface NotificationManagerRef {
-  /** 显示通知 */
-  open: (_config: Omit<NotificationItem, 'key' | 'createdAt'>) => string;
-  /** 显示成功通知 */
-  success: (_config: Omit<NotificationItem, 'key' | 'createdAt' | 'type'>) => string;
-  /** 显示信息通知 */
-  info: (_config: Omit<NotificationItem, 'key' | 'createdAt' | 'type'>) => string;
-  /** 显示警告通知 */
-  warning: (_config: Omit<NotificationItem, 'key' | 'createdAt' | 'type'>) => string;
-  /** 显示错误通知 */
-  error: (_config: Omit<NotificationItem, 'key' | 'createdAt' | 'type'>) => string;
-  /** 关闭指定通知 */
-  close: (_key: string) => void;
-  /** 关闭所有通知 */
-  destroyAll: () => void;
-  /** 更新通知 */
-  update: (_key: string, config: Partial<NotificationItem>) => void;
-  /** 获取所有通知 */
-  getNotifications: () => NotificationItem[];
-  /** 获取通知数量 */
-  getCount: () => number;
-  /** 设置最大数量 */
-  setMaxCount: (_count: number) => void;
-  /** 设置默认位置 */
-  setDefaultPlacement: (_placement: NotificationPlacement) => void;
-  /** 设置默认时长 */
-  setDefaultDuration: (_duration: number) => void;
-  /** 暂停所有通知自动关闭 */
-  pauseAll: () => void;
-  /** 恢复所有通知自动关闭 */
-  resumeAll: () => void;
-  /** 清空历史记录 */
-  clearHistory: () => void;
-  /** 获取通知历史 */
-  getHistory: () => NotificationItem[];
-}
-
-/** 通知样式配置 */
-export interface NotificationStyleConfig {
-  /** 基础样式 */
-  base: React.CSSProperties;
-  /** 类型样式 */
-  type: Record<NotificationType, React.CSSProperties>;
-  /** 位置样式 */
-  placement: Record<NotificationPlacement, React.CSSProperties>;
-  /** 图标样式 */
-  icon: React.CSSProperties;
-  /** 内容样式 */
-  content: React.CSSProperties;
-  /** 标题样式 */
-  title: React.CSSProperties;
-  /** 文本样式 */
-  text: React.CSSProperties;
-  /** 关闭按钮样式 */
-  close: React.CSSProperties;
-  /** 悬停样式 */
-  closeHover: React.CSSProperties;
-  /** 关闭图标样式 */
-  closeIcon: React.CSSProperties;
-  /** 动画样式 */
-  animation: {
-    enter: React.CSSProperties;
-    enterActive: React.CSSProperties;
-    exit: React.CSSProperties;
-    exitActive: React.CSSProperties;
-  };
-}
-
-/** 通知配置 */
-export type NotificationConfig = Partial<NotificationItem>;
-
-/** 通知样式集合 */
-export type NotificationStyles = {
-  [key in NotificationType]: React.CSSProperties;
-};
-
-/** 通知位置样式 */
-export type NotificationPlacementStyles = {
-  [key in NotificationPlacement]: React.CSSProperties;
-};
-
-/** 通知动画样式 */
-export type NotificationAnimationStyles = {
-  enter: React.CSSProperties;
-  enterActive: React.CSSProperties;
-  exit: React.CSSProperties;
-  exitActive: React.CSSProperties;
-};
-
-/** 通知工具函数 */
-export interface NotificationUtilsType {
-  /** 生成唯一键 */
-  generateKey: () => string;
-  /** 排序通知 */
-  sortNotifications: (_notifications: NotificationItem[]) => NotificationItem[];
-  /** 计算堆叠偏移 */
-  calculateStackOffset: (_index: number, baseOffset: number) => number;
-  /** 格式化持续时间 */
-  formatDuration: (_duration: number) => string;
-  /** 验证通知配置 */
-  validateConfig: (_config: Partial<NotificationItem>) => { valid: boolean; errors: string[] };
-}
-
-/** 默认通知配置 */
-export const DEFAULT_NOTIFICATION_CONFIG = {
-  /** 默认最大数量 */
-  defaultMaxCount: 5,
-  /** 默认位置 */
-  defaultPlacement: 'topRight' as NotificationPlacement,
-  /** 默认时长 */
-  defaultDuration: 4500,
-  /** 默认动画 */
-  defaultAnimation: 'fade' as NotificationAnimation,
-  /** 默认堆叠 */
-  defaultStack: true,
-  /** 默认堆叠最大数量 */
-  defaultStackMaxCount: 3,
-  /** 默认允许拖拽 */
-  defaultAllowDrag: false,
-  /** 默认拖拽阈值 */
-  defaultDragThreshold: 100,
-  /** 默认显示分组 */
-  defaultShowGroup: false,
-  /** 默认分组间隔 */
-  defaultGroupInterval: 1000,
-  /** 最大历史记录数量 */
-  maxHistoryCount: 50,
-  /** 默认自动关闭 */
-  defaultAutoClose: true,
-  /** 默认显示关闭按钮 */
-  defaultShowClose: true,
-  /** 默认显示图标 */
-  defaultShowIcon: true,
-  /** 默认可关闭 */
-  defaultClosable: true,
-} as const;
-
-/** 通知工具类 */
-export const NotificationUtils: NotificationUtilsType = {
-  /** 生成唯一键 */
-  generateKey: (): string => {
-    return `notification_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-  },
-
-  /** 排序通知 */
-  sortNotifications: (notifications: NotificationItem[]): NotificationItem[] => {
-    return [...notifications].sort((a, b) => a.createdAt - b.createdAt);
-  },
-
-  /** 计算堆叠偏移 */
-  calculateStackOffset: (index: number, baseOffset: number = 8): number => {
-    return index * baseOffset;
-  },
-
-  /** 格式化持续时间 */
-  formatDuration: (duration: number): string => {
-    if (duration < 1000) return `${duration}ms`;
-    if (duration < 60000) return `${(duration / 1000).toFixed(1)}s`;
-    return `${(duration / 60000).toFixed(1)}min`;
-  },
-
-  /** 验证通知配置 */
-  validateConfig: (config: Partial<NotificationItem>): { valid: boolean; errors: string[] } => {
-    const errors: string[] = [];
-
-    if (config.duration !== undefined && (config.duration < 0 || config.duration > 60000)) {
-      errors.push('duration must be between 0 and 60000ms');
-    }
-
-    if (config.type !== undefined && !['success', 'error', 'warning', 'info'].includes(config.type)) {
-      errors.push('type must be one of: success, error, warning, info');
-    }
-
-    if (
-      config.placement !== undefined &&
-      !['topRight', 'topLeft', 'bottomRight', 'bottomLeft', 'top', 'bottom'].includes(config.placement)
-    ) {
-      errors.push('placement must be one of: topRight, topLeft, bottomRight, bottomLeft, top, bottom');
-    }
-
-    return {
-      valid: errors.length === 0,
-      errors,
-    };
-  },
-} as const;