@apexnative/navigation 0.0.0-stage → 1.0.0-alpha.0

package/android/src/main/java/dev/apexnative/navigation/views/bottomtabs/BottomTabsLayout.kt

@@ -0,0 +1,89 @@
+package dev.apexnative.navigation.views.bottomtabs
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.view.Gravity
+import android.view.View
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import androidx.annotation.RestrictTo
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsCompat
+import dev.apexnative.navigation.utils.MaterialTheme
+
+/**
+ * The view of bottom tabs: the view of each tab made so far fills it, the selected one visible and the others invisible
+ * but laid out, so a switch shows a tab at once and its screens render; the bar's [container] lies over them at the
+ * bottom, the module's bar ([bar], `R.id.bottomTabs`) in it. The container's distance from the bottom ([barOffset]:
+ * `bottomMargin`, and the navigation bar under a compact bar) is this view's own inset, not a layout parameter a root
+ * may ignore. The window insets go on to every child as they came. Main thread only.
+ */
+@SuppressLint("ViewConstructor")
+@RestrictTo(RestrictTo.Scope.LIBRARY)
+class BottomTabsLayout(context: Context) : FrameLayout(context) {
+    /** The module's bar. */
+    val bar = BottomTabs(context)
+
+    /** What draws around the bar, on the theme of the navigation's Material views: its default colors come from it. */
+    internal val container = BottomTabsContainer(MaterialTheme.context(context), bar)
+
+    /** The navigation bar's height at the bottom of the window (`navigationBars`), from the last window insets. */
+    internal var navigationBarInset = 0
+        private set
+
+    /** The window insets reached this view: the bar's room and the screens' room may have changed. */
+    internal var onInsets: (() -> Unit)? = null
+
+    /** The custom row of the tabs, when every tab draws its cell (`bottomTab.component`); the placer puts it. */
+    internal var row: CustomTabRow? = null
+
+    /** The container's distance from the bottom, in pixels. */
+    internal var barOffset = 0
+        set(value) {
+            if (field == value) return
+            field = value
+            requestLayout()
+        }
+
+    init {
+        // The shadow of the container is drawn over the screens, out of its own bounds.
+        clipChildren = false
+        addView(container, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT, Gravity.BOTTOM))
+        ViewCompat.setOnApplyWindowInsetsListener(this) { _, insets ->
+            val bottom = insets.getInsets(WindowInsetsCompat.Type.navigationBars()).bottom
+            if (bottom != navigationBarInset) {
+                navigationBarInset = bottom
+                onInsets?.invoke()
+            }
+            insets
+        }
+    }
+
+    /** [view] of a tab joins under the bar, invisible until its tab shows. */
+    internal fun addTab(view: View) {
+        if (view.parent === this) return
+        (view.parent as? ViewGroup)?.removeView(view)
+        view.visibility = View.INVISIBLE
+        addView(view, indexOfChild(container), LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+    }
+
+    /** [view] of a tab holds this view: it is attached. */
+    internal fun holdsTab(view: View?): Boolean = view != null && view.parent === this
+
+    /** A compact bar is as wide as its tabs and floats in the middle; a stretched one goes the whole width. */
+    internal fun setCompact(compact: Boolean) {
+        bar.compact = compact
+        val params = container.layoutParams as LayoutParams
+        val width = if (compact) LayoutParams.WRAP_CONTENT else LayoutParams.MATCH_PARENT
+        val gravity = if (compact) Gravity.BOTTOM or Gravity.CENTER_HORIZONTAL else Gravity.BOTTOM
+        if (params.width == width && params.gravity == gravity) return
+        params.width = width
+        params.gravity = gravity
+        container.layoutParams = params
+    }
+
+    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+        super.onLayout(changed, left, top, right, bottom)
+        if (barOffset != 0) container.offsetTopAndBottom(-barOffset)
+    }
+}

package/android/src/main/java/dev/apexnative/navigation/views/bottomtabs/CustomBottomTabItemView.kt

