@momo-kits/native-kits 0.162.49 → 0.162.50-debug

package/compose/src/commonMain/kotlin/vn/momo/kits/modifier/Size.kt

@@ -0,0 +1,51 @@
+package vn.momo.kits.modifier
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.State
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.Measurable
+import androidx.compose.ui.layout.MeasureResult
+import androidx.compose.ui.layout.MeasureScope
+import androidx.compose.ui.node.LayoutModifierNode
+import androidx.compose.ui.node.ModifierNodeElement
+import androidx.compose.ui.unit.Constraints
+import androidx.compose.ui.unit.IntOffset
+
+@Composable
+fun Modifier.dynamicSize(
+    widthState: State<Int>? = null,
+    heightState: State<Int>? = null,
+) = this then DynamicSizeElement(widthState, heightState)
+
+private data class DynamicSizeElement(
+    val widthState: State<Int>?,
+    val heightState: State<Int>?,
+) : ModifierNodeElement<DynamicSizeNode>() {
+    override fun create(): DynamicSizeNode {
+        return DynamicSizeNode(widthState, heightState)
+    }
+
+    override fun update(node: DynamicSizeNode) {
+        node.widthState = widthState
+        node.heightState = heightState
+    }
+
+}
+
+private class DynamicSizeNode(
+    var widthState: State<Int>?,
+    var heightState: State<Int>?,
+) : Modifier.Node(), LayoutModifierNode {
+    override fun MeasureScope.measure(
+        measurable: Measurable,
+        constraints: Constraints
+    ): MeasureResult {
+        val p = measurable.measure(constraints)
+        return layout(
+            width = widthState?.value ?: p.width,
+            height = heightState?.value ?: p.height,
+        ) {
+            p.place(IntOffset.Zero)
+        }
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/BottomSheet.kt

@@ -0,0 +1,502 @@
+package vn.momo.kits.navigation
+
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.CubicBezierEasing
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.gestures.detectDragGestures
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.absolutePadding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.AbsoluteAlignment
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.layout.layout
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.constrainHeight
+import androidx.compose.ui.unit.dp
+import kotlinx.coroutines.launch
+import vn.momo.kits.components.Divider
+import vn.momo.kits.components.Icon
+import vn.momo.kits.components.Text
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Radius
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.application.LocalContext
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.AppNavigationBar
+import vn.momo.kits.const.Typography
+import vn.momo.kits.navigation.tracking.ScreenTracker
+import vn.momo.kits.modifier.conditional
+import vn.momo.kits.modifier.noFeedbackClickable
+import vn.momo.kits.platform.BackHandler
+import vn.momo.kits.platform.getScreenHeight
+import vn.momo.kits.layout.DuoMetrics
+import vn.momo.kits.layout.SideBarEdge
+import vn.momo.kits.layout.SideBarLayout
+import vn.momo.kits.layout.getScreenLayout
+import vn.momo.kits.modifier.setAutomationId
+import vn.momo.kits.navigation.component.HeaderType
+import vn.momo.kits.navigation.component.SideBarButton
+import vn.momo.kits.navigation.component.getHeaderColor
+
+// iPhone Duo inner display: center the sheet instead of spanning the width (RN BottomSheet).
+private val DUO_REGULAR_MIN_WIDTH = 600.dp
+
+private val INDICATOR_HEIGHT = 16.dp
+private val HEADER_ROW_HEIGHT = 56.dp
+
+// Side column controls line up with the header row while the sheet is short.
+private val SIDE_COLUMN_OFFSET = INDICATOR_HEIGHT + (HEADER_ROW_HEIGHT - DuoMetrics.controlSize) / 2
+
+@Composable
+internal fun BottomSheet(
+    content: @Composable () -> Unit,
+    header: BottomHeader,
+    isSurface: Boolean = false,
+    barrierDismissible: Boolean = true,
+    draggable: Boolean = true,
+    useBottomInset: Boolean = true,
+    footerComponent: (@Composable () -> Unit)? = null,
+    onDismiss: (() -> Unit)?
+) {
+    val layout = getScreenLayout()
+    val isDuo = layout.isIPhoneDuoDevice
+    val isDuoCentered = isDuo && layout.width >= DUO_REGULAR_MIN_WIDTH
+    // outer display: the sheet floats Spacing.M off the side edges like system sheets, its content
+    // stays in the safe area and its buttons move to the side bar column (HIG)
+    val isDuoFloating = isDuo && !isDuoCentered
+    val title = header as? BottomHeader.Title
+    val sideColumn = layout.sideBar?.takeIf {
+        isDuoFloating && title != null && it.width - Spacing.M >= DuoMetrics.controlSize + Spacing.M
+    }
+    // the floating sheet spans the side safe area, its content stays clear of it
+    val sidePadding = if (isDuoFloating) {
+        PaddingValues.Absolute(
+            left = (layout.insetLeft - Spacing.M).coerceAtLeast(0.dp),
+            right = (layout.insetRight - Spacing.M).coerceAtLeast(0.dp),
+        )
+    } else {
+        PaddingValues()
+    }
+    // the screen is the outer display on iPhone Duo, even when unfolded
+    val screenHeightDp = if (isDuo) layout.height else getScreenHeight()
+    val screenHeightPx = with(LocalDensity.current) { screenHeightDp.toPx() }
+    val sheetOffset = remember { Animatable(screenHeightPx) }
+
+    val backgroundAlpha = remember { Animatable(0f) }
+    val dynamicAlpha = ((1f - (sheetOffset.value / screenHeightPx)).coerceIn(0f, 1f)) * 0.3f
+    val alpha = backgroundAlpha.value + dynamicAlpha
+
+    val sheetCloseOffset = with(LocalDensity.current) { 100.dp.toPx() }
+
+    val coroutineScope = rememberCoroutineScope()
+
+    val maxApi = LocalMaxApi.current
+    val context = LocalContext.current
+
+    DisposableEffect(Unit) {
+        ScreenTracker.trackPopupDisplayed(
+            maxApi = maxApi,
+            context = context,
+            parentScreenName = ScreenTracker.getLastScreenName()
+        )
+        onDispose { }
+    }
+
+    // a closing sheet keeps going: a second close, the open slide or a drag would cancel its animation
+    var isClosing by remember { mutableStateOf(false) }
+    // runs once the sheet has closed itself, after its onDismiss
+    var afterDismiss by remember { mutableStateOf<(() -> Unit)?>(null) }
+
+    suspend fun openEvent(){
+        backgroundAlpha.animateTo(
+            targetValue = 0.3f,
+            animationSpec = tween(
+                durationMillis = 100,
+                easing = CubicBezierEasing(0.05f, 0.7f, 0.1f, 1f)
+            )
+        )
+        if (isClosing) return
+        sheetOffset.animateTo(
+            targetValue = 0f,
+            animationSpec = tween(
+                durationMillis = 350,
+                easing = CubicBezierEasing(0.05f, 0.7f, 0.1f, 1f)
+            )
+        )
+    }
+
+    fun closeEvent(then: (() -> Unit)? = null){
+        if (isClosing) return
+        isClosing = true
+        coroutineScope.launch {
+            sheetOffset.animateTo(
+                targetValue = screenHeightPx,
+                animationSpec = tween(
+                    durationMillis = 200,
+                    easing = CubicBezierEasing(0.3f, 0.0f, 0.8f, 0.15f)
+                )
+            )
+            backgroundAlpha.animateTo(
+                targetValue = 0f,
+                animationSpec = tween(
+                    durationMillis = 100,
+                    easing = CubicBezierEasing(0.3f, 0.0f, 0.8f, 0.15f)
+                )
+            )
+            // not reached when a newer overlay replaced this one, so its back is dropped
+            afterDismiss = then
+            OverplayComponentRegistry.hardClearAfterDismiss()
+        }
+    }
+
+    // RN `leftOptions.onPressIconLeft`: the sheet closes first, then the back runs
+    val onBack = title?.onBack?.let { back -> { closeEvent(then = back) } }
+
+    LaunchedEffect(Unit) {
+        openEvent()
+    }
+
+    DisposableEffect(Unit) {
+        OverplayComponentRegistry.bindClose { closeEvent() }
+        onDispose {
+            onDismiss?.invoke()
+            afterDismiss?.invoke()
+        }
+    }
+
+    BackHandler(true){
+        closeEvent()
+    }
+
+    BoxWithConstraints(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(Color.Black.copy(alpha = alpha))
+            .noFeedbackClickable {
+                if(barrierDismissible) closeEvent()
+            }
+    ) {
+        val parentHeight = with(LocalDensity.current) { constraints.maxHeight.toDp() }
+        val maxHeight = if (isDuo) {
+            // with its buttons in the side column the sheet can pass the side status bar
+            parentHeight - maxOf(if (sideColumn != null) layout.insetTop else layout.duoTopInset, Spacing.XL)
+        } else {
+            parentHeight - 90.dp
+        }
+        val radius = if (isDuo) Radius.XL else Radius.M
+
+        Box(
+            modifier = Modifier
+                .align(Alignment.BottomCenter)
+                .offset { IntOffset(x = 0, y = sheetOffset.value.toInt()) }
+                .then(
+                    when {
+                        // keeps the portrait width in landscape, like system sheets
+                        isDuoCentered -> Modifier.width(
+                            minOf(
+                                minOf(layout.width, layout.height) - Spacing.L * 2,
+                                layout.width - maxOf(layout.insetLeft, layout.insetRight, Spacing.L) * 2,
+                            )
+                        )
+                        isDuoFloating -> Modifier.fillMaxWidth().padding(horizontal = Spacing.M)
+                        else -> Modifier.fillMaxWidth()
+                    }
+                )
+                .heightIn(max = maxHeight)
+                .background(
+                    color = if (isSurface) AppTheme.current.colors.background.surface else AppTheme.current.colors.background.default,
+                    shape = RoundedCornerShape(topStart = radius, topEnd = radius)
+                )
+                .conditional(IsShowBaseLineDebug) {
+                    border(1.dp, Colors.blue_03)
+                }
+                .noFeedbackClickable {  },
+            contentAlignment = Alignment.BottomCenter
+        ) {
+            val bottomInset = if (useBottomInset) {
+                (AppNavigationBar.current - keyboardSizeState().value).coerceAtLeast(0.dp)
+            } else 0.dp
+            Column(Modifier.padding(bottom = bottomInset)) {
+                Box(
+                    modifier = Modifier
+                        .height(INDICATOR_HEIGHT + HEADER_ROW_HEIGHT)
+                        .fillMaxWidth()
+                        .conditional(draggable) {
+                            pointerInput(Unit) {
+                                detectDragGestures(
+                                    onDrag = { change, dragAmount ->
+                                        change.consume()
+                                        if (isClosing) return@detectDragGestures
+                                        coroutineScope.launch {
+                                            val newOffset = (sheetOffset.value + dragAmount.y).coerceAtLeast(0f)
+                                            sheetOffset.snapTo(newOffset)
+                                        }
+                                    },
+                                    onDragEnd = {
+                                        if (isClosing) return@detectDragGestures
+                                        coroutineScope.launch {
+                                            if (sheetOffset.value > sheetCloseOffset) {
+                                                closeEvent()
+                                            } else {
+                                                sheetOffset.animateTo(0f)
+                                            }
+                                        }
+                                    }
+                                )
+                            }
+                        }
+                ) {
+                    Column(
+                        modifier = Modifier
+                            .fillMaxSize()
+                            .padding(sidePadding)
+                            .padding(horizontal = Spacing.M),
+                        horizontalAlignment = Alignment.CenterHorizontally
+                    ) {
+                        Spacer(Modifier.height(8.dp))
+                        Box(
+                            modifier = Modifier
+                                .height(4.dp)
+                                .width(40.dp)
+                                .background(
+                                    color = Colors.black_06,
+                                    shape = RoundedCornerShape(Radius.S)
+                                )
+                        )
+                        Spacer(Modifier.height(4.dp))
+                        Box(Modifier.fillMaxWidth().height(HEADER_ROW_HEIGHT), contentAlignment = Alignment.Center){
+                            when (header) {
+                                is BottomHeader.Title -> BottomSheetTitle(
+                                    text = header.data,
+                                    backIcon = header.backIcon,
+                                    // the side column holds back and close, the row keeps only the title
+                                    showButtons = sideColumn == null,
+                                    onBack = onBack,
+                                    onClose = { closeEvent() },
+                                )
+                                is BottomHeader.Custom -> {
+                                    header.content()
+                                }
+                            }
+                        }
+                    }
+                }
+                Box(Modifier.padding(sidePadding)) {
+                    Divider()
+                }
+                if (footerComponent != null) {
+                    Box(Modifier.weight(1f, fill = false).padding(sidePadding)) {
+                        content()
+                    }
+                    BottomSheetFooter(footerComponent, sidePadding)
+                } else if (isDuo) {
+                    // content shrinks so a tall sheet keeps its header
+                    Box(Modifier.weight(1f, fill = false).padding(sidePadding)) {
+                        content()
+                    }
+                } else {
+                    content()
+                }
+            }
+            if (sideColumn != null && title != null) {
+                BottomSheetSideColumn(
+                    sideBar = sideColumn,
+                    parentHeight = parentHeight,
+                    backIcon = title.backIcon,
+                    onBack = onBack,
+                    onClose = { closeEvent() },
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun BottomSheetTitle(
+    text: String,
+    backIcon: String,
+    showButtons: Boolean,
+    onBack: (() -> Unit)?,
+    onClose: () -> Unit,
+) {
+    Row(modifier = Modifier.fillMaxSize(), verticalAlignment = Alignment.CenterVertically) {
+        if (showButtons) {
+            if (onBack != null) {
+                BottomSheetHeaderButton(icon = backIcon, automationId = "btn_bottom_sheet_back", onClick = onBack)
+            } else {
+                Box(Modifier.size(24.dp))
+            }
+        }
+        Box(
+            Modifier
+                .fillMaxHeight()
+                .weight(1f)
+                .conditional(!showButtons) { padding(horizontal = Spacing.M) },
+            contentAlignment = Alignment.Center
+        ) {
+            Text(
+                text = text,
+                color = Colors.black_17,
+                style = Typography.headerDefaultBold
+            )
+        }
+        if (showButtons) {
+            BottomSheetHeaderButton(icon = "navigation_close", automationId = "btn_bottom_sheet_close", onClick = onClose)
+        }
+    }
+}
+
+@Composable
+private fun BottomSheetHeaderButton(icon: String, automationId: String, onClick: () -> Unit) {
+    Box(
+        Modifier
+            .size(24.dp)
+            .noFeedbackClickable(onClick = onClick)
+            .setAutomationId(automationId),
+        contentAlignment = Alignment.Center
+    ) {
+        Icon(source = icon)
+    }
+}
+
+// iPhone Duo outer display: back and close sit on the part of the sheet under the side safe area,
+// 12pt from the strip's inner edge like the screen side bar. They follow the header row while the
+// sheet is short and stay below the status bar cluster while it is tall.
+@Composable
+private fun BoxScope.BottomSheetSideColumn(
+    sideBar: SideBarLayout,
+    parentHeight: Dp,
+    backIcon: String,
+    onBack: (() -> Unit)?,
+    onClose: () -> Unit,
+) {
+    val isRight = sideBar.edge == SideBarEdge.RIGHT
+    val headerColor = getHeaderColor(HeaderType.None, 1f, null, AppTheme.current.colors.text.default)
+
+    Box(Modifier.matchParentSize()) {
+        Column(
+            modifier = Modifier
+                .align(if (isRight) AbsoluteAlignment.TopRight else AbsoluteAlignment.TopLeft)
+                .width(sideBar.width - Spacing.M)
+                .layout { measurable, constraints ->
+                    val placeable = measurable.measure(constraints.copy(minHeight = 0))
+                    val sheetHeight = constraints.maxHeight
+                    // the sheet rests on the bottom of the overlay, which starts at the window top
+                    val sheetTop = parentHeight.roundToPx() - sheetHeight
+                    // clear of a camera at the bottom end of the strip when it can
+                    val lowest = sheetHeight - sideBar.bottom.roundToPx() - placeable.height
+                    val y = maxOf(sideBar.top.roundToPx() - sheetTop, SIDE_COLUMN_OFFSET.roundToPx())
+                        .coerceAtMost(lowest)
+                        .coerceAtLeast(0)
+                    layout(placeable.width, constraints.constrainHeight(y + placeable.height)) {
+                        placeable.place(0, y)
+                    }
+                }
+                .absolutePadding(left = if (isRight) Spacing.M else 0.dp, right = if (isRight) 0.dp else Spacing.M),
+            horizontalAlignment = if (isRight) AbsoluteAlignment.Left else AbsoluteAlignment.Right,
+            verticalArrangement = Arrangement.spacedBy(Spacing.M),
+        ) {
+            if (onBack != null) {
+                SideBarButton(
+                    icon = backIcon,
+                    headerColor = headerColor,
+                    automationId = "btn_bottom_sheet_back",
+                    onClick = onBack,
+                )
+            }
+            SideBarButton(
+                icon = "navigation_close",
+                headerColor = headerColor,
+                automationId = "btn_bottom_sheet_close",
+                onClick = onClose,
+            )
+        }
+    }
+}
+
+@Composable
+private fun BottomSheetFooter(footerComponent: @Composable () -> Unit, sidePadding: PaddingValues) {
+    val shadowBrush = remember {
+        Brush.verticalGradient(
+            colors = listOf(Color.Transparent, Color.Black.copy(alpha = 0.05f))
+        )
+    }
+
+    Box {
+        Box(
+            Modifier
+                .fillMaxWidth()
+                .background(AppTheme.current.colors.background.surface)
+                .conditional(IsShowBaseLineDebug) {
+                    border(1.dp, Colors.blue_03)
+                }
+                .padding(sidePadding)
+                .padding(vertical = Spacing.S)
+        ) {
+            footerComponent()
+        }
+
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(6.dp)
+                .offset(x = 0.dp, y = (-6).dp)
+                .background(shadowBrush)
+        )
+    }
+}
+
+sealed class BottomHeader {
+    data class Title(
+        val data: String = "Bottom Sheet Title",
+    ) : BottomHeader() {
+        // Outside the primary constructor so code built against older kits keeps Title() and copy().
+        // onBack shows a back button: the sheet closes (onDismiss fires), then it runs.
+        var onBack: (() -> Unit)? = null
+            private set
+        var backIcon: String = "arrow-back"
+            private set
+
+        constructor(data: String, onBack: (() -> Unit)?, backIcon: String = "arrow-back") : this(data) {
+            this.onBack = onBack
+            this.backIcon = backIcon
+        }
+    }
+
+    data class Custom(
+        val content: @Composable () -> Unit
+    ) : BottomHeader()
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/HostBackGestureBridge.kt

@@ -0,0 +1,58 @@
+package vn.momo.kits.navigation
+
+interface HostBackTarget {
+    fun canPop(): Boolean
+
+    fun onBack()
+
+    fun backStarted()
+    fun backProgressed(progress: Float)
+    fun backCompleted()
+    fun backCancelled()
+}
+
+object HostBackGestureBridge {
+    private val targets = mutableListOf<HostBackTarget>()
+    private var gestureTarget: HostBackTarget? = null
+
+    var shouldUseFloatingArrowBack: Boolean = false
+
+    fun checkCanPop(): Boolean = targets.isNotEmpty()
+
+    fun canPopInner(): Boolean = top()?.canPop() == true
+
+    fun pop() {
+        top()?.onBack()
+    }
+
+    fun started() {
+        val target = top() ?: return
+        gestureTarget = target
+        target.backStarted()
+    }
+
+    fun progressed(progress: Float) {
+        gestureTarget?.backProgressed(progress.coerceIn(0f, 1f))
+    }
+
+    fun completed() {
+        (gestureTarget ?: top())?.backCompleted()
+        gestureTarget = null
+    }
+
+    fun cancelled() {
+        gestureTarget?.backCancelled()
+        gestureTarget = null
+    }
+
+    fun attach(target: HostBackTarget) {
+        targets += target
+    }
+
+    fun detach(target: HostBackTarget) {
+        targets -= target
+        if (gestureTarget === target) gestureTarget = null
+    }
+
+    private fun top(): HostBackTarget? = targets.lastOrNull()
+}