react-native-platform-components 1.5.0 → 1.7.0

package/android/src/main/java/com/platformcomponents/PCContextMenuView.kt

@@ -7,7 +7,10 @@ import android.view.Gravity
 import android.view.HapticFeedbackConstants
 import android.view.MotionEvent
 import android.view.ViewConfiguration
+import android.view.ViewGroup
 import androidx.appcompat.widget.PopupMenu
+import com.facebook.react.uimanager.RootView
+import com.facebook.react.uimanager.events.NativeGestureUtil
 import com.facebook.react.views.view.ReactViewGroup
 
 class PCContextMenuView(context: Context) : ReactViewGroup(context) {
@@ -21,8 +24,8 @@ class PCContextMenuView(context: Context) : ReactViewGroup(context) {
   /** The flattened menu items (see PCMenuSupport) */
   var actions: List<PCMenuSupport.Item> = emptyList()
   var interactivity: String = "enabled" // "enabled" | "disabled"
-  var trigger: String = "longPress"     // "longPress" | "tap"
-  var androidVisible: String = "closed" // "open" | "closed" (Android-only programmatic)
+  var trigger: String = "longPress"     // "longPress" | "tap" | "none"
+  var visible: String = "closed"        // "open" | "closed" (programmatic)
   var androidAnchorPosition: String? = "left" // "left" | "right"
 
   /** The `haptics` prop, played when an action is picked (an action's own `haptics` wins). */
@@ -42,8 +45,12 @@ class PCContextMenuView(context: Context) : ReactViewGroup(context) {
 
   // Long-press detection
   private var longPressRunnable: Runnable? = null
+  /** A long press opened the menu and cancelled the touch in JS. */
+  private var nativeGestureStarted = false
   private var touchDownX = 0f
   private var touchDownY = 0f
+  /** Tap mode: the last touch went down on a native control (see handleTap). */
+  private var downOnNativeControl = false
   private val touchSlop = ViewConfiguration.get(context).scaledTouchSlop
   private val longPressTimeout = ViewConfiguration.getLongPressTimeout().toLong()
 
@@ -51,8 +58,8 @@ class PCContextMenuView(context: Context) : ReactViewGroup(context) {
     // Enable long-click for longPress mode
     isLongClickable = true
     setOnLongClickListener { handleLongClick() }
-    // Enable click for tap mode
-    setOnClickListener { handleTap() }
+    // Enable click for tap mode (accessibility services; touches go through JS)
+    setOnClickListener { openTapMenu() }
   }
 
   override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
@@ -64,6 +71,7 @@ class PCContextMenuView(context: Context) : ReactViewGroup(context) {
       MotionEvent.ACTION_DOWN -> {
         touchDownX = ev.x
         touchDownY = ev.y
+        downOnNativeControl = trigger == "tap" && isOnNativeControl(this, ev.x, ev.y)
         // In longPress mode, schedule long-press detection
         if (trigger == "longPress") {
           // Dispatch recycles MotionEvent instances before this callback runs.
@@ -76,12 +84,18 @@ class PCContextMenuView(context: Context) : ReactViewGroup(context) {
               // The long-press haptic View.performLongClick plays, which this
               // path bypasses; off with haptics "none" (isHapticFeedbackEnabled)
               if (popupShowing) performHapticFeedback(HapticFeedbackConstants.LONG_PRESS)
-              // Cancel any pending touch events on children
+              // Cancel any pending touch events on children, and the touch in
+              // JS, so a pressable under the finger doesn't fire onPress when
+              // it lifts (as a ScrollView does when it starts scrolling)
               val cancel = MotionEvent.obtain(
                 downTime, SystemClock.uptimeMillis(),
                 MotionEvent.ACTION_CANCEL, downX, downY, 0
               )
               super.dispatchTouchEvent(cancel)
+              if (hasReactRoot()) {
+                NativeGestureUtil.notifyNativeGestureStarted(this, cancel)
+                nativeGestureStarted = true
+              }
               cancel.recycle()
             }
           }
@@ -95,24 +109,36 @@ class PCContextMenuView(context: Context) : ReactViewGroup(context) {
           cancelPendingLongPress()
         }
       }
-      MotionEvent.ACTION_UP -> {
-        cancelPendingLongPress()
-        // In tap mode, handle tap on ACTION_UP if within slop
-        if (trigger == "tap" &&
-            Math.abs(ev.x - touchDownX) <= touchSlop &&
-            Math.abs(ev.y - touchDownY) <= touchSlop) {
-          handleTap()
-          return true // Consume the event
-        }
-      }
-      MotionEvent.ACTION_CANCEL -> {
+      // Tap mode opens the menu from JS (handleTap), for taps that no inner
+      // pressable took
+      MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
         cancelPendingLongPress()
+        endNativeGesture(ev)
       }
     }
 
     return super.onInterceptTouchEvent(ev)
   }
 
+  private fun endNativeGesture(ev: MotionEvent) {
+    if (!nativeGestureStarted) return
+    nativeGestureStarted = false
+    if (hasReactRoot()) NativeGestureUtil.notifyNativeGestureEnded(this, ev)
+  }
+
+  /**
+   * Whether a React root (a RootView) is above this view. NativeGestureUtil
+   * asserts on one, and crashes for a view hosted outside React Native.
+   */
+  private fun hasReactRoot(): Boolean {
+    var parent = parent
+    while (parent != null) {
+      if (parent is RootView) return true
+      parent = parent.parent
+    }
+    return false
+  }
+
   private fun cancelPendingLongPress() {
     longPressRunnable?.let {
       removeCallbacks(it)
@@ -128,13 +154,39 @@ class PCContextMenuView(context: Context) : ReactViewGroup(context) {
     return true
   }
 
-  private fun handleTap() {
+  /**
+   * Tap mode: JS calls this for a tap on the content that no inner pressable
+   * took (React Native's responder system knows: the deepest responder wins).
+   */
+  fun handleTap() {
+    // A native control (this library's Button) handles its own taps,
+    // outside the JS responder system
+    if (downOnNativeControl) return
+    openTapMenu()
+  }
+
+  /** Tap mode: JS taps (handleTap), and TalkBack through the click listener. */
+  private fun openTapMenu() {
     if (trigger != "tap") return
     if (interactivity != "enabled") return
 
     showPopupMenu()
   }
 
+  /** Whether (x, y) of `group` lands on a descendant with its own click listener. */
+  private fun isOnNativeControl(group: ViewGroup, x: Float, y: Float): Boolean {
+    for (i in group.childCount - 1 downTo 0) {
+      val child = group.getChildAt(i)
+      if (child.visibility != VISIBLE) continue
+      val childX = x + group.scrollX - child.left - child.translationX
+      val childY = y + group.scrollY - child.top - child.translationY
+      if (childX < 0 || childY < 0 || childX >= child.width || childY >= child.height) continue
+      if (child.isEnabled && child.hasOnClickListeners()) return true
+      return child is ViewGroup && isOnNativeControl(child, childX, childY)
+    }
+    return false
+  }
+
   // ---- Public apply* (called by manager) ----
 
   fun applyMenuTitle(value: String?) {
@@ -161,23 +213,22 @@ class PCContextMenuView(context: Context) : ReactViewGroup(context) {
 
   fun applyTrigger(value: String?) {
     trigger = when (value) {
-      "longPress", "tap" -> value
+      // "none": only `visible` opens the menu; no touch is intercepted
+      "longPress", "tap", "none" -> value
       else -> "longPress"
     }
     Log.d(TAG, "applyTrigger trigger=$trigger")
     updateTriggerState()
   }
 
-  fun applyAndroidVisible(value: String?) {
-    androidVisible = when (value) {
-      "open", "closed" -> value
-      else -> "closed"
-    }
-    Log.d(TAG, "applyAndroidVisible androidVisible=$androidVisible")
+  /** Called only when the prop changes, so a menu the user opened stays open. */
+  fun applyVisible(value: String?) {
+    visible = if (value == "open") "open" else "closed"
+    Log.d(TAG, "applyVisible visible=$visible")
     openToken += 1
     val token = openToken
 
-    if (androidVisible == "open") {
+    if (visible == "open") {
       presentIfNeeded(token)
     } else {
       if (popupShowing) {
@@ -217,7 +268,7 @@ class PCContextMenuView(context: Context) : ReactViewGroup(context) {
         Log.d(TAG, "presentIfNeeded stale token -> skip")
         return@post
       }
-      if (androidVisible != "open") {
+      if (visible != "open") {
         Log.d(TAG, "presentIfNeeded no longer open -> skip")
         return@post
       }
@@ -257,7 +308,10 @@ class PCContextMenuView(context: Context) : ReactViewGroup(context) {
     popup.setOnMenuItemClickListener { menuItem ->
       // Submenu headers open their submenu; they aren't actions.
       val item = PCMenuSupport.itemFor(menuItem, items)
-      if (item == null || !item.isAction) return@setOnMenuItemClickListener false
+      if (item == null || !item.isAction) {
+        post { PCMenuSupport.tagPopupRows(popup.menu, items) }
+        return@setOnMenuItemClickListener false
+      }
       Log.d(TAG, "popup onMenuItemClick")
       dismissAfterSelect = true
       PCHaptics.perform(this, item.haptics.ifEmpty { haptics })
@@ -285,6 +339,7 @@ class PCContextMenuView(context: Context) : ReactViewGroup(context) {
 
     onMenuOpen?.invoke()
     popup.show()
+    PCMenuSupport.tagPopupRows(popup.menu, items)
   }
 
   override fun onDetachedFromWindow() {

package/android/src/main/java/com/platformcomponents/PCContextMenuViewManager.kt

@@ -64,6 +64,11 @@ class PCContextMenuViewManager :
     view.applyTrigger(value)
   }
 
+  // "open" | "closed" | "" (unset, treated as closed)
+  override fun setVisible(view: PCContextMenuView, value: String?) {
+    view.applyVisible(value)
+  }
+
   override fun setIos(view: PCContextMenuView, value: ReadableMap?) {
     // Android ignores iOS config
   }
@@ -74,25 +79,19 @@ class PCContextMenuViewManager :
   }
 
   override fun setAndroid(view: PCContextMenuView, value: ReadableMap?) {
-    if (value == null) {
-      view.applyAndroidAnchorPosition(null)
-      view.applyAndroidVisible(null)
-      return
-    }
-
-    val anchorPosition = if (value.hasKey("anchorPosition") && !value.isNull("anchorPosition")) {
+    val anchorPosition = if (value != null && value.hasKey("anchorPosition") && !value.isNull("anchorPosition")) {
       value.getString("anchorPosition")
     } else {
       null
     }
     view.applyAndroidAnchorPosition(anchorPosition)
+  }
 
-    val visible = if (value.hasKey("visible") && !value.isNull("visible")) {
-      value.getString("visible")
-    } else {
-      null
-    }
-    view.applyAndroidVisible(visible)
+  // --- Commands ---
+
+  // trigger "tap": a tap on the content that no inner pressable took
+  override fun handleTap(view: PCContextMenuView) {
+    view.handleTap()
   }
 
   // --- ViewGroupManager child management ---

package/android/src/main/java/com/platformcomponents/PCMenuSupport.kt

@@ -5,6 +5,7 @@ import android.graphics.Rect
 import android.graphics.drawable.BitmapDrawable
 import android.graphics.drawable.Drawable
 import android.graphics.drawable.DrawableWrapper
+import android.os.Build
 import android.text.SpannableString
 import android.text.Spanned
 import android.text.style.ForegroundColorSpan
@@ -12,6 +13,12 @@ import android.util.Log
 import android.util.TypedValue
 import android.view.Menu
 import android.view.MenuItem
+import android.view.View
+import android.view.ViewGroup
+import android.view.ViewTreeObserver
+import android.view.WindowManager
+import android.view.inspector.WindowInspector
+import android.widget.ListView
 import androidx.appcompat.R as AppCompatR
 import androidx.core.content.ContextCompat
 import androidx.core.graphics.drawable.DrawableCompat
@@ -57,7 +64,9 @@ object PCMenuSupport {
     /** "" | "off" | "on" | "mixed" */
     val state: String,
     /** The item's own `haptics`; "" = the component's */
-    val haptics: String = ""
+    val haptics: String = "",
+    /** Tag of the item's popup row, for UI tests; "" = none */
+    val testID: String = ""
   ) {
     val isAction: Boolean get() = kind != "menu" && kind != "section"
   }
@@ -82,7 +91,8 @@ object PCMenuSupport {
           disabled = map.stringOr("disabled", "false") == "true",
           keepsMenuPresented = map.stringOr("keepsMenuPresented", "false") == "true",
           state = map.stringOr("state", ""),
-          haptics = map.stringOr("haptics", "")
+          haptics = map.stringOr("haptics", ""),
+          testID = map.stringOr("testID", "")
         )
       )
     }
@@ -165,6 +175,60 @@ object PCMenuSupport {
   /** The item behind a clicked MenuItem. */
   fun itemFor(menuItem: MenuItem, items: List<Item>): Item? = items.getOrNull(menuItem.itemId)
 
+  /**
+   * Tags the rows of [menu]'s showing popups with their items' testIDs:
+   * Detox and Espresso match `by.id` against the view tag. AppCompat builds
+   * the rows in the popup's own window and keeps its list private, so the
+   * list is found among the app's windows (WindowInspector, Android 10+;
+   * earlier versions leave the rows untagged). Call it after the popup shows,
+   * and after a submenu header is picked: the submenu opens in a new popup.
+   */
+  fun tagPopupRows(menu: Menu, items: List<Item>) {
+    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.Q) return
+    if (items.none { it.testID.isNotEmpty() }) return
+    for (root in WindowInspector.getGlobalWindowViews()) {
+      // Popups are sub-windows of the activity's window
+      val type = (root.layoutParams as? WindowManager.LayoutParams)?.type ?: continue
+      if (type < WindowManager.LayoutParams.FIRST_SUB_WINDOW ||
+          type > WindowManager.LayoutParams.LAST_SUB_WINDOW) continue
+      forEachListView(root) { list -> watchRows(list, menu, items) }
+    }
+  }
+
+  private fun forEachListView(view: View, action: (ListView) -> Unit) {
+    if (view is ListView) {
+      action(view)
+    } else if (view is ViewGroup) {
+      for (i in 0 until view.childCount) forEachListView(view.getChildAt(i), action)
+    }
+  }
+
+  /**
+   * Tags [list]'s rows if it lists [menu]'s items, and again before every
+   * frame: the list binds rows to items as it lays out and scrolls.
+   */
+  private fun watchRows(list: ListView, menu: Menu, items: List<Item>) {
+    if (list.getTag(R.id.pc_menu_rows_tagged) != null) return
+    val first = (0 until list.count).firstNotNullOfOrNull { list.getItemAtPosition(it) as? MenuItem }
+    if (first == null || menu.findItem(first.itemId) !== first) return
+
+    fun tagRows() {
+      for (i in 0 until list.childCount) {
+        val menuItem = list.getItemAtPosition(list.firstVisiblePosition + i) as? MenuItem
+        val testID = menuItem?.let { itemFor(it, items)?.testID }.orEmpty()
+        list.getChildAt(i).tag = testID.ifEmpty { null }
+      }
+    }
+    list.setTag(R.id.pc_menu_rows_tagged, true)
+    list.viewTreeObserver.addOnPreDrawListener(
+      ViewTreeObserver.OnPreDrawListener {
+        tagRows()
+        true
+      }
+    )
+    tagRows()
+  }
+
   /** Destructive titles are drawn in the theme's error color. */
   private fun title(context: Context, item: Item): CharSequence {
     if (!item.destructive) return item.title

package/android/src/main/java/com/platformcomponents/PlatformComponentsPackage.kt

@@ -15,6 +15,7 @@ class PlatformComponentsViewPackage : BaseReactPackage() {
           PCSelectionMenuViewManager(),
           PCDatePickerViewManager(),
           PCContextMenuViewManager(),
+          PCActionSheetViewManager(),
           PCSegmentedControlViewManager(),
           PCButtonViewManager(),
           PCButtonGroupViewManager(),

package/android/src/main/res/values/ids.xml

@@ -2,4 +2,6 @@
 <resources>
   <!-- The text size a view was capped at (maxFontSizeMultiplier); see PCThemeSupport.capTextSize -->
   <item name="pc_capped_text_size" type="id" />
+  <!-- A menu popup's list whose rows carry their items' testIDs; see PCMenuSupport.tagPopupRows -->
+  <item name="pc_menu_rows_tagged" type="id" />
 </resources>

package/ios/PCActionSheet.h

@@ -0,0 +1,12 @@
+// PCActionSheet.h
+
+#import <React/RCTViewComponentView.h>
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface PCActionSheet : RCTViewComponentView
+
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/PCActionSheet.mm

@@ -0,0 +1,160 @@
+// PCActionSheet.mm
+
+#import "PCActionSheet.h"
+
+#import <React/RCTComponentViewFactory.h>
+#import <React/RCTConversions.h>
+#import <React/RCTFabricComponentsPlugins.h>
+
+#import <react/renderer/components/PlatformComponentsViewSpec/ComponentDescriptors.h>
+#import <react/renderer/components/PlatformComponentsViewSpec/EventEmitters.h>
+#import <react/renderer/components/PlatformComponentsViewSpec/Props.h>
+
+#if __has_include(<PlatformComponents/PlatformComponents-Swift.h>)
+#import <PlatformComponents/PlatformComponents-Swift.h>
+#else
+#import "PlatformComponents-Swift.h"
+#endif
+
+using namespace facebook::react;
+
+namespace {
+static inline NSString *ToNSString(const std::string &value) {
+  return value.empty() ? @"" : [NSString stringWithUTF8String:value.c_str()];
+}
+
+static inline bool ActionsEqual(
+    const std::vector<PCActionSheetActionsStruct> &a,
+    const std::vector<PCActionSheetActionsStruct> &b) {
+  if (a.size() != b.size()) return false;
+  for (size_t i = 0; i < a.size(); i++) {
+    const auto &x = a[i];
+    const auto &y = b[i];
+    if (x.id != y.id || x.title != y.title || x.iconType != y.iconType ||
+        x.iconName != y.iconName || x.iconRequest != y.iconRequest || x.iconUri != y.iconUri ||
+        x.iconScale != y.iconScale || x.iconTinted != y.iconTinted ||
+        x.imageColor != y.imageColor || x.destructive != y.destructive ||
+        x.disabled != y.disabled || x.haptics != y.haptics || x.testID != y.testID) {
+      return false;
+    }
+  }
+  return true;
+}
+} // namespace
+
+@implementation PCActionSheet {
+  PCActionSheetView *_view;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider {
+  return concreteComponentDescriptorProvider<PCActionSheetComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame {
+  if (self = [super initWithFrame:frame]) {
+    // Fabric views seed _props with their own defaults: RCTViewComponentView
+    // asserts on it in debug builds of React Native core, and the first
+    // updateProps would otherwise read the base ViewProps as PCActionSheetProps.
+    static const auto defaultProps = std::make_shared<const PCActionSheetProps>();
+    _props = defaultProps;
+
+    // Covers the component's frame without taking touches; the children
+    // mount next to it, and the sheet's popover points at them.
+    _view = [PCActionSheetView new];
+    self.contentView = _view;
+
+    __weak __typeof(self) weakSelf = self;
+
+    _view.onSelect = ^(NSString *actionId) {
+      __typeof(self) strongSelf = weakSelf;
+      if (!strongSelf) return;
+
+      auto eventEmitter =
+          std::static_pointer_cast<const PCActionSheetEventEmitter>(
+              strongSelf->_eventEmitter);
+      if (!eventEmitter) return;
+
+      PCActionSheetEventEmitter::OnSelect payload = {
+          .actionId = actionId.UTF8String,
+      };
+
+      eventEmitter->onSelect(payload);
+    };
+
+    _view.onCancel = ^{
+      __typeof(self) strongSelf = weakSelf;
+      if (!strongSelf) return;
+
+      auto eventEmitter =
+          std::static_pointer_cast<const PCActionSheetEventEmitter>(
+              strongSelf->_eventEmitter);
+      if (!eventEmitter) return;
+
+      eventEmitter->onCancel({});
+    };
+  }
+  return self;
+}
+
+- (void)updateProps:(Props::Shared const &)props
+           oldProps:(Props::Shared const &)oldProps {
+  const auto &newProps =
+      *std::static_pointer_cast<const PCActionSheetProps>(props);
+  const auto prevProps =
+      std::static_pointer_cast<const PCActionSheetProps>(oldProps);
+
+  if (!prevProps || newProps.title != prevProps->title) {
+    _view.sheetTitle = ToNSString(newProps.title);
+  }
+
+  if (!prevProps || newProps.message != prevProps->message) {
+    _view.message = ToNSString(newProps.message);
+  }
+
+  // actions: [{id, title, icon fields, imageColor, destructive, disabled, haptics, testID}]
+  if (!prevProps || !ActionsEqual(newProps.actions, prevProps->actions)) {
+    NSMutableArray *arr = [NSMutableArray arrayWithCapacity:newProps.actions.size()];
+    for (const auto &action : newProps.actions) {
+      [arr addObject:@{
+        @"id" : ToNSString(action.id),
+        @"title" : ToNSString(action.title),
+        @"destructive" : ToNSString(action.destructive),
+        @"disabled" : ToNSString(action.disabled),
+        @"haptics" : ToNSString(action.haptics),
+        @"testID" : ToNSString(action.testID),
+      }];
+    }
+    _view.actions = arr;
+  }
+
+  if (!prevProps || newProps.cancelTitle != prevProps->cancelTitle) {
+    _view.cancelTitle = ToNSString(newProps.cancelTitle);
+  }
+
+  if (!prevProps || newProps.cancelTestID != prevProps->cancelTestID) {
+    _view.cancelTestID = ToNSString(newProps.cancelTestID);
+  }
+
+  if (!prevProps || newProps.haptics != prevProps->haptics) {
+    _view.haptics.kind = ToNSString(newProps.haptics);
+  }
+
+  // visible last, so a sheet opened by this update has the new actions.
+  // "open" | "closed"
+  if (!prevProps || newProps.visible != prevProps->visible) {
+    _view.visible = newProps.visible.empty() ? @"closed" : ToNSString(newProps.visible);
+  }
+
+  [super updateProps:props oldProps:oldProps];
+}
+
+- (void)prepareForRecycle {
+  [super prepareForRecycle];
+  [_view resetForRecycle];
+}
+
+@end
+
+Class<RCTComponentViewProtocol> PCActionSheetCls(void) {
+  return PCActionSheet.class;
+}