@@ -0,0 +1,91 @@
+package dev.apexnative.navigation.views.bottomtabs
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.os.Bundle
+import android.widget.FrameLayout
+import dev.apexnative.navigation.react.ReactView
+import dev.apexnative.navigation.react.events.ComponentType
+import dev.apexnative.navigation.viewcontrollers.bottomtabs.TabCellState
+import dev.apexnative.navigation.viewcontrollers.viewcontroller.IReactView
+
+/**
+ * The React component of a tab (`bottomTab.component`, the cells of `bottomTabs.customRow`) in place of the tab's own
+ * content: a content view of its own — a React root by its name now, a component from the screens' tree later — that
+ * fills the cell, renders at once, hears its state as props ([update]) and its appearance with its tabs
+ * (`BottomTabItem`), and stops once with the tabs ([destroy]). Its place in the row takes the touches. Main thread
+ * only.
+ */
+@SuppressLint("ViewConstructor")
+open class CustomBottomTabItemView(context: Context) : FrameLayout(context) {
+    private var content: IReactView? = null
+    private var state: TabCellState? = null
+    private var destroyed = false
+
+    /** Runs once as the cell stops: what was kept for its content's id goes. */
+    internal var onDestroyed: (() -> Unit)? = null
+
+    /** The content the cell shows, filling it, made with [state] as its first props. */
+    internal fun show(view: IReactView, state: TabCellState) {
+        content = view
+        this.state = state
+        isSelected = state.selected
+        addView(view.asView(), LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+    }
+
+    /** The state the native side tells the component; nothing goes when it is the one told. */
+    internal fun update(state: TabCellState) {
+        if (destroyed || state == this.state) return
+        this.state = state
+        isSelected = state.selected
+        (content as? ReactView)?.updateProps(bundleOf(state))
+    }
+
+    /** The tab is selected or not: the component hears it. */
+    open fun setItemSelected(selected: Boolean) {
+        isSelected = selected
+        state?.let { update(it.copy(selected = selected)) }
+    }
+
+    /** The tabs start to appear: so does the cell's component. */
+    internal fun willAppear() {
+        if (!destroyed) content?.sendComponentWillStart(ComponentType.BottomTabItem)
+    }
+
+    /** The tabs appeared. */
+    internal fun didAppear() {
+        if (!destroyed) content?.sendComponentStart(ComponentType.BottomTabItem)
+    }
+
+    /** The tabs disappeared. */
+    internal fun didDisappear() {
+        if (!destroyed) content?.sendComponentStop(ComponentType.BottomTabItem)
+    }
+
+    /** Stops the component's React root; once. Its DidDisappear goes first when it appeared. */
+    open fun destroy() {
+        if (destroyed) return
+        didDisappear()
+        destroyed = true
+        content?.destroy()
+        onDestroyed?.invoke()
+        onDestroyed = null
+    }
+
+    /** The props of [state] as React Native takes them. */
+    internal fun bundleOf(state: TabCellState): Bundle = Bundle().apply {
+        putInt(TAB_INDEX, state.tabIndex)
+        putBoolean(SELECTED, state.selected)
+        state.badge?.let { putString(BADGE, it) } ?: putString(BADGE, null)
+        putBoolean(DOT, state.dot)
+        state.dotColor?.let { putInt(DOT_COLOR, it) }
+    }
+
+    private companion object {
+        const val TAB_INDEX = "tabIndex"
+        const val SELECTED = "selected"
+        const val BADGE = "badge"
+        const val DOT = "dot"
+        const val DOT_COLOR = "dotColor"
+    }
+}

package/android/src/main/java/dev/apexnative/navigation/views/bottomtabs/CustomTabRow.kt

@@ -0,0 +1,165 @@
+package dev.apexnative.navigation.views.bottomtabs
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.graphics.Color
+import android.graphics.Outline
+import android.graphics.drawable.GradientDrawable
+import android.graphics.drawable.InsetDrawable
+import android.os.Build
+import android.view.MotionEvent
+import android.view.View
+import android.view.ViewGroup
+import android.view.ViewOutlineProvider
+import android.widget.FrameLayout
+import android.widget.LinearLayout
+import dev.apexnative.navigation.customrow.BottomTabsCustomRowOptions
+import dev.apexnative.navigation.utils.TestIds
+import dev.apexnative.navigation.viewcontrollers.bottomtabs.CustomTabRowGeometry
+
+/**
+ * The custom row of bottom tabs on Android (`bottomTabs.customRow`): a container over the bar, in the window's content,
+ * that holds the tabs' cells in one row of equal widths in tab order. It owns its place, its look, its visibility and
+ * the touches: each cell's place takes them, the React elements in the cell don't, and a tap or a long press of a place
+ * goes to [onPress] or [onLongPress] with the tab's index. Where it lies is the placer's to say (`CustomTabRowPlacer`);
+ * what it looks like its tabs'. Main thread only.
+ */
+@SuppressLint("ViewConstructor")
+internal class CustomTabRow(context: Context) : FrameLayout(context) {
+    /** How the row looks, in pixels and ARGB. */
+    data class Look(val background: Int, val cornerRadius: Float, val elevation: Float, val testId: String?)
+
+    private val cells = LinearLayout(context).apply { orientation = LinearLayout.HORIZONTAL }
+    private val places = ArrayList<FrameLayout>()
+    private val shape = GradientDrawable()
+    private var look: Look? = null
+    // The part of the row's height below its visible part: `customRow.bottomMargin`, in pixels.
+    private var gap = 0
+
+    /** A cell's place was tapped. */
+    var onPress: ((Int) -> Unit)? = null
+
+    /** A cell's place was long-pressed. */
+    var onLongPress: ((Int) -> Unit)? = null
+
+    /** `bottomTabs.customRow` of the tabs, resolved: the placer reads its height and margins. */
+    var options = BottomTabsCustomRowOptions()
+
+    /**
+     * Where the placer put the row last, in its parent; none before it did. The frame holds `bottomMargin` below the
+     * content: the row draws, clips, casts its shadow, lays its cells and takes touches only over the content, and the
+     * margin below lets the touches through to what is under it.
+     */
+    var place: CustomTabRowGeometry.Place? = null
+        set(value) {
+            field = value
+            val next = value?.let(CustomTabRowGeometry::gap) ?: 0
+            if (next != gap) applyGap(next)
+        }
+
+    /**
+     * Whether the tabs of the row wait to show (): the row is out of accessibility and takes no touches then.
+     */
+    var hiddenFromAccessibility: () -> Boolean = { false }
+
+    init {
+        background = shape
+        outlineProvider = object : ViewOutlineProvider() {
+            override fun getOutline(view: View, outline: Outline) {
+                val bottom = (view.height - gap).coerceAtLeast(0)
+                outline.setRoundRect(0, 0, view.width, bottom, look?.cornerRadius ?: 0f)
+                // As the background's own outline: a clear row casts no shadow.
+                outline.alpha = Color.alpha(look?.background ?: 0) / OPAQUE
+            }
+        }
+        clipToOutline = true
+        addView(cells, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+    }
+
+    // The background, the outline and the cells end [next] pixels above the row's bottom.
+    private fun applyGap(next: Int) {
+        gap = next
+        background = if (next > 0) InsetDrawable(shape, 0, 0, 0, next) else shape
+        val params = cells.layoutParams as LayoutParams
+        params.bottomMargin = next
+        cells.layoutParams = params
+        invalidateOutline()
+    }
+
+    /**
+     * The row holds [views], each in a place of its own carrying its tab's testID ([testIds]): the same views again
+     * when the row joins the window again; a view leaves any parent it had first.
+     */
+    fun hold(views: List<CustomBottomTabItemView>, testIds: List<String?>) {
+        cells.removeAllViews()
+        places.clear()
+        views.forEachIndexed { index, view ->
+            (view.parent as? ViewGroup)?.removeView(view)
+            val cell = CellPlace(context, index)
+            cell.addView(view, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+            TestIds.apply(cell, testIds.getOrNull(index))
+            places += cell
+            cells.addView(cell, LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1f))
+        }
+    }
+
+    /** The testID of the cell's place of the tab at [index]. */
+    fun setTestId(index: Int, testId: String?) {
+        places.getOrNull(index)?.let { TestIds.apply(it, testId) }
+    }
+
+    // While its tabs wait to show, the row is transparent and takes no touches: they reach the root the user sees. A
+    // touch that starts in the margin below the visible row isn't the row's either.
+    @SuppressLint("ClickableViewAccessibility")
+    override fun dispatchTouchEvent(event: MotionEvent): Boolean {
+        if (hiddenFromAccessibility()) return false
+        if (event.actionMasked == MotionEvent.ACTION_DOWN && event.y >= height - gap) return false
+        return super.dispatchTouchEvent(event)
+    }
+
+    /** Whether the row shows its cells: it hides with the bar. */
+    fun showWith(bar: View) {
+        val wanted = if (bar.visibility != View.GONE) View.VISIBLE else View.GONE
+        if (visibility != wanted) visibility = wanted
+    }
+
+    /** Draws [look]; nothing changes when it is the one drawn. */
+    fun apply(look: Look) {
+        if (look == this.look) return
+        val testIdChanged = look.testId != this.look?.testId
+        this.look = look
+        shape.setColor(look.background)
+        shape.cornerRadius = look.cornerRadius
+        invalidateOutline()
+        elevation = look.elevation
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+            outlineSpotShadowColor = SPOT_SHADOW
+            outlineAmbientShadowColor = AMBIENT_SHADOW
+        }
+        if (testIdChanged) TestIds.apply(this, look.testId)
+        invalidate()
+    }
+
+    // A cell's place: the touches of the cell are its own, never the React elements' inside.
+    @SuppressLint("ViewConstructor")
+    private inner class CellPlace(context: Context, private val index: Int) : FrameLayout(context) {
+        init {
+            isClickable = true
+            isLongClickable = true
+            setOnClickListener { onPress?.invoke(index) }
+            setOnLongClickListener {
+                onLongPress?.invoke(index)
+                true
+            }
+        }
+
+        override fun onInterceptTouchEvent(event: MotionEvent): Boolean = true
+    }
+
+    private companion object {
+        // A light shadow: black with these alphas.
+        const val SPOT_SHADOW = 0x4C000000
+        const val AMBIENT_SHADOW = 0x1E000000
+        const val OPAQUE = 255f
+    }
+}

package/android/src/main/java/dev/apexnative/navigation/views/component/ComponentLayout.kt

@@ -0,0 +1,89 @@
+package dev.apexnative.navigation.views.component
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.view.MotionEvent
+import android.view.ViewTreeObserver
+import android.widget.FrameLayout
+import dev.apexnative.navigation.viewcontrollers.viewcontroller.IReactView
+import dev.apexnative.navigation.viewcontrollers.viewcontroller.ScrollEventListener
+
+/**
+ * The view of a screen (`ComponentViewController`): its content ([reactView] — a React view, or the container of a
+ * slot screen) filling it. The screen keeps the room for the bars as its margins and what the system covers as its
+ * padding. While it is in a window it hears each layout of the window ([onWindowLayout]) through a listener of its own,
+ * which leaves both the observer it was added to and the one it has now as it leaves the window or is destroyed: a
+ * detached view has an observer of its own, and the window's would keep the screen. It owns the screen's one scroll
+ * listener, which hears the lists inside it.
+ */
+@SuppressLint("ViewConstructor")
+class ComponentLayout(context: Context, val reactView: IReactView) : FrameLayout(context), Renderable {
+    /** The scroll of the screen's own vertical lists, which the bars follow: one per screen. */
+    val scrollEventListener: ScrollEventListener = reactView.getScrollEventListener() ?: ScrollEventListener()
+
+    /** The content has rendered once. */
+    val isReady: Boolean
+        get() = reactView.isReady()
+
+    override val isRendered: Boolean
+        get() = reactView.isRendered()
+
+    /** Runs as the view joins a window. */
+    internal var onAttached: (() -> Unit)? = null
+
+    /** Runs after each layout of the window while the view is in it. */
+    internal var onWindowLayout: (() -> Unit)? = null
+
+    // The observer the layout listener was added to; none while it isn't added.
+    private var layoutObserver: ViewTreeObserver? = null
+    private val windowLayoutListener = ViewTreeObserver.OnGlobalLayoutListener { onWindowLayout?.invoke() }
+    private var destroyed = false
+
+    init {
+        addView(reactView.asView(), LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+        scrollEventListener.watch(this)
+    }
+
+    override fun onAttachedToWindow() {
+        super.onAttachedToWindow()
+        if (destroyed) return
+        listenToWindowLayout()
+        scrollEventListener.attachIfNeeded()
+        onAttached?.invoke()
+    }
+
+    override fun onDetachedFromWindow() {
+        stopListeningToWindowLayout()
+        super.onDetachedFromWindow()
+    }
+
+    fun sendOnNavigationButtonPressed(buttonId: String) = reactView.sendOnNavigationButtonPressed(buttonId)
+
+    fun dispatchTouchEventToJs(event: MotionEvent) = reactView.dispatchTouchEventToJs(event)
+
+    /** The screen is destroyed: its content stops, and it listens to nothing any more. */
+    fun destroy() {
+        if (destroyed) return
+        destroyed = true
+        stopListeningToWindowLayout()
+        scrollEventListener.release()
+        onAttached = null
+        onWindowLayout = null
+        reactView.destroy()
+    }
+
+    private fun listenToWindowLayout() {
+        if (layoutObserver != null) return
+        val observer: ViewTreeObserver? = viewTreeObserver
+        observer?.addOnGlobalLayoutListener(windowLayoutListener)
+        layoutObserver = observer
+    }
+
+    private fun stopListeningToWindowLayout() {
+        val current: ViewTreeObserver? = viewTreeObserver
+        for (observer in listOfNotNull(layoutObserver, current).distinct()) {
+            if (observer.isAlive) observer.removeOnGlobalLayoutListener(windowLayoutListener)
+        }
+        layoutObserver = null
+    }
+}

package/android/src/main/java/dev/apexnative/navigation/views/component/Renderable.kt

@@ -0,0 +1,6 @@
+package dev.apexnative.navigation.views.component
+
+/** A screen's view that knows whether its content is drawn as it is now: what a transition into it waits for. */
+interface Renderable {
+    val isRendered: Boolean
+}

package/android/src/main/java/dev/apexnative/navigation/views/element/DrawOrder.kt

@@ -0,0 +1,44 @@
+package dev.apexnative.navigation.views.element
+
+import android.view.View
+import android.view.ViewGroup
+
+/**
+ * The order the views of a transition lie in its layer: the order they are drawn in their hierarchy. Along each view's
+ * path from the common root, the first step where two paths part decides: the higher `elevation` is drawn later, then
+ * the later index among the siblings; an ancestor comes before what is in it. Fabric applies `zIndex` as the order of
+ * children, so the index holds it. The comparison is pure.
+ */
+internal object DrawOrder {
+    /** One step of a path: the view's `elevation` and its index among its siblings. */
+    data class Step(val elevation: Float, val index: Int)
+
+    /** Paths compared, drawn first first. */
+    val comparator: Comparator<List<Step>> = Comparator { a, b ->
+        for (i in 0 until minOf(a.size, b.size)) {
+            val byElevation = a[i].elevation.compareTo(b[i].elevation)
+            if (byElevation != 0) return@Comparator byElevation
+            val byIndex = a[i].index.compareTo(b[i].index)
+            if (byIndex != 0) return@Comparator byIndex
+        }
+        a.size.compareTo(b.size)
+    }
+
+    /** The path of [view] from [root] down, one step per view below [root]; empty when [root] doesn't hold it. */
+    fun pathOf(view: View, root: View): List<Step> {
+        val steps = ArrayList<Step>()
+        var current: View = view
+        while (current !== root) {
+            val parent = current.parent as? ViewGroup ?: return emptyList()
+            steps += Step(current.elevation, parent.indexOfChild(current))
+            current = parent
+        }
+        return steps.asReversed()
+    }
+
+    /** [items] (their views by [viewOf]) in the order they are drawn under [root]. */
+    fun <T> sorted(items: List<T>, root: View, viewOf: (T) -> View): List<T> {
+        val paths = items.associateWith { pathOf(viewOf(it), root) }
+        return items.sortedWith { a, b -> comparator.compare(paths.getValue(a), paths.getValue(b)) }
+    }
+}

package/android/src/main/java/dev/apexnative/navigation/views/element/ElementStub.kt

@@ -0,0 +1,31 @@
+package dev.apexnative.navigation.views.element
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.graphics.Canvas
+import android.view.MotionEvent
+import android.view.View
+
+/**
+ * The empty view that stands in an element's place in its parent while the element is in the transition layer: the same
+ * id at the same index with the same layout, so Fabric finds the parent's children as it left them; React removing it
+ * removes the element for good. It has no `nativeID`, so no search finds it as the element. It draws nothing and takes
+ * no touches. Main thread only.
+ */
+@SuppressLint("ViewConstructor")
+internal class ElementStub(context: Context, element: View) : View(context) {
+    init {
+        id = element.id
+        importantForAccessibility = IMPORTANT_FOR_ACCESSIBILITY_NO
+        isClickable = false
+        isFocusable = false
+    }
+
+    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) =
+        setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.getSize(heightMeasureSpec))
+
+    override fun draw(canvas: Canvas) = Unit
+
+    @SuppressLint("ClickableViewAccessibility")
+    override fun onTouchEvent(event: MotionEvent?): Boolean = false
+}