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

package/harmony/context_menu/src/main/cpp/Props.h

@@ -0,0 +1,121 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+ 
+#pragma once
+
+#include <react/renderer/components/view/ViewProps.h>
+#include <react/renderer/core/PropsParserContext.h>
+#include <react/renderer/core/propsConversions.h>
+#include <react/renderer/graphics/Color.h>
+#include <vector>
+
+namespace facebook {
+namespace react {
+
+struct RTNContextMenuActionsStruct {
+    std::string title;
+    std::string titleColor;
+    std::string subtitle = "";
+    std::string systemIcon;
+    std::string icon;
+    std::string iconColor;
+    bool destructive = false;
+    bool selected = false;
+    bool disabled = false;
+    bool inlineChildren = false;
+    std::vector<RTNContextMenuActionsStruct> actions;
+};
+
+static inline void fromRawValue(const PropsParserContext &context, const RawValue &value,
+                                RTNContextMenuActionsStruct &result) {
+    auto map = (std::unordered_map<std::string, RawValue>)value;
+
+    auto tmp_title = map.find("title");
+    if (tmp_title != map.end()) {
+        fromRawValue(context, tmp_title->second, result.title);
+    }
+    auto tmp_titleColor = map.find("titleColor");
+    if (tmp_titleColor != map.end()) {
+        fromRawValue(context, tmp_titleColor->second, result.titleColor);
+    }
+    auto tmp_subtitle = map.find("subtitle");
+    if (tmp_subtitle != map.end()) {
+        fromRawValue(context, tmp_subtitle->second, result.subtitle);
+    }
+    auto tmp_systemIcon = map.find("systemIcon");
+    if (tmp_systemIcon != map.end()) {
+        fromRawValue(context, tmp_systemIcon->second, result.systemIcon);
+    }
+    auto tmp_icon = map.find("icon");
+    if (tmp_icon != map.end()) {
+        fromRawValue(context, tmp_icon->second, result.icon);
+    }
+    auto tmp_iconColor = map.find("iconColor");
+    if (tmp_iconColor != map.end()) {
+        fromRawValue(context, tmp_iconColor->second, result.iconColor);
+    }
+    auto tmp_destructive = map.find("destructive");
+    if (tmp_destructive != map.end()) {
+        fromRawValue(context, tmp_destructive->second, result.destructive);
+    }
+    auto tmp_selected = map.find("selected");
+    if (tmp_selected != map.end()) {
+        fromRawValue(context, tmp_selected->second, result.selected);
+    }
+    auto tmp_disabled = map.find("disabled");
+    if (tmp_disabled != map.end()) {
+        fromRawValue(context, tmp_disabled->second, result.disabled);
+    }
+    auto tmp_inlineChildren = map.find("inlineChildren");
+    if (tmp_inlineChildren != map.end()) {
+        fromRawValue(context, tmp_inlineChildren->second, result.inlineChildren);
+    }
+    auto tmp_actions = map.find("actions");
+    if (tmp_actions != map.end()) {
+        fromRawValue(context, tmp_actions->second, result.actions);
+    }
+}
+
+static inline std::string toString(const RTNContextMenuActionsStruct &value) {
+    return "[Object RTNContextMenuActionsStruct]";
+}
+
+static inline void fromRawValue(const PropsParserContext &context, const RawValue &value,
+                                std::vector<RTNContextMenuActionsStruct> &result) {
+    auto items = (std::vector<RawValue>)value;
+    for (const auto &item : items) {
+        RTNContextMenuActionsStruct newItem;
+        fromRawValue(context, item, newItem);
+        result.emplace_back(newItem);
+    }
+}
+
+// Props的定义域
+class JSI_EXPORT RTNContextMenuProps final : public ViewProps {
+public:
+    RTNContextMenuProps() = default;
+    RTNContextMenuProps(const PropsParserContext &context, const RTNContextMenuProps &sourceProps,
+                        const RawProps &rawProps);
+
+#pragma mark - Props
+
+    std::string title{};
+    std::vector<RTNContextMenuActionsStruct> actions{};
+    std::string previewBackgroundColor{};
+    bool dropdownMenuMode{};
+    bool disabled{};
+    std::string subtitle{};
+    std::string systemIcon{};
+    std::string icon{};
+    std::string iconColor{};
+    bool destructive{};
+    bool selected{};
+    bool inlineChildren{};
+    std::string fontName{};
+};
+
+} // namespace react
+} // namespace facebook

