@momo-kits/native-kits 0.112.1-beta.9 → 0.112.1-rn76.46

package/compose/build.gradle.kts

@@ -41,6 +41,7 @@ kotlin {
                 implementation(libs.coil.multiplatform.core)
                 implementation(libs.coil.multiplatform.network.ktor)
                 implementation(libs.jetbrains.serialization.json)
+                implementation(libs.kotlinx.datetime)
             }
         }
         val androidMain by getting {
@@ -99,3 +100,11 @@ android {
         jvmToolchain(17)
     }
 }
+
+compose {
+    resources {
+        publicResClass = true
+        packageOfResClass = "vn.momo.uikits.resources"
+        generateResClass = always
+    }
+}

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

@@ -0,0 +1,57 @@
+package vn.momo.kits.application
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+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.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import vn.momo.kits.components.InputSearch
+import vn.momo.kits.components.InputSearchProps
+import vn.momo.kits.const.Radius
+import vn.momo.kits.const.Spacing
+
+@Composable
+fun AnimationSearchInput(
+    animations: HeaderAnimations,
+    inputSearchProps: InputSearchProps
+) {
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .offset(
+                x = animations.translateX.dp,
+                y = animations.translateY.dp
+            )
+    ) {
+        Box(
+            modifier = Modifier
+                .height(HEADER_HEIGHT.dp)
+                .padding(vertical = Spacing.S)
+                .zIndex(1f)
+        ) {
+            Box(
+                modifier = Modifier
+                    .width(animations.width.dp)
+                    .background(
+                        color = animations.backgroundSearch,
+                        shape = RoundedCornerShape(Radius.XL)
+                    )
+            ) {
+                InputSearch(
+                    inputSearchProps = inputSearchProps.copy(
+                        showButtonText = false,
+                        backgroundColor = Color.Transparent
+                    )
+                )
+            }
+        }
+    }
+}

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

@@ -163,7 +163,7 @@ fun FloatingButton(
                         Text(
                             text ?: "",
                             color = Color.White,
-                            style = Typography.actionDefault
+                            style = Typography.actionDefaultBold
                         )
                     }
                 }

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

