@momo-kits/native-kits 0.163.1-beta.3 → 0.163.1-beta.7-debug

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

@@ -0,0 +1,320 @@
+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.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+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.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.InputSearchProps
+import vn.momo.kits.const.AppStatusBar
+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.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
+
+@InternalApi
+const val HEADER_HEIGHT = 52
+internal enum class InputSearchType { None, Header, Animated }
+enum class TitlePosition { LEFT, CENTER }
+
+@Suppress("FrequentlyChangingValue")
+@Composable
+internal fun Header(onBackHandler: (() -> Unit)? = null) {
+    val options = LocalOptions.current
+    val navigator = LocalNavigator.current
+    val scrollState = LocalScrollState.current
+    val headerRightWidthPx = LocalHeaderRightWidthPx.current
+    val inputSearchType = getInputSearchType(options)
+
+    val opacityHeight = when (val header = options.headerType) {
+        is HeaderType.Animated -> with(LocalDensity.current) { header.layoutOffSet.roundToPx() }
+        else -> HEADER_HEIGHT
+    }
+    val opacity by animateFloatAsState(
+        targetValue = if (options.headerType is HeaderType.Transparent) {
+            0f
+        } else {
+            (scrollState.value / opacityHeight.toFloat())
+                .coerceIn(0f, 1f)
+        }
+    )
+
+    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
+
+    Box(
+        Modifier.height(AppStatusBar.current + HEADER_HEIGHT.dp)
+            .fillMaxWidth()
+            .background(background.copy(alpha = animatedAlpha))
+            .conditional(IsShowBaseLineDebug) {
+                border(1.dp, Colors.blue_03)
+            },
+        contentAlignment = Alignment.BottomCenter
+    ) {
+        Row(
+            modifier = Modifier.height(HEADER_HEIGHT.dp)
+                .fillMaxWidth()
+                .padding(horizontal = Spacing.M),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            if(!options.hiddenBack) {
+                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
+            }){
+                HeaderRight(options.headerRight, options.tintColor, headerColor)
+            }
+        }
+        if (centerTitle) {
+            Box(
+                modifier = Modifier.height(HEADER_HEIGHT.dp)
+                    .fillMaxWidth()
+                    .padding(horizontal = Spacing.M),
+                contentAlignment = Alignment.Center
+            ) {
+                HeaderContent(
+                    headerTitle = options.headerTitle,
+                    tintIconColor = titleColor,
+                    titlePosition = titlePosition,
+                    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,
+    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) 0.5f else 1f),
+                    textAlign = if (titlePosition == TitlePosition.CENTER) TextAlign.Center else TextAlign.Start
+                )
+            }
+            is HeaderTitle.Journey -> {}
+            is HeaderTitle.Location -> {}
+            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 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)
+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)
+            )
+    }
+}

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

@@ -0,0 +1,81 @@
+package vn.momo.kits.navigation.component
+
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Image
+import vn.momo.kits.const.AppStatusBar
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.modifier.conditional
+import vn.momo.kits.navigation.LocalOptions
+import vn.momo.kits.navigation.LocalScrollState
+
+enum class AnimatedHeaderRatio(val value: Float){
+    RATIO_16_9(16f / 9f),
+    RATIO_1_1(1f),
+    RATIO_3_2(3f / 2f)
+}
+
+@Suppress("FrequentlyChangingValue")
+@Composable
+internal fun HeaderBackground() {
+    val density = LocalDensity.current
+    val theme = AppTheme.current
+    val options = LocalOptions.current
+    val scrollState = LocalScrollState.current
+    val backgroundColor = options.backgroundColor ?: AppTheme.current.colors.background.default
+
+    val minHeight = AppStatusBar.current + HEADER_HEIGHT.dp
+    val maxHeight = 154.dp
+    val opacity by animateFloatAsState(
+        targetValue = (1 - (scrollState.value * 1f / HEADER_HEIGHT * 1f)).coerceIn(0f, 1f),
+    )
+
+    val color = if (opacity == 0f) backgroundColor else Color(0xFFFDCADE)
+    val height = when (options.headerType) {
+        is HeaderType.Default -> minHeight
+        is HeaderType.Extended -> {
+            if (AppTheme.current.isHeaderImage()){
+                if (opacity == 0f) minHeight else maxHeight
+            } else {
+                maxHeight
+            }
+        }
+        else -> 0.dp
+    }
+
+    Box(Modifier.fillMaxWidth().height(height).background(backgroundColor)) {
+        Box(Modifier
+            .height(maxHeight)
+            .fillMaxWidth()
+            .conditional(!theme.isHeaderImage()) {
+                background(Brush.linearGradient(
+                    colors = listOf(
+                        color,
+                        backgroundColor
+                    ),
+                    start = Offset(0f, 0f),
+                    end = Offset(0f, with(density) { maxHeight.toPx() })
+                    )
+                )
+            }
+        ){
+            if (!theme.isHeaderImage()) return@Box
+            Image(
+                source = theme.assets.headerBackground!!,
+                modifier = Modifier.fillMaxSize(),
+            )
+        }
+    }
+}

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

