@react-native-ohos/ting 1.3.0-rc.2 → 1.3.0-rc.4

package/harmony/ting/BuildProfile.ets

@@ -1,5 +1,5 @@
 export default class BuildProfile { 
-	static readonly HAR_VERSION = '1.3.0-rc.2';
+	static readonly HAR_VERSION = '1.3.0-rc.4';
 	static readonly BUILD_MODE_NAME = 'debug';
 	static readonly DEBUG = true;
 	static readonly TARGET_NAME = 'default';

package/harmony/ting/oh-package.json5

@@ -5,7 +5,7 @@
   description: '',
   main: 'index.ets',
   type: 'module',
-  version: '1.3.0-rc.2',
+  version: '1.3.0-rc.4',
   dependencies: {
     "@rnoh/react-native-openharmony": "file:../../node_modules/@react-native-oh/react-native-harmony/harmony/react_native_openharmony.har"
   },

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

@@ -23,24 +23,24 @@
  */
 
 import { TurboModule } from '@rnoh/react-native-openharmony/ts';
-import { TM } from "../ets/generated/ts";
-import { ComponentContent, PromptAction, promptAction, window } from '@kit.ArkUI';
-import { ToastOptions, AlertOptions, Options, AlertBuilderData } 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,13 +119,27 @@ 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(alertBuilderData: AlertBuilderData) {
   Column() {
+    // 图标部分
     if (!alertBuilderData.alertOptions.icon?.uri) {
       if (alertBuilderData.alertOptions.preset === 'spinner') {
         Progress({ value: 0, total: 100, type: ProgressType.Ring })
@@ -189,6 +203,7 @@ function buildAlert(alertBuilderData: AlertBuilderData) {
       }
     }
 
+    // 文本部分
     Column() {
       Text(alertBuilderData.alertOptions.title || '')
         .fontSize(16)
@@ -230,14 +245,12 @@ function buildAlert(alertBuilderData: AlertBuilderData) {
 }
 
 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) {
@@ -250,51 +263,99 @@ 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);
@@ -302,33 +363,22 @@ 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';
+      let baseOption = alertOptions as promptAction.BaseDialogOptions;
+      option.isModal = baseOption?.isModal;
     }
 
-    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);
@@ -336,7 +386,7 @@ export class TingTurboModule extends TurboModule implements TM.Ting.Spec {
 
     // 创建关闭函数
     const dismissAlert = () => {
-      this.dismissAlert();
+      this.clearAllAlerts();
     };
 
     const alertBuilderData: AlertBuilderData = {
@@ -344,21 +394,62 @@ export class TingTurboModule extends TurboModule implements TM.Ting.Spec {
       onDismiss: dismissAlert
     };
 
-
-    this.alertComponentContent = new ComponentContent(uiContext!, wrapBuilder(buildAlert), alertBuilderData);
+    const componentContent = new ComponentContent(uiContext!, wrapBuilder(buildAlert), alertBuilderData);
 
     try {
-      this.alertPromptAction?.openCustomDialog(this.alertComponentContent, option);
+      // 显示前先清理之前的Alert
+      this.clearAllAlerts();
+
+      // 显示新Alert
+      promptAction?.openCustomDialog(componentContent, option);
+
+      // 添加到队列
+      const timeoutId = setTimeout(() => {
+        promptAction?.closeCustomDialog(componentContent);
+        this.removeAlertFromQueue(componentContent);
+      }, duration);
 
-      this.timeoutId = setTimeout(async () => {
-        await this.alertPromptAction?.closeCustomDialog(this.alertComponentContent);
-      }, alertOptions.duration || 3000);
+      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;
@@ -391,18 +482,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;
@@ -528,4 +607,4 @@ export class TingTurboModule extends TurboModule implements TM.Ting.Spec {
     }
     return path;
   }
-}
+}

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

@@ -23,12 +23,29 @@
  */
 
 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;
   uri?: string | number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-ohos/ting",
-  "version": "1.3.0-rc.2",
+  "version": "1.3.0-rc.4",
   "description": "test",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -42,7 +42,6 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@evilmartians/lefthook": "^1.2.2",
     "@commitlint/config-conventional": "^17.0.2",
     "@evilmartians/lefthook": "^1.5.0",
     "@react-native/eslint-config": "^0.73.1",
@@ -58,9 +57,9 @@
     "jest": "^29.7.0",
     "pod-install": "^0.1.0",
     "prettier": "^3.0.3",
-    "react": "18.3.1",			
-    "react-native": "0.77.1",			
-    "react-native-builder-bob": "^0.20.0",
+    "react": "18.3.1",
+    "react-native": "0.77.1",
+    "react-native-builder-bob": "^0.20.4",
     "release-it": "^15.0.0",
     "turbo": "^1.10.7",
     "typescript": "^5.2.2"