@onekeyfe/react-native-native-overlay 3.0.162-alpha.268

package/android/src/main/java/com/onekey/nativeoverlay/NativeOverlayPageHostView.kt

@@ -0,0 +1,122 @@
+package com.onekey.nativeoverlay
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.view.ViewGroup
+import com.facebook.react.uimanager.PointerEvents
+import com.facebook.react.uimanager.ReactPointerEventsView
+import java.lang.ref.WeakReference
+
+/**
+ * Page-scope overlays of one root route render inside this view. It sits in
+ * the React tree (last child of the root-route screen), so the ReactRootView
+ * already dispatches touches to the moved content.
+ */
+@SuppressLint("ViewConstructor")
+class NativeOverlayPageHostView(context: Context) : ViewGroup(context), ReactPointerEventsView {
+  // RN's TouchTargetHelper walks the native tree; without box-none this
+  // full-screen host would become the JS target of every touch in the route.
+  override val pointerEvents: PointerEvents = PointerEvents.BOX_NONE
+
+  var hostKey: String = ""
+    set(value) {
+      if (field == value) return
+      if (field.isNotEmpty() && registry[field]?.get() === this) registry.remove(field)
+      field = value
+      if (value.isNotEmpty()) registry[value] = WeakReference(this)
+    }
+
+  private var suspendedOwners: Set<String> = emptySet()
+
+  fun setSuspendedOwners(joined: String?) {
+    val owners = joined.orEmpty().split('\n').filter { it.isNotEmpty() }.toSet()
+    if (owners == suspendedOwners) return
+    suspendedOwners = owners
+    entries().forEach(::applySuspension)
+  }
+
+  internal fun attach(entry: NativeOverlayEntryRootView) {
+    if (entry.parent !== this) {
+      (entry.parent as? ViewGroup)?.removeView(entry)
+      val index = entries().indexOfFirst { sortKey(it) > sortKey(entry) }
+        .let { if (it < 0) childCount else indexOfChild(entries()[it]) }
+      addView(entry, index, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+    }
+    layoutEntries()
+    applySuspension(entry)
+  }
+
+  internal fun detach(entry: NativeOverlayEntryRootView) {
+    removeView(entry)
+  }
+
+  /** Visible, input-ready entries in bottom-to-top order. */
+  internal fun shownEntries(): List<NativeOverlayEntryRootView> =
+    entries().filter { it.visibility == VISIBLE && it.isShownForInput }
+
+  fun invalidateHost() {
+    if (hostKey.isNotEmpty() && registry[hostKey]?.get() === this) registry.remove(hostKey)
+  }
+
+  private var layoutScheduled = false
+  private val layoutRunnable = Runnable {
+    layoutScheduled = false
+    layoutEntries()
+  }
+
+  /**
+   * This view sits inside Fabric's tree, where parents ignore requestLayout
+   * and only Fabric calls layout(). Entries are native-only children, so lay
+   * them out here whenever they (or their content) ask for it.
+   */
+  override fun requestLayout() {
+    super.requestLayout()
+    if (!layoutScheduled) {
+      layoutScheduled = true
+      post(layoutRunnable)
+    }
+  }
+
+  private fun layoutEntries() {
+    onLayout(false, left, top, right, bottom)
+  }
+
+  override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
+    val width = r - l
+    val height = b - t
+    if (width <= 0 || height <= 0) return
+    for (i in 0 until childCount) {
+      val child = getChildAt(i)
+      child.measure(
+        MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+        MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY),
+      )
+      child.layout(0, 0, width, height)
+    }
+  }
+
+  private fun applySuspension(entry: NativeOverlayEntryRootView) {
+    val hidden = entry.ownerKey in suspendedOwners
+    val target = if (hidden) INVISIBLE else VISIBLE
+    if (entry.visibility == target) return
+    entry.visibility = target
+    if (!hidden) {
+      entry.alpha = 0f
+      entry.animate().alpha(1f).setDuration(150).start()
+    }
+  }
+
+  private fun entries(): List<NativeOverlayEntryRootView> =
+    (0 until childCount).mapNotNull { getChildAt(it) as? NativeOverlayEntryRootView }
+
+  private fun sortKey(entry: NativeOverlayEntryRootView): Long =
+    entry.levelOrder.toLong() * 1_000_000_000L + entry.stackOrder
+
+  companion object {
+    private val registry = HashMap<String, WeakReference<NativeOverlayPageHostView>>()
+
+    internal fun host(key: String): NativeOverlayPageHostView? = registry[key]?.get()
+
+    internal fun allHosts(): List<NativeOverlayPageHostView> = registry.values.mapNotNull { it.get() }
+  }
+}