@@ -0,0 +1,309 @@
+package vn.momo.kits.navigation.component
+
+import vn.momo.kits.modifier.InternalApi
+
+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.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.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.application.LocalContext
+import vn.momo.kits.application.MiniAppContext
+import vn.momo.kits.components.BadgeDot
+import vn.momo.kits.components.DotSize
+import vn.momo.kits.components.Icon
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.modifier.activeOpacityClickable
+import vn.momo.kits.navigation.LocalMaxApi
+
+@Composable
+@InternalApi
+fun HeaderRight(
+    headerRight: HeaderRight,
+    tintColor: Color? = null,
+    headerColor: HeaderColor
+) {
+    when (headerRight) {
+        is HeaderRight.None -> {}
+        is HeaderRight.Custom -> {
+            headerRight.content()
+        }
+        is HeaderRight.OnBoarding -> {}
+        is HeaderRight.Toolkit -> {
+            Toolkit(
+                headerRight = headerRight,
+                tintColor = tintColor,
+                headerColor = headerColor
+            )
+        }
+    }
+}
+
+@Composable
+internal fun Toolkit(
+    headerRight: HeaderRight.Toolkit,
+    tintColor: Color? = null,
+    headerColor: HeaderColor
+) {
+    val api = LocalMaxApi.current
+    val context = LocalContext.current
+
+    var isFavorite by remember { mutableStateOf(false) }
+    val isLoading by remember { mutableStateOf(false) }
+
+    LaunchedEffect(context?.appCode) {
+        api?.isFavoriteApp(mapOf("code" to context?.appCode)) { callback ->
+            val response = callback?.get("response") as? Boolean
+            isFavorite = response == true
+        }
+    }
+
+    fun onPressShortcut() {
+        api?.onToolAction(mapOf("item" to mapOf("key" to "onFavorite"), "context" to MiniAppContext.toMap(context))) { callback ->
+            val response = callback?.get("response") as? Map<*, *>?
+            val success = response?.get("success") as? Boolean
+            if (success == true){
+                isFavorite = !isFavorite
+            }
+        }
+    }
+
+    fun onPressMore() {
+        api?.showTools(
+            mapOf(
+                "useSystemTools" to headerRight.useSystemTools,
+                "tools" to headerRight.tools.map { it.toMap() },
+                "context" to MiniAppContext.toMap(context)
+            )
+        ) { callback ->
+            val response = callback?.get("response") as? String
+            if (response != null) {
+                headerRight.toolCallback?.invoke(response)
+            }
+        }
+    }
+
+    val navButtonConfig = getNavigationButtonConfig(
+        headerRight,
+        ::onPressShortcut,
+        ::onPressMore
+    )
+
+    val showBadge = headerRight.tools.any { group ->
+        group.items.any { it.showBadge }
+    }
+
+    val isShowShortcut by remember(headerRight.useShortcut, headerRight.useMore, context) {
+        derivedStateOf {
+            (headerRight.useShortcut == true) &&
+                    !(headerRight.useMore == true && context == null)
+        }
+    }
+
+    val icon by remember(navButtonConfig.icon, isFavorite) {
+        derivedStateOf {
+            navButtonConfig.icon.takeUnless { it == "star" }
+                ?: if (isFavorite) "pin_star_checked" else "pin_star"
+        }
+    }
+
+    Row(
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        if (isShowShortcut) {
+            NavigationButton(
+                disabled = isLoading,
+                icon = icon,
+                showBadge = showBadge,
+                onClick = navButtonConfig.onPress,
+                headerColor = headerColor
+            )
+        }
+
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.Center,
+            modifier = Modifier
+                .padding(start = Spacing.S)
+                .border(0.2.dp, headerColor.borderColor, shape = RoundedCornerShape(14.dp))
+                .height(28.dp)
+                .clip(shape = RoundedCornerShape(14.dp))
+                .background(headerColor.backgroundButton)
+        ) {
+            if (context != null) {
+                Icon(
+                    source = "help_center",
+                    size = 20.dp,
+                    color = headerColor.tintIconColor,
+                    modifier = Modifier.padding(4.dp).activeOpacityClickable {
+                        api?.showHelpCenter(
+                            mapOf(
+                                "appId" to context.appId,
+                                "code" to context.appCode,
+                                "name" to context.appName,
+                                "icon" to context.appIcon,
+                                "description" to context.description
+                            )
+                        ) {}
+                    }
+                )
+                Box(
+                    modifier = Modifier
+                        .width(0.5.dp)
+                        .height(12.dp)
+                        .background(tintColor ?: Colors.black_20)
+                )
+            }
+            Icon(
+                source = "16_basic_home",
+                size = 20.dp,
+                color = headerColor.tintIconColor,
+                modifier = Modifier.padding(4.dp).activeOpacityClickable {
+                    api?.dismissAll {  }
+                }
+            )
+        }
+    }
+}
+
+
+
+@Composable
+internal fun NavigationButton(
+    disabled: Boolean,
+    icon: String,
+    showBadge: Boolean? = false,
+    onClick: () -> Unit,
+    headerColor: HeaderColor
+) {
+    Box(
+        modifier = Modifier
+            .size(28.dp)
+            .activeOpacityClickable(enabled = !disabled, onClick = onClick)
+    ) {
+        Box(
+            modifier = Modifier
+                .matchParentSize()
+                .clip(CircleShape)
+                .background(headerColor.backgroundButton)
+                .border(0.2.dp, headerColor.borderColor, CircleShape)
+        )
+        Box(
+            modifier = Modifier.matchParentSize(),
+            contentAlignment = Alignment.Center
+        ) {
+            Icon(
+                source = icon,
+                size = 20.dp,
+                color = headerColor.tintIconColor
+            )
+        }
+
+        if (showBadge == true) {
+            BadgeDot(
+                size = DotSize.Small,
+                modifier = Modifier
+                    .align(Alignment.TopEnd)
+                    .offset(x = -Spacing.XXS, y = -Spacing.XXS)
+            )
+        }
+    }
+}
+
+private fun getNavigationButtonConfig(
+    headerRight: HeaderRight.Toolkit,
+    onPressShortcut: () -> Unit,
+    onPressMore: () -> Unit
+): NavigationButtonConfig {
+    val totalTools = headerRight.tools.sumOf { it.items.size }
+    val config = NavigationButtonConfig(icon = "star", onPress = onPressShortcut)
+    return if (totalTools > 1 || headerRight.useMore == true) {
+        NavigationButtonConfig(
+            icon = "navigation_more_icon",
+            onPress = onPressMore
+        )
+    } else if (totalTools == 1 && headerRight.tools.isNotEmpty()) {
+        val singleTool = headerRight.tools.first().items.firstOrNull()
+        return if (singleTool != null){
+            NavigationButtonConfig(
+                icon = singleTool.icon,
+                onPress = {
+                    headerRight.toolCallback?.invoke(singleTool.key)
+                }
+            )
+        } else {
+            config
+        }
+    } else {
+        config
+    }
+}
+
+sealed interface HeaderRight {
+    data object None : HeaderRight
+    data class Custom(
+        val content: @Composable () -> Unit
+    ) : HeaderRight
+    data object OnBoarding : HeaderRight
+    data class Toolkit(
+        val useShortcut: Boolean = false,
+        val useMore: Boolean = false,
+        val useSystemTools: Boolean = true,
+        val tools: List<ToolGroup> = emptyList(),
+        val toolCallback: ((String) -> Unit)? = { _ -> }
+    ) : HeaderRight
+}
+
+data class ToolGroup(
+    val title: Map<String, String> = emptyMap(),
+    val items: List<Tool>
+) {
+    fun toMap(): Map<String, Any> {
+        return mapOf(
+            "title" to title,
+            "items" to items.map { it.toMap() }
+        )
+    }
+}
+data class Tool(
+    val key: String,
+    val icon: String,
+    val showBadge: Boolean = false,
+    val name: Map<String, String> = emptyMap(),
+    val showRightIcon: Boolean = true,
+) {
+    fun toMap(): Map<String, Any> {
+        return mapOf(
+            "key" to key,
+            "icon" to icon,
+            "showBadge" to showBadge,
+            "name" to name,
+            "showRightIcon" to showRightIcon
+        )
+    }
+}
+
+private data class NavigationButtonConfig(
+    val icon: String,
+    val onPress: () -> Unit
+)