@momo-kits/native-kits 0.111.1-rc.2 → 0.112.1-beta.1

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

@@ -40,6 +40,7 @@ import vn.momo.kits.const.Spacing
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.shadow
 import vn.momo.kits.platform.getStatusBarHeight
+import vn.momo.kits.components.HeaderRight
 
 enum class HeaderType {
     DEFAULT,
@@ -62,7 +63,7 @@ fun Screen(
     onContentLayout: ((LayoutCoordinates) -> Unit)? = null,
     useAvoidKeyboard: Boolean = true,
     footer: @Composable (() -> Unit)? = null,
-    headerRight: @Composable (() -> Unit)? = null,
+    headerRight: @Composable (() -> Unit)? = { HeaderRight() },
     fabProps: FabProps? = null,
     animatedHeader: AnimatedHeader? = null,
     layoutOffset: Dp = 56.dp,

package/compose/src/commonMain/kotlin/vn/momo/kits/components/BadgeDot.kt

@@ -17,9 +17,9 @@ enum class DotSize(val size: Int) {
 }
 
 @Composable
-fun BadgeDot(size: DotSize = DotSize.Large) {
+fun BadgeDot(size: DotSize = DotSize.Large, modifier: Modifier = Modifier) {
     Box(
-        modifier = Modifier
+        modifier = modifier
             .size(size.size.dp)
             .border(width = 1.dp, color = Colors.black_01, shape = RoundedCornerShape(Radius.S))
             .background(color = Colors.red_03, shape = RoundedCornerShape(Radius.S))

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

@@ -0,0 +1,209 @@
+package vn.momo.kits.components
+
+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.application.ComposeApi
+import vn.momo.kits.application.PlatformApi
+import vn.momo.kits.const.Colors
+
+data class HeaderRightData(
+    val useOnBoarding: Boolean = false,
+    val buttonOnBoarding: String? = null,
+    val onPress: (() -> Unit)? = null,
+    val tintColor: Color = Colors.black_20,
+    val preventClose: Any? = null,
+    val useShortcut: Boolean = false,
+    val useMore: Boolean = false,
+    val tools: List<ToolGroup> = emptyList(),
+    val appId: String = ""
+)
+
+data class Tool(
+    val key: String,
+    val icon: String,
+    val onPress: () -> Unit,
+    val showBadge: Boolean = false
+)
+
+data class ToolGroup(
+    val items: List<Tool>
+)
+
+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
+
+    fun onPressShortcut() {
+        isFavorite = !isFavorite
+    }
+    fun onPressHelpCenter(){
+        api?.request("showHelpCenter", "")
+    }
+    fun onPressClose(){
+        api?.request("dismiss", "")
+    }
+    fun onPressMore() {
+        api?.request("showTools", "")
+    }
+
+    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 = {
+                    singleTool.onPress()
+                }
+            }
+        }
+        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/components/Icon.kt

@@ -22,10 +22,10 @@ fun Icon(
     color: Color? = AppTheme.current.colors.text.default,
     modifier: Modifier = Modifier,
 ) {
-    val icon = if (source.contains("https")) {
-        source
-    } else {
-        Icons[source] ?: ""
+    val icon = when {
+        source.startsWith("data:") -> source
+        source.contains("https") -> source
+        else -> Icons[source] ?: ""
     }
     Box(modifier = modifier.size(size).semantics {contentDescription = "img|$icon"}) {
         AsyncImage(

package/compose/src/commonMain/kotlin/vn/momo/kits/utils/Icons.kt

@@ -1318,5 +1318,10 @@ val Icons = mapOf(
     "ic_checked" to "https://img.mservice.com.vn/app/img/kits/checked_ic.png",
     "ic_minus" to "https://img.mservice.com.vn/app/img/kits/minus.png",
     "ic_navigation" to "https://static.momocdn.net/app/img/kits/ic_navigation.png",
-    "ic_money_bag" to "https://static.momocdn.net/app/img/kits/ic_money_bag.png"
+    "ic_money_bag" to "https://static.momocdn.net/app/img/kits/ic_money_bag.png",
+    "ic_support" to "https://static.momocdn.net/app/img/kits/ic_support.png",
+    "navigation_more_icon" to "https://static.momocdn.net/app/img/kits/navigation_more_icon.png",
+    "help_center" to "https://static.momocdn.net/app/img/kits/help-center.png",
+    "pin_star" to "https://static.momocdn.net/app/img/kits/pin_star.png",
+    "pin_star_checked" to "https://static.momocdn.net/app/img/kits/pin_star_checked.png"
 )

package/ios/Checkbox/Checkbox.swift

@@ -41,7 +41,7 @@ public struct Checkbox: View{
                         .resizable()
                         .foregroundColor(backgroundColor)
                         .background(Colors.black01)
-                        .frame(width: 24, height: 24)
+                        .frame(width: 20, height: 20)
                 }
             }
 

package/local.properties

@@ -4,5 +4,5 @@
 # Location of the SDK. This is only used by Gradle.
 # For customization when using a Version Control System, please read the
 # header note.
-#Wed Aug 21 14:20:12 ICT 2024
-sdk.dir=/Users/huynhdung/Library/Android/sdk
+#Tue Apr 23 16:40:15 ICT 2024
+sdk.dir=/Users/hung.dao1/Library/Android/sdk

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.111.1-rc.2",
+  "version": "0.112.1-beta.1",
   "private": false,
   "dependencies": {},
   "devDependencies": {},