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

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

@@ -0,0 +1,76 @@
+package vn.momo.kits.application
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Image
+import vn.momo.kits.components.Options
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.utils.bottomBorder
+
+@Deprecated("Use vn.momo.kits.navigation.component.Header instead", ReplaceWith("vn.momo.kits.navigation.component.Header"))
+@Composable
+fun HeaderExtended(
+    opacityAni: Float,
+    statusBarHeight: Dp,
+    backgroundColor: Color
+) {
+    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
+                    )
+                )
+            }
+        }
+    }
+
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .alpha(1f - opacityAni)
+            .height(statusBarHeight + HEADER_HEIGHT.dp)
+            .background(
+                AppTheme.current.colors.background.surface
+            )
+            .bottomBorder(
+                strokeWidth = 1.dp,
+                color = AppTheme.current.colors.border.default
+            )
+    )
+}

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

@@ -0,0 +1,306 @@
+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 kotlinx.serialization.json.Json
+import kotlinx.serialization.json.jsonObject
+import kotlinx.serialization.json.jsonPrimitive
+import vn.momo.kits.components.BadgeDot
+import vn.momo.kits.components.DotSize
+import vn.momo.kits.components.Icon
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Colors
+
+data class HeaderRightData(
+    val useShortcut: Boolean = false,
+    val useMore: Boolean = false,
+    val useSystemTools: Boolean = true,
+    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(),
+    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 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
+}
+
+@Deprecated("Use vn.momo.kits.navigation.component.HeaderRight instead", ReplaceWith("vn.momo.kits.navigation.component.HeaderRight"))
+@Composable
+fun HeaderRight(
+    headerRight: HeaderRightData? = null,
+    opacity: Float = 1f,
+    animatedHeader: AnimatedHeader? = null,
+    tintColor: Color? = null,
+) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        ToolkitHeaderRight(headerRight = headerRight, opacity = opacity, animatedHeader = animatedHeader, tintColor = tintColor)
+    }
+}
+
+private fun getNavigationButtonConfig(
+    headerRight: HeaderRightData? = null,
+    isFavorite: Boolean = false,
+    onPressShortcut: () -> Unit,
+    onPressMore: () -> Unit
+): NavigationButtonConfig {
+    val totalTools = headerRight?.tools?.sumOf { it.items.size } ?: 0
+    var icon = if (isFavorite) "pin_star_checked" else "pin_star"
+    var onClickHandler = onPressShortcut
+    if (totalTools > 1 || headerRight?.useMore == true) {
+        icon = "navigation_more_icon"
+        onClickHandler = onPressMore
+    } else if (totalTools == 1 && !headerRight?.tools.isNullOrEmpty()) {
+        val singleTool = headerRight?.tools?.first()?.items?.firstOrNull()
+        if (singleTool != null) {
+            icon = singleTool.icon
+            onClickHandler = {
+                headerRight.toolCallback?.invoke(singleTool.key)
+            }
+        }
+    }
+    return NavigationButtonConfig(icon, onClickHandler)
+}
+
+@Composable
+private fun ToolkitHeaderRight(
+    headerRight: HeaderRightData? = null,
+    opacity: Float = 1f,
+    animatedHeader: AnimatedHeader? = null,
+    tintColor: Color? = 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("dismissAll", "", { _ -> })
+    }
+
+    fun onPressMore() {
+        api?.request(
+            "showTools",
+            mapOf(
+                "useSystemTools" to headerRight?.useSystemTools,
+                "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,
+                    "support" to context?.support,
+                    "toolkitConfig" to context?.toolkitConfig,
+                    "providerId" to context?.providerId,
+                    "permissions" to context?.permissions
+                )
+            )
+        ) { 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")
+            }
+        }
+    }
+
+    val navButtonConfig = getNavigationButtonConfig(
+        headerRight,
+        isFavorite,
+        ::onPressShortcut,
+        ::onPressMore
+    )
+
+    val showBadge = headerRight?.tools?.any { group ->
+        group.items.any { it.showBadge }
+    }
+
+    val toolkitWidth = if (context !== null) 65.dp else 28.dp
+
+    var isShowShortcut = headerRight?.useShortcut == true
+
+    if (headerRight?.useMore == true && context == null) {
+        isShowShortcut = false
+    }
+
+    val color = getHeaderColor(animatedHeader, opacity, tintColor, AppTheme.current.colors.text.default)
+    val tintIconColor = color.tintIconColor
+    val backgroundButton = color.backgroundButton
+    val borderColor = color.borderColor
+
+    Row(
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        if (isShowShortcut) {
+            NavigationButton(
+                disabled = isLoading,
+                icon = navButtonConfig.icon,
+                showBadge = showBadge,
+                onClick = navButtonConfig.onPress,
+                tintColor = tintIconColor
+            )
+        }
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.Center,
+            modifier = Modifier
+                .padding(start = Spacing.S)
+                .border(0.2.dp, borderColor, shape = RoundedCornerShape(14.dp))
+                .width(toolkitWidth)
+                .height(28.dp)
+                .clip(shape = RoundedCornerShape(14.dp))
+                .background(backgroundButton)
+        ) {
+            if (context != null) {
+                Icon(
+                    source = "help_center",
+                    size = 20.dp,
+                    color = tintIconColor,
+                    modifier = Modifier.padding(4.dp).clickable {
+                        onPressHelpCenter()
+                    })
+                Box(
+                    modifier = Modifier
+                        .width(0.5.dp)
+                        .height(12.dp)
+                        .background(tintColor ?: Colors.black_20)
+                )
+            }
+
+            Icon(
+                source = "16_basic_home",
+                size = 20.dp,
+                color = tintIconColor,
+                modifier = Modifier.padding(4.dp).clickable { onPressClose() }
+            )
+        }
+    }
+}
+
+@Deprecated("Use vn.momo.kits.navigation.component instead", ReplaceWith("vn.momo.kits.navigation.component"))
+@Composable
+fun NavigationButton(
+    disabled: Boolean,
+    icon: String,
+    showBadge: Boolean? = false,
+    onClick: () -> Unit,
+    tintColor: Color?
+) {
+    val backgroundButton = if (tintColor == Colors.black_01) Colors.black_20.copy(alpha = 0.6f) else Colors.black_01.copy(alpha = 0.6f)
+    val borderColor = if (tintColor == Colors.black_01) Colors.black_01.copy(alpha = 0.2f) else Colors.black_20.copy(alpha = 0.2f)
+
+    Box(
+        modifier = Modifier
+            .size(28.dp)
+            .clickable(enabled = !disabled, onClick = onClick)
+    ) {
+        Box(
+            modifier = Modifier
+                .matchParentSize()
+                .clip(CircleShape)
+                .background(backgroundButton)
+                .border(0.2.dp, borderColor, CircleShape)
+        )
+        Box(
+            modifier = Modifier.matchParentSize(),
+            contentAlignment = Alignment.Center
+        ) {
+            Icon(
+                source = icon,
+                size = 20.dp,
+                color = tintColor
+            )
+        }
+
+        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/HeaderTitle.kt

@@ -0,0 +1,33 @@
+package vn.momo.kits.application
+
+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
+
+@Deprecated("Use vn.momo.kits.navigation.component instead", ReplaceWith("vn.momo.kits.navigation.component"))
+@Composable
+fun HeaderTitle(
+    title: String = "",
+    modifier: Modifier = Modifier,
+    textAlign: TextAlign = TextAlign.Start,
+    color: Color? = null,
+) {
+    Text(
+        modifier = Modifier.then(modifier).zIndex(1f),
+        text = title,
+        textAlign = textAlign,
+        style = Typography.actionSBold.copy(
+            fontSize = 15.sp,
+            lineHeight = 22.sp,
+        ),
+        color = color,
+        maxLines = 1,
+        overflow = TextOverflow.Ellipsis
+    )
+}