package/harmony/context_menu/src/main/cpp/RTNContextMenuComponentInstance.cpp

@@ -0,0 +1,290 @@
+/**
+ * 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.
+ */
+
+#include "RTNContextMenuComponentInstance.h"
+#include "Props.h"
+#import "RNOH/arkui/StackNode.h"
+#include <iostream>
+#include <vector>
+
+namespace rnoh {
+
+RTNContextMenuComponentInstance::RTNContextMenuComponentInstance(Context context)
+    : CppComponentInstance(std::move(context)) {
+    // 单点事件
+    // m_contextMenuNode.setCustomNodeDelegate(this);
+    // 查看node生效的范围
+    // m_contextMenuNode.setBackgroundColor(facebook::react::SharedColor(0xff7700ff));
+    m_contextMenuNode.setStackNodeDelegate(this);
+    ArkUINodeRegistry::getInstance().registerTouchHandler(&m_contextMenuNode, this);
+    NativeNodeApi::getInstance()->registerNodeEvent(m_contextMenuNode.getArkUINodeHandle(), NODE_TOUCH_EVENT,
+                                                    NODE_TOUCH_EVENT, 0);
+    auto rnInstance = m_deps->rnInstance.lock();
+    if (rnInstance) {
+        // postMessageToArkTS,创建组件发送消息
+        rnInstance->postMessageToArkTS("RNGH::ROOT_CREATED", m_tag);
+    }
+};
+
+RTNContextMenuComponentInstance::~RTNContextMenuComponentInstance() {
+    NativeNodeApi::getInstance()->unregisterNodeEvent(m_contextMenuNode.getArkUINodeHandle(), NODE_TOUCH_EVENT);
+    ArkUINodeRegistry::getInstance().unregisterTouchHandler(&m_contextMenuNode);
+}
+
+std::optional<std::string> RTNContextMenuComponentInstance::getTintColorFromDynamic(folly::dynamic value) {
+    auto rawPropsColor =
+        (value.count("backgroundColor") > 0) ? std::optional(value["backgroundColor"].asString()) : std::nullopt;
+    return rawPropsColor;
+}
+
+void RTNContextMenuComponentInstance::onChildInserted(ComponentInstance::Shared const &childComponentInstance,
+                                                      std::size_t index) {
+    // 添加子节点，rn框架自带
+    CppComponentInstance::onChildInserted(childComponentInstance, index);
+    m_contextMenuNode.insertChild(childComponentInstance->getLocalRootArkUINode(), index + 1);
+}
+
+void RTNContextMenuComponentInstance::onChildRemoved(ComponentInstance::Shared const &childComponentInstance) {
+    // 删子节点，rn框架自带
+    CppComponentInstance::onChildRemoved(childComponentInstance);
+    m_contextMenuNode.removeChild(childComponentInstance->getLocalRootArkUINode());
+};
+
+void RTNContextMenuComponentInstance::onPropsChanged(SharedConcreteProps const &props) {
+    CppComponentInstance::onPropsChanged(props);
+    if (auto p = std::dynamic_pointer_cast<const facebook::react::RTNContextMenuProps>(props)) {
+        this->title = props->title;
+        this->dropdownMenuMode = props->dropdownMenuMode;
+        this->disabled = props->disabled;
+        this->previewBackgroundColor = props->previewBackgroundColor;
+        this->icon = props->icon;
+        this->subtitle = props->subtitle;
+        this->systemIcon = props->systemIcon;
+        this->iconColor = props->iconColor;
+        this->fontName = props->fontName;
+        // ios only
+        this->destructive = props->destructive;
+        this->selected = props->selected;
+    }
+}
+
+StackNode &RTNContextMenuComponentInstance::getLocalRootArkUINode() {
+    return m_contextMenuNode;
+};
+
+// 点击时候的传递的参数,从arkTS层发送
+void RTNContextMenuComponentInstance::onClick(int index, std::vector<int> indexPath, std::string name) {
+    m_eventEmitter->onPress({index : index, indexPath : indexPath, name : name});
+}
+void RTNContextMenuComponentInstance::onCancel() {
+    m_eventEmitter->onCancel({});
+}
+
+folly::dynamic
+dynamicFromTouchableViews(const std::vector<RTNContextMenuComponentInstance::TouchableView> &touchableViews) {
+    folly::dynamic d_touchableViews = folly::dynamic::array();
+    for (auto touchableView : touchableViews) {
+        folly::dynamic d_touchableView = folly::dynamic::object;
+        d_touchableView["tag"] = touchableView.tag;
+        d_touchableView["x"] = touchableView.x;
+        d_touchableView["y"] = touchableView.y;
+        d_touchableView["width"] = touchableView.width;
+        d_touchableView["height"] = touchableView.height;
+        d_touchableViews.push_back(d_touchableView);
+    }
+    return d_touchableViews;
+}
+
+// 处理单个 RTNContextMenuActionsStruct 对象的函数
+folly::dynamic convertToDynamic(const facebook::react::RTNContextMenuActionsStruct &action, int level) {
+    folly::dynamic touchViewChildActions = folly::dynamic::object;
+    touchViewChildActions["childActionsTag"] = level;
+    touchViewChildActions["title"] = action.title;
+    touchViewChildActions["titleColor"] = action.titleColor;
+    touchViewChildActions["subtitle"] = action.subtitle;
+    touchViewChildActions["systemIcon"] = action.systemIcon;
+    touchViewChildActions["icon"] = action.icon;
+    touchViewChildActions["iconColor"] = action.iconColor;
+    touchViewChildActions["destructive"] = action.destructive;
+    touchViewChildActions["selected"] = action.selected;
+    touchViewChildActions["disabled"] = action.disabled;
+    touchViewChildActions["inlineChildren"] = action.inlineChildren;
+
+    if (!action.actions.empty()) {
+        folly::dynamic childActionsArray = folly::dynamic::array;
+        for (const auto &childAction : action.actions) {
+            childActionsArray.push_back(convertToDynamic(childAction, level + 1));
+        }
+        touchViewChildActions["childActions"] = childActionsArray;
+    }
+    return touchViewChildActions;
+}
+
+folly::dynamic convertNodeTouchPointToDynamic(ArkUI_UIInputEvent *e, int32_t index = 0) {
+    folly::dynamic result = folly::dynamic::object;
+    result["pointerId"] = OH_ArkUI_PointerEvent_GetPointerId(e, index);
+    result["windowX"] = OH_ArkUI_PointerEvent_GetWindowXByIndex(e, index);
+    result["windowY"] = OH_ArkUI_PointerEvent_GetWindowYByIndex(e, index);
+
+    return result;
+}
+
+// 1.首先触发touch事件
+void RTNContextMenuComponentInstance::onTouchEvent(ArkUI_UIInputEvent *e) {
+    auto ancestor = this->getParent().lock();
+    while (ancestor != nullptr) {
+        auto ancestorRNGHRootView = std::dynamic_pointer_cast<RTNContextMenuComponentInstance>(ancestor);
+        if (ancestorRNGHRootView != nullptr) {
+            // If there are multiple nested GestureHandlerRootViews, the one nearest to the actual root will handle
+            // the touch.
+            return;
+        }
+        ancestor = ancestor->getParent().lock();
+    }
+
+    auto ancestorTouchTarget = this->getTouchTargetParent();
+    auto rnInstance = m_deps->rnInstance.lock();
+    while (ancestorTouchTarget != nullptr) {
+        if (ancestorTouchTarget->isHandlingTouches()) {
+            // 这里同理发送给ArtTs的消息，CANCEL_TOUCHES
+            rnInstance->postMessageToArkTS("RNGH::CANCEL_TOUCHES", m_tag);
+            return;
+        }
+        ancestorTouchTarget = ancestorTouchTarget->getTouchTargetParent();
+    }
+
+    folly::dynamic payload = folly::dynamic::object;
+    payload["action"] = OH_ArkUI_UIInputEvent_GetAction(e);
+    folly::dynamic touchPoints = folly::dynamic::array();
+    auto activeWindowX = OH_ArkUI_PointerEvent_GetWindowX(e);
+    auto activeWindowY = OH_ArkUI_PointerEvent_GetWindowY(e);
+
+    // point relative to top left corner of this component（相对位置）
+    auto componentX = OH_ArkUI_PointerEvent_GetX(e);
+    auto componentY = OH_ArkUI_PointerEvent_GetY(e);
+    // 2.通过点击的xy，获取触发的点击视图
+    auto touchableViews = this->findTouchableViews(componentX, componentY);
+
+    std::stringstream touchableViewTags;
+    for (auto touchableView : touchableViews) {
+        touchableViewTags << touchableView.tag << ";";
+    }
+
+    // 3.动态获取touchableViews，然后赋值给touchableViews
+    payload["touchableViews"] = dynamicFromTouchableViews(touchableViews);
+
+    int32_t pointerCount = OH_ArkUI_PointerEvent_GetPointerCount(e);
+    int activePointerIdx = 0;
+
+    for (int i = 0; i < pointerCount; i++) {
+        // 4.将触摸节点变成动态
+        auto touchPoint = convertNodeTouchPointToDynamic(e, i);
+        touchPoints.push_back(touchPoint);
+        if (activeWindowX == touchPoint["windowX"].asDouble() && activeWindowY == touchPoint["windowY"].asDouble()) {
+            activePointerIdx = i;
+        }
+    }
+    // 根据点击的视图传递view参数
+    payload["title"] = this->title;
+    payload["dropdownMenuMode"] = this->dropdownMenuMode;
+    payload["disabled"] = this->disabled;
+    payload["previewBackgroundColor"] = this->previewBackgroundColor;
+    payload["fontName"] = this->fontName;
+    
+    folly::dynamic touchViewActions = folly::dynamic::array();
+    for (auto actions : m_props->actions) {
+        folly::dynamic touchViewAction = folly::dynamic::object;
+        touchViewAction["title"] = actions.title;
+        touchViewAction["titleColor"] = actions.titleColor;
+        touchViewAction["subtitle"] = actions.subtitle;
+        touchViewAction["systemIcon"] = actions.systemIcon;
+        touchViewAction["icon"] = actions.icon;
+        touchViewAction["iconColor"] = actions.iconColor;
+        touchViewAction["destructive"] = actions.destructive;
+        touchViewAction["selected"] = actions.selected;
+        touchViewAction["disabled"] = actions.disabled;
+        touchViewAction["inlineChildren"] = actions.inlineChildren;
+        if (actions.actions.size() > 0) {
+            folly::dynamic d_childActions = folly::dynamic::array;
+            for (const auto &childAction : actions.actions) {
+                d_childActions.push_back(convertToDynamic(childAction, 0));
+                touchViewAction["d_childActions"] = d_childActions;
+            }
+        }
+        touchViewActions.push_back(touchViewAction);
+    }
+    payload["touchViewActions"] = touchViewActions;
+
+    payload["actionTouch"] = touchPoints[activePointerIdx];
+    payload["touchPoints"] = touchPoints;
+    payload["sourceType"] = OH_ArkUI_UIInputEvent_GetSourceType(e);
+    payload["timestamp"] = OH_ArkUI_UIInputEvent_GetEventTime(e);
+    payload["rootTag"] = m_tag;
+
+    if (rnInstance) {
+        // 点击事件可以在此处获取
+        rnInstance->getTurboModule("ContextMenuTurboModule");
+        rnInstance->postMessageToArkTS("RNGH::TOUCH_EVENT", payload);
+    } else {
+    }
+}
+
+// findTouchableViews方法
+std::vector<RTNContextMenuComponentInstance::TouchableView>
+RTNContextMenuComponentInstance::findTouchableViews(float componentX, float componentY) {
+    auto touchTarget = findTargetForTouchPoint({.x = componentX, .y = componentY}, this->shared_from_this());
+    std::vector<TouchTarget::Shared> touchTargets{};
+    auto tmp = touchTarget;
+    while (tmp != nullptr) {
+        touchTargets.push_back(tmp);
+        tmp = tmp->getTouchTargetParent();
+    }
+    std::reverse(touchTargets.begin(), touchTargets.end()); // leaf / ... / root -> root / ... / leaf
+    std::vector<TouchableView> touchableViews{};
+
+    float offsetX = 0;
+    float offsetY = 0;
+    auto surface = this->getSurface().lock();
+    if (surface != nullptr) {
+        offsetX = surface->getLayoutContext().viewportOffset.x;
+        offsetY = surface->getLayoutContext().viewportOffset.y;
+    } else {
+        LOG(WARNING) << "Surface is nullptr";
+    }
+    for (auto &touchTarget : touchTargets) {
+        touchableViews.push_back({
+            .tag = touchTarget->getTouchTargetTag(),
+            .width = touchTarget->getLayoutMetrics().frame.size.width,
+            .height = touchTarget->getLayoutMetrics().frame.size.height,
+            .x = touchTarget->getLayoutMetrics().frame.origin.x + offsetX,
+            .y = touchTarget->getLayoutMetrics().frame.origin.y + offsetY,
+        });
+        offsetX += touchTarget->getLayoutMetrics().frame.origin.x;
+        offsetY += touchTarget->getLayoutMetrics().frame.origin.y;
+        offsetX -= touchTarget->getCurrentOffset().x;
+        offsetY -= touchTarget->getCurrentOffset().y;
+    }
+    return touchableViews;
+};
+} // namespace rnoh

