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

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

@@ -4,6 +4,7 @@ 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
@@ -15,6 +16,7 @@ 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
@@ -24,12 +26,9 @@ 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
@@ -61,76 +60,45 @@ data class AnimatedHeader(
 )
 
 @Composable
-fun HeaderBackground(
-    headerType: HeaderType = HeaderType.DEFAULT
+fun HeaderImage(
+    headerType: HeaderType = HeaderType.DEFAULT,
+    headerBackground: String?,
 ) {
     val statusBarHeight = AppStatusBar.current ?: getStatusBarHeight()
     when (headerType) {
         HeaderType.DEFAULT -> {
             val height = statusBarHeight + 52.dp
-            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() })
-                            )
-                        )
+            Image(
+                source = headerBackground ?: "",
+                loading = false,
+                modifier = Modifier.fillMaxWidth().height(height),
+                options = Options(
+                    contentScale = ContentScale.FillWidth
                 )
-                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
             Box(
-                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() })
-                        )
-                    )
+                modifier = Modifier.fillMaxWidth().height(height)
+                    .background(AppTheme.current.colors.background.surface)
                     .bottomBorder(
-                        strokeWidth = 1.dp,
+                        strokeWidth = 2.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 -> {
@@ -152,16 +120,22 @@ fun Header(
     scrollState: Int = 0
 ) {
     val statusBarHeight = AppStatusBar.current ?: getStatusBarHeight()
-    val tintIconColor = AppTheme.current.colors.text.default
-    val backgroundButton = Colors.black_01.copy(alpha = 0.2f)
+    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
+    }
 
     var colorFraction by remember { mutableStateOf(0f) }
 
     LaunchedEffect(scrollState) {
-        snapshotFlow { scrollState }
-            .map { (it / 50f).coerceIn(0f, 1f) }
-            .distinctUntilChanged()
-            .collect { fraction -> colorFraction = fraction }
+        if (headerType == HeaderType.SURFACE) {
+            snapshotFlow { scrollState }
+                .map { (it / 50f).coerceIn(0f, 1f) }
+                .distinctUntilChanged()
+                .collect { fraction -> colorFraction = fraction }
+        }
     }
 
     val tintIconColorAnim by animateColorAsState(
@@ -192,11 +166,15 @@ fun Header(
                             modifier = Modifier
                                 .size(28.dp)
                                 .then(
-                                    Modifier.border(
-                                        0.5.dp,
-                                        Colors.black_20.copy(alpha = 0.4f),
-                                        RoundedCornerShape(100)
-                                    )
+                                    if (headerType == HeaderType.SURFACE) {
+                                        Modifier.border(
+                                            0.5.dp,
+                                            Colors.black_20.copy(alpha = 0.4f),
+                                            RoundedCornerShape(100)
+                                        )
+                                    } else {
+                                        Modifier
+                                    }
                                 )
                                 .background(
                                     backgroundButton,
@@ -214,7 +192,7 @@ fun Header(
                         ) {
                             Icon(
                                 source = "ic_back_ios",
-                                color = if (animatedHeader !== null) tintIconColorAnim else tintIconColor,
+                                color = if (headerType == HeaderType.SURFACE && animatedHeader !== null) tintIconColorAnim else tintIconColor,
                                 size = 20.dp,
                             )
                         }
@@ -245,7 +223,7 @@ fun Header(
                 ) {
                     HeaderTitle(
                         title = title,
-                        color = if (animatedHeader !== null) tintIconColorAnim else tintIconColor,
+                        color = if (headerType == HeaderType.SURFACE && animatedHeader !== null) tintIconColorAnim else tintIconColor,
                         modifier = Modifier.semantics {
                             contentDescription = "title_navigation_header"
                             testTag = "title_navigation_header"

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

@@ -38,6 +38,7 @@ import vn.momo.kits.platform.getStatusBarHeight
 
 enum class HeaderType {
     DEFAULT,
+    SURFACE,
     EXTENDED,
     NONE
 }
@@ -45,6 +46,7 @@ enum class HeaderType {
 @Composable
 fun Screen(
     backgroundColor: Color? = null,
+    headerBackground: String? = null,
     isBack: Boolean = true,
     headerType: HeaderType = HeaderType.DEFAULT,
     verticalArrangement: Arrangement.Vertical = Arrangement.Top,
@@ -88,14 +90,18 @@ fun Screen(
     ) {
 
         if (animatedHeader === null) {
-            HeaderBackground(headerType)
+            HeaderImage(
+                headerType,
+                headerBackground ?: AppTheme.current.assets.headerBackground
+            )
         } else {
             Box(
-                Modifier.zIndex(5f)
-                    .background(Color.White.copy(alpha = opacity))
-                    .graphicsLayer { alpha = opacity }
-            ) {
-                HeaderBackground(headerType)
+                Modifier.zIndex(5f).background(Color.White.copy(alpha = opacity))
+                    .graphicsLayer { alpha = opacity }) {
+                HeaderImage(
+                    headerType,
+                    headerBackground ?: AppTheme.current.assets.headerBackground
+                )
             }
         }
 
@@ -123,7 +129,9 @@ 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
             ) {
@@ -148,7 +156,8 @@ 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,
@@ -177,8 +186,11 @@ 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/CheckBox.kt

@@ -33,7 +33,6 @@ fun CheckBox(
     var backgroundColor = AppTheme.current.colors.background.surface
     val iconSource = if (indeterminate) "minus" else "ic_checked"
 
-
     if (checked) {
         borderColor = AppTheme.current.colors.primary
         backgroundColor = AppTheme.current.colors.primary

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

@@ -1,17 +1,13 @@
 package vn.momo.kits.components
 
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
-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.unit.Dp
 import androidx.compose.ui.unit.dp
-import coil3.compose.AsyncImage
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.utils.Icons
 
@@ -25,16 +21,16 @@ fun Icon(
     val icon = if (source.contains("https")) {
         source
     } else {
-        Icons[source]
+        Icons[source] ?: ""
     }
-    Box(modifier.size(size), contentAlignment = Alignment.Center) {
-        AsyncImage(
-            modifier = Modifier.fillMaxSize(),
-            model = icon,
-            contentDescription = null,
+    Image(
+        modifier = modifier.size(size),
+        source = icon,
+        loading = false,
+        options = Options(
             contentScale = ContentScale.Fit,
             colorFilter = color?.let { ColorFilter.tint(it) }
-        )
-    }
+        ),
+    )
 }
 

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

@@ -15,7 +15,6 @@ import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTag
-import androidx.compose.ui.unit.dp
 import coil3.compose.AsyncImage
 import vn.momo.kits.const.AppTheme
 

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

@@ -123,7 +123,10 @@ fun TrustBanner(
             modifier = Modifier
                 .width(64.dp)
                 .height(64.dp)
-                .padding(end = 8.dp)
+                .padding(end = 8.dp),
+            options = Options(
+                contentScale = ContentScale.Fit,
+            )
         )
         Column {
             Text(
@@ -141,11 +144,17 @@ fun TrustBanner(
                             .padding(end = 4.dp)
                             .width(52.dp)
                             .height(20.dp)
+                        ,options = Options(
+                            contentScale = ContentScale.Fit,
+                        )
                     )
                     Image(
                         source = trustBanner.sslImage, modifier = Modifier
                             .width(52.dp)
-                            .height(20.dp)
+                            .height(20.dp),
+                        options = Options(
+                            contentScale = ContentScale.Fit,
+                        )
                     )
                 }
                 Row(

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

@@ -106,7 +106,7 @@ val defaultTheme = Theme(
     ),
     font = "SFProText",
     assets = ThemeAssets(
-        headerBackground = null
+        headerBackground = "https://static.momocdn.net/app/img/app/img/header-background.png"
     )
 )
 
@@ -168,5 +168,6 @@ 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/ImageLoader.kt

@@ -0,0 +1,26 @@
+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()
+    }
+}

package/package.json

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