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

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

@@ -1,169 +0,0 @@
-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

@@ -1,455 +0,0 @@
-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)
-            )
-    }
-}