package/harmony/context_menu/src/main/cpp/RTNContextMenuComponentInstance.h

@@ -0,0 +1,168 @@
+/**
+ * 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.
+ */
+
+#pragma once
+#include "RNOH/CppComponentInstance.h"
+#include "ShadowNodes.h"
+#include "Props.h"
+#include "RNOH/CppComponentInstance.h"
+#include "RNOH/arkui/CustomNode.h"
+#include "RNOH/arkui/TextNode.h"
+#include "RNOH/arkui/StackNode.h"
+#include "RNOH/arkui/ArkUINodeRegistry.h"
+#include "RNOH/arkui/NativeNodeApi.h"
+#include "RNOH/RNInstanceCAPI.h"
+
+#include "RNOH/arkui/StackNode.h"
+
+
+namespace rnoh {
+class RTNContextMenuComponentInstance : public CppComponentInstance<facebook::react::RTNContextMenuShadowNode>,
+                                        //    public ContextMenuNodeDelegate
+                                        public StackNodeDelegate,
+                                        public TouchEventHandler {
+
+    using Point = facebook::react::Point;
+
+    /**
+     * This function is borrowed from TouchEventDispatcher
+     */
+    static TouchTarget::Shared findTargetForTouchPoint(Point const &point, TouchTarget::Shared const &target) {
+        bool canHandleTouch =
+            target->canHandleTouch() && target->containsPoint(point) && (target->getTouchEventEmitter() != nullptr);
+        bool canChildrenHandleTouch = target->canChildrenHandleTouch() && target->containsPointInBoundingBox(point);
+
+        if (canChildrenHandleTouch) {
+            auto children = target->getTouchTargetChildren();
+            // we want to check the children in reverse order, since the last child is the topmost one
+            std::reverse(children.begin(), children.end());
+            for (auto const &child : children) {
+                auto childPoint = target->computeChildPoint(point, child);
+                auto result = findTargetForTouchPoint(childPoint, child);
+                if (result != nullptr) {
+                    return result;
+                }
+            }
+        }
+        if (canHandleTouch) {
+            return target;
+        }
+        return nullptr;
+    }
+
+public:
+    RTNContextMenuComponentInstance(Context context);
+    ~RTNContextMenuComponentInstance();
+
+    // override属于覆写接口，需要实例化
+    void onChildInserted(ComponentInstance::Shared const &childComponentInstance, std::size_t index) override;
+    void onChildRemoved(ComponentInstance::Shared const &childComponentInstance) override;
+
+    // arkui为页面ui
+    StackNode &getLocalRootArkUINode() override;
+
+    void onPropsChanged(SharedConcreteProps const &props) override;
+
+    void setIsHandlingTouches(bool isHandlingTouches) { m_isHandlingTouches = isHandlingTouches; }
+
+    bool isHandlingTouches() const override { return m_isHandlingTouches; }
+
+    // StackNodeDelegate
+    void onClick(int index, std::vector<int> indexPath, std::string name);
+    void onCancel ();
+    void onTouchEvent(ArkUI_UIInputEvent *e) override;
+
+    struct TouchableView {
+        Tag tag;
+        facebook::react::Float width;
+        facebook::react::Float height;
+        facebook::react::Float x;
+        facebook::react::Float y;
+    };
+
+    struct RTNContextMenuActionsStruct {
+        std::string title;
+        std::string titleColor;
+        std::string subtitle;
+        std::string systemIcon;
+        std::string icon;
+        std::string iconColor;
+        bool destructive;
+        bool selected;
+        bool disabled;
+        bool inlineChildren;
+        std::vector<RTNContextMenuActionsStruct> actions;
+    };
+
+private:
+    std::string title{};
+    RTNContextMenuActionsStruct actions{};
+    std::string previewBackgroundColor{};
+    bool dropdownMenuMode{};
+    bool disabled{};
+    std::string subtitle{};
+    std::string systemIcon{};
+    std::string icon{};
+    std::string iconColor{};
+    bool destructive{};
+    bool selected{};
+    bool inlineChildren{};
+
+    bool m_isHandlingTouches = false;
+    std::string fontName{};
+
+    StackNode m_contextMenuNode;
+    std::vector<TouchableView> findTouchableViews(float componentX, float componentY);
+    std::optional<std::string> getTintColorFromDynamic(folly::dynamic value);
+    
+    
+    Surface::Weak m_surface;
+    Surface::Weak getSurface() {
+        if (m_surface.lock() != nullptr) {
+            return m_surface;
+        }
+        auto rnInstance = m_deps->rnInstance.lock();
+        if (rnInstance == nullptr) {
+            m_surface.reset();
+            return m_surface;
+        }
+        ComponentInstance::Shared currentRoot = shared_from_this();
+        while (true) {
+            auto maybeNewCurrentRoot = currentRoot->getParent().lock();
+            if (maybeNewCurrentRoot == nullptr) {
+                break;
+            }
+            currentRoot = maybeNewCurrentRoot;
+        }
+        auto maybeSurface = rnInstance->getSurfaceByRootTag(currentRoot->getTag());
+        if (!maybeSurface.has_value()) {
+            m_surface.reset();
+            return m_surface;
+        }
+        m_surface = maybeSurface.value();
+        return m_surface;
+    }
+};
+
+} // namespace rnoh

