@momo-kits/native-kits 0.89.30-beta.7 → 0.89.30-rc.10

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

@@ -9,6 +9,7 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -24,12 +25,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 +59,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.fillMaxSize(),
+                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 -> {
@@ -144,22 +111,30 @@ fun Header(
     headerType: HeaderType = HeaderType.DEFAULT,
     titlePosition: TitlePosition,
     title: String,
+    isBack: Boolean,
     headerRight: @Composable (() -> Unit)? = null,
-    goBack: (() -> Unit)? = null,
+    goBack: (() -> Unit) = { },
     opacity: Float? = null,
     animatedHeader: AnimatedHeader? = null,
     scrollState: Int = 0
 ) {
     val statusBarHeight = AppStatusBar.current ?: getStatusBarHeight()
-    val tintIconColor = AppTheme.current.colors.text.default
+    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(
@@ -170,7 +145,7 @@ fun Header(
         )
     )
 
-    if (headerType != HeaderType.NONE || animatedHeader !== null) {
+    if (headerType != HeaderType.NONE) {
         BoxWithConstraints(
             Modifier.height(statusBarHeight + 52.dp)
                 .fillMaxWidth()
@@ -185,19 +160,23 @@ fun Header(
                 horizontalArrangement = Arrangement.SpaceBetween
             ) {
                 Box {
-                    if (goBack !== null) {
+                    if (isBack) {
                         Box(
                             modifier = Modifier
                                 .size(28.dp)
                                 .then(
-                                    Modifier.border(
-                                        0.2.dp,
-                                        Colors.black_20.copy(alpha = 0.2f),
-                                        RoundedCornerShape(14.dp)
-                                    )
+                                    if (headerType == HeaderType.SURFACE) {
+                                        Modifier.border(
+                                            0.5.dp,
+                                            Colors.black_20.copy(alpha = 0.4f),
+                                            RoundedCornerShape(100)
+                                        )
+                                    } else {
+                                        Modifier
+                                    }
                                 )
                                 .background(
-                                    Colors.black_01.copy(alpha = 0.6f),
+                                    backgroundButton,
                                     RoundedCornerShape(100)
                                 )
                                 .clickable(
@@ -205,14 +184,13 @@ fun Header(
                                 )
                                 .padding(Spacing.XS)
                                 .semantics {
-                                    contentDescription = "btn_navigation_back"; testTag =
-                                    "btn_navigation_back"
+                                    testTag = "btn_navigation_back"
                                 },
                             contentAlignment = Alignment.Center
                         ) {
                             Icon(
-                                source = "arrow_back",
-                                color = if (animatedHeader !== null) tintIconColorAnim else tintIconColor,
+                                source = "ic_back_ios",
+                                color = if (headerType == HeaderType.SURFACE && animatedHeader !== null) tintIconColorAnim else tintIconColor,
                                 size = 20.dp,
                             )
                         }
@@ -232,7 +210,7 @@ fun Header(
                     .padding(horizontal = Spacing.M),
                 verticalAlignment = Alignment.CenterVertically,
             ) {
-                if (goBack !== null) {
+                if (isBack) {
                     Spacer(Modifier.width(40.dp))
                 }
                 Box(
@@ -243,14 +221,14 @@ 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"
+                            contentDescription = title
                             testTag = "title_navigation_header"
                         }
                     )
                 }
-                if (goBack !== null) {
+                if (isBack) {
                     Spacer(Modifier.width(40.dp))
                 }
             }

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

@@ -1,6 +1,7 @@
 package vn.momo.kits.application
 
 import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.ScrollState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.layout.Arrangement
@@ -24,6 +25,8 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.layout.LayoutCoordinates
+import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -33,11 +36,13 @@ import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Spacing
+import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.shadow
 import vn.momo.kits.platform.getStatusBarHeight
 
 enum class HeaderType {
     DEFAULT,
+    SURFACE,
     EXTENDED,
     NONE
 }
@@ -45,13 +50,17 @@ enum class HeaderType {
 @Composable
 fun Screen(
     backgroundColor: Color? = null,
-    isBack: Boolean = true,    headerType: HeaderType = HeaderType.DEFAULT,
+    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)? = null,
+    goBack: (() -> Unit) = { },
     scrollable: Boolean = true,
+    scrollState: ScrollState = rememberScrollState(),
+    onContentLayout: ((LayoutCoordinates) -> Unit)? = null,
     useAvoidKeyboard: Boolean = true,
     footer: @Composable (() -> Unit)? = null,
     headerRight: @Composable (() -> Unit)? = null,
@@ -72,7 +81,6 @@ fun Screen(
 
     val indicator = WindowInsets.systemBars.asPaddingValues().calculateBottomPadding()
     val bottomPadding = min(indicator, 21.dp)
-    val scrollState = rememberScrollState()
 
     val opacity by animateFloatAsState(
         targetValue = ((scrollState.value / 114f)).coerceIn(0f, 1f)
@@ -87,14 +95,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.DEFAULT)
+                Modifier.zIndex(5f).background(Color.White.copy(alpha = opacity))
+                    .graphicsLayer { alpha = opacity }) {
+                HeaderImage(
+                    headerType,
+                    headerBackground ?: AppTheme.current.assets.headerBackground
+                )
             }
         }
 
@@ -103,6 +115,7 @@ fun Screen(
             title = title,
             titlePosition = titlePosition,
             headerRight = headerRight,
+            isBack = isBack,
             goBack = goBack,
             opacity = opacity,
             animatedHeader = animatedHeader,
@@ -121,7 +134,13 @@ fun Screen(
         ) {
 
             Column(
-                modifier = if (scrollable) Modifier.weight(1f).padding(bottom = keyboardSize).verticalScroll(scrollState) else Modifier.padding(bottom = keyboardSize),
+                modifier = Modifier
+                    .conditional(scrollable) { weight(1f) }
+                    .padding(bottom = keyboardSize)
+                    .conditional(onContentLayout != null) {
+                        onGloballyPositioned(onContentLayout ?: {})
+                    }
+                    .conditional(scrollable) { verticalScroll(scrollState) },
                 verticalArrangement = verticalArrangement,
                 horizontalAlignment = horizontalAlignment
             ) {
@@ -146,7 +165,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,
@@ -175,8 +195,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/Button.kt

@@ -260,7 +260,7 @@ fun Button(
                 minWidth = size.value.width
             ).height(size.value.height)
             .semantics {
-                contentDescription = testId; testTag = testId
+                contentDescription = title; testTag = testId
             },
         horizontalArrangement = Arrangement.Center,
         verticalAlignment = Alignment.CenterVertically,

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

@@ -204,7 +204,7 @@ fun Input(
     val testId = if (disabled) "input_${floatingValue}_disabled" else "input_$floatingValue"
 
     Column(modifier = Modifier.semantics {
-        contentDescription = testId; testTag = testId
+        contentDescription = floatingValue; testTag = testId
     }) {
         BasicTextField(
             enabled = !disabled,

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

@@ -17,7 +17,6 @@ import androidx.compose.runtime.MutableState
 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.graphics.Color
@@ -78,7 +77,7 @@ fun InputDropDown(
     val testId = if (disabled) "input_${floatingValue}_disabled" else "input_$floatingValue"
 
     Column(modifier = Modifier.clickable(enabled = !disabled, onClick = onPress).semantics {
-        contentDescription = testId; testTag = testId
+        contentDescription = floatingValue; testTag = testId
     }) {
         Box {
             if (floatingValue.isNotEmpty() || floatingIcon.isNotEmpty()) {

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

@@ -110,7 +110,7 @@ fun InputMoney(
     val testId = if (disabled) "input_${floatingValue}_disabled" else "input_$floatingValue"
 
     Column(modifier =  Modifier.semantics {
-        contentDescription = testId; testTag = testId
+        contentDescription = floatingValue; testTag = testId
     }) {
         BasicTextField(
             enabled = !disabled,

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

@@ -97,7 +97,7 @@ fun PopupNotify(
     }
 
     Box(Modifier.semantics {
-        contentDescription = "popup_notify"; testTag = "popup_notify"
+        contentDescription = title; testTag = "popup_notify"
     }, contentAlignment = Alignment.TopEnd) {
         Column(
             modifier = Modifier
@@ -166,7 +166,7 @@ fun PopupNotify(
                 color = AppTheme.current.colors.background.surface,
                 size = 14.dp,
                 modifier = Modifier.semantics {
-                    contentDescription = "ic_popup_close"; testTag = "ic_popup_close"
+                    testTag = "ic_popup_close"
                 }
             )
         }
@@ -235,7 +235,7 @@ fun renderRow(
                     title = it.title,
                     type = ButtonType.TEXT,
                     modifier = Modifier.semantics {
-                        contentDescription = "btn_popup_cancel"; testTag = "btn_popup_cancel"
+                        contentDescription = it.title; testTag = "btn_popup_cancel"
                     }
                 )
             }
@@ -250,7 +250,7 @@ fun renderRow(
                 },
                 title = primary?.title ?: "",
                 modifier = Modifier.semantics {
-                    contentDescription = "btn_popup_allow"; testTag = "btn_popup_allow"
+                    contentDescription = primary?.title ?: ""; testTag = "btn_popup_allow"
                 }
             )
         }
@@ -273,7 +273,7 @@ fun renderColumn(
             },
             title = primary?.title ?: "",
             modifier = Modifier.semantics {
-                contentDescription = "btn_popup_allow"; testTag = "btn_popup_allow"
+                contentDescription = primary?.title ?: ""; testTag = "btn_popup_allow"
             }
         )
         secondary?.let {
@@ -288,7 +288,7 @@ fun renderColumn(
                     title = it.title,
                     type = ButtonType.TEXT,
                     modifier = Modifier.semantics {
-                        contentDescription = "btn_popup_cancel"; testTag = "btn_popup_cancel"
+                        contentDescription = it.title; testTag = "btn_popup_cancel"
                     }
                 )
             }

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

@@ -17,7 +17,6 @@ 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.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTag
 import androidx.compose.ui.unit.dp
@@ -30,7 +29,7 @@ fun PromotionPopup(
     source: String = "",
     onClose: (() -> Unit) = {},
 ) {
-    Column(Modifier.semantics { contentDescription = "popup_notify"; testTag = "popup_notify" }) {
+    Column(Modifier.semantics { testTag = "popup_notify" }) {
         if (source.isNotEmpty()) {
             Image(
                 source = source,
@@ -69,7 +68,7 @@ fun PromotionPopup(
                     color = AppTheme.current.colors.background.surface,
                     size = 14.dp,
                     modifier = Modifier.semantics {
-                        contentDescription = "ic_popup_close"; testTag = "ic_popup_close"
+                        testTag = "ic_popup_close"
                     }
                 )
             }

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/const/Typography.kt

@@ -58,6 +58,16 @@ fun getFontFamily(fontFamily: String, fontWeight: FontWeight? = FontWeight.Norma
         "MoMoSignature-700" to "momosignature.otf",
         "MoMoSignature-800" to "momosignature.otf",
         "MoMoSignature-900" to "momosignature.otf",
+
+        "MoMoTrustDisplay-100" to "momotrustdisplay.otf",
+        "MoMoTrustDisplay-200" to "momotrustdisplay.otf",
+        "MoMoTrustDisplay-300" to "momotrustdisplay.otf",
+        "MoMoTrustDisplay-400" to "momotrustdisplay.otf",
+        "MoMoTrustDisplay-500" to "momotrustdisplay.otf",
+        "MoMoTrustDisplay-600" to "momotrustdisplay.otf",
+        "MoMoTrustDisplay-700" to "momotrustdisplay.otf",
+        "MoMoTrustDisplay-800" to "momotrustdisplay.otf",
+        "MoMoTrustDisplay-900" to "momotrustdisplay.otf",
     )
     val font = fontMap[key] ?: "sfprotext_regular.ttf"
     return getFont(font)

package/compose/src/commonMain/kotlin/vn/momo/kits/modifier/Conditional.kt

@@ -0,0 +1,11 @@
+package vn.momo.kits.modifier
+
+import androidx.compose.ui.Modifier
+
+fun Modifier.conditional(condition : Boolean, modifier : Modifier.() -> Modifier) : Modifier {
+    return if (condition) {
+        then(modifier(Modifier))
+    } else {
+        this
+    }
+}

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

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

package/package.json

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