@momo-kits/native-kits 0.152.4-beta.3 → 0.152.5

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

@@ -1,251 +0,0 @@
-package vn.momo.kits.navigation.component
-
-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.RowScope
-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.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.const.Spacing
-import vn.momo.kits.modifier.activeOpacityClickable
-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
-
-const val HEADER_HEIGHT = 52
-enum class InputSearchType { None, Header, Animated }
-
-@Composable
-fun Header() {
-    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 = ((scrollState.value * 1f / opacityHeight * 1f)).coerceIn(0f, 1f),
-    )
-
-    val headerColor = getHeaderColor(options.headerType, opacity, options.tintColor, Colors.black_17)
-
-    val animatedAlpha by animateFloatAsState(targetValue = opacity, label = "BackgroundAlpha")
-
-    if (options.headerType == HeaderType.None) return
-    Box(
-        Modifier.height(AppStatusBar.current + HEADER_HEIGHT.dp)
-            .fillMaxWidth()
-            .background(AppTheme.current.colors.background.surface.copy(alpha = animatedAlpha)),
-        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 = {
-                        options.onBackHandler?.invoke() ?: navigator.pop()
-                    }
-                )
-            }
-
-            HeaderContent(
-                options.headerTitle,
-                headerColor.tintIconColor
-                    .copy(alpha = if (inputSearchType == InputSearchType.Animated) 1f - animatedAlpha else 1f)
-            )
-            Box(Modifier.onGloballyPositioned {
-                if(headerRightWidthPx.intValue != it.size.width) headerRightWidthPx.intValue = it.size.width
-            }){
-                HeaderRight(options.headerRight, options.tintColor, headerColor)
-            }
-        }
-        VerticalShadow(opacity)
-    }
-}
-
-@Composable
-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),
-        contentAlignment = Alignment.Center
-    ) {
-        Icon(
-            source = "arrow-back",
-            color = tintIconColor,
-            size = 20.dp,
-        )
-    }
-}
-
-@Composable
-fun RowScope.HeaderContent(headerTitle: HeaderTitle, tintIconColor: Color){
-    Box(
-        Modifier.weight(1f).padding(horizontal = Spacing.M)
-    ) {
-        when (headerTitle){
-            is HeaderTitle.Default -> {
-                HeaderTitle(
-                    title = headerTitle.title,
-                    color = tintIconColor
-                )
-            }
-            is HeaderTitle.Journey -> {}
-            is HeaderTitle.Location -> {}
-            is HeaderTitle.User -> {
-                HeaderUser(
-                    data = headerTitle
-                )
-            }
-        }
-    }
-}
-
-@Composable
-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 HeaderColor(val tintIconColor: Color, val backgroundButton: Color, val borderColor: Color)
-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

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

@@ -1,306 +0,0 @@
-package vn.momo.kits.navigation.component
-
-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.ApplicationContext
-import vn.momo.kits.application.MiniAppContext
-import vn.momo.kits.application.Spacing
-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.modifier.activeOpacityClickable
-import vn.momo.kits.navigation.LocalMaxApi
-
-@Composable
-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
-fun Toolkit(
-    headerRight: HeaderRight.Toolkit,
-    tintColor: Color? = null,
-    headerColor: HeaderColor
-) {
-    val api = LocalMaxApi.current
-    val context = ApplicationContext.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
-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
-        )
-    }
-}
-
-data class NavigationButtonConfig(
-    val icon: String,
-    val onPress: () -> Unit
-)

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

@@ -1,31 +0,0 @@
-package vn.momo.kits.navigation.component
-
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.unit.sp
-import androidx.compose.ui.zIndex
-import vn.momo.kits.components.Text
-import vn.momo.kits.const.Typography
-
-@Composable
-fun HeaderTitle(
-    title: String = "",
-    color: Color? = null,
-) {
-    Text(
-        modifier = Modifier.fillMaxWidth().zIndex(1f),
-        text = title,
-        textAlign = TextAlign.Start,
-        style = Typography.actionSBold.copy(
-            fontSize = 15.sp,
-            lineHeight = 22.sp,
-        ),
-        color = color,
-        maxLines = 1,
-        overflow = TextOverflow.Ellipsis
-    )
-}