@momo-kits/native-kits 0.156.6-dialog.1-debug → 0.156.6-newcompose.1-debug

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

@@ -11,17 +11,14 @@ import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 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.CompositionLocalProvider
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
@@ -127,13 +124,12 @@ fun getTextColor(loading: Boolean, type: ButtonType): Color {
 }
 
 @Composable
-fun RenderTitle(size: Size, title: String = "", type: ButtonType) {
+fun RenderTitle(size: Size, title: String = "", textColor: Color) {
     val style = remember(size) { getStyle(size) }
-    val color = TextColor.current
     Text(
         style = style,
         text = title,
-        color = color,
+        color = textColor,
         overflow = TextOverflow.Ellipsis,
         maxLines = 1
     )
@@ -145,21 +141,20 @@ fun RenderIcon(
     isIconLeft: Boolean,
     useTintColor: Boolean = true,
     icon: String = "",
-    forceLoading: Boolean = false
+    forceLoading: Boolean = false,
+    bgColor: Color? = null,
+    textColor: Color? = null,
 ) {
-    val bgColor = BackgroundColor.current
     val iconSize = remember(size) { getIconSize(size) }
     val margin = remember(size) { getIconSpace(size) }
-    val color = if (useTintColor) TextColor.current else Color.Unspecified
-
-    val showLoading = forceLoading
+    val color = if (useTintColor) textColor else Color.Unspecified
 
     val modifier = Modifier.padding(
         start = if (isIconLeft) 0.dp else margin,
         end = if (isIconLeft) margin else 0.dp
     )
 
-    if (showLoading) {
+    if (forceLoading) {
         Box(modifier) {
             LottieAnimation(
                 modifier = Modifier.size(iconSize),
@@ -195,9 +190,9 @@ fun getTypeStyle(
     type: ButtonType,
     color: Color? = AppTheme.current.colors.primary,
     size: Size,
+    bgColor: Color,
 ): Modifier {
     val theme = AppTheme.current
-    val bgColor = BackgroundColor.current
     val radius = remember(size) { size.value.radius }
     val modifier = Modifier.background(bgColor)
 
@@ -304,45 +299,41 @@ fun Button(
                 .clip(RoundedCornerShape(radius))
         }
 
-    CompositionLocalProvider(
-        IsLoading provides loading,
-        BackgroundColor provides getButtonBackgroundColor(loading, type),
-        TextColor provides getTextColor(loading, type)
+    val bgColor = getButtonBackgroundColor(loading, type)
+    val textColor = getTextColor(loading, type)
+
+    Row(
+        modifier = clickableModifier
+            .padding(horizontal = animatedPadding)
+            .clip(RoundedCornerShape(radius))
+            .then(getTypeStyle(type, size = size, bgColor = bgColor))
+            .conditional(IsShowBaseLineDebug) {
+                border(1.dp, Colors.blue_03)
+            }
+            .padding(horizontal = sizeSpecs.padding)
+            .height(sizeSpecs.height),
+        horizontalArrangement = Arrangement.Center,
+        verticalAlignment = Alignment.CenterVertically,
     ) {
-        Row(
-            modifier = clickableModifier
-                .padding(horizontal = animatedPadding)
-                .clip(RoundedCornerShape(radius))
-                .then(getTypeStyle(type, size = size))
-                .conditional(IsShowBaseLineDebug) {
-                    border(1.dp, Colors.blue_03)
-                }
-                .padding(horizontal = sizeSpecs.padding)
-                .height(sizeSpecs.height),
-            horizontalArrangement = Arrangement.Center,
-            verticalAlignment = Alignment.CenterVertically,
-        ) {
-            RenderIcon(
-                size = size,
-                isIconLeft = true,
-                useTintColor = useTintColor,
-                icon = iconLeft,
-                forceLoading = loading && loadingOnLeft
-            )
-            RenderTitle(size, title, type = type)
-            RenderIcon(
-                size = size,
-                isIconLeft = false,
-                useTintColor = useTintColor,
-                icon = iconRight,
-                forceLoading = loading && !loadingOnLeft
-            )
-        }
+        RenderIcon(
+            size = size,
+            isIconLeft = true,
+            useTintColor = useTintColor,
+            icon = iconLeft,
+            forceLoading = loading && loadingOnLeft,
+            bgColor = bgColor,
+            textColor = textColor
+        )
+        RenderTitle(size, title, textColor = textColor)
+        RenderIcon(
+            size = size,
+            isIconLeft = false,
+            useTintColor = useTintColor,
+            icon = iconRight,
+            forceLoading = loading && !loadingOnLeft,
+            bgColor = bgColor,
+            textColor = textColor
+        )
     }
 }
 
-
-private val IsLoading = staticCompositionLocalOf<Boolean> { false }
-private val BackgroundColor = staticCompositionLocalOf<Color> { Color.Transparent }
-private val TextColor = staticCompositionLocalOf<Color> { Color.Transparent }
-

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

@@ -5,14 +5,17 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import coil3.compose.AsyncImage
+import coil3.compose.LocalPlatformContext
+import coil3.request.ImageRequest
 import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
@@ -27,6 +30,9 @@ fun Icon(
     color: Color? = AppTheme.current.colors.text.default,
     modifier: Modifier = Modifier,
 ) {
+    // decode image without downscaling it
+    val context = LocalPlatformContext.current
+
     val iconUrl = remember(source) {
         if (source.contains("https")) {
             source
@@ -35,10 +41,14 @@ fun Icon(
         }
     }
 
-    val iconColor = remember(source, color) {
+    val iconColor = remember(color) {
         if (noThemeIcons.contains(source)) null else color
     }
 
+    val colorFilter = remember(iconColor) {
+        iconColor?.let { ColorFilter.tint(it) }
+    }
+
     val contentDesc = remember(iconUrl) { "img|$iconUrl" }
 
     Box(
@@ -49,15 +59,18 @@ fun Icon(
             }
             .semantics { contentDescription = contentDesc }
     ) {
-        Image(
-            source = iconUrl,
+        AsyncImage(
             modifier = Modifier.matchParentSize(),
-            options = Options(
-                contentScale = ContentScale.Fit,
-                tintColor = iconColor,
-                alignment = Alignment.Center,
-            ),
-            loading = false,
+            model = ImageRequest.Builder(context)
+                .data(iconUrl)
+                .size(
+                    coil3.size.Dimension.Undefined,
+                    coil3.size.Dimension.Undefined
+                )
+                .build(),
+            contentDescription = null,
+            contentScale = ContentScale.Fit,
+            colorFilter = colorFilter,
         )
     }
 }

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

@@ -9,8 +9,6 @@ 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.clipToBounds
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.graphics.DefaultAlpha
 import androidx.compose.ui.graphics.painter.Painter
@@ -24,12 +22,11 @@ import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
 import vn.momo.kits.modifier.conditional
-import vn.momo.kits.platform.NativeImage
 
 data class Options(
     val alignment: Alignment = Alignment.TopStart,
     val contentScale: ContentScale = ContentScale.Crop,
-    val tintColor: Color? = null,
+    val colorFilter: ColorFilter? = null,
     val alpha: Float = DefaultAlpha,
 )
 
@@ -99,14 +96,15 @@ fun Image(
     options: Options? = null,
     loading: Boolean = true,
 ) {
-    val imageOptions = remember(options) { options ?: Options() }
+    val imageOptions = remember(options) {
+        options ?: Options()
+    }
 
     var imageState by remember { mutableStateOf(ImageState.Loading) }
     val density = LocalDensity.current
 
     BoxWithConstraints(
         modifier = modifier
-            .clipToBounds()
             .conditional(IsShowBaseLineDebug) {
                 border(1.dp, Colors.blue_03)
             }
@@ -115,6 +113,7 @@ fun Image(
         val urlToLoad = remember(source, maxWidth, maxHeight, density) {
             when (source) {
                 is String -> {
+                    // Check cache first
                     val cacheKey = "$source|${maxWidth}|${density.density}"
                     urlCache[cacheKey] ?: run {
                         val processedUrl = processImageUrl(source, maxWidth, density)
@@ -126,13 +125,17 @@ fun Image(
             }
         }
 
-        NativeImage(
-            source = urlToLoad,
-            options = imageOptions,
-            loading = loading,
+        AsyncImage(
+            modifier = Modifier.matchParentSize(),
+            model = urlToLoad,
+            contentDescription = null,
+            contentScale = imageOptions.contentScale,
+            alignment = imageOptions.alignment,
+            colorFilter = imageOptions.colorFilter,
+            alpha = imageOptions.alpha,
             onLoading = { imageState = ImageState.Loading },
             onSuccess = { imageState = ImageState.Success },
-            onError   = { imageState = ImageState.Error },
+            onError = { imageState = ImageState.Error },
         )
 
         when (imageState) {
@@ -145,7 +148,7 @@ fun Image(
                     modifier = Modifier.align(Alignment.Center)
                 )
             }
-            ImageState.Success -> Unit
+            ImageState.Success -> {}
         }
     }
 }

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

@@ -43,11 +43,11 @@ import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.compose.ui.zIndex
+import vn.momo.kits.application.IsShowBaseLineDebug
 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.application.IsShowBaseLineDebug
-import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Typography
 import vn.momo.kits.const.getFont
 import vn.momo.kits.const.scaleSize
@@ -141,7 +141,7 @@ fun getBorderColor(isFocused: Boolean, error: String, disabled: Boolean): Color
 }
 
 @Composable
-fun RenderRightIcon(loading: Boolean, icon: String, color: Color, onClick: () -> Unit) {
+fun RenderRightIcon(loading: Boolean, icon: String, color: Color, onClick: () -> Unit, modifier: Modifier = Modifier) {
     if (loading) {
         Box {
             CircularProgressIndicator(
@@ -157,7 +157,7 @@ fun RenderRightIcon(loading: Boolean, icon: String, color: Color, onClick: () ->
             source = icon,
             color = color,
             size = 24.dp,
-            modifier = Modifier.clickable(
+            modifier = modifier.clickable(
                 onClick = onClick,
                 interactionSource = remember { MutableInteractionSource() },
                 indication = null
@@ -224,6 +224,7 @@ fun Input(
     fontWeight: InputFontWeight = InputFontWeight.REGULAR,
     keyboardType: KeyboardType = KeyboardType.Text,
     modifier: Modifier = Modifier,
+    inputModifier: Modifier = Modifier,
 ) {
     // Consolidated state management
     var inputState by remember { mutableStateOf(InputState()) }
@@ -253,10 +254,6 @@ fun Input(
         if (disabled) theme.colors.text.disable else floatingIconColor
     }
 
-    val testId = remember(disabled, floatingValue) {
-        if (disabled) "input_${floatingValue}_disabled" else "input_$floatingValue"
-    }
-
     val fontSize = 14.sp
     val lineHeight = 24.sp
     val scaleFontSize = scaleSize(fontSize)
@@ -298,8 +295,7 @@ fun Input(
     Column(modifier = modifier
         .conditional(IsShowBaseLineDebug) {
             border(1.dp, Colors.blue_03)
-        }
-        .setAutomationId(testId)) {
+        }) {
         BasicTextField(
             enabled = !disabled,
             readOnly = readOnly,
@@ -308,7 +304,7 @@ fun Input(
             textStyle = textStyle,
             visualTransformation = visualTransformation,
             keyboardOptions = keyboardOptionsConfig,
-            modifier = Modifier
+            modifier = inputModifier
                 .height(scaleSize(size.values.height.value, 1.1f).dp)
                 .onFocusChanged { focusState ->
                     val wasFocused = inputState.isFocused
@@ -417,7 +413,7 @@ fun Input(
                                         },
                                         interactionSource = remember { MutableInteractionSource() },
                                         indication = null
-                                    )
+                                    ).setAutomationId("ic_clear")
                                 )
                             }
                         }
@@ -430,7 +426,12 @@ fun Input(
                                     onRightIconPressed()
                                     inputState = inputState.copy(passHidden = !inputState.passHidden)
                                 }
-                                RenderRightIcon(loading, iconName, iconTintColor, togglePassword)
+                                RenderRightIcon(
+                                    loading = loading,
+                                    icon = iconName,
+                                    color = iconTintColor,
+                                    onClick = togglePassword,
+                                    modifier = Modifier.setAutomationId("ic_show_hide"))
                             }
                             else -> {
                                 RenderRightIcon(loading, icon, iconTintColor, onRightIconPressed)

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

@@ -31,11 +31,11 @@ import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import vn.momo.kits.application.IsShowBaseLineDebug
 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.application.IsShowBaseLineDebug
 import vn.momo.kits.const.Typography
 import vn.momo.kits.const.scaleSize
 import vn.momo.kits.modifier.conditional
@@ -98,6 +98,7 @@ fun InputPhoneNumber(
     onBlur: () -> Unit = {},
     loading: Boolean = false,
     modifier: Modifier = Modifier,
+    inputModifier: Modifier = Modifier,
 ) {
     // Consolidated state management
     var inputState by remember { mutableStateOf(InputState()) }
@@ -113,23 +114,20 @@ fun InputPhoneNumber(
     }
 
     val (textColor, placeholderColor, iconTintColor) = colors
-
-    val testId = "input_phone_number"
-
     val textStyle = scaleSize(size.values.textStyle.copy(color = textColor))
 
+
     Column(modifier = modifier
         .conditional(IsShowBaseLineDebug) {
             border(1.dp, Colors.blue_03)
-        }
-        .setAutomationId(testId)) {
+        }) {
         BasicTextField(
             singleLine = true,
             value = text.value,
             textStyle = textStyle,
             keyboardOptions = KeyboardOptions.Default.copy(keyboardType = KeyboardType.Number),
             cursorBrush = SolidColor(AppTheme.current.colors.primary),
-            modifier = Modifier
+            modifier = inputModifier
                 .height(scaleSize(size.values.height.value, 1.1f).dp)
                 .onFocusChanged { focusState ->
                     val wasFocused = inputState.isFocused
@@ -218,6 +216,7 @@ fun InputPhoneNumber(
                                         indication = null
                                     )
                                         .padding(horizontal = Spacing.S)
+                                        .setAutomationId("ic_clear")
                                 )
                             }
                         }