taro-uno-ui 0.9.0-beta → 1.0.0

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

@@ -1,10 +1,10 @@
 import React, { forwardRef, useRef, useEffect, useState, useCallback } from 'react';
 import { View, Text } from '@tarojs/components';
-import { 
-  NotificationProps, 
-  NotificationRef, 
-  NotificationType, 
-  DEFAULT_NOTIFICATION_CONFIG 
+import {
+  NotificationProps,
+  NotificationRef,
+  NotificationType,
+  DEFAULT_NOTIFICATION_CONFIG,
 } from './Notification.types';
 import { notificationStyles, notificationStyleHelpers } from './Notification.styles';
 import { cn } from '../../../utils';
@@ -34,47 +34,49 @@ export const Notification = forwardRef<NotificationRef, NotificationProps>((prop
   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 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 {
@@ -85,7 +87,7 @@ export const Notification = forwardRef<NotificationRef, NotificationProps>((prop
           handleError(error as Error, 'autoCloseTimeout');
         }
       }, remainingTimeRef.current);
-      
+
       timerRef.current = timeoutId as unknown as number;
       startTimeRef.current = Date.now();
     } catch (error) {
@@ -154,7 +156,7 @@ export const Notification = forwardRef<NotificationRef, NotificationProps>((prop
   // 自动关闭效果
   useEffect(() => {
     handleAutoClose();
-    
+
     return () => {
       // 清理定时器
       if (timerRef.current) {
@@ -172,7 +174,7 @@ export const Notification = forwardRef<NotificationRef, NotificationProps>((prop
         clearTimeout(timerRef.current);
         timerRef.current = null;
       }
-      
+
       // 清理状态引用
       setHasError(false);
       setErrorMessage(null);
@@ -180,63 +182,69 @@ export const Notification = forwardRef<NotificationRef, NotificationProps>((prop
   }, []);
 
   // 关闭处理
-  const handleClose = useCallback((e?: any) => {
-    e?.stopPropagation();
-    setVisible(false);
-    setIsClosing(true);
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
-    onClose?.();
-  }, [onClose]);
+  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 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();
+  const handleTouchStart = useCallback(
+    (_e?: any) => {
+      try {
+        setCloseHovered(true);
+        if (autoClose) {
+          pauseProgress();
+        }
+      } catch (error) {
+        handleError(error as Error, 'handleTouchStart');
       }
-    } catch (error) {
-      handleError(error as Error, 'handleTouchStart');
-    }
-  }, [autoClose, pauseProgress, handleError]);
+    },
+    [autoClose, pauseProgress, handleError],
+  );
 
   // 触摸结束处理（替代鼠标离开）
-  const handleTouchEnd = useCallback((_e?: any) => {
-    try {
-      setCloseHovered(false);
-      if (autoClose && paused) {
-        resumeProgress();
+  const handleTouchEnd = useCallback(
+    (_e?: any) => {
+      try {
+        setCloseHovered(false);
+        if (autoClose && paused) {
+          resumeProgress();
+        }
+      } catch (error) {
+        handleError(error as Error, 'handleTouchEnd');
       }
-    } catch (error) {
-      handleError(error as Error, 'handleTouchEnd');
-    }
-  }, [autoClose, paused, resumeProgress, handleError]);
+    },
+    [autoClose, paused, resumeProgress, handleError],
+  );
 
   // 渲染图标
   const renderIcon = useCallback(() => {
     try {
       if (!showIcon) return null;
-      
+
       if (icon) {
-        return (
-          <View
-            className={notificationStyles['icon']}
-          >
-            {icon}
-          </View>
-        );
+        return <View className={notificationStyles['icon']}>{icon}</View>;
       }
 
       const defaultIcons: Record<NotificationType, string> = {
@@ -247,14 +255,8 @@ export const Notification = forwardRef<NotificationRef, NotificationProps>((prop
       };
 
       return (
-        <View
-          className={notificationStyles['icon']}
-        >
-          <Text
-            className={notificationStyles['iconText']}
-          >
-            {defaultIcons[type]}
-          </Text>
+        <View className={notificationStyles['icon']}>
+          <Text className={notificationStyles['iconText']}>{defaultIcons[type]}</Text>
         </View>
       );
     } catch (error) {
@@ -269,7 +271,7 @@ export const Notification = forwardRef<NotificationRef, NotificationProps>((prop
       const baseStyle = notificationStyleHelpers.getBaseStyle(placement, style);
       const typeStyle = notificationStyleHelpers.getTypeStyle(type);
       const animationStyle = notificationStyleHelpers.getAnimationStyle(animation, visible);
-      
+
       return {
         ...baseStyle,
         ...typeStyle,
@@ -292,7 +294,7 @@ export const Notification = forwardRef<NotificationRef, NotificationProps>((prop
         closeHovered && 'taro-uno-notification-hovered',
         paused && 'taro-uno-notification-paused',
         hasError && 'taro-uno-notification-error',
-        className
+        className,
       ];
       return cn(...classes);
     } catch (error) {
@@ -314,51 +316,26 @@ export const Notification = forwardRef<NotificationRef, NotificationProps>((prop
       {...rest}
     >
       {renderIcon()}
-      
-      <View
-        className={notificationStyles['content']}
-      >
+
+      <View className={notificationStyles['content']}>
         {hasError ? (
-          <Text
-            className={notificationStyles['title']}
-          >
-            通知错误
-          </Text>
-        ) : title && (
-          <Text 
-            className={notificationStyles['title']}
-                      >
-            {title}
-          </Text>
+          <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>
+          <Text className={notificationStyles['text']}>{errorMessage || '通知显示异常'}</Text>
+        ) : (
+          content && <Text className={notificationStyles['text']}>{content}</Text>
         )}
       </View>
 
       {showClose && closable && (
         <View
-          className={cn(
-            notificationStyles['close'],
-            closeHovered && notificationStyles['closeHover']
-          )}
+          className={cn(notificationStyles['close'], closeHovered && notificationStyles['closeHover'])}
           onClick={handleClose}
         >
-          <Text
-            className={notificationStyles['closeIcon']}
-          >
-            ✕
-          </Text>
+          <Text className={notificationStyles['closeIcon']}>✕</Text>
         </View>
       )}
     </View>
@@ -367,4 +344,4 @@ export const Notification = forwardRef<NotificationRef, NotificationProps>((prop
 
 Notification.displayName = 'Notification';
 
-export default Notification;
+export default Notification;

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

@@ -241,7 +241,7 @@ export type NotificationAnimationStyles = {
 };
 
 /** 通知工具函数 */
-export interface NotificationUtils {
+export interface NotificationUtilsType {
   /** 生成唯一键 */
   generateKey: () => string;
   /** 排序通知 */
@@ -289,7 +289,7 @@ export const DEFAULT_NOTIFICATION_CONFIG = {
 } as const;
 
 /** 通知工具类 */
-export const NotificationUtils = {
+export const NotificationUtils: NotificationUtilsType = {
   /** 生成唯一键 */
   generateKey: (): string => {
     return `notification_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
@@ -315,22 +315,25 @@ export const NotificationUtils = {
   /** 验证通知配置 */
   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)) {
+
+    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;
+} as const;