@react-native-ohos/react-native-context-menu-view 1.19.1-rc.1 → 1.19.1

package/README.md

@@ -1,6 +1,6 @@
 # @react-native-ohos/react-native-context-menu-view
 
-This project is based on [react-native-context-menu-view](https://github.com/mpiannucci/react-native-context-menu-view/tree/v1.19.0)
+This project is based on [react-native-context-menu-view@v1.19.0](https://github.com/mpiannucci/react-native-context-menu-view/tree/v1.19.0)
 
 ## Documentation
 

package/harmony/context_menu/BuildProfile.ets

@@ -1,7 +1,7 @@
 /**
  * Use these variables when you tailor your ArkTS code. They must be of the const type.
  */
-export const HAR_VERSION = '1.19.1-rc.1';
+export const HAR_VERSION = '1.19.1';
 export const BUILD_MODE_NAME = 'debug';
 export const DEBUG = true;
 export const TARGET_NAME = 'default';

package/harmony/context_menu/oh-package.json5

@@ -2,7 +2,7 @@
   license: 'ISC',
   types: '',
   name: "@react-native-ohos/react-native-context-menu-view",
-  version: '1.19.1-rc.1',
+  version: '1.19.1',
   description: '',
   main: 'index.ets',
   type: 'module',

package/harmony/context_menu/src/main/ets/ContextMenuLongPress.ets

@@ -27,6 +27,7 @@ import Logger from './Logger';
 import { SymbolGlyphModifier } from '@kit.ArkUI';
 import { ContextMenuTwoMenu } from './ContextMenuTwoMenu';
 import { ContextMenuTwoMenuWithNoSelect } from './ContextMenuTwoMenuWithNoSelect';
+import { writeResult } from './ContextMenuTurboModule';
 
 //这里的属性类型要和ContextMenuTurboModule.ets下的ContextMenuProps一致
 interface ContextMenuProps {
@@ -227,7 +228,7 @@ export struct ContextMenuLongPress {
                 labelInfo: item.subtitle,
               })
                 .contentFont({
-                  family : this.menuFontName
+                  family: this.menuFontName
                 })
                 .selected(item.selected)
                 .selectIcon(new SymbolGlyphModifier($r('sys.symbol.checkmark')).fontSize('24vp'))
@@ -267,7 +268,7 @@ export struct ContextMenuLongPress {
                 labelInfo: item.subtitle,
               })
                 .contentFont({
-                  family : this.menuFontName
+                  family: this.menuFontName
                 })
                 .selected(item.selected)
                 .selectIcon(new SymbolGlyphModifier($r('sys.symbol.checkmark')).fontSize('24vp'))
@@ -309,7 +310,7 @@ export struct ContextMenuLongPress {
                 labelInfo: item.subtitle,
               })
                 .contentFont({
-                  family : this.menuFontName
+                  family: this.menuFontName
                 })
                 .selected(item.selected)
                 .selectIcon(new SymbolGlyphModifier($r('sys.symbol.checkmark')).fontSize('24vp'))
@@ -348,7 +349,7 @@ export struct ContextMenuLongPress {
                 labelInfo: item.subtitle,
               })
                 .contentFont({
-                  family : this.menuFontName
+                  family: this.menuFontName
                 })
                 .selected(item.selected)
                 .selectIcon(new SymbolGlyphModifier($r('sys.symbol.checkmark')).fontSize('24vp'))
@@ -384,7 +385,11 @@ export struct ContextMenuLongPress {
           }
         })
       }.backgroundColor('white')
-    }.onDisAppear(() => {
+    }
+    .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => {
+      writeResult(newValue)
+    })
+    .onDisAppear(() => {
       this.menuCtx.rnInstance.postMessageToCpp('contextMenu::onCancel', {
         itemTag: this.menuTag,
       });

package/harmony/context_menu/src/main/ets/ContextMenuLongPressWithNoSelect.ets

@@ -27,6 +27,7 @@ import Logger from './Logger';
 import { SymbolGlyphModifier } from '@kit.ArkUI';
 import { ContextMenuTwoMenu } from './ContextMenuTwoMenu';
 import { ContextMenuTwoMenuWithNoSelect } from './ContextMenuTwoMenuWithNoSelect';
+import { writeResult } from './ContextMenuTurboModule';
 
 //这里的属性类型要和ContextMenuTurboModule.ets下的ContextMenuProps一致
 interface ContextMenuProps {
@@ -366,7 +367,11 @@ export struct ContextMenuLongPressWithNoSelect {
           }
         })
       }.backgroundColor('white')
