@momo-kits/native-kits 0.113.1-beta.2 → 0.113.1-beta.4

package/compose/src/commonMain/kotlin/vn/momo/kits/application/Components.kt

@@ -12,6 +12,7 @@ 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
@@ -35,6 +36,7 @@ import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTag
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
 import kotlinx.coroutines.flow.distinctUntilChanged
@@ -48,9 +50,11 @@ import vn.momo.kits.components.Text
 import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Radius
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
 import vn.momo.kits.modifier.setAutomationId
+import vn.momo.kits.platform.getScreenDimensions
 import vn.momo.kits.platform.getStatusBarHeight
 import vn.momo.kits.utils.bottomBorder
 
@@ -58,6 +62,8 @@ enum class TitlePosition {
     LEFT, CENTER,
 }
 
+private const val SCREEN_PADDING = 12
+private const val BACK_WIDTH = 28
 
 data class AnimatedHeader(
     val type: HeaderType = HeaderType.DEFAULT,
@@ -66,20 +72,55 @@ data class AnimatedHeader(
 
 @Composable
 fun HeaderBackground(
+    isBack: Boolean = true,
     headerType: HeaderType = HeaderType.DEFAULT,
-    scrollState: Int
+    scrollState: Int,
+    inputSearchProps: InputSearchProps? = null,
+    headerRightWidth: Dp = 0.dp,
+    useAnimationSearch: Boolean = false
 ) {
     val statusBarHeight = AppStatusBar.current ?: getStatusBarHeight()
+    val screenWidth = getScreenDimensions().width
+    val leftPosition = if (isBack) (BACK_WIDTH + 20).dp else 20.dp
+    val searchWidth = screenWidth - (SCREEN_PADDING * 2)
+
     val opacityAni by animateFloatAsState(
-        targetValue = (1 - (scrollState / 200f)).coerceIn(0f, 1f),
+        targetValue = (1 - (scrollState / 52f)).coerceIn(0f, 1f),
     )
 
-    val backgroundColor = if (scrollState == 0) {
-        Color.Transparent
-    } else {
-        AppTheme.current.colors.background.surface
-    }
+    val backgroundColor by animateColorAsState(
+        targetValue = animateColor(
+            Color.Transparent,
+            AppTheme.current.colors.background.surface,
+            opacityAni
+        ),
+    )
+
+    val backgroundSearch by animateColorAsState(
+        targetValue = animateColor(
+            AppTheme.current.colors.background.default,
+            Colors.black_01,
+            opacityAni
+        ),
+    )
+
+    val animatedTranslateX by animateFloatAsState(
+        targetValue = (scrollState / 52f).coerceIn(0f, 1f) * (leftPosition.value - 12) + 12,
+    )
 
+    val animatedWidth by animateFloatAsState(
+        targetValue = (scrollState / 52f).coerceIn(
+            0f,
+            1f
+        ) * ((searchWidth - leftPosition.value - headerRightWidth.value + 12) - searchWidth) + searchWidth,
+    )
+
+    val animatedHeight by animateFloatAsState(
+        targetValue = (1 - (scrollState / 52f).coerceIn(
+            0f,
+            1f
+        )) * (statusBarHeight.value + 94 - (statusBarHeight.value + 52)) + (statusBarHeight.value + 52),
+    )
 
     when (headerType) {
         HeaderType.DEFAULT -> {
@@ -119,38 +160,71 @@ fun HeaderBackground(
                     )
                 }
             }
-
         }
 
         HeaderType.EXTENDED -> {
-
             Box(
-                modifier = Modifier.fillMaxWidth().height(154.dp)
-                    .alpha(opacityAni)
-                    .background(
-                        Brush.linearGradient(
-                            colors = listOf(
-                                Color(0xFFFDCADE),
-                                Color(0x00FDCADE)
-                            ),
-                            start = Offset(0f, 0f),
-                            end = Offset(0f, with(LocalDensity.current) { 154.dp.toPx() })
-                        )
-                    )
+                modifier = Modifier.fillMaxWidth().height(animatedHeight.dp)
             ) {
-                if (AppTheme.current.assets.headerBackground != null) {
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(154.dp)
+                        .alpha(opacityAni)
+                        .background(
+                            Brush.linearGradient(
+                                colors = listOf(
+                                    Color(0xFFFDCADE),
+                                    Color(0x00FDCADE)
+                                ),
+                                start = Offset(0f, 0f),
+                                end = Offset(0f, with(LocalDensity.current) { 154.dp.toPx() })
+                            )
+                        )
+                ) {
+                    if (AppTheme.current.assets.headerBackground != null) {
+                        Box(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .background(backgroundColor)
+                        ) {
+                            Image(
+                                loading = false,
+                                source = AppTheme.current.assets.headerBackground!!,
+                                modifier = Modifier.fillMaxWidth().height(154.dp),
+                                options = Options(
+                                    contentScale = ContentScale.FillWidth
+                                )
+                            )
+                        }
+                    }
+                }
+
+                if (inputSearchProps != null && useAnimationSearch) {
                     Box(
-                        modifier = Modifier.fillMaxWidth()
-                            .background(backgroundColor)
+                        modifier = Modifier
+                            .height(52.dp)
+                            .offset(
+                                x = animatedTranslateX.dp
+                            )
+                            .padding(vertical = Spacing.S)
+                            .align(Alignment.BottomStart)
                     ) {
-                        Image(
-                            loading = false,
-                            source = AppTheme.current.assets.headerBackground!!,
-                            modifier = Modifier.fillMaxWidth().height(154.dp),
-                            options = Options(
-                                contentScale = ContentScale.FillWidth
+                        Box(
+                            modifier = Modifier
+                                .width(animatedWidth.dp)
+                                .background(
+                                    color = backgroundSearch,
+                                    shape = RoundedCornerShape(Radius.XL)
+                                )
+                        ) {
+                            InputSearch(
+                                inputSearchProps = inputSearchProps.copy(
+                                    showButtonText = false,
+                                    backgroundColor = Color.Transparent
+                                )
                             )
-                        )
+                        }
                     }
                 }
             }
@@ -160,7 +234,6 @@ fun HeaderBackground(
             Box(modifier = Modifier.fillMaxWidth())
         }
     }
-
 }
 
 @Composable
@@ -173,11 +246,13 @@ fun Header(
     opacity: Float? = null,
     animatedHeader: AnimatedHeader? = null,
     scrollState: Int = 0,
-    inputSearchProps: InputSearchProps?
+    inputSearchProps: InputSearchProps? = null,
+    useAnimationSearch: Boolean = false
 ) {
     val statusBarHeight = AppStatusBar.current ?: getStatusBarHeight()
     val tintIconColor = AppTheme.current.colors.text.default
     val backgroundButton = Colors.black_01.copy(alpha = 0.6f)
+    val miniAppContext = ApplicationContext.current
 
     var colorFraction by remember { mutableStateOf(0f) }
 
@@ -188,14 +263,6 @@ fun Header(
             .collect { fraction -> colorFraction = fraction }
     }
 
-    val backgroundSearch by animateColorAsState(
-        targetValue = animateColor(
-            Colors.black_01,
-            AppTheme.current.colors.background.default,
-            colorFraction
-        )
-    )
-
     if (headerType != HeaderType.NONE) {
         BoxWithConstraints(
             Modifier.height(statusBarHeight + 52.dp)
@@ -242,10 +309,12 @@ fun Header(
                     }
                 }
 
-                Box(Modifier.graphicsLayer {
-                    alpha = if (animatedHeader !== null) opacity ?: 1f else 1f
-                }) {
-                    headerRight?.invoke()
+                if (inputSearchProps == null && miniAppContext != null) {
+                    Box(Modifier.graphicsLayer {
+                        alpha = if (animatedHeader !== null) opacity ?: 1f else 1f
+                    }) {
+                        headerRight?.invoke()
+                    }
                 }
             }
 
@@ -258,13 +327,14 @@ fun Header(
             ) {
                 if (goBack != null && titlePosition == TitlePosition.LEFT) {
                     Spacer(Modifier.width(40.dp))
-                }
-                if (inputSearchProps != null) {
-                    InputSearch(inputSearchProps = inputSearchProps.copy(backgroundColor = backgroundSearch))
                 } else {
                     Box(
                         Modifier.weight(1f).graphicsLayer {
-                            alpha = if (animatedHeader !== null) opacity ?: 1f else 1f
+                            alpha = if (useAnimationSearch && inputSearchProps != null) {
+                                1f - (opacity ?: 1f)
+                            } else {
+                                if (animatedHeader !== null) opacity ?: 1f else 1f
+                            }
                         },
                         contentAlignment = if (titlePosition == TitlePosition.LEFT) Alignment.TopStart else Alignment.Center
                     ) {
@@ -306,4 +376,4 @@ fun animateColor(start: Color, stop: Color, fraction: Float): Color {
         blue = start.blue + fraction * (stop.blue - start.blue),
         alpha = start.alpha + fraction * (stop.alpha - start.alpha)
     )
-}
+}

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

@@ -0,0 +1,261 @@
+package vn.momo.kits.application
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+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.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.components.BadgeDot
+import vn.momo.kits.components.DotSize
+import vn.momo.kits.components.Icon
+import vn.momo.kits.const.Colors
+import kotlinx.serialization.json.Json
+import kotlinx.serialization.json.jsonObject
+import kotlinx.serialization.json.jsonPrimitive
+
+data class HeaderRightData(
+    val useShortcut: Boolean = false,
+    val useMore: Boolean = false,
+    val tools: List<ToolGroup> = emptyList(),
+    val toolCallback: ((String) -> Unit)? = { _ -> }
+)
+
+data class Tool(
+    val key: String,
+    val icon: String,
+    val showBadge: Boolean = false,
+    val name: Map<String, String> = emptyMap()
+) {
+    fun toMap(): Map<String, Any> {
+        return mapOf(
+            "key" to key,
+            "icon" to icon,
+            "showBadge" to showBadge,
+            "name" to name
+        )
+    }
+}
+
+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 NavigationButtonConfig(
+    val icon: String,
+    val onPress: () -> Unit
+)
+
+object Spacing {
+    val M = 16.dp
+    val S = 8.dp
+    val XXS = 2.dp
+}
+
+@Composable
+fun HeaderRight(
+    headerRight: HeaderRightData? = null,
+) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        ToolkitHeaderRight(headerRight = headerRight)
+    }
+}
+
+@Composable
+fun ToolkitHeaderRight(headerRight: HeaderRightData? = null) {
+    var isFavorite by remember { mutableStateOf(false) }
+    val isLoading by remember { mutableStateOf(false) }
+    val api = PlatformApi.current as? ComposeApi
+    val context = ApplicationContext.current
+
+    fun onPressShortcut() {
+        api?.request("onToolAction", mapOf("item" to mapOf("key" to "onFavorite"))) {
+            isFavorite = !isFavorite
+        }
+    }
+
+    fun onPressHelpCenter() {
+        val paramMap = mapOf(
+            "appId" to context?.appId,
+            "code" to context?.appCode,
+            "name" to context?.appName,
+            "icon" to context?.appIcon,
+            "description" to context?.description
+        )
+        api?.request("showHelpCenter", paramMap) {
+
+        }
+    }
+
+    fun onPressClose() {
+        api?.request("dismiss", "", {_ -> })
+    }
+
+    fun onPressMore() {
+        api?.request("showTools",
+            mapOf(
+                "tools" to headerRight?.tools?.map { it.toMap() },
+                "context" to mapOf(
+                    "appId" to context?.appId,
+                    "code" to context?.appCode,
+                    "name" to context?.appName,
+                    "icon" to context?.appIcon,
+                    "description" to context?.description
+                )
+            )
+        ) { response ->
+            try {
+                val json = Json.parseToJsonElement(response).jsonObject
+                val toolResponse = json["response"]?.jsonPrimitive?.content
+                if (toolResponse != null) {
+                    headerRight?.toolCallback?.invoke(toolResponse)
+                }
+            } catch (e: Exception) {
+                println("Error parsing response: $e")
+            }
+        }
+    }
+
+    fun getNavigationButtonConfig(
+        tools: List<ToolGroup>? = emptyList(),
+        useMore: Boolean? = false,
+        isFavorite: Boolean = false,
+        onPressShortcut: () -> Unit,
+        onPressMore: () -> Unit
+    ): NavigationButtonConfig {
+        val totalTools = tools?.sumOf { it.items.size } ?: 0
+        var icon = if (isFavorite) "pin_star_checked" else "pin_star"
+        var onClickHandler = onPressShortcut
+        if (totalTools > 1 || useMore == true) {
+            icon = "navigation_more_icon"
+            onClickHandler = onPressMore
+        } else if (totalTools == 1 && !tools.isNullOrEmpty()) {
+            val singleTool = tools.first().items.firstOrNull()
+            if (singleTool != null) {
+                icon = singleTool.icon
+                onClickHandler = {
+                    headerRight?.toolCallback?.invoke(singleTool.key)
+                }
+            }
+        }
+        return NavigationButtonConfig(icon, onClickHandler)
+    }
+
+    val navButtonConfig = getNavigationButtonConfig(
+        headerRight?.tools,
+        headerRight?.useMore,
+        isFavorite,
+        ::onPressShortcut,
+        ::onPressMore
+    )
+
+    val showBadge = headerRight?.tools?.any { group ->
+        group.items.any { it.showBadge }
+    }
+
+    Row(
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        if (headerRight?.useShortcut == true) {
+            NavigationButton(
+                disabled = isLoading,
+                icon = navButtonConfig.icon,
+                showBadge = showBadge,
+                onClick = navButtonConfig.onPress
+            )
+        }
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.Center,
+            modifier = Modifier
+                .padding(start = Spacing.S)
+                .border(0.2.dp, Color(0x33000000), shape = RoundedCornerShape(14.dp))
+                .width(65.dp)
+                .height(28.dp)
+                .clip(shape = RoundedCornerShape(14.dp))
+                .background(Color(0x99FFFFFF))
+        ) {
+            Icon(source = "help_center", size = 20.dp, modifier = Modifier.padding(4.dp).clickable {
+                onPressHelpCenter()
+            })
+            Box(
+                modifier = Modifier
+                    .width(0.5.dp)
+                    .height(12.dp)
+                    .background(Colors.black_20)
+            )
+            Icon(
+                source = "16_navigation_close_circle",
+                size = 20.dp,
+                modifier = Modifier.padding(4.dp).clickable { onPressClose() }
+            )
+        }
+    }
+}
+
+@Composable
+fun NavigationButton(
+    disabled: Boolean,
+    icon: String,
+    showBadge: Boolean? = false,
+    onClick: () -> Unit
+) {
+    Box(
+        modifier = Modifier
+            .size(28.dp)
+            .clickable(enabled = !disabled, onClick = onClick)
+    ) {
+        Box(
+            modifier = Modifier
+                .matchParentSize()
+                .clip(CircleShape)
+                .background(Color(0x99FFFFFF))
+                .border(0.2.dp, Color(0x33000000), CircleShape)
+        )
+        Box(
+            modifier = Modifier.matchParentSize(),
+            contentAlignment = Alignment.Center
+        ) {
+            Icon(
+                source = icon,
+                size = 16.dp
+            )
+        }
+
+        if (showBadge == true) {
+            BadgeDot(
+                size = DotSize.Small,
+                modifier = Modifier
+                    .align(Alignment.TopEnd)
+                    .offset(x = -Spacing.XXS, y = -Spacing.XXS)
+            )
+        }
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/application/NavigationContainer.kt

@@ -6,14 +6,10 @@ import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.unit.Dp
-import kotlinx.coroutines.launch
-import kotlinx.serialization.json.Json
-import kotlinx.serialization.json.jsonObject
-import kotlinx.serialization.json.jsonPrimitive
+import vn.momo.kits.components.TrustBannerData
 import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Theme
@@ -22,40 +18,20 @@ import vn.momo.kits.const.defaultTheme
 import vn.momo.kits.platform.disableOverscroll
 import vn.momo.kits.platform.getStatusBarHeight
 
-val PlatformApi = staticCompositionLocalOf<Any?> { null }
-
 interface ComposeApi {
-    fun request(funcName: String, params: String?): String
-    fun request(funcName: String, params: String?, onResponse: ((String) -> Unit)?): String
-    fun requestCallback(funcName: String, params: String?, onResponse: ((String) -> Unit)?)
+    fun request(funcName: String, params: Any?): String
+    fun request(funcName: String, params: Any?, onResponse: ((String) -> Unit)?): String
+    fun requestCallback(funcName: String, params: Any?, onResponse: ((String) -> Unit)?)
     fun removeCallback(id: String)
 }
 
-val AppNavigator = staticCompositionLocalOf<Navigator> {
-    error("no navigator provided!")
-}
-
 class Navigator {
-    fun push(content: @Composable () -> Unit) {
-    }
-
-    fun present(content: @Composable () -> Unit) {
-
-    }
-
-    fun reset(content: @Composable () -> Unit) {
-
-    }
-
-    fun pop() {
-    }
-
-    fun replace(content: @Composable () -> Unit) {
-    }
-
-    fun popToTop() {
-    }
-
+    fun push(content: @Composable () -> Unit) {}
+    fun present(content: @Composable () -> Unit) {}
+    fun reset(content: @Composable () -> Unit) {}
+    fun pop() {}
+    fun replace(content: @Composable () -> Unit) {}
+    fun popToTop() {}
     fun showModal(
         onClose: () -> Unit = {},
         canBackgroundClose: Boolean = true,
@@ -63,52 +39,73 @@ class Navigator {
     ) {
     }
 
-    fun showBottomSheet(content: @Composable () -> Unit) {
-    }
+    fun showBottomSheet(content: @Composable () -> Unit) {}
 }
 
+data class MiniAppContext(
+    val appIcon: String = "",
+    val appName: Any? = null,
+    val appId: String = "",
+    val appCode: String = "",
+    val description: Any? = null,
+)
+
+val PlatformApi = staticCompositionLocalOf<Any?> { null }
+
+val AppNavigator = staticCompositionLocalOf<Navigator> {
+    error("no navigator provided!")
+}
+
+val ApplicationContext = staticCompositionLocalOf<MiniAppContext?> {
+    null
+}
+
+val AppConfig = staticCompositionLocalOf<KitConfig?> {
+    null
+}
+
+data class KitConfig(
+    val trustBanner: TrustBannerData? = null,
+    val headerBar: String? = null,
+    val headerGradient: String? = null
+)
+
 @Composable
 fun ApplicationContainer(
     theme: Theme = defaultTheme,
     composeApi: ComposeApi? = null,
-    statusBarHeight: Dp? = AppStatusBar.current ?: getStatusBarHeight(),
-    content: @Composable () -> Unit
+    statusBarHeight: Dp? = null,
+    applicationContext: MiniAppContext? = null,
+    config: KitConfig? = null,
+    content: @Composable () -> Unit,
 ) {
     var appTheme by remember { mutableStateOf(theme) }
-    val coroutineScope = rememberCoroutineScope()
 
     LaunchedEffect(Unit) {
         try {
-            composeApi?.request("getConfig", "DESIGN_SYSTEM") {
-                val json = Json { ignoreUnknownKeys = true }
-                val response = json.parseToJsonElement(it).jsonObject["response"]
-                val headerBar = response
-                    ?.jsonObject
-                    ?.get("headerBar")
-                    ?.jsonPrimitive
-                    ?.content
-                if (headerBar != null && appTheme.assets.headerBackground == null) {
-                    coroutineScope.launch {
-                        appTheme = appTheme.copy(
-                            assets = ThemeAssets(
-                                headerBackground = headerBar
-                            )
-                        )
-                    }
-                }
+            val headerBar = config?.headerBar
+            if (headerBar != null && appTheme.assets.headerBackground == null) {
+                appTheme = appTheme.copy(
+                    assets = ThemeAssets(
+                        headerBackground = headerBar
+                    )
+                )
             }
-        }
-        catch (e: Exception) {
-            print("@@ == NavigationContainer fetch config error $e")
+        } catch (e: Exception) {
+            print("@@ == NavigationContainer get config error $e")
         }
     }
 
+    val appStatusBarHeight = statusBarHeight ?: getStatusBarHeight()
+
     disableOverscroll()
     CompositionLocalProvider(
         AppTheme provides appTheme,
         PlatformApi provides composeApi,
         AppNavigator provides Navigator(),
-        AppStatusBar provides statusBarHeight,
+        AppStatusBar provides appStatusBarHeight,
+        ApplicationContext provides applicationContext,
+        AppConfig provides config
     ) {
         content()
     }