package/android/src/main/java/com/onekey/nativeoverlay/NativeOverlayPageHostViewManager.kt

@@ -0,0 +1,40 @@
+package com.onekey.nativeoverlay
+
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.viewmanagers.RNCNativeOverlayPageHostManagerDelegate
+import com.facebook.react.viewmanagers.RNCNativeOverlayPageHostManagerInterface
+
+/** No React children: entries are attached natively by `NativeOverlayView`. */
+@ReactModule(name = NativeOverlayPageHostViewManager.NAME)
+class NativeOverlayPageHostViewManager :
+  SimpleViewManager<NativeOverlayPageHostView>(),
+  RNCNativeOverlayPageHostManagerInterface<NativeOverlayPageHostView> {
+  private val delegate =
+    RNCNativeOverlayPageHostManagerDelegate<NativeOverlayPageHostView, NativeOverlayPageHostViewManager>(this)
+
+  override fun getName(): String = NAME
+
+  override fun getDelegate(): ViewManagerDelegate<NativeOverlayPageHostView> = delegate
+
+  override fun createViewInstance(context: ThemedReactContext) = NativeOverlayPageHostView(context)
+
+  override fun onDropViewInstance(view: NativeOverlayPageHostView) {
+    view.invalidateHost()
+    super.onDropViewInstance(view)
+  }
+
+  override fun setHostKey(view: NativeOverlayPageHostView, value: String?) {
+    view.hostKey = value.orEmpty()
+  }
+
+  override fun setSuspendedOwners(view: NativeOverlayPageHostView, value: String?) {
+    view.setSuspendedOwners(value)
+  }
+
+  companion object {
+    const val NAME = "RNCNativeOverlayPageHost"
+  }
+}

package/android/src/main/java/com/onekey/nativeoverlay/NativeOverlayView.kt

