@momo-kits/native-kits 0.113.1-beta.4 → 0.113.1-beta.5

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

@@ -12,7 +12,6 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
@@ -36,7 +35,6 @@ import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTag
 import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
 import kotlinx.coroutines.flow.distinctUntilChanged
@@ -50,11 +48,9 @@ import vn.momo.kits.components.Text
 import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
-import vn.momo.kits.const.Radius
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
 import vn.momo.kits.modifier.setAutomationId
-import vn.momo.kits.platform.getScreenDimensions
 import vn.momo.kits.platform.getStatusBarHeight
 import vn.momo.kits.utils.bottomBorder
 
@@ -62,8 +58,6 @@ enum class TitlePosition {
     LEFT, CENTER,
 }
 
-private const val SCREEN_PADDING = 12
-private const val BACK_WIDTH = 28
 
 data class AnimatedHeader(
     val type: HeaderType = HeaderType.DEFAULT,
@@ -72,55 +66,20 @@ data class AnimatedHeader(
 
 @Composable
 fun HeaderBackground(
-    isBack: Boolean = true,
     headerType: HeaderType = HeaderType.DEFAULT,
-    scrollState: Int,
-    inputSearchProps: InputSearchProps? = null,
-    headerRightWidth: Dp = 0.dp,
-    useAnimationSearch: Boolean = false
+    scrollState: Int
 ) {
     val statusBarHeight = AppStatusBar.current ?: getStatusBarHeight()
-    val screenWidth = getScreenDimensions().width
-    val leftPosition = if (isBack) (BACK_WIDTH + 20).dp else 20.dp
-    val searchWidth = screenWidth - (SCREEN_PADDING * 2)
-
     val opacityAni by animateFloatAsState(
-        targetValue = (1 - (scrollState / 52f)).coerceIn(0f, 1f),
-    )
-
-    val backgroundColor by animateColorAsState(
-        targetValue = animateColor(
-            Color.Transparent,
-            AppTheme.current.colors.background.surface,
-            opacityAni
-        ),
-    )
-
-    val backgroundSearch by animateColorAsState(
-        targetValue = animateColor(
-            AppTheme.current.colors.background.default,
-            Colors.black_01,
-            opacityAni
-        ),
-    )
-
-    val animatedTranslateX by animateFloatAsState(
-        targetValue = (scrollState / 52f).coerceIn(0f, 1f) * (leftPosition.value - 12) + 12,
+        targetValue = (1 - (scrollState / 200f)).coerceIn(0f, 1f),
     )
 
-    val animatedWidth by animateFloatAsState(
-        targetValue = (scrollState / 52f).coerceIn(
-            0f,
-            1f
-        ) * ((searchWidth - leftPosition.value - headerRightWidth.value + 12) - searchWidth) + searchWidth,
-    )
+    val backgroundColor = if (scrollState == 0) {
+        Color.Transparent
+    } else {
+        AppTheme.current.colors.background.surface
+    }
 
-    val animatedHeight by animateFloatAsState(
-        targetValue = (1 - (scrollState / 52f).coerceIn(
-            0f,
-            1f
-        )) * (statusBarHeight.value + 94 - (statusBarHeight.value + 52)) + (statusBarHeight.value + 52),
-    )
 
     when (headerType) {
         HeaderType.DEFAULT -> {
@@ -160,71 +119,38 @@ fun HeaderBackground(
                     )
                 }
             }
+
         }
 
         HeaderType.EXTENDED -> {
+
             Box(
-                modifier = Modifier.fillMaxWidth().height(animatedHeight.dp)
-            ) {
-                Box(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .height(154.dp)
-                        .alpha(opacityAni)
-                        .background(
-                            Brush.linearGradient(
-                                colors = listOf(
-                                    Color(0xFFFDCADE),
-                                    Color(0x00FDCADE)
-                                ),
-                                start = Offset(0f, 0f),
-                                end = Offset(0f, with(LocalDensity.current) { 154.dp.toPx() })
-                            )
+                modifier = Modifier.fillMaxWidth().height(154.dp)
+                    .alpha(opacityAni)
+                    .background(
+                        Brush.linearGradient(
+                            colors = listOf(
+                                Color(0xFFFDCADE),
+                                Color(0x00FDCADE)
+                            ),
+                            start = Offset(0f, 0f),
+                            end = Offset(0f, with(LocalDensity.current) { 154.dp.toPx() })
                         )
-                ) {
-                    if (AppTheme.current.assets.headerBackground != null) {
-                        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
-                                )
-                            )
-                        }
-                    }
-                }
-
-                if (inputSearchProps != null && useAnimationSearch) {
+                    )
+            ) {
+                if (AppTheme.current.assets.headerBackground != null) {
                     Box(
-                        modifier = Modifier
-                            .height(52.dp)
-                            .offset(
-                                x = animatedTranslateX.dp
-                            )
-                            .padding(vertical = Spacing.S)
-                            .align(Alignment.BottomStart)
+                        modifier = Modifier.fillMaxWidth()
+                            .background(backgroundColor)
                     ) {
-                        Box(
-                            modifier = Modifier
-                                .width(animatedWidth.dp)
-                                .background(
-                                    color = backgroundSearch,
-                                    shape = RoundedCornerShape(Radius.XL)
-                                )
-                        ) {
-                            InputSearch(
-                                inputSearchProps = inputSearchProps.copy(
-                                    showButtonText = false,
-                                    backgroundColor = Color.Transparent
-                                )
+                        Image(
+                            loading = false,
+                            source = AppTheme.current.assets.headerBackground!!,
+                            modifier = Modifier.fillMaxWidth().height(154.dp),
+                            options = Options(
+                                contentScale = ContentScale.FillWidth
                             )
-                        }
+                        )
                     }
                 }
             }
@@ -234,6 +160,7 @@ fun HeaderBackground(
             Box(modifier = Modifier.fillMaxWidth())
         }
     }
+
 }
 
 @Composable
@@ -246,13 +173,11 @@ fun Header(
     opacity: Float? = null,
     animatedHeader: AnimatedHeader? = null,
     scrollState: Int = 0,
-    inputSearchProps: InputSearchProps? = null,
-    useAnimationSearch: Boolean = false
+    inputSearchProps: InputSearchProps?
 ) {
     val statusBarHeight = AppStatusBar.current ?: getStatusBarHeight()
     val tintIconColor = AppTheme.current.colors.text.default
     val backgroundButton = Colors.black_01.copy(alpha = 0.6f)
-    val miniAppContext = ApplicationContext.current
 
     var colorFraction by remember { mutableStateOf(0f) }
 
@@ -263,6 +188,14 @@ fun Header(
             .collect { fraction -> colorFraction = fraction }
     }
 
+    val backgroundSearch by animateColorAsState(
+        targetValue = animateColor(
+            Colors.black_01,
+            AppTheme.current.colors.background.default,
+            colorFraction
+        )
+    )
+
     if (headerType != HeaderType.NONE) {
         BoxWithConstraints(
             Modifier.height(statusBarHeight + 52.dp)
@@ -309,12 +242,10 @@ fun Header(
                     }
                 }
 
-                if (inputSearchProps == null && miniAppContext != null) {
-                    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()
                 }
             }
 
@@ -327,14 +258,13 @@ fun Header(
             ) {
                 if (goBack != null && titlePosition == TitlePosition.LEFT) {
                     Spacer(Modifier.width(40.dp))
+                }
+                if (inputSearchProps != null) {
+                    InputSearch(inputSearchProps = inputSearchProps.copy(backgroundColor = backgroundSearch))
                 } else {
                     Box(
                         Modifier.weight(1f).graphicsLayer {
-                            alpha = if (useAnimationSearch && inputSearchProps != null) {
-                                1f - (opacity ?: 1f)
-                            } else {
-                                if (animatedHeader !== null) opacity ?: 1f else 1f
-                            }
+                            alpha = if (animatedHeader !== null) opacity ?: 1f else 1f
                         },
                         contentAlignment = if (titlePosition == TitlePosition.LEFT) Alignment.TopStart else Alignment.Center
                     ) {
@@ -376,4 +306,4 @@ fun animateColor(start: Color, stop: Color, fraction: Float): Color {
         blue = start.blue + fraction * (stop.blue - start.blue),
         alpha = start.alpha + fraction * (stop.alpha - start.alpha)
     )
-}
+}

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

@@ -6,10 +6,14 @@ 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 vn.momo.kits.components.TrustBannerData
+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
@@ -18,94 +22,93 @@ import vn.momo.kits.const.defaultTheme
 import vn.momo.kits.platform.disableOverscroll
 import vn.momo.kits.platform.getStatusBarHeight
 
+val PlatformApi = staticCompositionLocalOf<Any?> { null }
+
 interface ComposeApi {
-    fun request(funcName: String, params: Any?): String
-    fun request(funcName: String, params: Any?, onResponse: ((String) -> Unit)?): String
-    fun requestCallback(funcName: String, params: Any?, onResponse: ((String) -> Unit)?)
+    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)
 }
 
+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() {}
-    fun replace(content: @Composable () -> Unit) {}
-    fun popToTop() {}
-    fun showModal(
-        onClose: () -> Unit = {},
-        canBackgroundClose: Boolean = true,
-        content: @Composable () -> Unit,
-    ) {
+    fun push(content: @Composable () -> Unit) {
     }
 
-    fun showBottomSheet(content: @Composable () -> Unit) {}
-}
+    fun present(content: @Composable () -> Unit) {
 
-data class MiniAppContext(
-    val appIcon: String = "",
-    val appName: Any? = null,
-    val appId: String = "",
-    val appCode: String = "",
-    val description: Any? = null,
-)
+    }
 
-val PlatformApi = staticCompositionLocalOf<Any?> { null }
+    fun reset(content: @Composable () -> Unit) {
 
-val AppNavigator = staticCompositionLocalOf<Navigator> {
-    error("no navigator provided!")
-}
+    }
 
-val ApplicationContext = staticCompositionLocalOf<MiniAppContext?> {
-    null
-}
+    fun pop() {
+    }
 
-val AppConfig = staticCompositionLocalOf<KitConfig?> {
-    null
-}
+    fun replace(content: @Composable () -> Unit) {
+    }
 
-data class KitConfig(
-    val trustBanner: TrustBannerData? = null,
-    val headerBar: String? = null,
-    val headerGradient: String? = null
-)
+    fun popToTop() {
+    }
+
+    fun showModal(
+        onClose: () -> Unit = {},
+        canBackgroundClose: Boolean = true,
+        content: @Composable () -> Unit,
+    ) {
+    }
+
+    fun showBottomSheet(content: @Composable () -> Unit) {
+    }
+}
 
 @Composable
 fun ApplicationContainer(
     theme: Theme = defaultTheme,
     composeApi: ComposeApi? = null,
-    statusBarHeight: Dp? = null,
-    applicationContext: MiniAppContext? = null,
-    config: KitConfig? = null,
-    content: @Composable () -> Unit,
+    statusBarHeight: Dp? = AppStatusBar.current ?: getStatusBarHeight(),
+    content: @Composable () -> Unit
 ) {
     var appTheme by remember { mutableStateOf(theme) }
+    val coroutineScope = rememberCoroutineScope()
 
     LaunchedEffect(Unit) {
         try {
-            val headerBar = config?.headerBar
-            if (headerBar != null && appTheme.assets.headerBackground == null) {
-                appTheme = appTheme.copy(
-                    assets = ThemeAssets(
-                        headerBackground = headerBar
-                    )
-                )
+            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 get config error $e")
+        }
+        catch (e: Exception) {
+            print("@@ == NavigationContainer fetch config error $e")
         }
     }
 
-    val appStatusBarHeight = statusBarHeight ?: getStatusBarHeight()
-
     disableOverscroll()
     CompositionLocalProvider(
         AppTheme provides appTheme,
         PlatformApi provides composeApi,
         AppNavigator provides Navigator(),
-        AppStatusBar provides appStatusBarHeight,
-        ApplicationContext provides applicationContext,
-        AppConfig provides config
+        AppStatusBar provides statusBarHeight,
     ) {
         content()
     }

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

@@ -62,12 +62,11 @@ fun Screen(
     onContentLayout: ((LayoutCoordinates) -> Unit)? = null,
     useAvoidKeyboard: Boolean = true,
     footer: @Composable (() -> Unit)? = null,
-    headerRight: @Composable (() -> Unit)? = { HeaderRight() },
+    headerRight: @Composable (() -> Unit)? = null,
     fabProps: FabProps? = null,
     animatedHeader: AnimatedHeader? = null,
     layoutOffset: Dp = 56.dp,
     inputSearchProps: InputSearchProps? = null,
-    useAnimationSearch: Boolean = false,
     content: @Composable () -> Unit,
 ) {
     val statusBarHeight = AppStatusBar.current ?: getStatusBarHeight()
@@ -84,7 +83,7 @@ fun Screen(
     val bottomPadding = min(indicator, 21.dp)
 
     val opacity by animateFloatAsState(
-        targetValue = ((scrollState.value / 52f)).coerceIn(0f, 1f),
+        targetValue = ((scrollState.value / 114f)).coerceIn(0f, 1f)
     )
 
     val headerAnimated =
@@ -94,15 +93,13 @@ fun Screen(
 
     Box(
         Modifier.fillMaxSize()
-            .background(backgroundColor ?: AppTheme.current.colors.background.surface)
+            .background(backgroundColor ?: AppTheme.current.colors.background.default)
     ) {
 
         if (animatedHeader === null) {
             HeaderBackground(
                 headerType = headerType,
                 scrollState = scrollState.value,
-                inputSearchProps= inputSearchProps,
-                useAnimationSearch = useAnimationSearch
             )
         } else {
             Box(
@@ -111,11 +108,8 @@ fun Screen(
                     .graphicsLayer { alpha = opacity }
             ) {
                 HeaderBackground(
-                    isBack = isBack,
                     headerType = headerType,
                     scrollState = scrollState.value,
-                    inputSearchProps= inputSearchProps,
-                    useAnimationSearch = useAnimationSearch
                 )
             }
         }
@@ -129,8 +123,7 @@ fun Screen(
             opacity = opacity,
             animatedHeader = animatedHeader,
             inputSearchProps = inputSearchProps,
-            scrollState = scrollState.value,
-            useAnimationSearch = useAnimationSearch
+            scrollState = scrollState.value
         )
 
         Column(
@@ -161,10 +154,6 @@ fun Screen(
                         if (animatedHeader !== null) {
                             Spacer(modifier = Modifier.padding(top = statusBarHeight + 52.dp + layoutOffset))
                         }
-
-                        if (useAnimationSearch && inputSearchProps != null) {
-                            Spacer(modifier = Modifier.padding(top = statusBarHeight))
-                        }
                         content()
                     }
                 }

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

@@ -17,9 +17,9 @@ enum class DotSize(val size: Int) {
 }
 
 @Composable
-fun BadgeDot(size: DotSize = DotSize.Large, modifier: Modifier = Modifier) {
+fun BadgeDot(size: DotSize = DotSize.Large) {
     Box(
-        modifier = modifier
+        modifier = Modifier
             .size(size.size.dp)
             .border(width = 1.dp, color = Colors.black_01, shape = RoundedCornerShape(Radius.S))
             .background(color = Colors.red_03, shape = RoundedCornerShape(Radius.S))

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

@@ -75,7 +75,6 @@ fun OTPCaret() {
 
 @Composable
 fun InputOTP(
-    value: String = "",
     length: Int? = null,
     errorMessage: String = "",
     errorSpacing: Boolean = false,
@@ -86,9 +85,9 @@ fun InputOTP(
     onBlur: () -> Unit = {},
     dataType: String = "number",
     accessibilityLabel: String? = null,
-    modifier: Modifier = Modifier
 ) {
     val MAX_LENGTH = 10
+    var value by remember { mutableStateOf("") }
     var isFocused by remember { mutableStateOf(false) }
     var isBlurred = false
 
@@ -97,6 +96,7 @@ fun InputOTP(
             (dataType != "number" || !text.any { !it.isDigit() }) &&
             (text.length < value.length || value.length < text.length)
         ) {
+            value = text
             onChangeText(text)
         }
     }
@@ -108,7 +108,7 @@ fun InputOTP(
             onValueChange = handleChangeText,
             singleLine = true,
             keyboardOptions = KeyboardOptions.Default.copy(keyboardType = if (dataType == "number") KeyboardType.Number else KeyboardType.Ascii),
-            modifier = modifier.height(56.dp).onFocusChanged {
+            modifier = Modifier.height(56.dp).onFocusChanged {
                 isFocused = it.isFocused
                 if (it.isFocused) {
                     onFocus()

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

@@ -31,7 +31,6 @@ 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.dp
 import androidx.compose.ui.unit.sp
 import vn.momo.kits.const.AppTheme
@@ -99,8 +98,7 @@ data class InputSearchProps(
     val keyboardActions: KeyboardActions = KeyboardActions.Default,
     val modifier: Modifier = Modifier,
     val iconModifier: Modifier = Modifier,
-    val onClearPress: () -> Unit = {},
-    val leftPosition: Dp? = null,
+    val onClearPress: () -> Unit = {}
 )
 
 @Composable

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

@@ -115,7 +115,7 @@ fun PopupNotify(
             )
 
             Column(modifier = Modifier.padding(Spacing.XL)) {
-                Text(style = Typography.titleXs, maxLines = 1, text = title)
+                Text(style = Typography.titleXs, maxLines = 2, text = title)
                 content(Modifier.padding(top = Spacing.S))
                 if (error.isNotEmpty()) {
                     Text(