@momo-kits/native-kits 0.162.35-debug → 0.162.36-debug

package/compose/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.162.35-debug"
+        version = "0.162.36-debug"
         summary = "IOS Shared module"
         homepage = "https://momo.vn"
         ios.deploymentTarget = "15.0"

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/StackScreen.kt

@@ -1,11 +1,11 @@
 package vn.momo.kits.navigation
 
 import androidx.compose.animation.animateColorAsState
-import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.foundation.ScrollState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.gestures.ScrollableState
+import androidx.compose.foundation.gestures.animateScrollBy
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
@@ -21,7 +21,6 @@ import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyListState
-import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.ExperimentalMaterialApi
@@ -45,8 +44,11 @@ import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.lerp
 import androidx.compose.ui.zIndex
 import kotlinx.coroutines.flow.Flow
+import kotlinx.coroutines.flow.filter
+import kotlinx.coroutines.launch
 import vn.momo.kits.components.InputSearch
 import vn.momo.kits.const.AppNavigationBar
 import vn.momo.kits.const.AppStatusBar
@@ -154,13 +156,15 @@ internal fun StackScreen(
     }
 
     val limit = with(density) {
-        (statusBar).toPx() + HEADER_HEIGHT
+        (statusBar + HEADER_HEIGHT.dp).toPx()
     }.toInt()
 
-    val (scrollState, scrollInProcess) = if (options.scrollData.scrollState is LazyListState)
-        (options.scrollData.scrollState as? LazyListState ?: rememberLazyListState()).proxyScrollState(limit, 15)
+    val lazyListState = options.scrollData.scrollState as? LazyListState
+    val (scrollState, _) = if (lazyListState != null)
+        lazyListState.proxyScrollState(limit, 1)
     else
-        (options.scrollData.scrollState as? ScrollState ?: rememberScrollState()).proxyLimitedScrollState(limit, 15)
+        (options.scrollData.scrollState as? ScrollState ?: rememberScrollState()).proxyLimitedScrollState(limit, 1)
+    val snapState: ScrollableState = lazyListState ?: scrollState
 
     val footerHeightPx = remember { mutableIntStateOf(0) }
     val headerRightWidthPx = remember { mutableIntStateOf(0) }