package/harmony/context_menu/src/main/cpp/ShadowNodes.cpp

@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+#include <ShadowNodes.h>
+
+namespace facebook {
+namespace react {
+
+extern const char RTNContextMenuComponentName[] = "RTNContextMenu";
+
+} // namespace react
+} // namespace facebook

package/harmony/context_menu/src/main/cpp/ShadowNodes.h

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+#pragma once
+
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <jsi/jsi.h>
+#include "EventEmitters.h"
+#include "Props.h"
+#include "States.h"
+
+namespace facebook {
+namespace react {
+
+JSI_EXPORT extern const char RTNContextMenuComponentName[];
+
+/*
+ * `ShadowNode` for <RTNContextMenu> component.
+ */
+using RTNContextMenuShadowNode = ConcreteViewShadowNode<
+    RTNContextMenuComponentName,
+    RTNContextMenuProps,
+    RTNContextMenuEventEmitter,
+    RTNContextMenuState>;
+
+} // namespace react
+} // namespace facebook

package/harmony/context_menu/src/main/cpp/States.cpp

@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+ 
+#include  "States.h"
+
+namespace facebook {
+namespace react {
+
+
+
+} // namespace react
+} // namespace facebook

package/harmony/context_menu/src/main/cpp/States.h

@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+ 
+#pragma once
+
+#ifdef ANDROID
+#include <folly/dynamic.h>
+#include <react/renderer/mapbuffer/MapBuffer.h>
+#include <react/renderer/mapbuffer/MapBufferBuilder.h>
+#endif
+
+namespace facebook {
+namespace react {
+
+class RTNContextMenuState {
+public:
+  RTNContextMenuState() = default;
+
+#ifdef ANDROID
+  RTNContextMenuState(RTNContextMenuState const &previousState, folly::dynamic data){};
+  folly::dynamic getDynamic() const {
+    return {};
+  };
+  MapBuffer getMapBuffer() const {
+    return MapBufferBuilder::EMPTY();
+  };
+#endif
+};
+
+} // namespace react
+} // namespace facebook