@@ -0,0 +1,465 @@
+package com.onekey.nativeoverlay
+
+import android.animation.Animator
+import android.animation.AnimatorListenerAdapter
+import android.animation.ValueAnimator
+import android.content.res.Configuration
+import android.graphics.Color
+import android.provider.Settings
+import android.util.TypedValue
+import android.view.View
+import android.view.View.OnLayoutChangeListener
+import android.view.ViewGroup
+import android.view.accessibility.AccessibilityEvent
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.uimanager.StateWrapper
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.events.EventDispatcher
+import kotlin.math.abs
+
+/** Visual state of the content between "hidden" (off stage) and identity. */
+private data class OverlayVisualState(
+  val alpha: Float = 1f,
+  val translationX: Float = 0f,
+  val translationY: Float = 0f,
+  val scale: Float = 1f,
+) {
+  fun lerp(to: OverlayVisualState, t: Float) = OverlayVisualState(
+    alpha + (to.alpha - alpha) * t,
+    translationX + (to.translationX - translationX) * t,
+    translationY + (to.translationY - translationY) * t,
+    scale + (to.scale - scale) * t,
+  )
+
+  fun applyTo(view: View) {
+    view.alpha = alpha.coerceIn(0f, 1f)
+    view.translationX = translationX
+    view.translationY = translationY
+    view.scaleX = scale
+    view.scaleY = scale
+  }
+
+  companion object {
+    val IDENTITY = OverlayVisualState()
+
+    fun of(view: View) = OverlayVisualState(view.alpha, view.translationX, view.translationY, view.scaleX)
+  }
+}
+
+/**
+ * The React-facing view. It never draws: its single React child is moved
+ * into a [NativeOverlayEntryRootView] inside the activity's
+ * [NativeOverlayHost] while visible.
+ */
+class NativeOverlayView(
+  private val reactContext: ThemedReactContext,
+) : ViewGroup(reactContext) {
+  var visible = false
+  var level: String = "modal"
+  var scope: String = "global"
+  var hostKey: String = ""
+  var ownerKey: String = ""
+  var presentation: String = "center"
+  var stackOrder = 0
+  var blocking = true
+  var dismissOnBackPress = true
+  var dismissOnBackdropPress = false
+  var backdropColor: Int? = null
+  var sheetHeight = 0.0
+  var sheetCornerRadius = 24.0
+  var showHandle = false
+  var sheetBackgroundColor: Int? = null
+  var dismissOnPanDown = true
+  var animationConfig: String? = null
+  var onPresented: ((Int) -> Unit)? = null
+  var onDismissed: ((String) -> Unit)? = null
+  var onRequestDismiss: ((String) -> Unit)? = null
+
+  /**
+   * Fabric state of the hand-written shadow node: the window origin (dp) of
+   * wherever the content is drawn, so `measure` reports on-screen frames.
+   */
+  var stateWrapper: StateWrapper? = null
+    set(value) {
+      field = value
+      pushContentOffset()
+    }
+  private var contentOffsetX = 0.0
+  private var contentOffsetY = 0.0
+  private val contentLayoutListener =
+    OnLayoutChangeListener { _, _, _, _, _, _, _, _, _ -> reportContentOffset() }
+  var eventDispatcher: EventDispatcher? = null
+    set(value) {
+      field = value
+      entry?.eventDispatcher = value
+    }
+
+  private enum class Phase { HIDDEN, ENTERING, SHOWN, EXITING }
+
+  private var phase = Phase.HIDDEN
+  private var contentChild: View? = null
+  private var entry: NativeOverlayEntryRootView? = null
+  private var host: NativeOverlayHost? = null
+  private var pageHost: NativeOverlayPageHostView? = null
+  private var contentAnimator: ValueAnimator? = null
+  private var backdropAnimator: ValueAnimator? = null
+  private var parsedConfigSource: String? = null
+  private var config = OverlayAnimationConfig()
+  private var cycleOpen = false
+
+  init {
+    visibility = INVISIBLE
+  }
+
+  override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) = Unit
+
+  fun addReactChild(child: View) {
+    contentChild?.takeIf { it !== child }?.let(::removeReactChild)
+    contentChild = child
+    entry?.let { attachContent(it) } ?: stageContent()
+  }
+
+  fun getReactChildCount(): Int = if (contentChild == null) 0 else 1
+
+  fun getReactChildAt(index: Int): View? = if (index == 0) contentChild else null
+
+  fun removeReactChild(child: View) {
+    if (contentChild !== child) return
+    (child.parent as? ViewGroup)?.removeView(child)
+    contentChild = null
+  }
+
+  fun commitConfiguration() {
+    if (parsedConfigSource != animationConfig) {
+      parsedConfigSource = animationConfig
+      config = OverlayAnimationConfig.parse(animationConfig)
+    }
+    entry?.let(::applyEntryConfiguration)
+    if (visible) {
+      cycleOpen = true
+      if (phase == Phase.HIDDEN || phase == Phase.EXITING) present()
+    } else if (cycleOpen) {
+      when (phase) {
+        Phase.ENTERING, Phase.SHOWN -> dismiss()
+        Phase.HIDDEN -> {
+          cycleOpen = false
+          onDismissed?.invoke("programmatic")
+        }
+        Phase.EXITING -> Unit
+      }
+    }
+  }
+
+  fun onDropViewInstance() {
+    if (phase != Phase.HIDDEN) finishDismiss(null)
+    onPresented = null
+    onDismissed = null
+    onRequestDismiss = null
+    eventDispatcher = null
+  }
+
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+    commitConfiguration()
+  }
+
+  // Detach from window (screen removed, activity destroyed) ends the overlay.
+  override fun onDetachedFromWindow() {
+    super.onDetachedFromWindow()
+    // A page overlay's owner screen detaches when another screen covers it;
+    // the page host hides the entry, it is not closed.
+    if (phase != Phase.HIDDEN && scope != "page") finishDismiss("system")
+  }
+
+  private fun present() {
+    val activity = reactContext.currentActivity ?: return
+    if (!isAttachedToWindow && scope != "page") return
+    val overlayHost = NativeOverlayHost.of(activity)
+    val target = entry ?: makeEntry()
+    applyEntryConfiguration(target)
+    if (scope == "page") {
+      val page = NativeOverlayPageHostView.host(hostKey) ?: return
+      target.dispatchesJsTouches = false
+      target.levelOrder = NativeOverlayLevel.from(level).order
+      target.ownerKey = ownerKey
+      pageHost = page
+      page.attach(target)
+      // Back for page entries is resolved through the activity interceptor.
+      overlayHost.installBackInterceptor()
+    } else {
+      host = overlayHost
+      overlayHost.attach(target, NativeOverlayLevel.from(level))
+    }
+    attachContent(target)
+
+    val transition = config.enter.reduceMotionAdjusted(isReduceMotionEnabled())
+    if (phase == Phase.HIDDEN) {
+      hiddenState(target, transition).applyTo(target.animatedView)
+      target.backdropView.alpha = 0f
+    }
+    cancelAnimators()
+    phase = Phase.ENTERING
+    target.isShownForInput = true
+    host?.onEntriesChanged()
+    if (blocking) {
+      target.sendAccessibilityEvent(AccessibilityEvent.TYPE_WINDOW_STATE_CHANGED)
+    }
+    if (transition.kind == "none") {
+      OverlayVisualState.IDENTITY.applyTo(target.animatedView)
+      target.backdropView.alpha = 1f
+      phase = Phase.SHOWN
+      reportContentOffset()
+      onPresented?.invoke(stackOrder)
+      return
+    }
+    animate(target, OverlayVisualState.IDENTITY, 1f, transition.motion) {
+      if (phase == Phase.ENTERING) {
+        phase = Phase.SHOWN
+        reportContentOffset()
+        onPresented?.invoke(stackOrder)
+      }
+    }
+  }
+
+  private fun dismiss() {
+    val target = entry ?: return finishDismiss("programmatic")
+    cancelAnimators()
+    phase = Phase.EXITING
+    target.isShownForInput = false
+    host?.onEntriesChanged()
+    val transition = config.exit.reduceMotionAdjusted(isReduceMotionEnabled())
+    if (transition.kind == "none") return finishDismiss("programmatic")
+    animate(target, hiddenState(target, transition), 0f, transition.motion) {
+      if (phase == Phase.EXITING) finishDismiss("programmatic")
+    }
+  }
+
+  /** `reason == null` tears down without notifying JS (view dropped). */
+  private fun finishDismiss(reason: String?) {
+    cancelAnimators()
+    phase = Phase.HIDDEN
+    entry?.let { target ->
+      target.isShownForInput = false
+      stageContent()
+      host?.detach(target)
+      pageHost?.detach(target)
+    }
+    entry = null
+    host = null
+    pageHost = null
+    if (reason == null || !cycleOpen) return
+    cycleOpen = visible
+    onDismissed?.invoke(reason)
+  }
+
+  private fun animate(
+    target: NativeOverlayEntryRootView,
+    to: OverlayVisualState,
+    backdropTo: Float,
+    motion: OverlayMotion,
+    onEnd: () -> Unit,
+  ) {
+    // Start from the current values so an interrupted run retargets smoothly.
+    val animated = target.animatedView
+    val from = OverlayVisualState.of(animated)
+    contentAnimator = ValueAnimator.ofFloat(0f, 1f).apply {
+      duration = motion.durationMs()
+      interpolator = motion.interpolator()
+      addUpdateListener { from.lerp(to, it.animatedValue as Float).applyTo(animated) }
+      addListener(object : AnimatorListenerAdapter() {
+        private var cancelled = false
+
+        override fun onAnimationCancel(animation: Animator) {
+          cancelled = true
+        }
+
+        override fun onAnimationEnd(animation: Animator) {
+          if (!cancelled) onEnd()
+        }
+      })
+      start()
+    }
+    val backdropFrom = target.backdropView.alpha
+    val backdropMotion = config.backdropMotion
+    backdropAnimator = ValueAnimator.ofFloat(0f, 1f).apply {
+      duration = backdropMotion.durationMs()
+      interpolator = backdropMotion.interpolator()
+      addUpdateListener {
+        val t = it.animatedValue as Float
+        target.backdropView.alpha = (backdropFrom + (backdropTo - backdropFrom) * t).coerceIn(0f, 1f)
+      }
+      start()
+    }
+  }
+
+  private fun cancelAnimators() {
+    contentAnimator?.cancel()
+    backdropAnimator?.cancel()
+    contentAnimator = null
+    backdropAnimator = null
+  }
+
+  /** The off-stage state: where enter starts and exit ends. */
+  private fun hiddenState(target: NativeOverlayEntryRootView, transition: OverlayTransition): OverlayVisualState {
+    val alpha = if (transition.hidesOpacity) 0f else 1f
+    val extent = target.contentExtent()
+    val density = resources.displayMetrics.density
+    val isSheet = target.sheetView != null
+    return when (transition.kind) {
+      "slide" -> {
+        val travel = transition.distanceDp?.let { (it * density).toFloat() } ?: when {
+          // The sheet may not be laid out yet; its own height is the travel.
+          isSheet && transition.edge == "bottom" ->
+            maxOf(target.sheetHeightPx(), (sheetHeight * density).toInt()).toFloat()
+          else -> when (transition.edge) {
+          "top" -> extent.bottom.toFloat()
+          "left" -> extent.right.toFloat()
+          "right" -> (target.width - extent.left).toFloat()
+          else -> (target.height - extent.top).toFloat()
+          }
+        }
+        when (transition.edge) {
+          "top" -> OverlayVisualState(alpha, 0f, -travel, 1f)
+          "left" -> OverlayVisualState(alpha, -travel, 0f, 1f)
+          "right" -> OverlayVisualState(alpha, travel, 0f, 1f)
+          else -> OverlayVisualState(alpha, 0f, travel, 1f)
+        }
+      }
+      "scale" -> {
+        // Scale around the content's center, not the full-window root's.
+        target.animatedView.pivotX = extent.exactCenterX() - target.animatedView.left
+        target.animatedView.pivotY = extent.exactCenterY() - target.animatedView.top
+        OverlayVisualState(alpha, 0f, (transition.offsetYDp * density).toFloat(), transition.scale)
+      }
+      else -> OverlayVisualState(alpha = alpha)
+    }
+  }
+
+  private fun makeEntry(): NativeOverlayEntryRootView {
+    val target = NativeOverlayEntryRootView(reactContext)
+    target.eventDispatcher = eventDispatcher
+    target.onRequestDismiss = { reason -> onRequestDismiss?.invoke(reason) }
+    target.onKeyboardShiftSettled = { reportContentOffset() }
+    target.onSheetHiddenByPan = {
+      if (phase == Phase.SHOWN || phase == Phase.ENTERING) {
+        // Already off screen: tear down, then let JS close the entry; the
+        // next visible=false commit reports onDismissed.
+        finishDismiss(null)
+        onRequestDismiss?.invoke("pan")
+      }
+    }
+    entry = target
+    return target
+  }
+
+  /**
+   * Without an explicit color the sheet follows the theme (iOS uses
+   * `systemBackground`); a fixed white showed as a strip under dark content
+   * in the navigation bar inset.
+   */
+  private fun defaultSheetBackgroundColor(): Int {
+    val theme = (context as? ThemedReactContext)?.currentActivity?.theme ?: context.theme
+    val value = TypedValue()
+    if (
+      theme.resolveAttribute(android.R.attr.colorBackground, value, true) &&
+      value.type >= TypedValue.TYPE_FIRST_COLOR_INT &&
+      value.type <= TypedValue.TYPE_LAST_COLOR_INT
+    ) {
+      return value.data
+    }
+    val nightMode = resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
+    return if (nightMode == Configuration.UI_MODE_NIGHT_YES) Color.BLACK else Color.WHITE
+  }
+
+  private fun applyEntryConfiguration(target: NativeOverlayEntryRootView) {
+    target.stackOrder = stackOrder
+    target.updateBlocking(blocking)
+    target.dismissOnBackPress = dismissOnBackPress
+    target.dismissOnBackdropPress = dismissOnBackdropPress
+    target.backdropView.setBackgroundColor(backdropColor ?: Color.TRANSPARENT)
+    if (presentation == "sheet") {
+      val density = resources.displayMetrics.density
+      target.configureSheet(
+        heightPx = (sheetHeight * density).toInt().coerceAtLeast(1),
+        cornerRadiusPx = (sheetCornerRadius * density).toFloat(),
+        backgroundColor = sheetBackgroundColor ?: defaultSheetBackgroundColor(),
+        showHandle = showHandle,
+        draggable = dismissOnPanDown,
+      )
+    }
+  }
+
+  /**
+   * While hidden, keep the React child inside this invisible view. Fabric only
+   * reports onLayout for attached views, and fitted sheets size themselves
+   * from that measurement before presenting.
+   */
+  private fun stageContent() {
+    val child = contentChild ?: return
+    if (child.parent === this) return
+    moveContent(child, this)
+  }
+
+  private fun attachContent(target: NativeOverlayEntryRootView) {
+    val child = contentChild ?: return
+    if (child.parent === target.contentView) return
+    moveContent(child, target.contentView)
+  }
+
+  private fun moveContent(child: View, container: ViewGroup) {
+    (child.parent as? ViewGroup)?.let { previous ->
+      previous.removeOnLayoutChangeListener(contentLayoutListener)
+      previous.removeView(child)
+    }
+    container.addView(child)
+    container.addOnLayoutChangeListener(contentLayoutListener)
+    reportContentOffset()
+  }
+
+  /** Window origin of the content's container, ignoring running animations. */
+  private fun reportContentOffset() {
+    val container = contentChild?.parent as? View ?: return
+    var x = 0f
+    var y = 0f
+    var current: View? = container
+    while (current != null) {
+      x += current.left
+      y += current.top
+      // The keyboard lift is a resting position, unlike animation transforms.
+      if (current is NativeOverlayKeyboardLayer) {
+        x += current.translationX
+        y += current.translationY
+      }
+      val parent = current.parent as? View
+      if (parent != null) {
+        x -= parent.scrollX
+        y -= parent.scrollY
+      }
+      current = parent
+    }
+    val density = resources.displayMetrics.density
+    contentOffsetX = (x / density).toDouble()
+    contentOffsetY = (y / density).toDouble()
+    pushContentOffset()
+  }
+
+  private fun pushContentOffset() {
+    val wrapper = stateWrapper ?: return
+    val data = wrapper.stateData
+    if (data != null && data.hasKey("x") && data.hasKey("y") &&
+      abs(data.getDouble("x") - contentOffsetX) < 0.5 &&
+      abs(data.getDouble("y") - contentOffsetY) < 0.5
+    ) {
+      return
+    }
+    wrapper.updateState(
+      Arguments.createMap().apply {
+        putDouble("x", contentOffsetX)
+        putDouble("y", contentOffsetY)
+      },
+    )
+  }
+
+  private fun isReduceMotionEnabled(): Boolean =
+    Settings.Global.getFloat(context.contentResolver, Settings.Global.ANIMATOR_DURATION_SCALE, 1f) == 0f
+}