@react-native-ohos/ting 1.2.3-rc.1 → 1.2.3-rc.2

package/harmony/ting/oh-package.json5

@@ -5,7 +5,7 @@
   description: '',
   main: 'index.ets',
   type: 'module',
-  version: '1.2.3-rc.1',
+  version: '1.2.3-rc.2',
   dependencies: {
     "@rnoh/react-native-openharmony": 'file:../react_native_openharmony'
   },

package/harmony/ting/src/main/ets/TingTurboModule.ets

@@ -1,7 +1,7 @@
 /**
  * MIT License
  *
- * Copyright (C) 2024 Huawei Device Co., Ltd.
+ * Copyright (C) 2025 Huawei Device Co., Ltd.
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy
  * of this software and associated documentation files (the "Software"), to deal
@@ -23,24 +23,24 @@
  */
 
 import { TurboModule } from '@rnoh/react-native-openharmony/ts';
-import { TM } from './generated/ts'
-import { ComponentContent, PromptAction, promptAction, window } from '@kit.ArkUI';
-import { ToastOptions, AlertOptions, Options } from './Type';
+import { TM } from '../ets/generated/ts';
+import { ComponentContent, promptAction, window } from '@kit.ArkUI';
+import { AlertBuilderData, AlertOptions, Options, ToastBuilderData, ToastOptions , ToastQueueItem, AlertQueueItem} from './Type';
 import { vibrator } from '@kit.SensorServiceKit';
 import { common2D, drawing } from '@kit.ArkGraphics2D';
 
 @Builder
