Implement onAuxClick

packages/react-native/Libraries/Components/View/ViewPropTypes.js

@@ -86,6 +86,8 @@ type MouseEventProps = Readonly<{
 
 // Experimental/Work in Progress Pointer Event Callbacks (not yet ready for use)
 type PointerEventProps = Readonly<{
+  onAuxClick?: ?(event: PointerEvent) => void,
+  onAuxClickCapture?: ?(event: PointerEvent) => void,
   onClick?: ?(event: PointerEvent) => void,
   onClickCapture?: ?(event: PointerEvent) => void,
   onPointerEnter?: ?(event: PointerEvent) => void,

packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -62,6 +62,12 @@ const bubblingEventTypes = {
   },
 
   // Experimental/Work in Progress Pointer Events (not yet ready for use)
+  topAuxClick: {
+    phasedRegistrationNames: {
+      captured: 'onAuxClickCapture',
+      bubbled: 'onAuxClick',
+    },
+  },
   topPointerCancel: {
     phasedRegistrationNames: {
       captured: 'onPointerCancelCapture',
@@ -412,6 +418,8 @@ const validAttributesForEventProps = {
   onTouchCancel: true,
 
   // Pointer events
+  onAuxClick: true,
+  onAuxClickCapture: true,
   onClick: true,
   onClickCapture: true,
   onPointerEnter: true,

packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -93,6 +93,12 @@ const bubblingEventTypes = {
   },
 
   // Experimental/Work in Progress Pointer Events (not yet ready for use)
+  topAuxClick: {
+    phasedRegistrationNames: {
+      captured: 'onAuxClickCapture',
+      bubbled: 'onAuxClick',
+    },
+  },
   topClick: {
     phasedRegistrationNames: {
       captured: 'onClickCapture',
@@ -409,6 +415,8 @@ const validAttributesForEventProps = ConditionallyIgnoredEventHandlers({
   onTouchCancel: true,
 
   // Pointer events
+  onAuxClick: true,
+  onAuxClickCapture: true,
   onClick: true,
   onClickCapture: true,
   onPointerUp: true,

packages/react-native/React/Fabric/RCTSurfacePointerHandler.mm

@@ -638,8 +638,12 @@ - (void)_dispatchActivePointers:(std::vector<ActivePointer>)activePointers event
         }
         case RCTPointerEventTypeEnd: {
           eventEmitter->onPointerUp(pointerEvent);
-          if (pointerEvent.isPrimary && pointerEvent.button == 0 && IsPointerWithinInitialTree(activePointer)) {
-            eventEmitter->onClick(std::move(pointerEvent));
+          if (pointerEvent.isPrimary && pointerEvent.button == 0) {
+            if (IsPointerWithinInitialTree(activePointer)) {
+              eventEmitter->onClick(std::move(pointerEvent));
+            }
+          } else if (IsPointerWithinInitialTree(activePointer)) {
+            eventEmitter->onAuxClick(std::move(pointerEvent));
           }
           break;
         }

packages/react-native/React/Views/RCTView.h

@@ -126,6 +126,7 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait;
 /**
  * (Experimental and unused for Paper) Pointer event handlers.
  */
+@property (nonatomic, assign) RCTBubblingEventBlock onAuxClick;
 @property (nonatomic, assign) RCTBubblingEventBlock onClick;
 @property (nonatomic, assign) RCTBubblingEventBlock onPointerCancel;
 @property (nonatomic, assign) RCTBubblingEventBlock onPointerDown;

packages/react-native/React/Views/RCTViewManager.m

@@ -725,6 +725,7 @@ - (void)updateAccessibilityTraitsForRole:(RCTView *)view withDefaultView:(RCTVie
 RCT_CUSTOM_VIEW_PROPERTY(onTouchCancel, BOOL, RCTView) {}
 
 // Experimental/WIP Pointer Events (not yet ready for use)
+RCT_EXPORT_VIEW_PROPERTY(onAuxClick, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onClick, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onPointerCancel, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onPointerDown, RCTBubblingEventBlock)

packages/react-native/ReactAndroid/api/ReactAndroid.api

@@ -3201,6 +3201,8 @@ public abstract class com/facebook/react/uimanager/BaseViewManager : com/faceboo
 	public fun setAccessibilityLiveRegion (Landroid/view/View;Ljava/lang/String;)V
 	public fun setAccessibilityRole (Landroid/view/View;Ljava/lang/String;)V
 	public fun setAccessibilityValue (Landroid/view/View;Lcom/facebook/react/bridge/ReadableMap;)V
+	public fun setAuxClick (Landroid/view/View;Z)V
+	public fun setAuxClickCapture (Landroid/view/View;Z)V
 	public fun setBackgroundColor (Landroid/view/View;I)V
 	public fun setBorderBottomLeftRadius (Landroid/view/View;F)V
 	public fun setBorderBottomRightRadius (Landroid/view/View;F)V

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java

@@ -751,6 +751,11 @@ protected void onAfterUpdateTransaction(@NonNull T view) {
                 MapBuilder.of(
                     "phasedRegistrationNames",
                     MapBuilder.of("bubbled", "onPointerOver", "captured", "onPointerOverCapture")))
+            .put(
+                "topAuxClick",
+                MapBuilder.of(
+                    "phasedRegistrationNames",
+                    MapBuilder.of("bubbled", "onAuxClick", "captured", "onAuxClickCapture")))
             .put(
                 "topClick",
                 MapBuilder.of(
@@ -908,6 +913,16 @@ public void setPointerMoveCapture(@NonNull T view, boolean value) {
     setPointerEventsFlag(view, PointerEventHelper.EVENT.MOVE_CAPTURE, value);
   }
 
+  @ReactProp(name = ViewProps.ON_AUXCLICK)
+  public void setAuxClick(@NonNull T view, boolean value) {
+    setPointerEventsFlag(view, PointerEventHelper.EVENT.AUXCLICK, value);
+  }
+
+  @ReactProp(name = ViewProps.ON_AUXCLICK_CAPTURE)
+  public void setAuxClickCapture(@NonNull T view, boolean value) {
+    setPointerEventsFlag(view, PointerEventHelper.EVENT.AUXCLICK_CAPTURE, value);
+  }
+
   @ReactProp(name = ViewProps.ON_CLICK)
   public void setClick(@NonNull T view, boolean value) {
     setPointerEventsFlag(view, PointerEventHelper.EVENT.CLICK, value);

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManagerDelegate.kt

@@ -156,6 +156,8 @@ public abstract class BaseViewManagerDelegate<
       ViewProps.ON_POINTER_MOVE -> mViewManager.setPointerMove(view, value as Boolean? ?: false)
       ViewProps.ON_POINTER_MOVE_CAPTURE ->
           mViewManager.setPointerMoveCapture(view, value as Boolean? ?: false)
+      ViewProps.ON_AUXCLICK -> mViewManager.setAuxClick(view, value as Boolean? ?: false)
+      ViewProps.ON_AUXCLICK_CAPTURE -> mViewManager.setAuxClickCapture(view, value as Boolean? ?: false)
       ViewProps.ON_CLICK -> mViewManager.setClick(view, value as Boolean? ?: false)
       ViewProps.ON_CLICK_CAPTURE -> mViewManager.setClickCapture(view, value as Boolean? ?: false)
     }

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/JSPointerDispatcher.java

@@ -169,15 +169,30 @@ private void onUp(
           eventDispatcher);
     }
 
+    boolean primaryClick = eventState.primaryPointerId == activePointerId && eventState.supportsHover(pointerId);
     List<ViewTarget> hitPathDown = mCurrentlyDownPointerIdsToHitPath.remove(activePointerId);
-    if (hitPathDown != null
-        && isAnyoneListeningForBubblingEvent(activeHitPath, EVENT.CLICK, EVENT.CLICK_CAPTURE)) {
-      List<ViewTarget> hitPathForClick = findHitPathIntersection(hitPathDown, activeHitPath);
-      if (!hitPathForClick.isEmpty()) {
-        final ViewTarget clickTarget = hitPathForClick.get(0);
-        eventDispatcher.dispatchEvent(
-            PointerEvent.obtain(
-                PointerEventHelper.CLICK, clickTarget.getViewId(), eventState, motionEvent));
+
+    if (primaryClick) {
+      if (hitPathDown != null
+          && isAnyoneListeningForBubblingEvent(activeHitPath, EVENT.CLICK, EVENT.CLICK_CAPTURE)) {
+        List<ViewTarget> hitPathForClick = findHitPathIntersection(hitPathDown, activeHitPath);
+        if (!hitPathForClick.isEmpty()) {
+          final ViewTarget clickTarget = hitPathForClick.get(0);
+          eventDispatcher.dispatchEvent(
+              PointerEvent.obtain(
+                  PointerEventHelper.CLICK, clickTarget.getViewId(), eventState, motionEvent));
+        }
+      }
+    } else {
+      if (hitPathDown != null
+          && isAnyoneListeningForBubblingEvent(activeHitPath, EVENT.AUXCLICK, EVENT.AUXCLICK_CAPTURE)) {
+        List<ViewTarget> hitPathForClick = findHitPathIntersection(hitPathDown, activeHitPath);
+        if (!hitPathForClick.isEmpty()) {
+          final ViewTarget clickTarget = hitPathForClick.get(0);
+          eventDispatcher.dispatchEvent(
+              PointerEvent.obtain(
+                  PointerEventHelper.AUXCLICK, clickTarget.getViewId(), eventState, motionEvent));
+        }
       }
     }
 

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.kt

@@ -182,6 +182,8 @@ public object ViewProps {
   internal const val ON_POINTER_LEAVE_CAPTURE: String = "onPointerLeaveCapture"
   internal const val ON_POINTER_MOVE: String = "onPointerMove"
   internal const val ON_POINTER_MOVE_CAPTURE: String = "onPointerMoveCapture"
+  internal const val ON_AUXCLICK: String = "onAuxClick"
+  internal const val ON_AUXCLICK_CAPTURE: String = "onAuxClickCapture"
   internal const val ON_CLICK: String = "onClick"
   internal const val ON_CLICK_CAPTURE: String = "onClickCapture"
   @JvmField

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/events/PointerEvent.kt

@@ -242,6 +242,7 @@ internal class PointerEvent private constructor() : Event<PointerEvent>() {
       PointerEventHelper.POINTER_LEAVE,
       PointerEventHelper.POINTER_OUT,
       PointerEventHelper.POINTER_OVER,
+      PointerEventHelper.AUXCLICK -> {
       PointerEventHelper.CLICK -> {
         pointersEventData = listOf(createW3CPointerEvent(activePointerIndex))
       }

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/events/PointerEventHelper.kt

@@ -28,9 +28,12 @@ internal object PointerEventHelper {
   const val POINTER_UP: String = "topPointerUp"
   const val POINTER_OVER: String = "topPointerOver"
   const val POINTER_OUT: String = "topPointerOut"
+  const val AUXCLICK: String = "topAuxClick"
   const val CLICK: String = "topClick"
 
   enum class EVENT {
+    AUXCLICK,
+    AUXCLICK_CAPTURE,
     CANCEL,
     CANCEL_CAPTURE,
     CLICK,
@@ -110,6 +113,8 @@ internal object PointerEventHelper {
       EVENT.UP_CAPTURE,
       EVENT.CANCEL,
       EVENT.CANCEL_CAPTURE,
+      EVENT.AUXCLICK,
+      EVENT.AUXCLICK_CAPTURE,
       EVENT.CLICK,
       EVENT.CLICK_CAPTURE -> true
       else -> {

packages/react-native/ReactCommon/react/renderer/components/view/TouchEventEmitter.cpp

@@ -101,6 +101,10 @@ void TouchEventEmitter::onTouchCancel(TouchEvent event) const {
       "touchCancel", std::move(event), RawEvent::Category::ContinuousEnd);
 }
 
+void TouchEventEmitter::onAuxClick(PointerEvent event) const {
+  dispatchPointerEvent("auxClick", std::move(event), RawEvent::Category::Discrete);
+}
+
 void TouchEventEmitter::onClick(PointerEvent event) const {
   dispatchPointerEvent("click", std::move(event), RawEvent::Category::Discrete);
 }

packages/react-native/ReactCommon/react/renderer/components/view/TouchEventEmitter.h

@@ -30,6 +30,7 @@ class TouchEventEmitter : public EventEmitter {
   void onTouchEnd(TouchEvent event) const;
   void onTouchCancel(TouchEvent event) const;
 
+  void onAuxClick(PointerEvent event) const;
   void onClick(PointerEvent event) const;
   void onPointerCancel(PointerEvent event) const;
   void onPointerDown(PointerEvent event) const;

packages/react-native/ReactCommon/react/renderer/components/view/platform/android/react/renderer/components/view/HostPlatformViewProps.cpp

@@ -754,6 +754,14 @@ folly::dynamic HostPlatformViewProps::getDiffProps(
         oldProps->events,
         ViewEvents::Offset::PointerOutCapture,
         "onPointerOutCapture");
+    updateEventProp(
+        result, events, oldProps->events, ViewEvents::Offset::AuxClick, "onAuxClick");
+    updateEventProp(
+        result,
+        events,
+        oldProps->events,
+        ViewEvents::Offset::AuxClickCapture,
+        "onAuxClickCapture");
     updateEventProp(
         result, events, oldProps->events, ViewEvents::Offset::Click, "onClick");
     updateEventProp(

packages/react-native/ReactCommon/react/renderer/components/view/propsConversions.h

@@ -497,6 +497,10 @@ static inline ViewEvents convertRawProp(
       "onPointerOutCapture",
       sourceValue[Offset::PointerOutCapture],
       defaultValue[Offset::PointerOutCapture]);
+  result[Offset::AuxClick] =
+      convertRawProp(context, rawProps, "onAuxClick", sourceValue[Offset::AuxClick], defaultValue[Offset::AuxClick]);
+  result[Offset::AuxClickCapture] = convertRawProp(
+      context, rawProps, "onAuxClickCapture", sourceValue[Offset::AuxClickCapture], defaultValue[Offset::AuxClickCapture]);
   result[Offset::Click] =
       convertRawProp(context, rawProps, "onClick", sourceValue[Offset::Click], defaultValue[Offset::Click]);
   result[Offset::ClickCapture] = convertRawProp(

packages/react-native/ReactNativeApi.d.ts

@@ -3711,6 +3711,8 @@ declare type PlatformType =
   | WindowsPlatform
 declare type PointerEvent = NativeSyntheticEvent<NativePointerEvent>
 declare type PointerEventProps = {
+  readonly onAuxClick?: (event: PointerEvent) => void
+  readonly onAuxClickCapture?: (event: PointerEvent) => void
   readonly onClick?: (event: PointerEvent) => void
   readonly onClickCapture?: (event: PointerEvent) => void
   readonly onGotPointerCapture?: (e: PointerEvent) => void

scripts/cxx-api/api-snapshots/ReactAndroidDebugCxx.api

@@ -5048,6 +5048,7 @@ class facebook::react::TimerManager {
 
 class facebook::react::TouchEventEmitter : public facebook::react::EventEmitter {
   public TouchEventEmitter(facebook::react::SharedEventTarget eventTarget, facebook::react::EventDispatcher::Weak eventDispatcher);
+  public void onAuxClick(facebook::react::PointerEvent event) const;
   public void onClick(facebook::react::PointerEvent event) const;
   public void onGotPointerCapture(facebook::react::PointerEvent event) const;
   public void onLostPointerCapture(facebook::react::PointerEvent event) const;

scripts/cxx-api/api-snapshots/ReactAndroidReleaseCxx.api

@@ -5039,6 +5039,7 @@ class facebook::react::TimerManager {
 
 class facebook::react::TouchEventEmitter : public facebook::react::EventEmitter {
   public TouchEventEmitter(facebook::react::SharedEventTarget eventTarget, facebook::react::EventDispatcher::Weak eventDispatcher);
+  public void onAuxClick(facebook::react::PointerEvent event) const;
   public void onClick(facebook::react::PointerEvent event) const;
   public void onGotPointerCapture(facebook::react::PointerEvent event) const;
   public void onLostPointerCapture(facebook::react::PointerEvent event) const;

scripts/cxx-api/api-snapshots/ReactAppleDebugCxx.api

@@ -2462,6 +2462,7 @@ interface RCTView : public UIView {
   public @property (assign) CGFloat borderWidth;
   public @property (assign) RCTBorderCurve borderCurve;
   public @property (assign) RCTBorderStyle borderStyle;
+  public @property (assign) RCTBubblingEventBlock onAuxClick;
   public @property (assign) RCTBubblingEventBlock onClick;
   public @property (assign) RCTBubblingEventBlock onGotPointerCapture;
   public @property (assign) RCTBubblingEventBlock onLostPointerCapture;

scripts/cxx-api/api-snapshots/ReactAppleReleaseCxx.api

@@ -2462,6 +2462,7 @@ interface RCTView : public UIView {
   public @property (assign) CGFloat borderWidth;
   public @property (assign) RCTBorderCurve borderCurve;
   public @property (assign) RCTBorderStyle borderStyle;
+  public @property (assign) RCTBubblingEventBlock onAuxClick;
   public @property (assign) RCTBubblingEventBlock onClick;
   public @property (assign) RCTBubblingEventBlock onGotPointerCapture;
   public @property (assign) RCTBubblingEventBlock onLostPointerCapture;

scripts/cxx-api/api-snapshots/ReactCommonReleaseCxx.api

@@ -3543,6 +3543,7 @@ class facebook::react::TimerManager {
 
 class facebook::react::TouchEventEmitter : public facebook::react::EventEmitter {
   public TouchEventEmitter(facebook::react::SharedEventTarget eventTarget, facebook::react::EventDispatcher::Weak eventDispatcher);
+  public void onAuxClick(facebook::react::PointerEvent event) const;
   public void onClick(facebook::react::PointerEvent event) const;
   public void onGotPointerCapture(facebook::react::PointerEvent event) const;
   public void onLostPointerCapture(facebook::react::PointerEvent event) const;