@momo-kits/native-kits 0.120.0-beta.21 → 0.120.0-beta.23

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

@@ -27,6 +27,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.graphicsLayer
 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
@@ -167,9 +168,11 @@ fun Header(
                         HeaderTitle(
                             title = title,
                             color = tintIconColor,
-                            modifier = Modifier.semantics {
-                                testTag = "title_navigation_header"
-                            }
+                            modifier = Modifier
+                                .setAutomationId("title_navigation_header")
+                                .fillMaxWidth(fraction = if(titlePosition == TitlePosition.LEFT) 0.7f else 0.5f)
+                            ,
+                            textAlign = if(titlePosition == TitlePosition.LEFT) TextAlign.Start else TextAlign.Center
                         )
                     }
                 }

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

@@ -17,7 +17,6 @@ enum class TitlePosition {
 }
 
 data class AnimatedHeader(
-    val type: HeaderType = HeaderType.DEFAULT,
     val composable: @Composable (scrollState: Int) -> Unit = {}
 )
 

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

@@ -4,6 +4,7 @@ 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
@@ -25,6 +26,7 @@ fun HeaderTitle(
             lineHeight = 22.sp,
         ),
         color = color,
-        maxLines = 1
+        maxLines = 1,
+        overflow = TextOverflow.Ellipsis
     )
 }

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

@@ -14,6 +14,8 @@ import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.layout.onSizeChanged
 import coil3.compose.AsyncImage
 import vn.momo.kits.const.AppTheme
 
@@ -28,6 +30,47 @@ enum class ImageState {
     Loading, Success, Error
 }
 
