@momo-kits/native-kits 0.89.33 → 0.110.1-beta.10

package/compose/build.gradle.kts

@@ -3,6 +3,7 @@ plugins {
     alias(libs.plugins.jetbrains.kotlin.multiplatform)
     alias(libs.plugins.compose)
     alias(libs.plugins.kotlin.compose.compiler)
+    kotlin("plugin.serialization")
     id("maven-publish")
 }
 
@@ -39,6 +40,7 @@ kotlin {
                 implementation(libs.coil.multiplatform.compose)
                 implementation(libs.coil.multiplatform.core)
                 implementation(libs.coil.multiplatform.network.ktor)
+                implementation(libs.jetbrains.serialization.json)
             }
         }
         val androidMain by getting {

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

@@ -50,7 +50,6 @@ import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
-import vn.momo.kits.modifier.shadow
 import vn.momo.kits.platform.getStatusBarHeight
 import vn.momo.kits.utils.bottomBorder
 
@@ -67,7 +66,6 @@ data class AnimatedHeader(
 @Composable
 fun HeaderBackground(
     headerType: HeaderType = HeaderType.DEFAULT,
-    useShadow: Boolean? = true,
     scrollState: Int
 ) {
     val statusBarHeight = AppStatusBar.current ?: getStatusBarHeight()
@@ -75,11 +73,19 @@ fun HeaderBackground(
         targetValue = (1 - (scrollState / 200f)).coerceIn(0f, 1f),
     )
 
+    val backgroundColor = if (scrollState == 0) {
+        Color.Transparent
+    } else {
+        AppTheme.current.colors.background.surface
+    }
+
+
     when (headerType) {
         HeaderType.DEFAULT -> {
             val height = statusBarHeight + 52.dp
             Box(
                 modifier = Modifier.fillMaxWidth().height(height)
+                    .background(backgroundColor)
                     .bottomBorder(
                         strokeWidth = 1.dp,
                         color = AppTheme.current.colors.border.default
@@ -103,6 +109,7 @@ fun HeaderBackground(
                 )
                 if (AppTheme.current.assets.headerBackground != null) {
                     Image(
+                        loading = false,
                         source = AppTheme.current.assets.headerBackground!!,
                         modifier = Modifier.fillMaxWidth().height(height),
                         options = Options(
@@ -115,6 +122,7 @@ fun HeaderBackground(
         }
 
         HeaderType.EXTENDED -> {
+
             Box(
                 modifier = Modifier.fillMaxWidth().height(154.dp)
                     .alpha(opacityAni)
@@ -130,31 +138,28 @@ fun HeaderBackground(
                     )
             ) {
                 if (AppTheme.current.assets.headerBackground != null) {
-                    Image(
-                        source = AppTheme.current.assets.headerBackground!!,
-                        modifier = Modifier.fillMaxWidth().height(154.dp),
-                        options = Options(
-                            contentScale = ContentScale.FillWidth
+                    Box(
+                        modifier = Modifier.fillMaxWidth()
+                            .background(backgroundColor)
+                    ) {
+                        Image(
+                            loading = false,
+                            source = AppTheme.current.assets.headerBackground!!,
+                            modifier = Modifier.fillMaxWidth().height(154.dp),
+                            options = Options(
+                                contentScale = ContentScale.FillWidth
+                            )
                         )
-                    )
+                    }
                 }
             }
         }
+
         else -> {
             Box(modifier = Modifier.fillMaxWidth())
         }
     }
-    Box(
-        modifier = Modifier.fillMaxWidth().height(statusBarHeight + 52.dp)
-            .alpha(1 - opacityAni)
-            .background(Colors.black_01)
-            .then(
-                if (useShadow == true) Modifier.shadow() else Modifier.bottomBorder(
-                    1.dp,
-                    Colors.black_04
-                )
-            )
-    )
+
 }
 
 @Composable
@@ -163,10 +168,9 @@ fun Header(
     titlePosition: TitlePosition,
     title: String,
     headerRight: @Composable (() -> Unit)? = null,
-    goBack: (() -> Unit)?,
+    goBack: (() -> Unit)? = null,
     opacity: Float? = null,
     animatedHeader: AnimatedHeader? = null,
-    useSearchInput: Boolean? = false,
     scrollState: Int = 0,
     inputSearchProps: InputSearchProps?
 ) {
@@ -206,7 +210,7 @@ fun Header(
                 horizontalArrangement = Arrangement.SpaceBetween
             ) {
                 Box {
-                    if (goBack !== null) {
+                    if (goBack != null) {
                         Box(
                             modifier = Modifier
                                 .size(28.dp)
@@ -238,12 +242,11 @@ fun Header(
                         }
                     }
                 }
-                if (useSearchInput == false) {
-                    Box(Modifier.graphicsLayer {
-                        alpha = if (animatedHeader !== null) opacity ?: 1f else 1f
-                    }) {
-                        headerRight?.invoke()
-                    }
+
+                Box(Modifier.graphicsLayer {
+                    alpha = if (animatedHeader !== null) opacity ?: 1f else 1f
+                }) {
+                    headerRight?.invoke()
                 }
             }
 
@@ -254,13 +257,12 @@ fun Header(
                     .padding(horizontal = Spacing.M),
                 verticalAlignment = Alignment.CenterVertically,
             ) {
-                if (goBack !== null) {
+                if (goBack != null && titlePosition == TitlePosition.LEFT) {
                     Spacer(Modifier.width(40.dp))
                 }
-                if (useSearchInput == true && inputSearchProps != null) {
+                if (inputSearchProps != null) {
                     InputSearch(inputSearchProps = inputSearchProps.copy(backgroundColor = backgroundSearch))
-                }
-                else{
+                } else {
                     Box(
                         Modifier.weight(1f).graphicsLayer {
                             alpha = if (animatedHeader !== null) opacity ?: 1f else 1f
@@ -292,7 +294,7 @@ fun HeaderTitle(
         modifier = Modifier.then(modifier).zIndex(1f),
         text = title,
         textAlign = textAlign,
-        style = Typography.headerDefault,
+        style = Typography.actionS,
         color = color,
         maxLines = 1
     )

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

@@ -1,64 +1,77 @@
 package vn.momo.kits.application
 
-import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.asPaddingValues
-import androidx.compose.foundation.layout.systemBars
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
 import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.unit.Dp
+import kotlinx.coroutines.launch
+import kotlinx.serialization.json.Json
+import kotlinx.serialization.json.jsonObject
+import kotlinx.serialization.json.jsonPrimitive
 import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Theme
+import vn.momo.kits.const.ThemeAssets
 import vn.momo.kits.const.defaultTheme
 import vn.momo.kits.platform.disableOverscroll
 import vn.momo.kits.platform.getStatusBarHeight
 
-val AppNavigator = staticCompositionLocalOf<Navigator> {
-    error("no navigator provided!")
-}
-
-class Navigator {
-    fun push(content: @Composable () -> Unit) {
-    }
-
-    fun present(content: @Composable () -> Unit) {
-
-    }
-
-    fun reset(content: @Composable () -> Unit) {
-
-    }
-
-    fun pop() {
-    }
+val PlatformApi = staticCompositionLocalOf<Any?> { null }
 
-    fun replace(content: @Composable () -> Unit) {
-    }
-
-    fun popToTop() {
-    }
-
-    fun showModal(
-        onClose: () -> Unit = {},
-        canBackgroundClose: Boolean = true,
-        content: @Composable () -> Unit,
-    ) {
-    }
-
-    fun showBottomSheet(content: @Composable () -> Unit) {
-    }
+interface ComposeApi {
+    fun request(funcName: String, params: String?): String
+    fun request(funcName: String, params: String?, onResponse: ((String) -> Unit)?): String
+    fun requestCallback(funcName: String, params: String?, onResponse: ((String) -> Unit)?)
+    fun removeCallback(id: String)
 }
 
 @Composable
 fun ApplicationContainer(
     theme: Theme = defaultTheme,
-    content: @Composable () -> Unit,
+    composeApi: ComposeApi? = null,
+    statusBarHeight: Dp? = AppStatusBar.current ?: getStatusBarHeight(),
+    content: @Composable () -> Unit
 ) {
+    var appTheme by remember { mutableStateOf(theme) }
+    val coroutineScope = rememberCoroutineScope()
+
+    LaunchedEffect(Unit) {
+        try {
+            composeApi?.request("getConfig", "DESIGN_SYSTEM") {
+                val json = Json { ignoreUnknownKeys = true }
+                val response = json.parseToJsonElement(it).jsonObject["response"]
+                val headerBar = response
+                    ?.jsonObject
+                    ?.get("headerBar")
+                    ?.jsonPrimitive
+                    ?.content
+                if (headerBar != null && appTheme.assets.headerBackground == null) {
+                    coroutineScope.launch {
+                        appTheme = appTheme.copy(
+                            assets = ThemeAssets(
+                                headerBackground = headerBar
+                            )
+                        )
+                    }
+                }
+            }
+        }
+        catch (e: Exception) {
+            print("@@ == NavigationContainer fetch config error $e")
+        }
+    }
+
     disableOverscroll()
     CompositionLocalProvider(
-        AppTheme provides theme,
-        AppNavigator provides Navigator(),
-        AppStatusBar provides getStatusBarHeight(),
+        AppTheme provides appTheme,
+        PlatformApi provides composeApi,
+        AppStatusBar provides statusBarHeight,
     ) {
         content()
     }

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

@@ -56,7 +56,7 @@ fun Screen(
     horizontalAlignment: Alignment.Horizontal = Alignment.Start,
     title: String = "Stack",
     titlePosition: TitlePosition = TitlePosition.LEFT,
-    goBack: (() -> Unit) = { },
+    goBack: (() -> Unit)? = null,
     scrollable: Boolean = true,
     scrollState: ScrollState = rememberScrollState(),
     onContentLayout: ((LayoutCoordinates) -> Unit)? = null,
@@ -66,8 +66,6 @@ fun Screen(
     fabProps: FabProps? = null,
     animatedHeader: AnimatedHeader? = null,
     layoutOffset: Dp = 56.dp,
-    useShadow: Boolean? = true,
-    useSearchInput: Boolean? = false,
     inputSearchProps: InputSearchProps? = null,
     content: @Composable () -> Unit,
 ) {
@@ -89,7 +87,9 @@ fun Screen(
     )
 
     val headerAnimated =
-        @Composable { animatedHeader?.composable?.invoke(scrollState.value) }
+        @Composable {
+            animatedHeader?.composable?.invoke(scrollState.value)
+        }
 
     Box(
         Modifier.fillMaxSize()
@@ -97,17 +97,19 @@ fun Screen(
     ) {
 
         if (animatedHeader === null) {
-            HeaderBackground(headerType = headerType, scrollState = scrollState.value)
+            HeaderBackground(
+                headerType = headerType,
+                scrollState = scrollState.value,
+            )
         } else {
             Box(
-                Modifier.zIndex(5f)
+                Modifier.zIndex(2f)
                     .background(Color.White.copy(alpha = opacity))
                     .graphicsLayer { alpha = opacity }
             ) {
                 HeaderBackground(
                     headerType = headerType,
-                    useShadow = useShadow,
-                    scrollState = scrollState.value
+                    scrollState = scrollState.value,
                 )
             }
         }
@@ -120,7 +122,6 @@ fun Screen(
             goBack = goBack,
             opacity = opacity,
             animatedHeader = animatedHeader,
-            useSearchInput = useSearchInput,
             inputSearchProps = inputSearchProps,
             scrollState = scrollState.value
         )

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

@@ -1,13 +1,17 @@
 package vn.momo.kits.components
 
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 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 vn.momo.kits.const.AppTheme
 import vn.momo.kits.utils.Icons
 
@@ -23,14 +27,14 @@ fun Icon(
     } else {
         Icons[source] ?: ""
     }
-    Image(
-        modifier = modifier.size(size),
-        source = icon,
-        loading = false,
-        options = Options(
+    Box(modifier = modifier.size(size).semantics {contentDescription = "img|$icon"}) {
+        AsyncImage(
+            modifier = Modifier.matchParentSize(),
+            model = icon,
+            contentDescription = null,
             contentScale = ContentScale.Fit,
-            colorFilter = color?.let { ColorFilter.tint(it) }
-        ),
-    )
+            colorFilter = color?.let { ColorFilter.tint(it) },
+        )
+    }
 }
 

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

@@ -15,6 +15,7 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.runtime.Composable
@@ -29,6 +30,7 @@ import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.KeyboardType
+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
@@ -44,6 +46,7 @@ fun RenderRightIconSearch(
     icon: String,
     color: Color,
     onClick: () -> Unit,
+    iconModifier: Modifier = Modifier
 ) {
     if (loading) {
         Box(Modifier.padding(horizontal = Spacing.S)) {
@@ -64,7 +67,7 @@ fun RenderRightIconSearch(
             source = icon,
             color = color,
             size = 24.dp,
-            modifier = Modifier.padding(start = Spacing.S, end = 0.dp).clickable(
+            modifier = iconModifier.padding(start = Spacing.S, end = 0.dp).clickable(
                 onClick = onClick,
                 interactionSource = remember { MutableInteractionSource() },
                 indication = null
@@ -90,6 +93,12 @@ data class InputSearchProps(
     val fontWeight: InputFontWeight = InputFontWeight.REGULAR,
     val keyboardType: KeyboardType = KeyboardType.Text,
     val backgroundColor: Color = Colors.black_01,
+    val clearCondition: (() -> Boolean)? = null,
+    val keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
+    val keyboardActions: KeyboardActions = KeyboardActions.Default,
+    val modifier: Modifier = Modifier,
+    val iconModifier: Modifier = Modifier,
+    val onClearPress: () -> Unit = {}
 )
 
 @Composable
@@ -98,7 +107,6 @@ fun InputSearch(
         text = remember { mutableStateOf("") },
         iconColor = AppTheme.current.colors.text.default
     ),
-
 ) {
     var isFocused by remember { mutableStateOf(false) }
     var isBlurred = false
@@ -113,103 +121,112 @@ fun InputSearch(
         iconTintColor = disabledColor
     }
 
-    Column {
-        BasicTextField(
-            enabled = !inputSearchProps.disabled,
-            singleLine = true,
-            value = inputSearchProps.text.value,
-            textStyle = TextStyle(
-                color = textColor,
-                fontSize = 14.sp,
-                lineHeight = 20.sp,
-                fontWeight = inputSearchProps.fontWeight.value
-            ),
-            keyboardOptions = KeyboardOptions.Default.copy(keyboardType = inputSearchProps.keyboardType),
-            modifier = Modifier.height(36.dp).onFocusChanged {
-                isFocused = it.isFocused
-                if (it.isFocused) {
-                    inputSearchProps.onFocus()
-                }
-                if (!it.isFocused && isBlurred) inputSearchProps.onBlur()
-                if (it.isFocused && !isBlurred) isBlurred = true
-            },
-            onValueChange = inputSearchProps.onChangeText,
-            decorationBox = { innerTextField ->
-                Row(verticalAlignment = Alignment.CenterVertically) {
+    BasicTextField(
+        enabled = !inputSearchProps.disabled,
+        singleLine = true,
+        value = inputSearchProps.text.value,
+        textStyle = TextStyle(
+            color = textColor,
+            fontSize = 14.sp,
+            lineHeight = 20.sp,
+            fontWeight = inputSearchProps.fontWeight.value
+        ),
+        keyboardOptions = inputSearchProps.keyboardOptions.copy(keyboardType = inputSearchProps.keyboardType),
+        keyboardActions = inputSearchProps.keyboardActions,
+        modifier = inputSearchProps.modifier.height(36.dp).onFocusChanged {
+            isFocused = it.isFocused
+            if (it.isFocused) {
+                inputSearchProps.onFocus()
+            }
+            if (!it.isFocused && isBlurred) inputSearchProps.onBlur()
+            if (it.isFocused && !isBlurred) isBlurred = true
+        },
+        onValueChange = inputSearchProps.onChangeText,
+        decorationBox = { innerTextField ->
+            Row(verticalAlignment = Alignment.CenterVertically) {
+                Row(
+                    modifier = Modifier.weight(
+                        inputSearchProps.showButtonText.ifTrue(
+                            8f,
+                            1f
+                        )
+                    )
+                        .background(
+                            inputSearchProps.backgroundColor,
+                            RoundedCornerShape(Radius.XL)
+                        ),
+                    horizontalArrangement = Arrangement.Start,
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
                     Row(
-                        modifier = Modifier.weight(inputSearchProps.showButtonText.ifTrue(8f, 1f))
-                            .background(
-                                inputSearchProps.backgroundColor,
-                                RoundedCornerShape(Radius.XL)
-                            ),
-                        horizontalArrangement = Arrangement.Start,
+                        modifier = Modifier.padding(
+                            horizontal = Spacing.M,
+                            vertical = Spacing.S
+                        ),
                         verticalAlignment = Alignment.CenterVertically
                     ) {
-                        Row(
-                            modifier = Modifier.padding(
-                                horizontal = Spacing.M,
-                                vertical = Spacing.S
-                            ),
-                            verticalAlignment = Alignment.CenterVertically
-                        ) {
-                            //leading icon
-                            Icon(
-                                source = "navigation_search",
-                                modifier = Modifier.padding(end = Spacing.XS),
-                                size = 24.dp,
-                                color = AppTheme.current.colors.text.hint
-                            )
-                            Box(Modifier.weight(1f)) {
-                                if (inputSearchProps.text.value.isEmpty()) {
-                                    Text(
-                                        text = inputSearchProps.placeholder,
-                                        style = TextStyle(
-                                            fontSize = 16.sp,
-                                            lineHeight = 24.sp,
-                                            fontWeight = inputSearchProps.fontWeight.value
-                                        ),
-                                        color = placeholderColor
-                                    )
-                                }
-                                innerTextField()
+                        Icon(
+                            source = "navigation_search",
+                            modifier = Modifier.padding(end = Spacing.XS),
+                            size = 24.dp,
+                            color = AppTheme.current.colors.text.hint
+                        )
+                        Box(Modifier.weight(1f)) {
+                            if (inputSearchProps.text.value.isEmpty()) {
+                                Text(
+                                    text = inputSearchProps.placeholder,
+                                    style = TextStyle(
+                                        fontSize = 14.sp,
+                                        lineHeight = 20.sp,
+                                        fontWeight = inputSearchProps.fontWeight.value
+                                    ),
+                                    maxLines = 1,
+                                    color = placeholderColor,
+                                    overflow = TextOverflow.Ellipsis
+                                )
                             }
-                            if (isFocused && inputSearchProps.text.value.isNotEmpty()) {
-                                Row {
-                                    Spacer(Modifier.width(Spacing.XS))
-                                    Icon(
-                                        source = "24_navigation_close_circle_full",
-                                        size = 16.dp,
-                                        color = AppTheme.current.colors.text.hint,
-                                        modifier = Modifier.clickable(
-                                            onClick = { inputSearchProps.text.value = "" },
-                                            interactionSource = remember { MutableInteractionSource() },
-                                            indication = null
-                                        )
+                            innerTextField()
+                        }
+                        if (inputSearchProps.clearCondition?.invoke() == true || (isFocused && inputSearchProps.text.value.isNotEmpty())) {
+                            Row {
+                                Spacer(Modifier.width(Spacing.XS))
+                                Icon(
+                                    source = "24_navigation_close_circle_full",
+                                    size = 16.dp,
+                                    color = AppTheme.current.colors.text.hint,
+                                    modifier = Modifier.clickable(
+                                        onClick = {
+                                            inputSearchProps.text.value = ""
+                                            inputSearchProps.onClearPress.invoke()
+                                        },
+                                        interactionSource = remember { MutableInteractionSource() },
+                                        indication = null
                                     )
-                                }
+                                )
                             }
-                            RenderRightIconSearch(
-                                inputSearchProps.loading,
-                                inputSearchProps.icon,
-                                iconTintColor,
-                                inputSearchProps.onRightIconPressed
-                            )
                         }
-                    }
-                    if (inputSearchProps.showButtonText) {
-                        Text(
-                            text = inputSearchProps.buttonText,
-                            style = Typography.actionDefault,
-                            color = AppTheme.current.colors.text.default,
-                            modifier = Modifier.padding(start = Spacing.L).clickable(
-                                interactionSource = remember { MutableInteractionSource() },
-                                indication = null,
-                                onClick = inputSearchProps.onPressButtonText
-                            )
+                        RenderRightIconSearch(
+                            inputSearchProps.loading,
+                            inputSearchProps.icon,
+                            iconTintColor,
+                            inputSearchProps.onRightIconPressed,
+                            iconModifier = inputSearchProps.iconModifier
                         )
                     }
                 }
-            },
-        )
-    }
+                if (inputSearchProps.showButtonText) {
+                    Text(
+                        text = inputSearchProps.buttonText,
+                        style = Typography.actionDefault,
+                        color = AppTheme.current.colors.text.default,
+                        modifier = Modifier.padding(start = Spacing.L).clickable(
+                            interactionSource = remember { MutableInteractionSource() },
+                            indication = null,
+                            onClick = inputSearchProps.onPressButtonText
+                        )
+                    )
+                }
+            }
+        },
+    )
 }

package/local.properties

@@ -4,5 +4,5 @@
 # Location of the SDK. This is only used by Gradle.
 # For customization when using a Version Control System, please read the
 # header note.
-#Wed Aug 21 14:20:12 ICT 2024
-sdk.dir=/Users/huynhdung/Library/Android/sdk
+#Tue Apr 23 16:40:15 ICT 2024
+sdk.dir=/Users/hung.dao1/Library/Android/sdk

package/package.json

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