@@ -205,7 +209,7 @@ internal fun StackScreen(
             }
 
             Column(Modifier.zIndex(5f)) {
-                SearchAnimated(isScrollInProgress = scrollInProcess)
+                SearchAnimated(snapState = snapState)
             }
 
             Column(Modifier.zIndex(2f).fillMaxSize()) {
@@ -269,11 +273,7 @@ internal fun ColumnScope.MainContent(content: @Composable () -> Unit, isBottomTa
     if (inputSearchType == InputSearchType.Animated) {
         val scrollDp = with(density) { scrollState.value.toDp() }
 
-        val animatedTopPadding by animateDpAsState(
-            targetValue = (HEADER_HEIGHT.dp - scrollDp).coerceIn(0.dp, HEADER_HEIGHT.dp),
-            label = "AnimatedTopPadding"
-        )
-        Spacer(Modifier.height(animatedTopPadding))
+        Spacer(Modifier.height((HEADER_HEIGHT.dp - scrollDp).coerceIn(0.dp, HEADER_HEIGHT.dp)))
     }
     Column(
         Modifier
@@ -413,7 +413,7 @@ data class InputSearchLayoutParams(
 @Suppress("FrequentlyChangingValue")
 @Composable
 internal fun SearchAnimated(
-    isScrollInProgress: Boolean
+    snapState: ScrollableState
 ) {
     val scrollState = LocalScrollState.current
     val options = LocalOptions.current
@@ -453,44 +453,24 @@ internal fun SearchAnimated(
         }
 
         InputSearchType.Animated -> {
-            val animatedTopPadding by animateDpAsState(
-                targetValue = (maxTopPadding - scrollDp).coerceIn(minTopPadding, maxTopPadding),
-                label = "AnimatedTopPadding"
-            )
-
-            val animatedStartPadding by animateDpAsState(
-                targetValue = (minStartPadding + scrollDp).coerceIn(minStartPadding, maxStartPadding),
-                label = "AnimatedStartPadding"
-            )
-
-            val animatedEndPadding by animateDpAsState(
-                targetValue = (minEndPadding + scrollDp).coerceIn(minEndPadding, maxEndPadding),
-                label = "AnimatedEndPadding"
-            )
-
-            val maxPadding = remember(maxTopPadding, maxStartPadding, maxEndPadding) {
-                maxOf(maxEndPadding, maxStartPadding, maxTopPadding)
-            }
-            val snapScrollValue = with(density) { maxPadding.toPx().toInt() }
-
-            LaunchedEffect(isScrollInProgress && scrollState.value != 0 && scrollState.value != snapScrollValue) {
-                if (scrollDp < maxPadding) {
-                    if (!isScrollInProgress) {
-                        val midpoint = (maxTopPadding - minTopPadding) / 2
-
-                        if (scrollDp < midpoint) {
-                            scrollState.animateScrollTo(0)
-                        } else {
-                            scrollState.animateScrollTo(snapScrollValue)
-                        }
+            val collapsePx = with(density) { HEADER_HEIGHT.dp.roundToPx() }
+            val progress = (scrollState.value / collapsePx.toFloat()).coerceIn(0f, 1f)
+
+            LaunchedEffect(snapState, collapsePx) {
+                snapshotFlow { snapState.isScrollInProgress }
+                    .filter { !it }
+                    .collect {
+                        val offset = snapState.headerOffsetPx() ?: return@collect
+                        if (offset <= 0 || offset >= collapsePx) return@collect
+                        val target = if (offset < collapsePx / 2) 0 else collapsePx
+                        launch { snapState.animateScrollBy((target - offset).toFloat()) }
                     }
-                }
             }
 
             InputSearchLayoutParams(
-                topPadding = animatedTopPadding,
-                startPadding = animatedStartPadding,
-                endPadding = animatedEndPadding
+                topPadding = lerp(maxTopPadding, minTopPadding, progress),
+                startPadding = lerp(minStartPadding, maxStartPadding, progress),
+                endPadding = lerp(minEndPadding, maxEndPadding, progress)
             )
         }
 
@@ -519,6 +499,12 @@ internal fun SearchAnimated(
     }
 }
 
+private fun ScrollableState.headerOffsetPx(): Int? = when (this) {
+    is LazyListState -> if (firstVisibleItemIndex == 0) firstVisibleItemScrollOffset else null
+    is ScrollState -> value
+    else -> null
+}
+
 private fun quantize(value: Int, stepPx: Int): Int {
     if (stepPx <= 1) return value
     return (value / stepPx) * stepPx

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/component/Header.kt

@@ -15,11 +15,14 @@ import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clipToBounds
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.onGloballyPositioned
@@ -28,6 +31,7 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.components.Icon
+import vn.momo.kits.components.Image
 import vn.momo.kits.components.InputSearchProps
 import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
@@ -88,15 +92,38 @@ internal fun Header(onBackHandler: (() -> Unit)? = null) {
     // Centered title needs a full-width overlay to stay screen-centered, not boxed between back button and header right.
     val centerTitle = titlePosition == TitlePosition.CENTER && options.headerTitle is HeaderTitle.Default
 
+    val headerImage = AppTheme.current.assets.headerBackground
+        .takeUnless { options.headerType is HeaderType.Transparent }
+
     Box(
         Modifier.height(AppStatusBar.current + HEADER_HEIGHT.dp)
             .fillMaxWidth()
-            .background(background.copy(alpha = animatedAlpha))
+            .conditional(headerImage.isNullOrEmpty()) {
+                background(background.copy(alpha = animatedAlpha))
+            }
             .conditional(IsShowBaseLineDebug) {
                 border(1.dp, Colors.blue_03)
             },
         contentAlignment = Alignment.BottomCenter
     ) {
+        if (!headerImage.isNullOrEmpty()) {
+            Box(
+                Modifier
+                    .matchParentSize()
+                    .clipToBounds()
+                    .graphicsLayer { alpha = animatedAlpha }
+                    .background(background)
+            ) {
+                Image(
+                    source = headerImage,
+                    loading = false,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .wrapContentHeight(Alignment.Top, unbounded = true)
+                        .height(HEADER_BACKGROUND_HEIGHT),
+                )
+            }
+        }
         Row(
             modifier = Modifier.height(HEADER_HEIGHT.dp)
                 .fillMaxWidth()

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/component/HeaderBackground.kt

@@ -27,6 +27,8 @@ enum class AnimatedHeaderRatio(val value: Float){
     RATIO_3_2(3f / 2f)
 }
 
+internal val HEADER_BACKGROUND_HEIGHT = 154.dp
+
 @Suppress("FrequentlyChangingValue")
 @Composable
 internal fun HeaderBackground() {
@@ -37,7 +39,7 @@ internal fun HeaderBackground() {
     val backgroundColor = options.backgroundColor ?: AppTheme.current.colors.background.default
 
     val minHeight = AppStatusBar.current + HEADER_HEIGHT.dp
-    val maxHeight = 154.dp
+    val maxHeight = HEADER_BACKGROUND_HEIGHT
     val opacity by animateFloatAsState(
         targetValue = (1 - (scrollState.value * 1f / HEADER_HEIGHT * 1f)).coerceIn(0f, 1f),
     )

package/gradle.properties

@@ -18,7 +18,7 @@ kotlin.apple.xcodeCompatibility.nowarn=true
 name="ComposeKits"
 group=vn.momo.kits
 artifact.id=kits
-version=0.162.35
+version=0.162.36
 
 repo=GitLab
 url=https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.162.35-debug",
+  "version": "0.162.36-debug",
   "private": false,
   "dependeNavigationncies": {},
   "devDependencies": {},