-function buildToast(toastOptions: ToastOptions) {
+function buildToast(toastBuilderData: ToastBuilderData) {
   Row() {
-    if (!toastOptions.icon?.uri) {
-      if (toastOptions.preset === 'spinner') {
+    if (!toastBuilderData.toastOptions.icon?.uri) {
+      if (toastBuilderData.toastOptions.preset === 'spinner') {
         Progress({ value: 0, total: 100, type: ProgressType.Ring })
           .width('100px')
           .height('100px')
-          .color(toastOptions.progressColor || '#008080')
+          .color(toastBuilderData.toastOptions.progressColor || '#008080')
           .style({ strokeWidth: 5, status: ProgressStatus.LOADING })
           .margin({ left: 7 })
-      } else if (toastOptions.preset === 'error') {
+      } else if (toastBuilderData.toastOptions.preset === 'error') {
         Path()
           .commands('M52.5 44.17 L81.67 15 L90 23.33 L60.83 52.5 L90 81.67 L81.67 90 L52.5 60.83 L23.33 90 ' +
             'L15 81.67 L44.17 52.5 L15 23.33 L23.33 15 L52.5 44.17 Z')
@@ -49,7 +49,7 @@ function buildToast(toastOptions: ToastOptions) {
           .fill(Color.Red)
           .stroke(Color.Red)
           .margin({ left: 7 })
-      } else if (toastOptions.preset === 'done') {
+      } else if (toastBuilderData.toastOptions.preset === 'done') {
         Polyline()
           .width('100px')
           .height('100px')
@@ -57,7 +57,7 @@ function buildToast(toastOptions: ToastOptions) {
           .fillOpacity(0)
           .stroke(Color.Green)
           .strokeWidth(4)
-      } else if (toastOptions.preset === 'none') {
+      } else if (toastBuilderData.toastOptions.preset === 'none') {
         // there is no component.
       } else {
         Polyline()
@@ -69,22 +69,22 @@ function buildToast(toastOptions: ToastOptions) {
           .strokeWidth(4)
       }
     } else {
-      if (typeof toastOptions.icon?.uri === 'string') {
-        if (!toastOptions.icon?.tintColor) {
-          Image(toastOptions.icon.uri as string)
+      if (typeof toastBuilderData.toastOptions.icon?.uri === 'string') {
+        if (!toastBuilderData.toastOptions.icon?.tintColor) {
+          Image(toastBuilderData.toastOptions.icon.uri as string)
             .objectFit(ImageFit.Contain)
             .autoResize(true)
-            .width(toastOptions.icon.size || '100px')
-            .height(toastOptions.icon.size || '100px')
+            .width(toastBuilderData.toastOptions.icon.size || '100px')
+            .height(toastBuilderData.toastOptions.icon.size || '100px')
             .borderRadius(17.5)
             .margin({ left: 7 })
         } else {
-          Image(toastOptions.icon?.uri as string)
+          Image(toastBuilderData.toastOptions.icon?.uri as string)
             .objectFit(ImageFit.Contain)
             .autoResize(true)
-            .width(toastOptions.icon.size || '100px')
-            .height(toastOptions.icon.size || '100px')
-            .colorFilter(drawing.ColorFilter.createBlendModeColorFilter(toastOptions.icon.tintColor as common2D.Color
+            .width(toastBuilderData.toastOptions.icon.size || '100px')
+            .height(toastBuilderData.toastOptions.icon.size || '100px')
+            .colorFilter(drawing.ColorFilter.createBlendModeColorFilter(toastBuilderData.toastOptions.icon.tintColor as common2D.Color
               , drawing.BlendMode.SRC_IN))
             .borderRadius(17.5)
             .margin({ left: 7 })
@@ -93,17 +93,17 @@ function buildToast(toastOptions: ToastOptions) {
     }
 
     Column() {
-      Text(toastOptions.title || '')
+      Text(toastBuilderData.toastOptions.title || '')
         .fontSize(13)
-        .fontColor(toastOptions.titleColor || '#000000')
+        .fontColor(toastBuilderData.toastOptions.titleColor || '#000000')
         .alignSelf(ItemAlign.Center)
         .maxLines(1)
         .textOverflow({ overflow: TextOverflow.Ellipsis })
         .margin({ bottom: 5 })
 
-      Text(toastOptions.message || '')
+      Text(toastBuilderData.toastOptions.message || '')
         .fontSize(12)
-        .fontColor(toastOptions.messageColor || '#BEBEBE')
+        .fontColor(toastBuilderData.toastOptions.messageColor || '#BEBEBE')
         .alignSelf(ItemAlign.Center)
         .maxLines(1)
         .textOverflow({ overflow: TextOverflow.Ellipsis })
@@ -119,23 +119,37 @@ function buildToast(toastOptions: ToastOptions) {
   .height('auto')
   .width('auto')
   .borderRadius('50%')
-  .backgroundColor(toastOptions.backgroundColor || '#FFFFFF')
+  .backgroundColor(toastBuilderData.toastOptions.backgroundColor || '#FFFFFF')
   .padding(5)
+  .gesture(
+    PanGesture({
+      distance: 5,
+      fingers: 1,
+      direction: PanDirection.All
+    })
+      .onActionUpdate((event: GestureEvent) => {
+        // 处理滑动数据
+        if (toastBuilderData.toastOptions.shouldDismissByDrag && toastBuilderData.onDismiss) {
+          toastBuilderData.onDismiss();
+        }
+      })
+  )
 }
 
 @Builder
-function buildAlert(alertOptions: AlertOptions) {
+function buildAlert(alertBuilderData: AlertBuilderData) {
   Column() {
-    if (!alertOptions.icon?.uri) {
-      if (alertOptions.preset === 'spinner') {
+    // 图标部分
+    if (!alertBuilderData.alertOptions.icon?.uri) {
+      if (alertBuilderData.alertOptions.preset === 'spinner') {
         Progress({ value: 0, total: 100, type: ProgressType.Ring })
           .width('150px')
           .height('150px')
-          .color(alertOptions.progressColor || '#008080')
+          .color(alertBuilderData.alertOptions.progressColor || '#008080')
           .alignSelf(ItemAlign.Center)
           .style({ strokeWidth: 5, status: ProgressStatus.LOADING })
           .margin({ top: 30 })
-      } else if (alertOptions.preset === 'error') {
+      } else if (alertBuilderData.alertOptions.preset === 'error') {
         Path()
           .commands('M 107 140 L 165.34 82.00 L 182.00 98.32 L 123.67 156.67 L 182.00 215.00 L 165.34 231.67 ' +
             'L 107.00 173.33 L 49.33 231.67 L 32 215.00 L 90.34 156.67 L 32 98.32 L 49.33 82.00 L 107.00 140.00 Z')
@@ -144,7 +158,7 @@ function buildAlert(alertOptions: AlertOptions) {
           .fill(Color.Red)
           .stroke(Color.Red)
           .margin({ top: 20 })
-      } else if (alertOptions.preset === 'done') {
+      } else if (alertBuilderData.alertOptions.preset === 'done') {
         Polyline()
           .width('225px')
           .height('225px')
@@ -153,7 +167,7 @@ function buildAlert(alertOptions: AlertOptions) {
           .stroke(Color.Green)
           .strokeWidth(7)
           .margin({ top: 15 })
-      } else if (alertOptions.preset === 'none') {
+      } else if (alertBuilderData.alertOptions.preset === 'none') {
         Blank()
           .height('25px')
           .margin({ top: 15 })
@@ -168,39 +182,40 @@ function buildAlert(alertOptions: AlertOptions) {
           .margin({ top: 15 })
       }
     } else {
-      if (typeof alertOptions.icon?.uri === 'string') {
-        if (!alertOptions.icon.tintColor) {
-          Image(alertOptions.icon.uri as string)
+      if (typeof alertBuilderData.alertOptions.icon?.uri === 'string') {
+        if (!alertBuilderData.alertOptions.icon.tintColor) {
+          Image(alertBuilderData.alertOptions.icon.uri as string)
             .objectFit(ImageFit.Contain)
             .autoResize(true)
-            .width(alertOptions.icon.size || '225px')
-            .height(alertOptions.icon.size || '225px')
+            .width(alertBuilderData.alertOptions.icon.size || '225px')
+            .height(alertBuilderData.alertOptions.icon.size || '225px')
             .margin({ top: 20 })
         } else {
-          Image(alertOptions.icon.uri as string)
+          Image(alertBuilderData.alertOptions.icon.uri as string)
             .objectFit(ImageFit.Contain)
             .autoResize(true)
-            .width(alertOptions.icon.size || '225px')
-            .height(alertOptions.icon.size || '225px')
-            .colorFilter(drawing.ColorFilter.createBlendModeColorFilter(alertOptions.icon.tintColor as common2D.Color
+            .width(alertBuilderData.alertOptions.icon.size || '225px')
+            .height(alertBuilderData.alertOptions.icon.size || '225px')
+            .colorFilter(drawing.ColorFilter.createBlendModeColorFilter(alertBuilderData.alertOptions.icon.tintColor as common2D.Color
               , drawing.BlendMode.SRC_IN))
             .margin({ top: 20 })
         }
       }
     }
 
+    // 文本部分
     Column() {
-      Text(alertOptions.title || '')
+      Text(alertBuilderData.alertOptions.title || '')
         .fontSize(16)
-        .fontColor(alertOptions.titleColor || '#000000')
+        .fontColor(alertBuilderData.alertOptions.titleColor || '#000000')
         .alignSelf(ItemAlign.Center)
         .maxLines(1)
         .textOverflow({ overflow: TextOverflow.Ellipsis })
         .margin({ bottom: 5 })
 
-      Text(alertOptions.message || '')
+      Text(alertBuilderData.alertOptions.message || '')
         .fontSize(14)
-        .fontColor(alertOptions.messageColor || '#BEBEBE')
+        .fontColor(alertBuilderData.alertOptions.messageColor || '#BEBEBE')
         .alignSelf(ItemAlign.Center)
         .maxLines(1)
         .textOverflow({ overflow: TextOverflow.Ellipsis })
@@ -219,19 +234,23 @@ function buildAlert(alertOptions: AlertOptions) {
     minHeight: '200px',
     maxHeight: Infinity
   })
-  .backgroundColor(alertOptions.backgroundColor || '#FFFFFF')
-  .borderRadius(alertOptions.borderRadius || '24');
+  .backgroundColor(alertBuilderData.alertOptions.backgroundColor || '#FFFFFF')
+  .borderRadius(alertBuilderData.alertOptions.borderRadius || '24')
+  // 添加点击事件 - 当 shouldDismissByTap 为 true 时，点击弹窗内容区域关闭弹窗
+  .onClick(() => {
+    if (alertBuilderData.alertOptions.shouldDismissByTap && alertBuilderData.onDismiss) {
+      alertBuilderData.onDismiss();
+    }
+  });
 }
 
 export class TingTurboModule extends TurboModule implements TM.Ting.Spec {
-  private alertPromptAction: PromptAction | null = null;
-  private alertComponentContent: ComponentContent<object> | null = null;
-  private timeoutId: number | null = null;
-  private isCancelled: boolean = false;
   private toastOptionInit: ToastOptions | undefined = undefined;
   private alertOptionInit: AlertOptions | undefined = undefined;
   private PREFIX = "asset://";
   private RAWFILE_PREFIX = "resource://RAWFILE/assets/";
+  private toastQueue: Array<ToastQueueItem> = [];
+  private alertQueue: Array<AlertQueueItem> = [];
 
   async showToast(toastOptions: ToastOptions) {
     if (this.toastOptionInit) {
@@ -244,51 +263,97 @@ export class TingTurboModule extends TurboModule implements TM.Ting.Spec {
 
     let option: promptAction.BaseDialogOptions = {
       alignment: DialogAlignment.Top,
-      autoCancel: true,
+      autoCancel: false,
       offset: { dx: 0, dy: 50 },
-      isModal: true,
-      maskColor: '#00FF0000',
-      transition: TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.TOP)
-        .animation({ curve: Curve.Sharp }),
-        TransitionEffect.move(TransitionEdge.TOP).animation({ curve: Curve.Sharp })),
+      isModal: false,
+      transition: TransitionEffect.asymmetric(
+        TransitionEffect.move(TransitionEdge.TOP).animation({ curve: Curve.Sharp }),
+        TransitionEffect.move(TransitionEdge.TOP).animation({ curve: Curve.Sharp })
+      ),
     };
 
     if (toastOptions.position === "bottom") {
       option.alignment = DialogAlignment.Bottom;
       option.offset = { dx: 0, dy: -50 };
-      option.transition = TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.BOTTOM)
-        .animation({ curve: Curve.Sharp }),
-        TransitionEffect.move(TransitionEdge.BOTTOM).animation({ curve: Curve.Sharp }));
+      option.transition = TransitionEffect.asymmetric(
+        TransitionEffect.move(TransitionEdge.BOTTOM).animation({ curve: Curve.Sharp }),
+        TransitionEffect.move(TransitionEdge.BOTTOM).animation({ curve: Curve.Sharp })
+      );
     }
 
-    if (toastOptions.shouldDismissByDrag === false) {
-      option.autoCancel = false;
-    }
-
-    if (toastOptions.duration && toastOptions.duration !== 3000) {
-      toastOptions.duration = toastOptions.duration * 1000;
-      if (toastOptions.duration > 0 && toastOptions.duration <= 1000) {
-        toastOptions.duration += 500;
+    if(toastOptions.duration){
+      if (toastOptions.duration > 0 && toastOptions.duration <= 1) {
+        toastOptions.duration += 0.5;
       }
     }
+    const duration = toastOptions.duration ? toastOptions.duration * 1000 : 3000;
 
-    if (toastOptions.haptic) {
-      option.onDidAppear = () => this.vibrator(toastOptions.haptic as string);
-    }
+    // 创建关闭函数
+    const dismissToast = () => {
+      this.clearAllToasts();
+    };
+
+    const toastBuilderData: ToastBuilderData = {
+      toastOptions: toastOptions,
+      onDismiss: dismissToast
+    };
 
-    const contentNode = new ComponentContent(uiContext!, wrapBuilder(buildToast), toastOptions);
+    const componentContent = new ComponentContent(uiContext!, wrapBuilder(buildToast), toastBuilderData);
 
     try {
-      promptAction?.openCustomDialog(contentNode, option);
+      // 显示前先清理之前的Toast
+      this.clearAllToasts();
+
+      // 显示新Toast
+      promptAction?.openCustomDialog(componentContent, option);
+
+      // 添加到队列
+      const timeoutId = setTimeout(() => {
+        promptAction?.closeCustomDialog(componentContent);
+        this.removeToastFromQueue(componentContent);
+      }, duration);
+
+      this.toastQueue.push({
+        componentContent,
+        promptAction,
+        timeoutId
+      });
 
-      setTimeout(() => {
-        promptAction?.closeCustomDialog(contentNode);
-      }, toastOptions.duration || 3000);
     } catch (error) {
       throw new Error('Can\'t open CustomDialog: ' + error);
     }
   }
 
+  private clearAllToasts() {
+    // 清理所有正在显示的Toast
+    this.toastQueue.forEach(item => {
+      if (item.timeoutId) {
+        clearTimeout(item.timeoutId);
+      }
+      try {
+        item.promptAction.closeCustomDialog(item.componentContent);
+      } catch (e) {
+        // 忽略关闭错误
+      }
+    });
+    this.toastQueue = [];
+  }
+
+  private removeToastFromQueue(componentContent: ComponentContent<object>) {
+    const index = this.toastQueue.findIndex(item => item.componentContent === componentContent);
+    if (index !== -1) {
+      const item = this.toastQueue[index];
+      if (item.timeoutId) {
+        clearTimeout(item.timeoutId);
+      }
+      this.toastQueue.splice(index, 1);
+    }
+  }
+
+  dismissToast(): void {
+    this.clearAllToasts();
+  }
+
   async showAlert(alertOptions: AlertOptions) {
     if (this.alertOptionInit) {
       alertOptions = this.mergeAlertOptions(this.alertOptionInit, alertOptions);
@@ -296,52 +361,91 @@ export class TingTurboModule extends TurboModule implements TM.Ting.Spec {
 
     const windowValue = await window.getLastWindow(this.ctx.uiAbilityContext);
     const uiContext = windowValue?.getUIContext();
-    this.alertPromptAction = uiContext?.getPromptAction();
+    const promptAction = uiContext?.getPromptAction();
 
     let option: promptAction.BaseDialogOptions = {
       alignment: DialogAlignment.Center,
-      autoCancel: true,
-      isModal: true,
+      autoCancel: false,
+      isModal: false,
       maskColor: '#00FF0000'
     };
 
-    if (alertOptions.shouldDismissByTap === false) {
-      option.autoCancel = false;
-    }
-
     if (alertOptions.backdropOpacity && alertOptions.backdropOpacity >= 1) {
       option.maskColor = '#000000';
     }
 
-    if (alertOptions.duration && alertOptions.duration !== 3000) {
-      alertOptions.duration = alertOptions.duration * 1000;
-    }
-
-    if (this.timeoutId) {
-      clearTimeout(this.timeoutId);
-      this.isCancelled = true; // 标记为取消状态
-    }
-
-    this.isCancelled = false;
+    const duration = alertOptions.duration ? alertOptions.duration * 1000 : 3000;
 
     if (alertOptions.haptic) {
       option.onDidAppear = () => this.vibrator(alertOptions.haptic as string);
     }
 
-    this.alertComponentContent = new ComponentContent(uiContext!, wrapBuilder(buildAlert), alertOptions);
+    // 创建关闭函数
+    const dismissAlert = () => {
+      this.clearAllAlerts();
+    };
+
+    const alertBuilderData: AlertBuilderData = {
+      alertOptions: alertOptions,
+      onDismiss: dismissAlert
+    };
+
+    const componentContent = new ComponentContent(uiContext!, wrapBuilder(buildAlert), alertBuilderData);
 
     try {
-      this.alertPromptAction?.openCustomDialog(this.alertComponentContent, option);
+      // 显示前先清理之前的Alert
+      this.clearAllAlerts();
 
-      this.timeoutId = setTimeout(async () => {
-        await this.alertPromptAction?.closeCustomDialog(this.alertComponentContent);
-      }, alertOptions.duration || 3000);
+      // 显示新Alert
+      promptAction?.openCustomDialog(componentContent, option);
+
+      // 添加到队列
+      const timeoutId = setTimeout(() => {
+        promptAction?.closeCustomDialog(componentContent);
+        this.removeAlertFromQueue(componentContent);
+      }, duration);
+
+      this.alertQueue.push({
+        componentContent,
+        promptAction,
+        timeoutId
+      });
 
     } catch (error) {
       throw new Error('Can\'t open CustomDialog: ' + error);
     }
   }
 
+  private clearAllAlerts() {
+    // 清理所有正在显示的Alert
+    this.alertQueue.forEach(item => {
+      if (item.timeoutId) {
+        clearTimeout(item.timeoutId);
+      }
+      try {
+        item.promptAction.closeCustomDialog(item.componentContent);
+      } catch (e) {
+        // 忽略关闭错误
+      }
+    });
+    this.alertQueue = [];
+  }
+
+  private removeAlertFromQueue(componentContent: ComponentContent<object>) {
+    const index = this.alertQueue.findIndex(item => item.componentContent === componentContent);
+    if (index !== -1) {
+      const item = this.alertQueue[index];
+      if (item.timeoutId) {
+        clearTimeout(item.timeoutId);
+      }
+      this.alertQueue.splice(index, 1);
+    }
+  }
+
+  dismissAlert(): void {
+    this.clearAllAlerts();
+  }
+
   toast(options: Object): void {
     if (options && typeof options === 'object') {
       const toastOptions = options as ToastOptions;
@@ -374,18 +478,6 @@ export class TingTurboModule extends TurboModule implements TM.Ting.Spec {
     }
   }
 
-  dismissAlert(): void {
-    if (this.timeoutId) {
-      clearTimeout(this.timeoutId);
-      this.timeoutId = null;
-      this.isCancelled = true;
-
-      if (this.alertPromptAction && this.alertComponentContent) {
-        this.alertPromptAction.closeCustomDialog(this.alertComponentContent);
-      }
-    }
-  }
-
   setup(options: Object): void {
     const opts = options as Options;
     this.alertOptionInit = opts.alert;
@@ -511,4 +603,4 @@ export class TingTurboModule extends TurboModule implements TM.Ting.Spec {
     }
     return path;
   }
-}
+}

package/harmony/ting/src/main/ets/Type.ets

@@ -23,6 +23,28 @@
  */
 
 import { common2D } from '@kit.ArkGraphics2D';
+import { ComponentContent,PromptAction } from '@kit.ArkUI';
+export interface ToastQueueItem {
+  componentContent: ComponentContent<object>;
+  promptAction: PromptAction;
+  timeoutId: number;
+}
+
+export interface AlertQueueItem {
+  componentContent: ComponentContent<object>;
+  promptAction: PromptAction;
+  timeoutId: number;
+}
+
+export interface AlertBuilderData {
+  alertOptions: AlertOptions;
+  onDismiss: () => void;
+}
+
+export interface ToastBuilderData {
+  toastOptions: ToastOptions;
+  onDismiss: () => void;
+}
 
 export interface Icon {
   size?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-ohos/ting",
-  "version": "1.2.3-rc.1",
+  "version": "1.2.3-rc.2",
   "description": "test",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",