-    }.onDisAppear(() => {
+    }
+    .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => {
+      writeResult(newValue)
+    })
+    .onDisAppear(() => {
       this.menuCtx.rnInstance.postMessageToCpp('contextMenu::onCancel', {
         itemTag: this.menuTag,
       });

package/harmony/context_menu/src/main/ets/ContextMenuTurboModule.ets

@@ -23,7 +23,7 @@
  */
 
 import { TurboModule, TurboModuleContext } from "@rnoh/react-native-openharmony/ts";
-import { ComponentContent, window } from '@kit.ArkUI';
+import { ComponentContent, PromptAction, window } from '@kit.ArkUI';
 import { ContextMenuLongPress } from './ContextMenuLongPress';
 import { RNOHContext } from '@rnoh/react-native-openharmony';
 import { ContextMenuLongPressWithNoSelect } from './ContextMenuLongPressWithNoSelect';
@@ -41,6 +41,43 @@ function buildContextMenuWithNoSelect(realViewPoint: ESObject) {
 }
 
 
+let uiContext: UIContext | null = null;
+let promptAction: PromptAction | null = null;
+let contentNode: ComponentContent<Object> | null = null;
+
+let realViewPointX = 0;
+let realViewPointY = 0;
+let windowWidth: number = 0;
+let windowHeight: number = 0;
+let rnOHContext: RNOHContext;
+
+export function writeResult(newValue: SizeOptions) {
+  try {
+    let x = realViewPointX + (newValue.width as number);
+    let y = realViewPointY + (newValue.height as number);
+
+    if (x > windowWidth) {
+      realViewPointX = realViewPointX - (x - windowWidth) - 10;
+    }
+    if (y > windowHeight) {
+      realViewPointY = realViewPointY - (y - windowHeight) - 10;
+    }
+
+    promptAction?.openCustomDialog(contentNode, {
+      alignment: DialogAlignment.TopStart,
+      offset: {
+        dx: realViewPointX,
+        dy: realViewPointY,
+      }
+    })
+    rnOHContext.rnInstance.cppEventEmitter.subscribe("RNGH::CLOSE_MENU", () => {
+      promptAction?.closeCustomDialog(contentNode);
+    })
+  } catch (error) {
+    console.error(`eroor`);
+  }
+}
+
 export interface ContextMenuProps {
   tag?: number;
   width?: number;
@@ -104,12 +141,14 @@ export class ContextMenuTurboModule extends TurboModule {
 
   constructor(ctx: TurboModuleContext) {
     super(ctx)
+    rnOHContext = ctx;
     if (this.ctx.rnInstance.getArchitecture() === "C_API") {
       //e为C层拦截的ArkUI_UIInputEvent
       this.ctx.rnInstance.cppEventEmitter.subscribe("RNGH::TOUCH_EVENT", (e: ESObject) => {
         //获取view坐标
         console.log('ContextMenu:在ArkTs侧获取到了点击事件！TOUCH_EVENT，touchableViews：' +
-        JSON.stringify(e.touchableViews) + '最后点击的节点为View:' + JSON.stringify(e.touchableViews[e.touchableViews.length-1]));
+        JSON.stringify(e.touchableViews) + '最后点击的节点为View:' +
+        JSON.stringify(e.touchableViews[e.touchableViews.length-1]));
         //e.action进行获取点击事件的次数，进行判定
         switch (e.action) {
           case 1:
@@ -120,6 +159,9 @@ export class ContextMenuTurboModule extends TurboModule {
             this.romWidth = e.touchableViews[0].width;
             this.realViewPoint.romHeight = e.touchableViews[0].height;
             this.romHeight = e.touchableViews[0].height;
+
+            windowWidth = this.romWidth;
+            windowHeight = this.romHeight;
             break;
           case 2:
             //isCancel = true; move x1-x > 150 移动判断  y1-y >200
@@ -142,6 +184,9 @@ export class ContextMenuTurboModule extends TurboModule {
               this.windowX = e.touchPoints[0].windowX;
               this.realViewPoint.windowY = e.touchPoints[0].windowY;
               this.windowY = e.touchPoints[0].windowY;
+
+              realViewPointX = this.windowX;
+              realViewPointY = this.windowY;
               this.realViewPoint.touchViewActions = e.touchViewActions;
               let selectedActions: ESObject = e.touchViewActions;
               if (!this.longPressLock) {
@@ -197,6 +242,10 @@ export class ContextMenuTurboModule extends TurboModule {
               this.windowX = e.touchPoints[0].windowX;
               this.realViewPoint.windowY = e.touchPoints[0].windowY;
               this.windowY = e.touchPoints[0].windowY;
+
+              realViewPointX = this.windowX;
+              realViewPointY = this.windowY;
+
               //此处获取actions值
               this.realViewPoint.touchViewActions = e.touchViewActions;
               //当获取到了view视图,并且dropdownMenuMode为true的时候,进入单点效果.
@@ -244,54 +293,18 @@ export class ContextMenuTurboModule extends TurboModule {
   onTouch(realViewPoint: Object) {
     window.getLastWindow(this.ctx.uiAbilityContext)
       .then((value) => {
-        const uiContext = value.getUIContext()
-        const promptAction = uiContext?.getPromptAction();
-        const contentNode = new ComponentContent(uiContext!, wrapBuilder(buildContextMenu), realViewPoint);
-        let offDx = -this.romWidth / 2 + this.windowX + this.width / 2;
-        let OffDy = -this.romHeight / 2 + this.windowY + this.height * 0.4 + 48 * this.menuHeight;
-        try {
-          promptAction?.openCustomDialog(contentNode, {
-            offset: {
-              dx: offDx,
-              dy: OffDy,
-            }
-          })
-          this.menuHeight = 0;
-          this.ctx.rnInstance.cppEventEmitter.subscribe("RNGH::CLOSE_MENU", () => {
-            promptAction?.closeCustomDialog(contentNode);
-            offDx = 0;
-            OffDy = 0;
-          })
-        } catch (error) {
-          console.error(`eroor`);
-        }
+        uiContext = value.getUIContext()
+        promptAction = uiContext?.getPromptAction();
+        contentNode = new ComponentContent(uiContext!, wrapBuilder(buildContextMenu), realViewPoint);
       })
   }
 
   onTouchWithNoSelect(realViewPoint: Object) {
     window.getLastWindow(this.ctx.uiAbilityContext)
       .then((value) => {
-        const uiContext = value.getUIContext()
-        const promptAction = uiContext?.getPromptAction();
-        const contentNode = new ComponentContent(uiContext!, wrapBuilder(buildContextMenuWithNoSelect), realViewPoint);
-        let offDx = -this.romWidth / 2 + this.windowX + this.width / 2;
-        let OffDy = -this.romHeight / 2 + this.windowY + this.height * 0.4 + 48 * this.menuHeight;
-        try {
-          promptAction?.openCustomDialog(contentNode, {
-            offset: {
-              dx: offDx,
-              dy: OffDy,
-            }
-          })
-          this.menuHeight = 0;
-          this.ctx.rnInstance.cppEventEmitter.subscribe("RNGH::CLOSE_MENU", () => {
-            promptAction?.closeCustomDialog(contentNode);
-            offDx = 0;
-            OffDy = 0;
-          })
-        } catch (error) {
-          console.error(`eroor`);
-        }
+        uiContext = value.getUIContext()
+        promptAction = uiContext?.getPromptAction();
+        contentNode = new ComponentContent(uiContext!, wrapBuilder(buildContextMenuWithNoSelect), realViewPoint);
       })
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-ohos/react-native-context-menu-view",
-  "version": "1.19.1-rc.1",
+  "version": "1.19.1",
   "description": "Use native context menu views from React Native",
   "main": "index.js",
   "types": "index.d.ts",
@@ -22,13 +22,13 @@
     "android",
     "harmony"
   ],
-  "repository": "https://github.com/<your_github_handle>/rtn-centered-text",
+  "repository": "https://github.com/react-native-oh-library/react-native-context-menu-view",
   "author": "<Your Name> <your_email@your_provider.com> (https://github.com/<your_github_handle>)",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/<your_github_handle>/rtn-centered-text/issues"
+    "url": "https://github.com/react-native-oh-library/react-native-context-menu-view/issues"
   },
-  "homepage": "https://github.com/<your_github_handle>/rtn-centered-text#readme",
+  "homepage": "https://github.com/react-native-oh-library/react-native-context-menu-view/tree/br_rnoh0.77#readme",
   "peerDependencies": {
     "react": "*",
     "react-native": "*"

package/react-native-context-menu-view.podspec

@@ -1,26 +0,0 @@
-require "json"
-
-package = JSON.parse(File.read(File.join(__dir__, "package.json")))
-
-Pod::Spec.new do |s|
-  s.name         = "react-native-context-menu-view"
-  s.version      = package["version"]
-  s.summary      = package["description"]
-  s.description  = <<-DESC
-                  react-native-context-menu-view
-                   DESC
-  s.homepage     = "https://github.com/mpiannucci/react-native-context-menu-view"
-  s.license      = "MIT"
-  # s.license    = { :type => "MIT", :file => "FILE_LICENSE" }
-  s.authors      = { "Matthew Iannucci" => "mpiannucci@gmail.com" }
-  s.platforms    = { :ios => "9.0" }
-  s.source       = { :git => "https://github.com/mpiannucci/react-native-context-menu-view.git", :tag => "#{s.version}" }
-
-  s.source_files = "ios/**/*.{h,m,swift}"
-  s.requires_arc = true
-
-  s.dependency "React"
-  # ...
-  # s.dependency "..."
-end
-