taro-uno-ui 0.9.0 → 1.0.0

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

@@ -4,7 +4,7 @@ import type {
   NotificationManagerProps,
   NotificationManagerRef,
   NotificationItem,
-  NotificationPlacement
+  NotificationPlacement,
 } from './Notification.types';
 import { Notification } from './Notification';
 import { notificationStyleHelpers } from './Notification.styles';
@@ -50,93 +50,102 @@ export const NotificationManager = forwardRef<NotificationManagerRef, Notificati
   const notificationRefs = useRef<Map<string, { current: any }>>(new Map());
 
   // 添加通知
-  const addNotification = useCallback((config: Omit<NotificationItem, 'key' | 'createdAt'>): string => {
-    const key = NotificationUtils.generateKey();
-    const newNotification: InternalNotificationItem = {
-      ...config,
-      key,
-      createdAt: Date.now(),
-      placement: config.placement || defaultPlacement,
-      duration: config.duration ?? defaultDuration,
-      animation: config.animation || defaultAnimation,
-      stackIndex: 0,
-      isClosing: false,
-    };
-
-    setNotifications(prev => {
-      // 检查是否超过最大数量
-      let updatedNotifications = [...prev, newNotification];
-      
-      if (updatedNotifications.length > maxCount) {
-        // 移除最早的通知
-        const removed = updatedNotifications.shift();
-        if (removed) {
-          // 添加到历史记录
-          setHistory(prevHistory => [...prevHistory.slice(-DEFAULT_NOTIFICATION_CONFIG.maxHistoryCount!), removed]);
-          onLeave?.(removed.key);
+  const addNotification = useCallback(
+    (config: Omit<NotificationItem, 'key' | 'createdAt'>): string => {
+      const key = NotificationUtils.generateKey();
+      const newNotification: InternalNotificationItem = {
+        ...config,
+        key,
+        createdAt: Date.now(),
+        placement: config.placement || defaultPlacement,
+        duration: config.duration ?? defaultDuration,
+        animation: config.animation || defaultAnimation,
+        stackIndex: 0,
+        isClosing: false,
+      };
+
+      setNotifications((prev) => {
+        // 检查是否超过最大数量
+        let updatedNotifications = [...prev, newNotification];
+
+        if (updatedNotifications.length > maxCount) {
+          // 移除最早的通知
+          const removed = updatedNotifications.shift();
+          if (removed) {
+            // 添加到历史记录
+            setHistory((prevHistory) => [...prevHistory.slice(-DEFAULT_NOTIFICATION_CONFIG.maxHistoryCount!), removed]);
+            onLeave?.(removed.key);
+          }
         }
-      }
 
-      // 更新堆叠索引
-      return updateStackIndices(updatedNotifications);
-    });
+        // 更新堆叠索引
+        return updateStackIndices(updatedNotifications);
+      });
 
-    onEnter?.(key);
-    return key;
-  }, [maxCount, defaultPlacement, defaultDuration, defaultAnimation, onEnter, onLeave]);
+      onEnter?.(key);
+      return key;
+    },
+    [maxCount, defaultPlacement, defaultDuration, defaultAnimation, onEnter, onLeave],
+  );
 
   // 更新堆叠索引
-  const updateStackIndices = useCallback((notificationsList: InternalNotificationItem[]): InternalNotificationItem[] => {
-    if (!stack) return notificationsList;
-
-    return notificationsList.map((notification, index) => ({
-      ...notification,
-      stackIndex: index,
-    }));
-  }, [stack]);
+  const updateStackIndices = useCallback(
+    (notificationsList: InternalNotificationItem[]): InternalNotificationItem[] => {
+      if (!stack) return notificationsList;
+
+      return notificationsList.map((notification, index) => ({
+        ...notification,
+        stackIndex: index,
+      }));
+    },
+    [stack],
+  );
 
   // 关闭通知
-  const closeNotification = useCallback((key: string) => {
-    setNotifications(prev => {
-      const notificationIndex = prev.findIndex(n => n.key === key);
-      if (notificationIndex === -1) return prev;
-
-      const notification = prev[notificationIndex];
-      const updatedNotifications = prev.filter((_, index) => index !== notificationIndex);
-
-      // 添加到历史记录
-      setHistory(prevHistory => [...prevHistory.slice(-DEFAULT_NOTIFICATION_CONFIG.maxHistoryCount!), notification as NotificationItem]);
-      
-      // 更新堆叠索引
-      return updateStackIndices(updatedNotifications);
-    });
+  const closeNotification = useCallback(
+    (key: string) => {
+      setNotifications((prev) => {
+        const notificationIndex = prev.findIndex((n) => n.key === key);
+        if (notificationIndex === -1) return prev;
+
+        const notification = prev[notificationIndex];
+        const updatedNotifications = prev.filter((_, index) => index !== notificationIndex);
+
+        // 添加到历史记录
+        setHistory((prevHistory) => [
+          ...prevHistory.slice(-DEFAULT_NOTIFICATION_CONFIG.maxHistoryCount!),
+          notification as NotificationItem,
+        ]);
+
+        // 更新堆叠索引
+        return updateStackIndices(updatedNotifications);
+      });
 
-    onLeave?.(key);
-  }, [onLeave, updateStackIndices]);
+      onLeave?.(key);
+    },
+    [onLeave, updateStackIndices],
+  );
 
   // 关闭所有通知
   const closeAllNotifications = useCallback(() => {
-    setNotifications(prev => {
+    setNotifications((prev) => {
       // 添加到历史记录
-      setHistory(prevHistory => [
-        ...prevHistory.slice(-DEFAULT_NOTIFICATION_CONFIG.maxHistoryCount!),
-        ...prev
-      ]);
+      setHistory((prevHistory) => [...prevHistory.slice(-DEFAULT_NOTIFICATION_CONFIG.maxHistoryCount!), ...prev]);
 
       const firstKey = prev[0]?.key;
       if (firstKey) {
         onLeave?.(firstKey);
       }
       onAllClose?.();
-      
+
       return [];
     });
   }, [onLeave, onAllClose]);
 
   // 更新通知
   const updateNotification = useCallback((key: string, config: Partial<NotificationItem>) => {
-    setNotifications(prev => {
-      return prev.map(notification => {
+    setNotifications((prev) => {
+      return prev.map((notification) => {
         if (notification.key === key) {
           return {
             ...notification,
@@ -152,34 +161,52 @@ export const NotificationManager = forwardRef<NotificationManagerRef, Notificati
   }, []);
 
   // 显示通知
-  const open = useCallback((config: Omit<NotificationItem, 'key' | 'createdAt'>) => {
-    return addNotification(config);
-  }, [addNotification]);
+  const open = useCallback(
+    (config: Omit<NotificationItem, 'key' | 'createdAt'>) => {
+      return addNotification(config);
+    },
+    [addNotification],
+  );
 
   // 显示成功通知
-  const success = useCallback((config: Omit<NotificationItem, 'key' | 'createdAt' | 'type'>) => {
-    return open({ ...config, type: 'success' });
-  }, [open]);
+  const success = useCallback(
+    (config: Omit<NotificationItem, 'key' | 'createdAt' | 'type'>) => {
+      return open({ ...config, type: 'success' });
+    },
+    [open],
+  );
 
   // 显示信息通知
-  const info = useCallback((config: Omit<NotificationItem, 'key' | 'createdAt' | 'type'>) => {
-    return open({ ...config, type: 'info' });
-  }, [open]);
+  const info = useCallback(
+    (config: Omit<NotificationItem, 'key' | 'createdAt' | 'type'>) => {
+      return open({ ...config, type: 'info' });
+    },
+    [open],
+  );
 
   // 显示警告通知
-  const warning = useCallback((config: Omit<NotificationItem, 'key' | 'createdAt' | 'type'>) => {
-    return open({ ...config, type: 'warning' });
-  }, [open]);
+  const warning = useCallback(
+    (config: Omit<NotificationItem, 'key' | 'createdAt' | 'type'>) => {
+      return open({ ...config, type: 'warning' });
+    },
+    [open],
+  );
 
   // 显示错误通知
-  const error = useCallback((config: Omit<NotificationItem, 'key' | 'createdAt' | 'type'>) => {
-    return open({ ...config, type: 'error' });
-  }, [open]);
+  const error = useCallback(
+    (config: Omit<NotificationItem, 'key' | 'createdAt' | 'type'>) => {
+      return open({ ...config, type: 'error' });
+    },
+    [open],
+  );
 
   // 关闭指定通知
-  const close = useCallback((key: string) => {
-    closeNotification(key);
-  }, [closeNotification]);
+  const close = useCallback(
+    (key: string) => {
+      closeNotification(key);
+    },
+    [closeNotification],
+  );
 
   // 关闭所有通知
   const destroyAll = useCallback(() => {
@@ -217,7 +244,7 @@ export const NotificationManager = forwardRef<NotificationManagerRef, Notificati
   // 暂停所有通知自动关闭
   const pauseAll = useCallback(() => {
     setIsAllPaused(true);
-    notificationRefs.current.forEach(refObject => {
+    notificationRefs.current.forEach((refObject) => {
       if (refObject?.current?.pauseProgress) {
         refObject.current.pauseProgress();
       }
@@ -227,7 +254,7 @@ export const NotificationManager = forwardRef<NotificationManagerRef, Notificati
   // 恢复所有通知自动关闭
   const resumeAll = useCallback(() => {
     setIsAllPaused(false);
-    notificationRefs.current.forEach(ref => {
+    notificationRefs.current.forEach((ref) => {
       if (ref?.current?.resumeProgress) {
         ref.current.resumeProgress();
       }
@@ -266,17 +293,23 @@ export const NotificationManager = forwardRef<NotificationManagerRef, Notificati
   }));
 
   // 处理通知关闭
-  const handleNotificationClose = useCallback((key: string) => {
-    closeNotification(key);
-  }, [closeNotification]);
+  const handleNotificationClose = useCallback(
+    (key: string) => {
+      closeNotification(key);
+    },
+    [closeNotification],
+  );
 
   // 处理通知点击
-  const handleNotificationClick = useCallback((key: string) => {
-    const notification = notifications.find(n => n.key === key);
-    if (notification?.onClick) {
-      notification.onClick();
-    }
-  }, [notifications]);
+  const handleNotificationClick = useCallback(
+    (key: string) => {
+      const notification = notifications.find((n) => n.key === key);
+      if (notification?.onClick) {
+        notification.onClick();
+      }
+    },
+    [notifications],
+  );
 
   // 获取容器样式
   const getContainerStyle = () => {
@@ -288,13 +321,9 @@ export const NotificationManager = forwardRef<NotificationManagerRef, Notificati
 
   // 获取容器类名
   const getContainerClassName = () => {
-    return cn(
-      'taro-uno-notification-container',
-      containerClassName
-    );
+    return cn('taro-uno-notification-container', containerClassName);
   };
 
-
   // 按位置分组通知
   const renderNotificationsByPlacement = () => {
     const notificationsByPlacement: Record<NotificationPlacement, InternalNotificationItem[]> = {
@@ -307,7 +336,7 @@ export const NotificationManager = forwardRef<NotificationManagerRef, Notificati
     };
 
     // 按位置分组
-    notifications.forEach(notification => {
+    notifications.forEach((notification) => {
       const placement = notification.placement || defaultPlacement;
       notificationsByPlacement[placement].push(notification);
     });
@@ -317,7 +346,7 @@ export const NotificationManager = forwardRef<NotificationManagerRef, Notificati
       if (placementNotifications.length === 0) return null;
 
       const sortedNotifications = NotificationUtils.sortNotifications(placementNotifications);
-      
+
       return (
         <View
           key={placement}
@@ -357,15 +386,15 @@ export const NotificationManager = forwardRef<NotificationManagerRef, Notificati
 
   // 获取位置样式
   const getPlacementStyle = (placement: NotificationPlacement) => {
-    const placementStyleData = notificationStyleHelpers.getPlacementStyle(placement, { theme, isMobile: platform.isMobile() });
+    const placementStyleData = notificationStyleHelpers.getPlacementStyle(placement, {
+      theme,
+      isMobile: platform.isMobile(),
+    });
     return placementStyleData.container;
   };
 
   return (
-    <View
-      className={getContainerClassName()}
-      style={getContainerStyle()}
-    >
+    <View className={getContainerClassName()} style={getContainerStyle()}>
       {renderNotificationsByPlacement()}
     </View>
   );
@@ -373,4 +402,4 @@ export const NotificationManager = forwardRef<NotificationManagerRef, Notificati
 
 NotificationManager.displayName = 'NotificationManager';
 
-export default NotificationManager;
+export default NotificationManager;

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

@@ -4,7 +4,9 @@ export { default as NotificationManager } from './NotificationManager';
 // Simple notification singleton for direct usage
 class NotificationSingleton {
   open = (_config: any) => {
-    console.warn('Notification singleton called. Please render <NotificationManager /> in your app for full functionality.');
+    console.warn(
+      'Notification singleton called. Please render <NotificationManager /> in your app for full functionality.',
+    );
     return 'notification-key';
   };
 
@@ -27,7 +29,12 @@ class NotificationSingleton {
 }
 
 export const notification = new NotificationSingleton();
-export type { NotificationProps, NotificationRef, NotificationManagerProps, NotificationPlacement } from './Notification.types';
+export type {
+  NotificationProps,
+  NotificationRef,
+  NotificationManagerProps,
+  NotificationPlacement,
+} from './Notification.types';
 export { notificationStyles } from './Notification.styles';
 
-export default Notification;
+export default Notification;

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

@@ -56,67 +56,67 @@ export const notification = {
   open: (config: Parameters<NotificationManagerRef['open']>[0]) => {
     return globalNotificationRef?.open(config) || '';
   },
-  
+
   // 显示成功通知
   success: (config: Parameters<NotificationManagerRef['success']>[0]) => {
     return globalNotificationRef?.success(config) || '';
   },
-  
+
   // 显示信息通知
   info: (config: Parameters<NotificationManagerRef['info']>[0]) => {
     return globalNotificationRef?.info(config) || '';
   },
-  
+
   // 显示警告通知
   warning: (config: Parameters<NotificationManagerRef['warning']>[0]) => {
     return globalNotificationRef?.warning(config) || '';
   },
-  
+
   // 显示错误通知
   error: (config: Parameters<NotificationManagerRef['error']>[0]) => {
     return globalNotificationRef?.error(config) || '';
   },
-  
+
   // 关闭通知
   close: (key: string) => {
     globalNotificationRef?.close(key);
   },
-  
+
   // 关闭所有通知
   destroyAll: () => {
     globalNotificationRef?.destroyAll();
   },
-  
+
   // 更新通知
   update: (key: string, config: Parameters<NotificationManagerRef['update']>[1]) => {
     globalNotificationRef?.update(key, config);
   },
-  
+
   // 获取所有通知
   getNotifications: () => {
     return globalNotificationRef?.getNotifications() || [];
   },
-  
+
   // 获取通知数量
   getCount: () => {
     return globalNotificationRef?.getCount() || 0;
   },
-  
+
   // 暂停所有通知
   pauseAll: () => {
     globalNotificationRef?.pauseAll();
   },
-  
+
   // 恢复所有通知
   resumeAll: () => {
     globalNotificationRef?.resumeAll();
   },
-  
+
   // 清空历史记录
   clearHistory: () => {
     globalNotificationRef?.clearHistory();
   },
-  
+
   // 获取通知历史
   getHistory: () => {
     return globalNotificationRef?.getHistory() || [];
@@ -124,15 +124,7 @@ export const notification = {
 };
 
 // 便捷方法
-export const {
-  success,
-  info,
-  warning,
-  error,
-  destroyAll,
-  pauseAll,
-  resumeAll,
-} = notification;
+export const { success, info, warning, error, destroyAll, pauseAll, resumeAll } = notification;
 
 // 默认导出
 export default Notification;
@@ -143,7 +135,7 @@ export type {
   NotificationType as Type,
   NotificationPlacement as Placement,
   NotificationAnimation as Animation,
-  
+
   // 通知接口
   NotificationItem as Item,
   NotificationProps as Props,
@@ -159,6 +151,4 @@ export { notification };
 if (typeof Notification !== 'undefined') {
   (Notification as any).displayName = 'Notification';
 }
-if (typeof NotificationManager !== 'undefined') {
-  (NotificationManager as any).displayName = 'NotificationManager';
-}
+// NotificationManager displayName is set in NotificationManager.tsx

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

@@ -7,9 +7,9 @@ import type {
   ProgressStyles as ProgressStylesType,
   ProgressGradient,
 } from './Progress.types';
-import { 
-  calculateCircleDimensions, 
-  calculateCircleProgress, 
+import {
+  calculateCircleDimensions,
+  calculateCircleProgress,
   calculateDashboardProgress,
   getStatusColor,
   calculateBorderRadius,
@@ -198,7 +198,11 @@ export const getLineStyle = (props: ProgressStyleProps) => {
 
   const mergedTheme = { ...defaultTheme, ...theme };
   const borderRadius = calculateBorderRadius(strokeWidth, strokeLinecap);
-  const color = strokeColor ? (typeof strokeColor === 'string' ? strokeColor : mergedTheme.primaryColor) : getStatusColor(status, statusColors);
+  const color = strokeColor
+    ? typeof strokeColor === 'string'
+      ? strokeColor
+      : mergedTheme.primaryColor
+    : getStatusColor(status, statusColors);
 
   return {
     outer: {
@@ -237,10 +241,14 @@ export const getCircleStyle = (props: ProgressStyleProps) => {
   const sizeValue = sizeMapping[size];
   const strokeWidth = customStrokeWidth || strokeWidthMapping[size];
   const mergedTheme = { ...defaultTheme, ...theme };
-  
+
   const dimensions = calculateCircleDimensions(sizeValue, strokeWidth);
   const progressData = calculateCircleProgress(dimensions, percent);
-  const color = strokeColor ? (typeof strokeColor === 'string' ? strokeColor : mergedTheme.primaryColor) : getStatusColor(status, statusColors);
+  const color = strokeColor
+    ? typeof strokeColor === 'string'
+      ? strokeColor
+      : mergedTheme.primaryColor
+    : getStatusColor(status, statusColors);
 
   return {
     outer: {
@@ -305,10 +313,14 @@ export const getDashboardStyle = (props: ProgressStyleProps) => {
   const sizeValue = sizeMapping[size];
   const strokeWidth = customStrokeWidth || strokeWidthMapping[size];
   const mergedTheme = { ...defaultTheme, ...theme };
-  
+
   const dimensions = calculateCircleDimensions(sizeValue, strokeWidth);
   const progressData = calculateDashboardProgress(dimensions, percent, gapDegree, gapPosition);
-  const color = strokeColor ? (typeof strokeColor === 'string' ? strokeColor : mergedTheme.primaryColor) : getStatusColor(status, statusColors);
+  const color = strokeColor
+    ? typeof strokeColor === 'string'
+      ? strokeColor
+      : mergedTheme.primaryColor
+    : getStatusColor(status, statusColors);
 
   return {
     outer: {
@@ -374,17 +386,14 @@ export const getInfoStyle = (size?: ProgressSize, customStyle?: CSSProperties):
 };
 
 // 获取容器样式
-export const getContainerStyle = (
-  type?: ProgressType,
-  customStyle?: CSSProperties
-): CSSProperties => {
+export const getContainerStyle = (type?: ProgressType, customStyle?: CSSProperties): CSSProperties => {
   if (type === 'line') {
     return {
       ...progressStyles['lineContainer'],
       ...customStyle,
     };
   }
-  
+
   return {
     ...progressStyles['container'],
     ...customStyle,
@@ -457,4 +466,4 @@ export const ProgressCSSVariables = {
 };
 
 // 导出默认样式
-export default progressStyles;
+export default progressStyles;