@momo-kits/native-kits 0.300.4 → 0.300.5-debug

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

@@ -0,0 +1,169 @@
+package vn.momo.kits.navigation.component
+
+import androidx.compose.animation.*
+import androidx.compose.animation.core.CubicBezierEasing
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.ScrollState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.*
+import androidx.compose.material3.AlertDialogDefaults
+import androidx.compose.material3.FloatingActionButton
+import androidx.compose.material3.FloatingActionButtonDefaults
+import androidx.compose.material3.FloatingActionButtonElevation
+import androidx.compose.runtime.*
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.collectLatest
+import kotlinx.coroutines.launch
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.components.Icon
+import vn.momo.kits.components.Text
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.conditional
+import kotlin.time.Duration.Companion.milliseconds
+
+enum class FABSize { SMALL, DEFAULT }
+enum class FABPosition { END, CENTER }
+
+data class FloatingButtonProps(
+    val icon: String,
+    val iconColor: Color? = null,
+    val label: String? = null,
+    val onClick: () -> Unit,
+    val size: FABSize = FABSize.DEFAULT,
+    val bottom: Dp? = null,
+    val scrollState: ScrollState? = null,
+    val position: FABPosition? = FABPosition.END,
+)
+
+private val FabSmallSize = 36.dp
+private val FabDefaultSize = 48.dp
+private val FabExpandedWidth = 80.dp
+private val FabIconSizeSmall = 12.dp
+private val FabIconSizeDefault = 24.dp
+private val FabPaddingHorizontal = 12.dp
+
+@Composable
+internal fun FloatingButton(
+    scrollPosition: Int,
+    bottom: Dp,
+    onClick: () -> Unit,
+    containerColor: Color,
+    contentColor: Color = containerColor,
+    icon: String,
+    iconColor: Color? = null,
+    text: String? = null,
+    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(4.dp),
+    size: FABSize = FABSize.DEFAULT,
+    position: FABPosition = FABPosition.END,
+    keyboardSize: Dp = 0.dp,
+) {
+    val scrollStateFlow = remember { MutableStateFlow(scrollPosition) }
+    var lastScrollPosition by rememberSaveable { mutableStateOf(0) }
+    var isExpanded by rememberSaveable { mutableStateOf(false) }
+
+    val coroutineScope = rememberCoroutineScope()
+
+    // Animations
+    val baseSize = if (size == FABSize.SMALL) FabSmallSize else FabDefaultSize
+    val width by animateDpAsState(
+        targetValue = if (isExpanded && text != null) FabExpandedWidth else baseSize,
+        animationSpec = tween(100, easing = CubicBezierEasing(0.2f, 0.2f, 0.2f, 0.2f))
+    )
+
+    // Scroll listener
+    LaunchedEffect(text) {
+        if (text != null) {
+            coroutineScope.launch {
+                scrollStateFlow.collectLatest { newScroll ->
+                    isExpanded = newScroll <= lastScrollPosition
+                    delay(100.milliseconds)
+                    lastScrollPosition = newScroll
+                }
+            }
+        }
+    }
+
+    LaunchedEffect(scrollPosition) {
+        scrollStateFlow.value = scrollPosition
+    }
+
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(end = 12.dp, bottom = bottom)
+            .offset(y = -keyboardSize)
+            .background(Color.Transparent),
+        contentAlignment = if (position == FABPosition.END) Alignment.BottomEnd else Alignment.BottomCenter,
+    ) {
+        FloatingActionButton(
+            onClick = onClick,
+            shape = AlertDialogDefaults.shape,
+            containerColor = containerColor,
+            contentColor = contentColor,
+            elevation = elevation,
+            interactionSource = remember { MutableInteractionSource() },
+            modifier = Modifier
+                .sizeIn(minWidth = width)
+                .height(baseSize)
+                .conditional(IsShowBaseLineDebug) {
+                    border(1.dp, Colors.blue_03)
+                }
+        ) {
+            Row(
+                modifier = Modifier.padding(
+                    start = if (isExpanded) FabPaddingHorizontal else 0.dp,
+                    end = if (isExpanded) FabPaddingHorizontal else 0.dp,
+                ),
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = if (isExpanded) Arrangement.Start else Arrangement.Center
+            ) {
+                Icon(
+                    source = icon,
+                    size = if (size == FABSize.SMALL) FabIconSizeSmall else FabIconSizeDefault,
+                    color = iconColor ?: Color.White
+                )
+
+                AnimatedVisibility(
+                    visible = isExpanded,
+                    enter = fadeInExpandAnimation,
+                    exit = fadeOutShrinkAnimation,
+                ) {
+                    Row {
+                        Spacer(Modifier.width(12.dp))
+                        Text(
+                            text = text ?: "",
+                            color = Color.White,
+                            style = Typography.actionDefaultBold
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+private val fadeOutShrinkAnimation = fadeOut(
+    animationSpec = tween(100, easing = LinearEasing)
+) + shrinkHorizontally(
+    animationSpec = tween(100, easing = LinearEasing),
+    shrinkTowards = Alignment.Start
+)
+
+private val fadeInExpandAnimation = fadeIn(
+    animationSpec = tween(100, easing = LinearEasing)
+) + expandHorizontally(
+    animationSpec = tween(100, easing = LinearEasing),
+    expandFrom = Alignment.Start
+)

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

@@ -0,0 +1,455 @@
+package vn.momo.kits.navigation.component
+
+import vn.momo.kits.modifier.InternalApi
+
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.compositionLocalOf
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clipToBounds
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Icon
+import vn.momo.kits.components.Image
+import vn.momo.kits.components.InputSearchProps
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Colors
+import vn.momo.kits.components.PopupNotifyProps
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.layout.DuoMetrics
+import vn.momo.kits.layout.getScreenLayout
+import vn.momo.kits.modifier.activeOpacityClickable
+import vn.momo.kits.modifier.conditional
+import vn.momo.kits.modifier.setAutomationId
+import vn.momo.kits.navigation.LocalHeaderRightWidthPx
+import vn.momo.kits.navigation.LocalNavigator
+import vn.momo.kits.navigation.LocalOptions
+import vn.momo.kits.navigation.LocalScrollState
+import vn.momo.kits.navigation.getInputSearchType
+import vn.momo.kits.navigation.usesDuoGlassHeader
+import vn.momo.kits.utils.horizontalSafeAreaPadding
+
+@InternalApi
+const val HEADER_HEIGHT = 52
+internal enum class InputSearchType { None, Header, Animated }
+enum class TitlePosition { LEFT, CENTER }
+
+private val HEADER_ACTIONS_WIDTH = 172.dp
+
+// Extra width the 48pt back and toolkit take on the iPhone Duo status bar row.
+private val STATUS_BAR_ROW_ACTIONS_EXTRA = 55.dp
+
+@Suppress("FrequentlyChangingValue")
+@Composable
+internal fun headerOpacity(): Float {
+    val options = LocalOptions.current
+    val scrollState = LocalScrollState.current
+    val opacityHeight = when (val header = options.headerType) {
+        is HeaderType.Animated -> with(LocalDensity.current) { header.layoutOffSet.roundToPx() }
+        else -> HEADER_HEIGHT
+    }
+    val opacity by animateFloatAsState(
+        targetValue = when {
+            options.headerType is HeaderType.Transparent -> 0f
+            opacityHeight <= 0 -> if (scrollState.value > 0) 1f else 0f
+            else -> (scrollState.value / opacityHeight.toFloat()).coerceIn(0f, 1f)
+        }
+    )
+    return opacity
+}
+
+// Back button and toolkit share the bar with the title unless the iPhone Duo side bar holds them.
+@Composable
+internal fun headerTitleMaxWidth(): Dp {
+    val layout = getScreenLayout()
+    val clearance = layout.statusBarClearance
+    val clearanceWidth = clearance?.let { it.left + it.right } ?: 0.dp
+    if (layout.sideBar != null) return layout.contentWidth - Spacing.M * 2 - clearanceWidth
+    return layout.width - HEADER_ACTIONS_WIDTH - (if (clearance != null) STATUS_BAR_ROW_ACTIONS_EXTRA else 0.dp) - clearanceWidth
+}
+
+// Scroll distance over which the Duo glass bar fades in.
+private val DUO_GLASS_FADE_DISTANCE = 16.dp
+
+// RN DuoGlassBackground: translucent surface with a hairline once content scrolls under it.
+@Suppress("FrequentlyChangingValue")
+@Composable
+private fun Modifier.duoGlassBar(): Modifier {
+    val scrollState = LocalScrollState.current
+    val fadePx = with(LocalDensity.current) { DUO_GLASS_FADE_DISTANCE.toPx() }
+    val alpha by animateFloatAsState((scrollState.value / fadePx).coerceIn(0f, 1f), label = "DuoGlassAlpha")
+    val colors = AppTheme.current.colors
+    return background(colors.background.surface.copy(alpha = 0.8f * alpha))
+        .drawBehind {
+            val stroke = 0.5.dp.toPx()
+            drawLine(
+                color = colors.border.default.copy(alpha = alpha),
+                start = Offset(0f, size.height - stroke / 2),
+                end = Offset(size.width, size.height - stroke / 2),
+                strokeWidth = stroke,
+            )
+        }
+}
+
+@Composable
+internal fun Header(onBackHandler: (() -> Unit)? = null) {
+    val options = LocalOptions.current
+    val navigator = LocalNavigator.current
+    val headerRightWidthPx = LocalHeaderRightWidthPx.current
+    val inputSearchType = getInputSearchType(options)
+    val layout = getScreenLayout()
+    val useSideBar = layout.sideBar != null
+    // iPhone Duo inner portrait: the row sits on the status bar, between its clusters
+    val clearance = layout.statusBarClearance
+    val statusBarRow = clearance != null && !useSideBar
+    val opacity = headerOpacity()
+
+    val headerColor = getHeaderColor(options.headerType, opacity, options.tintColor, Colors.black_17)
+
+    val animatedAlpha by animateFloatAsState(targetValue = opacity, label = "BackgroundAlpha")
+
+    val background = if (options.headerType is HeaderType.Transparent)
+        options.backgroundColor ?: AppTheme.current.colors.background.surface
+    else
+        AppTheme.current.colors.background.surface
+
+    if (options.headerType == HeaderType.None) return
+
+    val titlePosition = options.titlePosition
+    val titleColor = headerColor.tintIconColor
+        .copy(alpha = if (inputSearchType == InputSearchType.Animated) 1f - animatedAlpha else 1f)
+    // Centered title needs a full-width overlay to stay screen-centered, not boxed between back button and header right.
+    val centerTitle = titlePosition == TitlePosition.CENTER && options.headerTitle is HeaderTitle.Default
+
+    val useDuoGlass = options.usesDuoGlassHeader(layout)
+    val headerImage = AppTheme.current.assets.headerBackground
+        .takeUnless { options.headerType is HeaderType.Transparent || useDuoGlass }
+
+    Box(
+        Modifier.height(layout.headerHeight)
+            .fillMaxWidth()
+            .then(if (useDuoGlass) Modifier.duoGlassBar() else Modifier)
+            .conditional(headerImage.isNullOrEmpty() && !useDuoGlass) {
+                background(background.copy(alpha = animatedAlpha))
+            }
+            .conditional(IsShowBaseLineDebug) {
+                border(1.dp, Colors.blue_03)
+            },
+        contentAlignment = Alignment.BottomCenter
+    ) {
+        if (!headerImage.isNullOrEmpty()) {
+            Box(
+                Modifier
+                    .matchParentSize()
+                    .clipToBounds()
+                    .graphicsLayer { alpha = animatedAlpha }
+                    .background(background)
+            ) {
+                Image(
+                    source = headerImage,
+                    loading = false,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .wrapContentHeight(Alignment.Top, unbounded = true)
+                        .height(HEADER_BACKGROUND_HEIGHT),
+                )
+            }
+        }
+        Row(
+            modifier = Modifier.height(layout.headerBarHeight)
+                .fillMaxWidth()
+                .horizontalSafeAreaPadding()
+                .padding(
+                    start = Spacing.M + (clearance?.left ?: 0.dp),
+                    end = Spacing.M + (clearance?.right ?: 0.dp),
+                ),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            if (!options.hiddenBack && !useSideBar) {
+                if (statusBarRow) {
+                    SideBarButton(
+                        icon = "arrow-back",
+                        headerColor = headerColor,
+                        automationId = "btn_navigation_back",
+                        onClick = { navigator.onBackSafe { } },
+                    )
+                } else {
+                    BackButton(
+                        borderColor = headerColor.borderColor,
+                        backgroundButton = headerColor.backgroundButton,
+                        tintIconColor = headerColor.tintIconColor,
+                        onBackHandler = {
+                            navigator.onBackSafe {  }
+                        }
+                    )
+                }
+                Spacer(Modifier.width(Spacing.S))
+            }
+
+            if (centerTitle) {
+                Spacer(Modifier.weight(1f))
+            } else {
+                HeaderContent(
+                    headerTitle = options.headerTitle,
+                    tintIconColor = titleColor,
+                    titlePosition = titlePosition,
+                    modifier = Modifier.weight(1f)
+                )
+            }
+            Box(Modifier.onGloballyPositioned {
+                if(headerRightWidthPx.intValue != it.size.width) headerRightWidthPx.intValue = it.size.width
+            }){
+                val headerRight = options.headerRight
+                when {
+                    useSideBar && headerRight is HeaderRight.Toolkit -> Unit
+                    statusBarRow && headerRight is HeaderRight.Toolkit -> Toolkit(
+                        headerRight = headerRight,
+                        tintColor = options.tintColor,
+                        headerColor = headerColor,
+                        layout = ToolkitLayout.SideBarRow,
+                    )
+                    else -> CompositionLocalProvider(LocalHeaderColor provides headerColor) {
+                        HeaderRight(headerRight, options.tintColor, headerColor)
+                    }
+                }
+            }
+        }
+        if (centerTitle) {
+            // on the status bar row the clusters are lopsided, so both sides keep the wider one's room
+            val centerInset = if (clearance != null) {
+                val back = if (options.hiddenBack || useSideBar) 0.dp else DuoMetrics.controlSize + Spacing.S
+                val right = with(LocalDensity.current) { headerRightWidthPx.intValue.toDp() }
+                maxOf(clearance.left + back, clearance.right + right) + Spacing.S
+            } else {
+                0.dp
+            }
+            Box(
+                modifier = Modifier.height(layout.headerBarHeight)
+                    .fillMaxWidth()
+                    .horizontalSafeAreaPadding()
+                    .padding(horizontal = Spacing.M + centerInset),
+                contentAlignment = Alignment.Center
+            ) {
+                HeaderContent(
+                    headerTitle = options.headerTitle,
+                    tintIconColor = titleColor,
+                    titlePosition = titlePosition,
+                    centerWidthFraction = if (clearance != null) 1f else 0.5f,
+                    modifier = Modifier.fillMaxWidth()
+                )
+            }
+        }
+        VerticalShadow(opacity)
+    }
+}
+
+@Composable
+private fun BackButton(borderColor: Color, backgroundButton: Color, tintIconColor: Color, onBackHandler: () -> Unit){
+    Box(
+        modifier = Modifier
+            .size(28.dp)
+            .background(backgroundButton, RoundedCornerShape(100))
+            .border(width = 0.2.dp, color = borderColor, shape = RoundedCornerShape(100))
+            .activeOpacityClickable(onClick = onBackHandler)
+            .padding(Spacing.XS)
+            .setAutomationId("btn_navigation_back"),
+        contentAlignment = Alignment.Center
+    ) {
+        Icon(
+            source = "arrow-back",
+            color = tintIconColor,
+            size = 20.dp,
+        )
+    }
+}
+
+@Composable
+internal fun HeaderContent(
+    headerTitle: HeaderTitle,
+    tintIconColor: Color,
+    titlePosition: TitlePosition = TitlePosition.LEFT,
+    centerWidthFraction: Float = 0.5f,
+    modifier: Modifier = Modifier,
+){
+    Box(
+        modifier = modifier,
+        contentAlignment = if (titlePosition == TitlePosition.CENTER) Alignment.Center else Alignment.CenterStart
+    ) {
+        when (headerTitle){
+            is HeaderTitle.Default -> {
+                HeaderTitle(
+                    title = headerTitle.title,
+                    color = tintIconColor,
+                    modifier = Modifier.fillMaxWidth(fraction = if (titlePosition == TitlePosition.CENTER) centerWidthFraction else 1f),
+                    textAlign = if (titlePosition == TitlePosition.CENTER) TextAlign.Center else TextAlign.Start
+                )
+            }
+            is HeaderTitle.Journey -> {
+                HeaderJourney(
+                    data = headerTitle,
+                    tintIconColor = tintIconColor
+                )
+            }
+            is HeaderTitle.Location -> {
+                HeaderLocation(
+                    data = headerTitle,
+                    tintIconColor = tintIconColor
+                )
+            }
+            is HeaderTitle.User -> {
+                HeaderUser(
+                    data = headerTitle
+                )
+            }
+        }
+    }
+}
+
+@Composable
+internal fun VerticalShadow(opacity: Float){
+    if(opacity == 1f){
+        Box(modifier = Modifier
+            .fillMaxWidth()
+            .height(6.dp)
+            .offset(x = 0.dp, y = 6.dp)
+            .background(
+                brush = Brush.verticalGradient(
+                    colors = listOf(Color.Black.copy(alpha = 0.05f), Color.Transparent)
+                )
+            )
+        )
+    }
+}
+
+sealed class HeaderTitle {
+    class Default(val title: String) : HeaderTitle()
+
+    class User(
+        val title: String,
+        val subTitle: String? = null,
+        val image: List<String>? = null,
+        val dotColor: Color? = null,
+        val tintColor: Color? = null,
+        val onPress: (() -> Unit)? = null,
+        val icons: List<String> = emptyList(),
+        val isLoading: Boolean = false
+    ) : HeaderTitle()
+
+    class Location(
+        val description: String? = null,
+        val location: String,
+        val tintColor: String? = null,
+        val onPress: (() -> Unit)? = null,
+        val isLoading: Boolean = false
+    ) : HeaderTitle()
+
+    class Journey(
+        val start: String,
+        val end: String? = null,
+        val description: String? = null,
+        val icon: String,
+        val iconColor: String? = null,
+        val tintColor: String? = null,
+        val onPress: (() -> Unit)? = null,
+        val isLoading: Boolean = false
+    ) : HeaderTitle()
+}
+
+sealed class HeaderType {
+    interface DefaultOrExtended {
+        val useAnimated: Boolean
+        val inputSearchProps: InputSearchProps?
+    }
+
+    data class Default(
+        override val useAnimated: Boolean = false,
+        override val inputSearchProps: InputSearchProps? = null
+    ) : HeaderType(), DefaultOrExtended
+
+    data class Extended(
+        override val useAnimated: Boolean = false,
+        override val inputSearchProps: InputSearchProps? = null
+    ) : HeaderType(), DefaultOrExtended
+
+    data object None : HeaderType()
+
+    data class Animated(
+        val aspectRatio: AnimatedHeaderRatio = AnimatedHeaderRatio.RATIO_16_9,
+        val isSurface: Boolean = true,
+        val layoutOffSet: Dp = 56.dp,
+        val height: Dp? = null,
+        val composable: @Composable (scrollState: Int) -> Unit = {}
+    ) : HeaderType()
+
+    data class Transparent(
+        val isFullScreenContent: Boolean = false
+    ) : HeaderType()
+}
+
+data class HeaderBackProps(
+    val preventBack: PopupNotifyProps? = null,
+)
+
+@InternalApi
+data class HeaderColor(val tintIconColor: Color, val backgroundButton: Color, val borderColor: Color)
+
+// The enclosing header's colors, so a custom header right follows the bar (SwiftUI `\.headerColor`).
+internal val LocalHeaderColor = compositionLocalOf<HeaderColor?> { null }
+
+internal fun getHeaderColor(headerType: HeaderType, opacity: Float, tintColor: Color?, defaultColor: Color): HeaderColor{
+    return if(headerType is HeaderType.Animated) {
+        if (opacity == 1f || !headerType.isSurface)
+            HeaderColor(
+                tintIconColor = Colors.black_17,
+                backgroundButton = Colors.black_01.copy(alpha = 0.6f),
+                borderColor = Colors.black_20.copy(alpha = 0.2f)
+            )
+        else
+            HeaderColor(
+                tintIconColor = Colors.black_01,
+                backgroundButton = Colors.black_20.copy(alpha = 0.6f),
+                borderColor = Color.Transparent
+            )
+    }
+    else {
+        if (tintColor == Colors.black_01)
+            HeaderColor(
+                tintIconColor = tintColor,
+                backgroundButton = Colors.black_20.copy(alpha = 0.6f),
+                borderColor = Colors.black_01.copy(alpha = 0.2f)
+            )
+        else
+            HeaderColor(
+                tintIconColor = tintColor ?: defaultColor,
+                backgroundButton = Colors.black_01.copy(alpha = 0.6f),
+                borderColor = Colors.black_20.copy(alpha = 0.2f)
+            )
+    }
+}