@@ -0,0 +1,186 @@
+package vn.momo.kits.application
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+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.fillMaxWidth
+import androidx.compose.foundation.layout.height
+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.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.snapshotFlow
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.testTag
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import kotlinx.coroutines.flow.distinctUntilChanged
+import kotlinx.coroutines.flow.map
+import vn.momo.kits.components.Icon
+import vn.momo.kits.components.InputSearch
+import vn.momo.kits.components.InputSearchProps
+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.setAutomationId
+import vn.momo.kits.platform.getStatusBarHeight
+
+@Composable
+fun Header(
+    headerType: HeaderType = HeaderType.DEFAULT,
+    titlePosition: TitlePosition,
+    title: String,
+    headerRight: @Composable (() -> Unit)? = null,
+    goBack: (() -> Unit)? = null,
+    opacity: Float = 1f,
+    animatedHeader: AnimatedHeader? = null,
+    scrollState: Int = 0,
+    inputSearchProps: InputSearchProps? = null,
+    headerRightWidth: Dp = 0.dp,
+    useAnimationSearch: Boolean = false,
+    tintColor: Color? = null
+) {
+    val statusBarHeight = AppStatusBar.current ?: getStatusBarHeight()
+    val tintIconColor = tintColor ?: AppTheme.current.colors.text.default
+    val backgroundButton = if (tintColor == Colors.black_01) Colors.black_20.copy(alpha = 0.6f) else Colors.black_01.copy(alpha = 0.6f)
+    val borderColor = if (tintColor == Colors.black_01) Colors.black_01.copy(alpha = 0.2f) else Colors.black_20.copy(alpha = 0.2f)
+
+    var colorFraction by remember { mutableStateOf(0f) }
+
+    LaunchedEffect(scrollState) {
+        snapshotFlow { scrollState }
+            .map { (it / 50f).coerceIn(0f, 1f) }
+            .distinctUntilChanged()
+            .collect { fraction -> colorFraction = fraction }
+    }
+    val animations = useHeaderSearchAnimation(
+        opacityAni = opacity,
+        scrollState = scrollState,
+        headerRightWidth = headerRightWidth,
+        isBack = goBack != null
+    )
+
+    val backgroundSearch = animateColor(
+        Colors.black_01,
+        AppTheme.current.colors.background.default,
+        colorFraction
+    )
+
+    val searchAnimationEnable =
+        inputSearchProps != null && useAnimationSearch && headerType == HeaderType.EXTENDED
+
+    if (headerType != HeaderType.NONE) {
+        BoxWithConstraints(
+            Modifier.height(statusBarHeight + HEADER_HEIGHT.dp)
+                .fillMaxWidth()
+                .zIndex(10f),
+            contentAlignment = Alignment.BottomCenter
+        ) {
+            Row(
+                modifier = Modifier.height(HEADER_HEIGHT.dp)
+                    .fillMaxWidth()
+                    .padding(horizontal = Spacing.M),
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.SpaceBetween
+            ) {
+                Box {
+                    if (goBack != null) {
+                        Box(
+                            modifier = Modifier
+                                .size(28.dp)
+                                .then(
+                                    Modifier.border(
+                                        0.2.dp,
+                                        borderColor,
+                                        RoundedCornerShape(100)
+                                    )
+                                )
+                                .background(
+                                    backgroundButton,
+                                    RoundedCornerShape(100)
+                                )
+                                .clickable(
+                                    onClick = goBack
+                                )
+                                .padding(Spacing.XS)
+                                .setAutomationId("btn_navigation_back"),
+                            contentAlignment = Alignment.Center
+                        ) {
+                            Icon(
+                                source = "arrow-back",
+                                color = tintIconColor,
+                                size = 20.dp,
+                            )
+                        }
+                    }
+                }
+
+                if (useAnimationSearch || inputSearchProps == null) {
+                    Box(Modifier.graphicsLayer {
+                        alpha = if (animatedHeader !== null) opacity else 1f
+                    }) {
+                        headerRight?.invoke()
+                    }
+                }
+            }
+
+            // Title
+            Row(
+                modifier = Modifier.height(HEADER_HEIGHT.dp)
+                    .fillMaxWidth()
+                    .padding(horizontal = Spacing.M),
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                if (goBack != null && titlePosition == TitlePosition.LEFT) {
+                    Spacer(Modifier.width(40.dp))
+                }
+                if (inputSearchProps != null && !useAnimationSearch) {
+                    InputSearch(inputSearchProps = inputSearchProps.copy(backgroundColor = backgroundSearch))
+                } else {
+                    Box(
+                        Modifier.weight(1f).graphicsLayer {
+                            alpha = if (useAnimationSearch) {
+                                1f - (opacity)
+                            } else {
+                                if (animatedHeader !== null) opacity else 1f
+                            }
+                        },
+                        contentAlignment = if (titlePosition == TitlePosition.LEFT) Alignment.TopStart else Alignment.Center
+                    ) {
+                        HeaderTitle(
+                            title = title,
+                            color = tintIconColor,
+                            modifier = Modifier.semantics {
+                                testTag = "title_navigation_header"
+                            }
+                        )
+                    }
+                }
+            }
+
+            if (searchAnimationEnable) {
+                AnimationSearchInput(
+                    animations = animations,
+                    inputSearchProps = inputSearchProps!!
+                )
+            }
+        }
+    }
+}

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