+private val supportedDomains = setOf(
+    "static.momocdn.net",
+    "img.mservice.com.vn",
+    "cdn.mservice.com.vn",
+    "img.mservice.io",
+    "image.momocdn.net"
+)
+
+private val sizeChart = mapOf(
+    "XXS" to 64,
+    "XS" to 128,
+    "S" to 256,
+    "M" to 512,
+    "L" to 768,
+    "XL" to 1024,
+    "XXL" to 2048
+)
+
+private fun closestSizeForWidth(width: Float): String {
+    return sizeChart.minByOrNull { (_, value) ->
+        kotlin.math.abs(value - width)
+    }?.key ?: "M"
+}
+
+private fun getHostFromUrl(url: String): String? {
+    return try {
+        val noProtocol = url.substringAfter("//")
+        noProtocol.substringBefore("/").substringBefore(":")
+    } catch (_: Exception) {
+        null
+    }
+}
+
+private fun appendQueryParam(url: String, key: String, value: String): String {
+    val parts = url.split("#", limit = 2)
+    val base = parts[0]
+    val fragment = if (parts.size > 1) "#" + parts[1] else ""
+    val sep = if (base.contains("?")) "&" else "?"
+    return "$base$sep$key=$value$fragment"
+}
+
 @Composable
 fun Image(
     source: Any,
@@ -37,6 +80,8 @@ fun Image(
 ) {
     var imageOptions = Options()
     var imageState by remember { mutableStateOf(ImageState.Loading) }
+    var urlToLoad by remember(source) { mutableStateOf(source) }
+    val density = LocalDensity.current
 
     options?.let {
         imageOptions = Options(
@@ -47,10 +92,29 @@ fun Image(
         )
     }
 
-    Box(modifier = modifier.semantics { contentDescription = "img|$source" }) {
+    Box(
+        modifier = modifier
+            .semantics { contentDescription = "img|$source" }
+            .onSizeChanged { size ->
+                if (source is String) {
+                    val host = getHostFromUrl(source)
+                    if (host != null && supportedDomains.contains(host)) {
+                        val widthPx = size.width.toFloat()
+                        val pixelRatio = density.density
+                        val pixelFitForWidth = widthPx * pixelRatio
+                        val sizeKey = closestSizeForWidth(pixelFitForWidth)
+                        urlToLoad = appendQueryParam(source, "size", sizeKey)
+                    } else {
+                        urlToLoad = source
+                    }
+                } else {
+                    urlToLoad = source
+                }
+            }
+    ) {
         AsyncImage(
             modifier = Modifier.matchParentSize(),
-            model = source,
+            model = urlToLoad,
             contentDescription = null,
             contentScale = imageOptions.contentScale,
             alignment = imageOptions.alignment,

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

@@ -36,6 +36,7 @@ import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
 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

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

@@ -57,6 +57,7 @@ fun PopupNotify(
     secondary: PopupAction? = null,
     buttonDirection: PopupActionDirection = PopupActionDirection.ROW,
     onIconClose: () -> Unit,
+    isShowCloseIcon: Boolean = true,
 ) {
     var isScroll by remember { mutableStateOf(false) }
     val layoutResult = remember { mutableStateOf<TextLayoutResult?>(null) }
@@ -107,13 +108,13 @@ fun PopupNotify(
                     RoundedCornerShape(Radius.L)
                 )
         ) {
-            image.ifNotNull(
+            if(image.isNotEmpty()) {
                 Image(
                     source = image,
                     modifier = Modifier.fillMaxWidth().aspectRatio(1.777f),
-                    options = Options(alignment =  Alignment.Center)
-                ), null
-            )
+                    options = Options(alignment = Alignment.Center)
+                )
+            }
 
             Column(modifier = Modifier.padding(Spacing.XL)) {
                 Text(
@@ -144,34 +145,36 @@ fun PopupNotify(
             }
         }
 
-        Box(
-            Modifier
-                .width(22.dp)
-                .height(22.dp)
-                .offset(x = -(1).dp, y = (-11).dp)
-                .background(
-                    color = AppTheme.current.colors.text.default,
-                    shape = RoundedCornerShape(Radius.M)
-                )
-                .border(
-                    width = 2.dp,
+        if(isShowCloseIcon) {
+            Box(
+                Modifier
+                    .width(22.dp)
+                    .height(22.dp)
+                    .offset(x = -(1).dp, y = (-11).dp)
+                    .background(
+                        color = AppTheme.current.colors.text.default,
+                        shape = RoundedCornerShape(Radius.M)
+                    )
+                    .border(
+                        width = 2.dp,
+                        color = AppTheme.current.colors.background.surface,
+                        shape = RoundedCornerShape(Radius.M)
+                    )
+                    .clip(RoundedCornerShape(100))
+                    .clickable(
+                        interactionSource = remember { MutableInteractionSource() },
+                        indication = null,
+                        onClick = { onClose { onIconClose() } }
+                    ),
+                contentAlignment = Alignment.Center
+            ) {
+                Icon(
+                    source = "navigation_close",
                     color = AppTheme.current.colors.background.surface,
-                    shape = RoundedCornerShape(Radius.M)
+                    size = 16.dp,
+                    modifier = Modifier.setAutomationId("ic_popup_close")
                 )
-                .clip(RoundedCornerShape(100))
-                .clickable(
-                    interactionSource = remember { MutableInteractionSource() },
-                    indication = null,
-                    onClick = { onClose { onIconClose() } }
-                ),
-            contentAlignment = Alignment.Center
-        ) {
-            Icon(
-                source = "navigation_close",
-                color = AppTheme.current.colors.background.surface,
-                size = 16.dp,
-                modifier = Modifier.setAutomationId("ic_popup_close")
-            )
+            }
         }
     }
 }

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

@@ -22,8 +22,11 @@ import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTag
 import androidx.compose.ui.unit.dp
 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.modifier.setAutomationId
+import vn.momo.kits.utils.ifNotNull
 
 @Composable
 fun PopupPromotion(
@@ -32,7 +35,7 @@ fun PopupPromotion(
     onClose: (() -> Unit) = {},
 ) {
     Column(Modifier.semantics { testTag = "popup_notify" }) {
-        if (source.isNotEmpty()) {
+        source.ifNotNull(
             Image(
                 source = source,
                 modifier = Modifier.fillMaxWidth()
@@ -43,28 +46,20 @@ fun PopupPromotion(
                         onClick = onPress
                     ),
                 options = Options(alignment =  Alignment.Center, contentScale = ContentScale.Crop)
-            )
-        }
+            ), null
+        )
         Box(
             modifier = Modifier
                 .padding(top = Spacing.S)
-                .fillMaxWidth(),
+                .fillMaxWidth()
+                .width(40.dp)
+                .height(40.dp),
             contentAlignment = Alignment.Center
         ) {
             Box(
-                Modifier
-                    .width(20.dp)
-                    .height(20.dp)
-                    .background(
-                        color = AppTheme.current.colors.text.default,
-                        shape = RoundedCornerShape(Radius.M)
-                    )
-                    .border(
-                        width = 2.dp,
-                        color = AppTheme.current.colors.background.surface,
-                        shape = RoundedCornerShape(Radius.M)
-                    )
-                    .clip(RoundedCornerShape(100))
+                modifier = Modifier
+                    .width(40.dp)
+                    .height(40.dp)
                     .clickable(
                         interactionSource = remember { MutableInteractionSource() },
                         indication = null,
@@ -72,15 +67,32 @@ fun PopupPromotion(
                     ),
                 contentAlignment = Alignment.Center
             ) {
-                Icon(
-                    source = "navigation_close",
-                    color = AppTheme.current.colors.background.surface,
-                    size = 14.dp,
-                    modifier = Modifier.semantics {
-                        testTag = "ic_popup_close"
-                    }
-                )
+                Box(
+                    Modifier
+                        .width(22.dp)
+                        .height(22.dp)
+                        .background(
+                            color = AppTheme.current.colors.text.default,
+                            shape = RoundedCornerShape(Radius.M)
+                        )
+                        .border(
+                            width = 2.dp,
+                            color = AppTheme.current.colors.background.surface,
+                            shape = RoundedCornerShape(Radius.M)
+                        )
+                        .clip(RoundedCornerShape(100))
+                    ,
+                    contentAlignment = Alignment.Center
+                ) {
+                    Icon(
+                        source = "navigation_close",
+                        color = AppTheme.current.colors.background.surface,
+                        size = 16.dp,
+                        modifier = Modifier.setAutomationId("ic_popup_close")
+                    )
+                }
             }
+
         }
     }
 }

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

@@ -1,7 +1,5 @@
 package vn.momo.kits.components
 
-import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.Box
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -10,10 +8,8 @@ import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import vn.momo.kits.const.AppTheme
-import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Typography
 import vn.momo.kits.const.getFontFamily
 import vn.momo.kits.const.scaleSize
@@ -31,6 +27,9 @@ fun Text(
     textDecoration: TextDecoration? = null,
     onTextLayout: ((TextLayoutResult) -> Unit)? = null,
     fontFamily: String = "SFProText",
+    minLines: Int = 1,
+    letterSpacing: TextUnit = TextUnit.Unspecified,
+    softWrap: Boolean = true,
     accessibilityId: String? = null
 ) {
     val fontSize = scaleSize(style.fontSize.value).sp
@@ -45,9 +44,11 @@ fun Text(
         fontSize = fontSize,
         fontFamily = font,
         maxLines = maxLines,
+        softWrap = softWrap,
+        letterSpacing = letterSpacing,
+        minLines = minLines,
         textDecoration = textDecoration,
         onTextLayout = onTextLayout,
         overflow = overflow
     )
-
 }