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

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

@@ -0,0 +1,375 @@
+/**
+ * MIT License
+ *
+ * Copyright (C) 2024 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
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { RNOHContext, } from '@rnoh/react-native-openharmony'
+import Logger from './Logger';
+import { SymbolGlyphModifier } from '@kit.ArkUI';
+import { ContextMenuTwoMenu } from './ContextMenuTwoMenu';
+import { ContextMenuTwoMenuWithNoSelect } from './ContextMenuTwoMenuWithNoSelect';
+
+//这里的属性类型要和ContextMenuTurboModule.ets下的ContextMenuProps一致
+interface ContextMenuProps {
+  tag?: number;
+  width?: number;
+  height?: number;
+  x?: number;
+  y?: number;
+  windowX?: number;
+  windowY?: number;
+  title?: string;
+  titleColor?: string;
+  action?: string;
+  dropdownMenuMode?: boolean;
+  disabled?: boolean;
+  subtitle?: string;
+
+  // disabledArray?: Array<boolean>;
+  selected?: boolean;
+  previewBackgroundColor?: string;
+  actionsTitle?: string;
+  touchViewActions?: ContextMenuProps
+  ctx: RNOHContext
+  romWidth?: number;
+  romHeight?: number;
+  systemIcon?: string;
+  icon?: string;
+  destructive?: string
+  iconColor?: string;
+  fontName?: string;
+
+  //二级目录
+  inlineChildren?: boolean;
+  d_childActions?: ContextMenuProps;
+  childActionsTag?: number;
+
+  //2+目录
+  childActions?: ContextMenuProps;
+}
+
+@Component
+export struct ContextMenuLongPressWithNoSelect {
+  public static readonly NAME = "ContextMenuLongPressWithNoSelect"
+  menuCtx!: RNOHContext;
+  menuTag: number = 0;
+  @State realViewPoint: Object = [];
+  @State listDate: ContextMenuProps[] = [];
+  @State menuTitle: string = '';
+  @State menuX: number = 0;
+  @State menuY: number = 0;
+  @State menuWidth: number = 0;
+  @State menuHeight: number = 0;
+  @State menuDisable: boolean = true;
+  @State menuRomWidth: number = 0;
+  @State menuRomHeight: number = 0;
+  @State menuWindowX: number = 0;
+  @State menuWindowY: number = 0;
+  @State menuIndexPath: number[] = [];
+  @State menuDestructive: string = '';
+  @State childActionsListDate: ESObject[] = [];
+  @State isTouch: boolean | undefined = false;
+  @State isTouchWithNoSelect: boolean | undefined = false;
+  @State isTouchViewNumber: number = 0;
+  @State isChildActionsTouchViewNumber: number = 0;
+  @State menuChildActions: ContextMenuProps[] = [];
+  @State menuChild: ESObject[] = [];
+  @State deepChildActions: ESObject[] = [];
+  @State isShow: boolean = false;
+  @State twoMenu: ESObject[] = [];
+  @State selectedFlag: ESObject[] = [ ];
+  @State menuFontName: string = '';
+  private uiContext: UIContext = this.getUIContext();
+
+  aboutToAppear() {
+    let longPress: ESObject = this.realViewPoint;
+    // 获取Font资源
+    this.menuFontName = longPress.fontName
+    this.uiContext.getFont().registerFont({
+      familyName: this.menuFontName,
+      familySrc: $rawfile(`${this.menuFontName}.TTF`)
+    })
+    //menu的大标题
+    this.menuTitle = longPress.title;
+    //获取menu的xy轴，以及view视图的长宽
+    this.menuX = longPress.x;
+    this.menuY = longPress.y;
+    this.menuWidth = longPress.width;
+    this.menuHeight = longPress.height;
+    this.menuCtx = longPress.ctx;
+    this.menuTag = longPress.tag;
+    //获取设备的长宽
+    this.menuRomWidth = longPress.romWidth;
+    this.menuRomHeight = longPress.romHeight;
+    //获取点击时候的点击事件的xy,基于屏幕左上角
+    this.menuWindowX = longPress.windowX;
+    this.menuWindowY = longPress.windowY;
+    this.listDate = longPress.touchViewActions;
+    //判断destructive(可破坏)，默认false，表示不可破坏。
+    for (let i = 0; i < longPress.touchViewActions.length; i++) {
+      if (longPress.touchViewActions[i].destructive) {
+        //可破坏为红色
+        this.listDate[i].titleColor = 'red';
+      }
+    }
+    //  contextMenu入参为disabled,是否禁用选项，默认为false，表示不用禁用.
+    //  但是在harmony Next调用enable的入参,harmony Next:true =  RN：false
+    for (let i = 0; i < longPress.touchViewActions.length; i++) {
+      if (longPress.touchViewActions[i].disabled) {
+        //为true，表示禁用，对应harmony next 的false
+        this.listDate[i].disabled = false;
+      } else {
+        //contextMenu的false 对标 harmony 的 true
+        this.listDate[i].disabled = true;
+      }
+    }
+    for (let i = 0; i < longPress.touchViewActions.length; i++) {
+      if (longPress.touchViewActions[i].selected) {
+        //复选框，默认为false
+        this.listDate[i].selected = true;
+      } else {
+        this.listDate[i].selected = false;
+      }
+    }
+
+    //遍历传递回前端的indexPath,indexPath只会计算子节点index
+    for (let i = 0; i < longPress.touchViewActions.length; i++) {
+      this.menuIndexPath[i] = i;
+    }
+
+    //二级目录,均和一级目录一致
+    // 遍历查询是否有二级目录
+    for (let i = 0; i < longPress.touchViewActions.length; i++) {
+      if (longPress.touchViewActions[i].d_childActions !== '' ||
+        longPress.touchViewActions[i].d_childActions !== undefined ||
+        longPress.touchViewActions[i].d_childActions !== null) {
+        //有二级菜单
+        this.childActionsListDate[i] = longPress.touchViewActions[i].d_childActions;
+      }
+    }
+    ;
+
+    for (let i = 0; i < this.childActionsListDate.length; i++) {
+      if (this.childActionsListDate[i] !== null && this.childActionsListDate[i] !== undefined &&
+        this.childActionsListDate[i] !== '') {
+        let j = i;
+        //默认为false，这里判断disabled
+        for (let k = 0; k < this.childActionsListDate[j].length; k++) {
+          this.menuIndexPath[k] = k;
+          if ((this.childActionsListDate[j])[k].disabled) {
+            (this.childActionsListDate[j])[k].disabled = false;
+          } else {
+            //contextMenu的false 对标 harmony 的 true
+            (this.childActionsListDate[j])[k].disabled = true;
+          }
+          if ((this.childActionsListDate[j])[k].selected) {
+            this.selectedFlag[k] = 1;
+          } else {
+            this.selectedFlag[k] = 0;
+          }
+        }
+      }
+    }
+    console.log('20240919----------------------'+JSON.stringify(this.childActionsListDate.length));
+  }
+
+  //退出组件
+  aboutToDisappear() {
+  }
+
+  @Builder
+  twoMenuView() {
+    ContextMenuTwoMenu(
+      {
+        realViewPoint: this.twoMenu,
+        menuCtx: this.menuCtx,
+        menuTag: this.menuTag
+      });
+  }
+
+  @Builder
+  twoMenuViewWithNoSelect() {
+    ContextMenuTwoMenuWithNoSelect(
+      {
+        realViewPoint: this.twoMenu,
+        menuCtx: this.menuCtx,
+        menuTag: this.menuTag
+      });
+  }
+
+  build() {
+    Menu() {
+      MenuItemGroup({ header: this.menuTitle }) {
+        //遍历数据，把每个menuTitle塞入到对应的menu中
+        ForEach(this.listDate, (item: ContextMenuProps, index) => {
+          if (item.systemIcon) {
+            if (this.childActionsListDate.length >= 0) {
+              MenuItem({
+                content: item.title,
+                symbolEndIcon: new SymbolGlyphModifier($r(item.systemIcon)).fontSize('24vp')
+                  .fontColor([item.iconColor]),
+                labelInfo: item.subtitle,
+              })
+                .contentFont({
+                  family : this.menuFontName
+                })
+                .alignSelf(ItemAlign.Start)
+                .enabled(item.disabled)
+                .contentFontColor(item.titleColor)
+                .onClick(() => {
+                  //当item.inlineChildren默认为false,表示以二级目录展示
+                  //true的时候,以同目录展示
+                  this.isTouch = true && (!item.inlineChildren) && (item.d_childActions !== undefined);
+                  this.isTouchWithNoSelect = this.isTouch ;
+                  this.isTouchViewNumber = index;
+                  this.twoMenu = this.childActionsListDate[this.isTouchViewNumber]
+                  console.log('2024touch:' + this.isTouch + ',' + 'inlineChildren:' + item.inlineChildren + ',' +
+                    'isTouchViewNumber:' + this.isTouchViewNumber);
+                  //当item.inlineChildren默认为false，二级目录展示时候,点击一级目录，不关闭，在二级目录后关闭
+                  //当item.inlineChildren为false的时候，就不需要关闭该窗口.
+                  if (item.inlineChildren || (item.d_childActions == undefined)) {
+                    this.menuCtx.rnInstance.postMessageToCpp('contextMenu::SET_NATIVE_RESPONDERS_BLOCK', {
+                      itemTitle: item.title,
+                      itemTag: this.menuTag,
+                      itemIndex: index,
+                      itemIndexPath: [0],
+                      itemInlineChildren: item.inlineChildren
+                    });
+                  }     })//弹框,通过inlineChildren来判定是否有二级目录,ture有二级目录
+                .bindContextMenu(this.isTouch, this.twoMenuView())
+
+            } else {
+              MenuItem({
+                content: item.title,
+                symbolEndIcon: new SymbolGlyphModifier($r(item.systemIcon)).fontSize('24vp')
+                  .fontColor([item.iconColor]),
+                labelInfo: item.subtitle,
+              })
+                .contentFont({
+                  family : this.menuFontName
+                })
+                .alignSelf(ItemAlign.Start)
+                .enabled(item.disabled)
+                .contentFontColor(item.titleColor)
+                .onClick(() => {
+                  //当item.inlineChildren默认为false,表示以二级目录展示
+                  //true的时候,以同目录展示
+                  this.isTouch = true && (!item.inlineChildren) && (item.d_childActions !== undefined);
+                  this.isTouchWithNoSelect = this.isTouch ;
+                  this.isTouchViewNumber = index;
+                  this.twoMenu = this.childActionsListDate[this.isTouchViewNumber]
+                  console.log('2024touch:' + this.isTouch + ',' + 'inlineChildren:' + item.inlineChildren + ',' +
+                    'isTouchViewNumber:' + this.isTouchViewNumber);
+                  //当item.inlineChildren默认为false，二级目录展示时候,点击一级目录，不关闭，在二级目录后关闭
+                  //当item.inlineChildren为false的时候，就不需要关闭该窗口.
+                  if (item.inlineChildren || (item.d_childActions == undefined)) {
+                    this.menuCtx.rnInstance.postMessageToCpp('contextMenu::SET_NATIVE_RESPONDERS_BLOCK', {
+                      itemTitle: item.title,
+                      itemTag: this.menuTag,
+                      itemIndex: index,
+                      itemIndexPath: [0],
+                      itemInlineChildren: item.inlineChildren
+                    });
+                  }
+                })//弹框,通过inlineChildren来判定是否有二级目录,ture有二级目录
+                .bindContextMenu(this.isTouchWithNoSelect, this.twoMenuViewWithNoSelect())
+            }
+          } else {
+            //如果没有systemIcon,则走自定义图标
+            if (this.childActionsListDate.length >= 0) {
+              MenuItem({
+                content: item.title,
+                endIcon: $r(item.icon),
+                labelInfo: item.subtitle,
+              })
+                .contentFont({
+                  family : this.menuFontName
+                })
+                .alignSelf(ItemAlign.Start)
+                .enabled(item.disabled)
+                .contentFontColor(item.titleColor)
+                .onClick(() => {
+                  //当item.inlineChildren默认为false,表示以二级目录展示
+                  //true的时候,以同目录展示
+                  this.isTouch = true && (!item.inlineChildren) && (item.d_childActions !== undefined);
+                  this.isTouchViewNumber = index;
+                  this.twoMenu = this.childActionsListDate[this.isTouchViewNumber]
+                  console.log('2024touch:' + this.isTouch + ',' + 'inlineChildren:' + item.inlineChildren + ',' +
+                    'isTouchViewNumber:' + this.isTouchViewNumber);
+                  //当item.inlineChildren默认为false，二级目录展示时候,点击一级目录，不关闭，在二级目录后关闭
+                  //当item.inlineChildren为false的时候，就不需要关闭该窗口.
+                  if (item.inlineChildren || (item.d_childActions == undefined)) {
+                    this.menuCtx.rnInstance.postMessageToCpp('contextMenu::SET_NATIVE_RESPONDERS_BLOCK', {
+                      itemTitle: item.title,
+                      itemTag: this.menuTag,
+                      itemIndex: index,
+                      itemIndexPath: [0],
+                      itemInlineChildren: item.inlineChildren
+                    });
+                  }
+                })//弹框,通过inlineChildren来判定是否有二级目录,ture有二级目录
+                .bindContextMenu(this.isTouch, this.twoMenuView())
+            } else {
+              MenuItem({
+                content: item.title,
+                endIcon: $r(item.icon),
+                labelInfo: item.subtitle,
+              })
+                .contentFont({
+                  family : this.menuFontName
+                })
+                .alignSelf(ItemAlign.Start)
+                .enabled(item.disabled)
+                .contentFontColor(item.titleColor)
+                .onClick(() => {
+                  //当item.inlineChildren默认为false,表示以二级目录展示
+                  //true的时候,以同目录展示
+                  this.isTouch = true && (!item.inlineChildren) && (item.d_childActions !== undefined);
+                  this.isTouchWithNoSelect = this.isTouch;
+                  this.isTouchViewNumber = index;
+                  this.twoMenu = this.childActionsListDate[this.isTouchViewNumber]
+                  console.log('2024touch:' + this.isTouch + ',' + 'inlineChildren:' + item.inlineChildren + ',' +
+                    'isTouchViewNumber:' + this.isTouchViewNumber);
+                  //当item.inlineChildren默认为false，二级目录展示时候,点击一级目录，不关闭，在二级目录后关闭
+                  //当item.inlineChildren为false的时候，就不需要关闭该窗口.
+                  if (item.inlineChildren || (item.d_childActions == undefined)) {
+                    this.menuCtx.rnInstance.postMessageToCpp('contextMenu::SET_NATIVE_RESPONDERS_BLOCK', {
+                      itemTitle: item.title,
+                      itemTag: this.menuTag,
+                      itemIndex: index,
+                      itemIndexPath: [0],
+                      itemInlineChildren: item.inlineChildren
+                    });
+                  }
+                })//弹框,通过inlineChildren来判定是否有二级目录,ture有二级目录
+                .bindContextMenu(this.isTouchWithNoSelect, this.twoMenuViewWithNoSelect())
+            }
+          }
+        })
+      }.backgroundColor('white')
+    }.onDisAppear(() => {
+      this.menuCtx.rnInstance.postMessageToCpp('contextMenu::onCancel', {
+        itemTag: this.menuTag,
+      });
+    })
+  }
+}

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

@@ -0,0 +1,47 @@
+/**
+ * MIT License
+ *
+ * Copyright (C) 2024 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
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import {RNPackage, TurboModulesFactory} from '@rnoh/react-native-openharmony/ts';
+import type {TurboModule, TurboModuleContext} from '@rnoh/react-native-openharmony/ts';
+import { ContextMenuTurboModule } from './ContextMenuTurboModule';
+
+class ContextMenuTurboModulesFactory extends TurboModulesFactory {
+  createTurboModule(name: string): TurboModule | null {
+    if (name === "ContextMenuTurboModule") {
+      console.log('20240722---我在ArkTs侧获取到了点击事件！ContextMenuTurboModulesFactory')
+      return new ContextMenuTurboModule(this.ctx);
+    }
+    return null;
+  }
+
+  hasTurboModule(name: string): boolean {
+    return name === "ContextMenuTurboModule";
+  }
+}
+
+export class ContextMenuPackage extends RNPackage {
+  createTurboModulesFactory(ctx: TurboModuleContext): TurboModulesFactory {
+    return new ContextMenuTurboModulesFactory(ctx);
+  }
+}

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

@@ -0,0 +1,225 @@
+/**
+ * MIT License
+ *
+ * Copyright (C) 2024 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
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { RNOHContext, } from '@rnoh/react-native-openharmony'
+import Logger from './Logger';
+import { SymbolGlyphModifier } from '@kit.ArkUI';
+import { ContextMenuThreeMenuWithNoSelect } from './ContextMenuThreeMenuWithNoSelect';
+
+//这里的属性类型要和ContextMenuTurboModule.ets下的ContextMenuProps一致
+interface ContextMenuProps {
+  tag?: number;
+  width?: number;
+  height?: number;
+  x?: number;
+  y?: number;
+  windowX?: number;
+  windowY?: number;
+  title?: string;
+  titleColor?: string;
+  action?: string;
+  dropdownMenuMode?: boolean;
+  disabled?: boolean;
+  subtitle?: string;
+
+  // disabledArray?: Array<boolean>;
+  selected?: boolean;
+  previewBackgroundColor?: string;
+  actionsTitle?: string;
+  touchViewActions?: ContextMenuProps
+  ctx: RNOHContext
+  romWidth?: number;
+  romHeight?: number;
+  systemIcon?: string;
+  icon?: string;
+  destructive?: string
+  iconColor?: string;
+
+  //二级目录
+  inlineChildren?: boolean;
+  d_childActions?: ContextMenuProps;
+  childActionsTag?: number;
+
+  //2+目录
+  childActions?: ContextMenuProps;
+}
+
+@Component
+export struct ContextMenuThreeMenu {
+  public static readonly NAME = "ContextMenuThreeMenu"
+  menuCtx!: RNOHContext;
+  menuTag: number = 0;
+  longPress: ESObject = []
+  @State realViewPoint: Object = [];
+  @State listDate: ContextMenuProps[] = [];
+  @State menuIndexPath: number[] = [];
+  @State menuDestructive: string = '';
+  @State childActionsListDate: ESObject[] = [];
+  @State isTouch: boolean | undefined = false;
+  @State isTouchViewNumber: number = 0;
+  @State isChildActionsTouchViewNumber: number = 0;
+  @State menuChildActions: ContextMenuProps[] = [];
+  @State menuChild: ESObject[] = [];
+  @State deepChildActions: ESObject[] = [];
+  @State isShow: boolean = false;
+  @State nextMenu: ESObject[] = [];
+  @State selectedFlag: number = 0;
+
+  aboutToAppear() {
+    //从前一个菜单传递过来的
+    this.longPress = this.realViewPoint;
+    this.menuCtx = this.menuCtx;
+    this.menuTag = this.menuTag;
+    Logger.info('2024-3menu:' + JSON.stringify(this.longPress))
+    //menu的大标题
+    this.listDate = this.longPress;
+    Logger.info('2024-3menu,this.listDate:' + JSON.stringify(this.listDate))
+    for (let i = 0; i < this.listDate.length; i++) {
+      if (this.listDate[i] !== null && this.listDate[i] !== undefined) {
+        //为true，表示禁用，对应harmony next 的false
+        if (this.listDate[i].disabled) {
+          //为true，表示禁用，对应harmony next 的false
+          this.listDate[i].disabled = false;
+        } else {
+          //contextMenu的false 对标 harmony 的 true
+          this.listDate[i].disabled = true;
+        }
+      }
+    }
+    //遍历传递回前端的indexPath,indexPath只会计算子节点index
+    //第一个节点表示对应的深层目录，从3级起算
+    for (let i = 0; i < this.listDate.length; i++) {
+      this.menuIndexPath[i+1] = i;
+    }
+    for (let i = 0; i < this.listDate.length; i++) {
+      if (this.longPress[i].selected) {
+        this.selectedFlag++;
+      }
+    }
+  }
+
+  //退出组件
+  aboutToDisappear() {
+  }
+
+  @Builder
+  NextMenu() {
+    ContextMenuThreeMenu(
+      {
+        realViewPoint: this.nextMenu,
+        menuCtx: this.menuCtx,
+        menuTag: this.menuTag
+      });
+  }
+
+  @Builder
+  NextMenuWithNoSelect() {
+    ContextMenuThreeMenuWithNoSelect(
+      {
+        realViewPoint: this.nextMenu,
+        menuCtx: this.menuCtx,
+        menuTag: this.menuTag
+      });
+  }
+
+  build() {
+    Menu() {
+      ForEach(this.listDate, (childItem: ContextMenuProps, index1) => {
+        if (childItem.systemIcon) {
+          MenuItem({
+            content: childItem.title,
+            symbolEndIcon: new SymbolGlyphModifier($r(childItem.systemIcon)).fontSize('24vp')
+              .fontColor([childItem.iconColor]),
+            labelInfo: childItem.subtitle,
+            builder: (): void => {
+              if (childItem.childActions !== undefined) {
+                this.nextMenu = this.longPress[index1].childActions;
+                if (this.selectedFlag !== 0) {
+                  this.NextMenu();
+                } else {
+                  this.NextMenuWithNoSelect();
+                }
+              }
+            }
+          })//selected复选标记,根据传入的selected来判断selected为默认为false,不显示
+            .selected(childItem.selected)
+            .selectIcon(new SymbolGlyphModifier($r('sys.symbol.checkmark')).fontSize('24vp'))
+            .alignSelf(ItemAlign.Start)
+            .enabled(childItem.disabled)
+            .contentFontColor(childItem.titleColor)
+            .onClick(() => {
+              this.nextMenu = this.longPress[index1].childActions;
+              this.isTouch = true && (!childItem.inlineChildren) && (childItem.childActions !== undefined);
+              this.isTouchViewNumber = index1;
+              if (childItem.inlineChildren || (childItem.childActions == undefined)) {
+                this.menuCtx.rnInstance.postMessageToCpp('contextMenu::SET_NATIVE_RESPONDERS_BLOCK', {
+                  itemTitle: childItem.title,
+                  itemTag: this.menuTag,
+                  itemIndex: index1,
+                  itemIndexPath: this.menuIndexPath,
+                  itemInlineChildren: childItem.inlineChildren
+                });
+              }
+            })
+        } else {
+          MenuItem({
+            content: childItem.title,
+            endIcon: $r(childItem.icon),
+            labelInfo: childItem.subtitle,
+            builder: (): void => {
+              if (childItem.childActions !== undefined) {
+                this.nextMenu = this.longPress[index1].childActions;
+                if (this.selectedFlag !== 0) {
+                  this.NextMenu();
+                } else {
+                  this.NextMenuWithNoSelect();
+                }
+              }
+            }
+          })//selected复选标记,根据传入的selected来判断selected为默认为false,不显示
+            .selected(childItem.selected)
+            .selectIcon(new SymbolGlyphModifier($r('sys.symbol.checkmark')).fontSize('24vp'))
+            .alignSelf(ItemAlign.Start)
+            .enabled(childItem.disabled)
+            .contentFontColor(childItem.titleColor)
+            .onClick(() => {
+              this.nextMenu = this.longPress[index1].childActions;
+              this.isTouch = true && (!childItem.inlineChildren) && (childItem.childActions !== undefined);
+              this.isTouchViewNumber = index1;
+              if (childItem.inlineChildren || (childItem.childActions == undefined)) {
+                this.menuCtx.rnInstance.postMessageToCpp('contextMenu::SET_NATIVE_RESPONDERS_BLOCK', {
+                  itemTitle: childItem.title,
+                  itemTag: this.menuTag,
+                  itemIndex: index1,
+                  itemIndexPath: this.menuIndexPath,
+                  itemInlineChildren: childItem.inlineChildren
+                });
+              }
+            })
+        }
+
+      })
+    }
+  }
+}