@@ -0,0 +1,79 @@
+package vn.momo.kits.application
+
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import vn.momo.kits.const.AppStatusBar
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.platform.getStatusBarHeight
+
+enum class TitlePosition {
+    LEFT, CENTER,
+}
+
+data class AnimatedHeader(
+    val type: HeaderType = HeaderType.DEFAULT,
+    val composable: @Composable (scrollState: Int) -> Unit = {}
+)
+
+fun animateColor(start: Color, stop: Color, fraction: Float): Color {
+    return Color(
+        red = start.red + fraction * (stop.red - start.red),
+        green = start.green + fraction * (stop.green - start.green),
+        blue = start.blue + fraction * (stop.blue - start.blue),
+        alpha = start.alpha + fraction * (stop.alpha - start.alpha)
+    )
+}
+
+@Composable
+fun HeaderBackground(
+    headerType: HeaderType = HeaderType.DEFAULT,
+    scrollState: Int,
+    headerTransparent: Boolean = false,
+) {
+    val statusBarHeight = AppStatusBar.current ?: getStatusBarHeight()
+
+    val opacityAni by animateFloatAsState(
+        targetValue = (1 - (scrollState / HEADER_HEIGHT * 1f)).coerceIn(0f, 1f),
+    )
+
+    val backgroundColor by animateColorAsState(
+        targetValue = if (headerTransparent) {
+            Color.Transparent
+        } else {
+            animateColor(
+                Color.Transparent,
+                AppTheme.current.colors.background.surface,
+                opacityAni
+            )
+        }
+    )
+
+    when (headerType) {
+        HeaderType.DEFAULT -> {
+            HeaderDefault(
+                opacityAni = opacityAni,
+                statusBarHeight = statusBarHeight,
+                backgroundColor = backgroundColor,
+                headerTransparent = headerTransparent
+            )
+        }
+
+        HeaderType.EXTENDED -> {
+            HeaderExtended(
+                opacityAni = opacityAni,
+                statusBarHeight = statusBarHeight,
+                backgroundColor = backgroundColor,
+            )
+        }
+
+        else -> {
+            Box(modifier = Modifier.fillMaxWidth())
+        }
+    }
+}

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

@@ -0,0 +1,75 @@
+package vn.momo.kits.application
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Image
+import vn.momo.kits.components.Options
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.utils.bottomBorder
+
+@Composable
+fun HeaderDefault(
+    opacityAni: Float,
+    statusBarHeight: Dp,
+    backgroundColor: Color?,
+    headerTransparent: Boolean = false
+) {
+    val height = statusBarHeight + HEADER_HEIGHT.dp
+    Box(
+        modifier = Modifier.fillMaxWidth().height(height)
+            .background(if(headerTransparent && backgroundColor != null) backgroundColor else AppTheme.current.colors.background.surface)
+            .bottomBorder(
+                strokeWidth = 1.dp,
+                color = if(headerTransparent && backgroundColor != null) backgroundColor else AppTheme.current.colors.border.default
+            )
+    ) {
+        Box(
+            modifier = Modifier
+                .height(height)
+                .fillMaxWidth()
+                .alpha(opacityAni)
+                .background(
+                    if (headerTransparent)
+                        Brush.linearGradient(
+                            colors = listOf(
+                                Color.Transparent,
+                                Color.Transparent,
+                            ),
+                            start = Offset(0f, 0f),
+                            end = Offset(0f, with(LocalDensity.current) { 154.dp.toPx() })
+                        )
+                    else
+                        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) {
+            Image(
+                loading = false,
+                source = AppTheme.current.assets.headerBackground!!,
+                modifier = Modifier.fillMaxWidth().height(height),
+                options = Options(
+                    contentScale = ContentScale.FillWidth
+                )
+            )
+        }
+    }
+}

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

@@ -0,0 +1,75 @@
+package vn.momo.kits.application
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Image
+import vn.momo.kits.components.Options
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.utils.bottomBorder
+
+@Composable
+fun HeaderExtended(
+    opacityAni: Float,
+    statusBarHeight: Dp,
+    backgroundColor: Color
+) {
+    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() })
+                )
+            )
+    ) {
+        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
+                    )
+                )
+            }
+        }
+    }
+
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .alpha(1f - opacityAni)
+            .height(statusBarHeight + HEADER_HEIGHT.dp)
+            .background(
+                AppTheme.current.colors.background.surface
+            )
+            .bottomBorder(
+                strokeWidth = 1.dp,
+                color = AppTheme.current.colors.border.default
+            )
+    )
+}