npm - @momo-kits/native-kits - Versions diffs - 0.89.30-beta.4 → 0.89.30-beta.6 - Mend

@momo-kits/native-kits 0.89.30-beta.4 → 0.89.30-beta.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

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

@@ -4,7 +4,6 @@ import androidx.compose.animation.animateColorAsState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxWithConstraints
@@ -16,7 +15,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -26,9 +24,12 @@ import androidx.compose.runtime.setValue
 import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTag
@@ -60,45 +61,76 @@ data class AnimatedHeader(
 )
 @Composable
-fun HeaderImage(
-    headerType: HeaderType = HeaderType.DEFAULT,
-    headerBackground: String?,
+fun HeaderBackground(
+    headerType: HeaderType = HeaderType.DEFAULT
 ) {
     val statusBarHeight = AppStatusBar.current ?: getStatusBarHeight()
     when (headerType) {
         HeaderType.DEFAULT -> {
             val height = statusBarHeight + 52.dp
-            Image(
-                source = headerBackground ?: "",
-                loading = false,
-                modifier = Modifier.fillMaxWidth().height(height),
-                options = Options(
-                    contentScale = ContentScale.FillWidth
+            Box(
+                modifier = Modifier.fillMaxWidth().height(height)
+                    .bottomBorder(
+                        strokeWidth = 1.dp,
+                        color = AppTheme.current.colors.border.default
+                    )
+            ) {
+                Box(
+                    modifier = Modifier
+                        .height(height)
+                        .fillMaxWidth()
+                        .background(
+                            Brush.linearGradient(
+                                colors = listOf(
+                                    Color(0xFFFDCACE),
+                                    Color(0x00FDCACE)
+                                ),
+                                start = Offset(0f, 0f),
+                                end = Offset(0f, with(LocalDensity.current) { 154.dp.toPx() })
+                            )
+                        )
                 )
-            )
-        }
+                if (AppTheme.current.assets.headerBackground != null) {
+                    Image(
+                        source = AppTheme.current.assets.headerBackground!!,
+                        modifier = Modifier.fillMaxWidth().height(height),
+                        options = Options(
+                            contentScale = ContentScale.FillWidth
+                        )
+                    )
+                }
+            }
-        HeaderType.EXTENDED -> {
-            Image(
-                source = headerBackground ?: "",
-                loading = false,
-                modifier = Modifier.fillMaxWidth(),
-                options = Options(
-                    contentScale = ContentScale.FillWidth
-                )
-            )
         }
-        HeaderType.SURFACE -> {
-            val height = statusBarHeight + 52.dp
+        HeaderType.EXTENDED -> {
             Box(
-                modifier = Modifier.fillMaxWidth().height(height)
-                    .background(AppTheme.current.colors.background.surface)
+                modifier = Modifier.fillMaxWidth().height(154.dp)
+                    .background(
+                        Brush.linearGradient(
+                            colors = listOf(
+                                Color(0xFFFDCACE),
+                                Color(0x00FDCACE)
+                            ),
+                            start = Offset(0f, 0f),
+                            end = Offset(0f, with(LocalDensity.current) { 154.dp.toPx() })
+                        )
+                    )
                     .bottomBorder(
-                        strokeWidth = 2.dp,
+                        strokeWidth = 1.dp,
                         color = AppTheme.current.colors.border.default
                     )
-            )
+            ) {
+                if (AppTheme.current.assets.headerBackground != null) {
+                    Image(
+                        source = AppTheme.current.assets.headerBackground!!,
+                        modifier = Modifier.fillMaxWidth().height(154.dp),
+                        options = Options(
+                            contentScale = ContentScale.FillWidth
+                        )
+                    )
+                }
+            }
         }
         else -> {
@@ -112,30 +144,22 @@ fun Header(
     headerType: HeaderType = HeaderType.DEFAULT,
     titlePosition: TitlePosition,
     title: String,
-    isBack: Boolean,
     headerRight: @Composable (() -> Unit)? = null,
-    goBack: (() -> Unit) = { },
+    goBack: (() -> Unit)? = null,
     opacity: Float? = null,
     animatedHeader: AnimatedHeader? = null,
     scrollState: Int = 0
 ) {
     val statusBarHeight = AppStatusBar.current ?: getStatusBarHeight()
-    var tintIconColor = Colors.black_01
-    var backgroundButton = Colors.black_20.copy(alpha = 0.4f)
-    if (headerType == HeaderType.SURFACE) {
-        tintIconColor = AppTheme.current.colors.text.default
-        backgroundButton = Color.Transparent
-    }
+    val tintIconColor = AppTheme.current.colors.text.default
     var colorFraction by remember { mutableStateOf(0f) }
     LaunchedEffect(scrollState) {
-        if (headerType == HeaderType.SURFACE) {
-            snapshotFlow { scrollState }
-                .map { (it / 50f).coerceIn(0f, 1f) }
-                .distinctUntilChanged()
-                .collect { fraction -> colorFraction = fraction }
-        }
+        snapshotFlow { scrollState }
+            .map { (it / 50f).coerceIn(0f, 1f) }
+            .distinctUntilChanged()
+            .collect { fraction -> colorFraction = fraction }
     }
     val tintIconColorAnim by animateColorAsState(
@@ -146,7 +170,7 @@ fun Header(
         )
     )
-    if (headerType != HeaderType.NONE) {
+    if (headerType != HeaderType.NONE || animatedHeader !== null) {
         BoxWithConstraints(
             Modifier.height(statusBarHeight + 52.dp)
                 .fillMaxWidth()
@@ -161,23 +185,19 @@ fun Header(
                 horizontalArrangement = Arrangement.SpaceBetween
             ) {
                 Box {
-                    if (isBack) {
+                    if (goBack !== null) {
                         Box(
                             modifier = Modifier
                                 .size(28.dp)
                                 .then(
-                                    if (headerType == HeaderType.SURFACE) {
-                                        Modifier.border(
-                                            0.5.dp,
-                                            Colors.black_20.copy(alpha = 0.4f),
-                                            RoundedCornerShape(100)
-                                        )
-                                    } else {
-                                        Modifier
-                                    }
+                                    Modifier.border(
+                                        0.2.dp,
+                                        Colors.black_20.copy(alpha = 0.2f),
+                                        RoundedCornerShape(14.dp)
+                                    )
                                 )
                                 .background(
-                                    backgroundButton,
+                                    Colors.black_01.copy(alpha = 0.6f),
                                     RoundedCornerShape(100)
                                 )
                                 .clickable(
@@ -191,8 +211,8 @@ fun Header(
                             contentAlignment = Alignment.Center
                         ) {
                             Icon(
-                                source = "ic_back_ios",
-                                color = if (headerType == HeaderType.SURFACE && animatedHeader !== null) tintIconColorAnim else tintIconColor,
+                                source = "arrow_back",
+                                color = if (animatedHeader !== null) tintIconColorAnim else tintIconColor,
                                 size = 20.dp,
                             )
                         }
@@ -212,7 +232,7 @@ fun Header(
                     .padding(horizontal = Spacing.M),
                 verticalAlignment = Alignment.CenterVertically,
             ) {
-                if (isBack) {
+                if (goBack !== null) {
                     Spacer(Modifier.width(40.dp))
                 }
                 Box(
@@ -223,14 +243,14 @@ fun Header(
                 ) {
                     HeaderTitle(
                         title = title,
-                        color = if (headerType == HeaderType.SURFACE && animatedHeader !== null) tintIconColorAnim else tintIconColor,
+                        color = if (animatedHeader !== null) tintIconColorAnim else tintIconColor,
                         modifier = Modifier.semantics {
                             contentDescription = "title_navigation_header"
                             testTag = "title_navigation_header"
                         }
                     )
                 }
-                if (isBack) {
+                if (goBack !== null) {
                     Spacer(Modifier.width(40.dp))
                 }
             }

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

@@ -38,7 +38,6 @@ import vn.momo.kits.platform.getStatusBarHeight
 enum class HeaderType {
     DEFAULT,
-    SURFACE,
     EXTENDED,
     NONE
 }
@@ -46,14 +45,12 @@ enum class HeaderType {
 @Composable
 fun Screen(
     backgroundColor: Color? = null,
-    headerBackground: String? = null,
-    isBack: Boolean = true,
     headerType: HeaderType = HeaderType.DEFAULT,
     verticalArrangement: Arrangement.Vertical = Arrangement.Top,
     horizontalAlignment: Alignment.Horizontal = Alignment.Start,
     title: String = "Stack",
     titlePosition: TitlePosition = TitlePosition.LEFT,
-    goBack: (() -> Unit) = { },
+    goBack: (() -> Unit)? = null,
     scrollable: Boolean = true,
     useAvoidKeyboard: Boolean = true,
     footer: @Composable (() -> Unit)? = null,
@@ -90,18 +87,14 @@ fun Screen(
     ) {
         if (animatedHeader === null) {
-            HeaderImage(
-                headerType,
-                headerBackground ?: AppTheme.current.assets.headerBackground
-            )
+            HeaderBackground(headerType)
         } else {
             Box(
-                Modifier.zIndex(5f).background(Color.White.copy(alpha = opacity))
-                    .graphicsLayer { alpha = opacity }) {
-                HeaderImage(
-                    headerType,
-                    headerBackground ?: AppTheme.current.assets.headerBackground
-                )
+                Modifier.zIndex(5f)
+                    .background(Color.White.copy(alpha = opacity))
+                    .graphicsLayer { alpha = opacity }
+            ) {
+                HeaderBackground(HeaderType.DEFAULT)
             }
         }
@@ -110,7 +103,6 @@ fun Screen(
             title = title,
             titlePosition = titlePosition,
             headerRight = headerRight,
-            isBack = isBack,
             goBack = goBack,
             opacity = opacity,
             animatedHeader = animatedHeader,
@@ -129,9 +121,7 @@ fun Screen(
         ) {
             Column(
-                modifier = if (scrollable) Modifier.weight(1f).padding(bottom = keyboardSize)
-                    .verticalScroll(scrollState) else
-                    Modifier.padding(bottom = keyboardSize),
+                modifier = if (scrollable) Modifier.weight(1f).padding(bottom = keyboardSize).verticalScroll(scrollState) else Modifier.padding(bottom = keyboardSize),
                 verticalArrangement = verticalArrangement,
                 horizontalAlignment = horizontalAlignment
             ) {
@@ -156,8 +146,7 @@ fun Screen(
                 scrollPosition = fabProps.scrollState?.value ?: scrollState.value,
                 onClick = fabProps.onClick,
                 containerColor = AppTheme.current.colors.primary,
-                bottom = fabProps.bottom
-                    ?: if (footer != null) bottomPadding + 76.dp else bottomPadding + 12.dp,
+                bottom = fabProps.bottom ?: if (footer != null) bottomPadding + 76.dp else bottomPadding + 12.dp,
                 icon = fabProps.icon,
                 iconColor = fabProps.iconColor,
                 text = fabProps.label,
@@ -186,11 +175,8 @@ fun Footer(footer: @Composable (() -> Unit)? = null, keyboardSize: Dp = 0.dp, bo
             .background(AppTheme.current.colors.background.surface)
     ) {
         Box(
-            Modifier
-                .fillMaxWidth()
-                .padding(vertical = Spacing.S, horizontal = Spacing.M)
-        )
-        {
+            Modifier.fillMaxWidth().padding(vertical = Spacing.S, horizontal = Spacing.M)
+        ) {
             footer?.invoke()
         }
     }

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

@@ -3,7 +3,6 @@ package vn.momo.kits.components
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
@@ -13,14 +12,15 @@ 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.material.ripple.rememberRipple
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
 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.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.testTag
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
@@ -221,9 +221,6 @@ fun getTypeStyle(
  * @param iconLeft [String] the icon at the left of title
  * @param title [String] title of button
  * @param loading [Boolean] used when you want to use loading animation
- * @param enabled controls the enabled state of this button. When `false`,
- *     this component will not respond to user input, and it will appear
- *     visually disabled and disabled to accessibility services.
  * @param useTintColor [Boolean] controls color of the icon.
  */
 @Composable
@@ -235,23 +232,23 @@ fun Button(
     iconLeft: String = "",
     title: String = "Button",
     loading: Boolean = false,
-    enabled: Boolean = true,
     useTintColor: Boolean = true,
     isFull: Boolean = true,
     modifier: Modifier = Modifier,
 ) {
+    val testId = "btn_${type.toString().lowercase()}_$title"
     val customModifier = if (isFull) {
         modifier
             .fillMaxWidth()
             .clip(RoundedCornerShape(size.value.radius)).clickable(
-                enabled = enabled,
+                enabled = type != ButtonType.DISABLED,
                 onClick = onClick
             )
     } else {
         modifier
             .clip(RoundedCornerShape(size.value.radius)).clickable(
-                enabled = enabled,
+                enabled = type != ButtonType.DISABLED,
                 onClick = onClick
             )
     }
@@ -261,7 +258,10 @@ fun Button(
             .padding(horizontal = size.value.padding)
             .defaultMinSize(
                 minWidth = size.value.width
-            ).height(size.value.height),
+            ).height(size.value.height)
+            .semantics {
+                contentDescription = testId; testTag = testId
+            },
         horizontalArrangement = Arrangement.Center,
         verticalAlignment = Alignment.CenterVertically,
     ) {

package/compose/src/commonMain/kotlin/vn/momo/kits/components/IconButton.kt CHANGED Viewed

@@ -110,7 +110,7 @@ fun IconButton(
             .then(getIconStyle(type))
             .clip(RoundedCornerShape(size.value.radius))
             .clickable(
-                enabled = type == ButtonType.DISABLED,
+                enabled = type != ButtonType.DISABLED,
                 onClick = onClick
             ),
         contentAlignment = Alignment.Center

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

@@ -36,7 +36,6 @@ fun Image(
     options: Options? = null,
     loading: Boolean = true,
 ) {
-    modifier.semantics {contentDescription = "img|$source"; testTag = "img|$source"}
     var imageOptions = Options()
     var imageState by remember { mutableStateOf(ImageState.Loading) }
@@ -51,7 +50,7 @@ fun Image(
     Box(modifier = modifier) {
         AsyncImage(
-            modifier = modifier,
+            modifier = Modifier.matchParentSize().semantics {contentDescription = "img|$source"; testTag = "img|$source"},
             model = source,
             contentDescription = null,
             contentScale = imageOptions.contentScale,

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

@@ -29,6 +29,9 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.testTag
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.KeyboardType
@@ -198,7 +201,11 @@ fun Input(
         iconTintColor = disabledColor
     }
-    Column {
+    val testId = if (disabled) "input_${floatingValue}_disabled" else "input_$floatingValue"
+    Column(modifier = Modifier.semantics {
+        contentDescription = testId; testTag = testId
+    }) {
         BasicTextField(
             enabled = !disabled,
             readOnly = readOnly,

package/compose/src/commonMain/kotlin/vn/momo/kits/components/InputDropDown.kt CHANGED Viewed

@@ -21,6 +21,9 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.testTag
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -51,7 +54,7 @@ fun InputDropDown(
     loading: Boolean = false,
     required: Boolean = false,
 ) {
-    var isFocused by remember { mutableStateOf(false) }
+    val isFocused by remember { mutableStateOf(false) }
     val disabledColor = AppTheme.current.colors.text.disable
     var textColor = AppTheme.current.colors.text.default
@@ -72,8 +75,11 @@ fun InputDropDown(
         iconTintColor = disabledColor
     }
+    val testId = if (disabled) "input_${floatingValue}_disabled" else "input_$floatingValue"
-    Column(modifier = Modifier.clickable(enabled = !disabled, onClick = onPress)) {
+    Column(modifier = Modifier.clickable(enabled = !disabled, onClick = onPress).semantics {
+        contentDescription = testId; testTag = testId
+    }) {
         Box {
             if (floatingValue.isNotEmpty() || floatingIcon.isNotEmpty()) {
                 Box(

package/compose/src/commonMain/kotlin/vn/momo/kits/components/InputMoney.kt CHANGED Viewed

@@ -27,6 +27,9 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.testTag
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.KeyboardType
@@ -104,8 +107,11 @@ fun InputMoney(
         iconTintColor = disabledColor
     }
+    val testId = if (disabled) "input_${floatingValue}_disabled" else "input_$floatingValue"
-    Column {
+    Column(modifier =  Modifier.semantics {
+        contentDescription = testId; testTag = testId
+    }) {
         BasicTextField(
             enabled = !disabled,
             singleLine = true,

package/compose/src/commonMain/kotlin/vn/momo/kits/const/Theme.kt CHANGED Viewed

@@ -106,7 +106,7 @@ val defaultTheme = Theme(
     ),
     font = "SFProText",
     assets = ThemeAssets(
-        headerBackground = "https://static.momocdn.net/app/img/app/img/header-background.png"
+        headerBackground = null
     )
 )
@@ -168,6 +168,5 @@ val darkTheme = Theme(
 val AppTheme = staticCompositionLocalOf { defaultTheme }
-val AppStatusBar = staticCompositionLocalOf<Dp?> {
-   null
-}
+val AppStatusBar = staticCompositionLocalOf<Dp?> { null }

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

@@ -1317,5 +1317,7 @@ 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",
+    "help_center" to "https://static.momocdn.net/app/img/kits/ic_money_bag_2.png",
+    "arrow_back" to "https://static.momocdn.net/app/img/kits/arrow-back.png",
 )

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.89.30-beta.4",
+  "version": "0.89.30-beta.6",
   "private": false,
   "dependencies": {},
   "devDependencies": {},

package/compose/src/commonMain/kotlin/vn/momo/kits/utils/ImageLoader.kt DELETED Viewed

@@ -1,26 +0,0 @@
-package vn.momo.kits.utils
-import androidx.compose.runtime.Composable
-import coil3.ImageLoader
-import coil3.annotation.ExperimentalCoilApi
-import coil3.compose.setSingletonImageLoaderFactory
-import coil3.disk.DiskCache
-import coil3.memory.MemoryCache
-import coil3.request.CachePolicy
-import coil3.request.crossfade
-import okio.FileSystem
-@OptIn(ExperimentalCoilApi::class)
-@Composable
-fun setImageLoaderSingleton() {
-    setSingletonImageLoaderFactory { context ->
-        ImageLoader.Builder(context).memoryCachePolicy(CachePolicy.ENABLED).memoryCache {
-            MemoryCache.Builder().maxSizePercent(context, 0.3).strongReferencesEnabled(true).build()
-        }.diskCachePolicy(CachePolicy.ENABLED).networkCachePolicy(CachePolicy.ENABLED).diskCache {
-            DiskCache.Builder().directory(FileSystem.SYSTEM_TEMPORARY_DIRECTORY / "coil3_image_cache")
-                .maxSizeBytes(1024L * 1024 * 1024)
-                .build()
-        }.crossfade(false).build()
-    }
-}