@momo-kits/native-kits 0.162.1 → 0.162.2-beta.1

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

@@ -1,222 +0,0 @@
-package vn.momo.kits.application
-
-import androidx.compose.animation.core.animateFloatAsState
-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.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
-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.AppTheme
-import vn.momo.kits.const.Colors
-import vn.momo.kits.const.Spacing
-import vn.momo.kits.modifier.conditional
-import vn.momo.kits.modifier.setAutomationId
-import vn.momo.kits.utils.getAppStatusBarHeight
-
-data class HeaderColor(val tintIconColor: Color, val backgroundButton: Color, val borderColor: Color)
-fun getHeaderColor(animatedHeader: AnimatedHeader?, opacity: Float, tintColor: Color?, defaultColor: Color): HeaderColor{
-    return if(animatedHeader !== null)
-        if (opacity == 1f || !animatedHeader.isSurface)
-            HeaderColor(
-                tintIconColor = Colors.black_17,
-                backgroundButton = Colors.black_01.copy(alpha = 0.6f),
-                borderColor = Colors.black_20.copy(alpha = 0.2f)
-            )
-        else
-            HeaderColor(
-                tintIconColor = Colors.black_01,
-                backgroundButton = Colors.black_20.copy(alpha = 0.6f),
-                borderColor = Color.Transparent
-            )
-    else
-        if (tintColor == Colors.black_01)
-            HeaderColor(
-                tintIconColor = tintColor,
-                backgroundButton = Colors.black_20.copy(alpha = 0.6f),
-                borderColor = Colors.black_01.copy(alpha = 0.2f)
-            )
-        else
-            HeaderColor(
-                tintIconColor = tintColor ?: defaultColor,
-                backgroundButton = Colors.black_01.copy(alpha = 0.6f),
-                borderColor = Colors.black_20.copy(alpha = 0.2f)
-            )
-}
-
-@Deprecated("Use vn.momo.kits.navigation.component.Header instead", ReplaceWith("vn.momo.kits.navigation.component.Header"))
-@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 = getAppStatusBarHeight()
-    val color = getHeaderColor(animatedHeader, opacity, tintColor, AppTheme.current.colors.text.default)
-    val tintIconColor = color.tintIconColor
-    val backgroundButton = color.backgroundButton
-    val borderColor = color.borderColor
-
-    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
-    val animatedAlpha by animateFloatAsState(targetValue = opacity, label = "BackgroundAlpha")
-
-    if (headerType != HeaderType.NONE) {
-        BoxWithConstraints(
-            Modifier.height(statusBarHeight + HEADER_HEIGHT.dp)
-                .fillMaxWidth()
-                .conditional(animatedHeader !== null) { background(Color.White.copy(alpha = animatedAlpha)) }
-                .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) {
-                    if(headerRight == null){
-                        HeaderRight(opacity = opacity, animatedHeader = animatedHeader, tintColor = tintColor)
-                    } else {
-                        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 {
-                                1f
-                            }
-                        },
-                        contentAlignment = if (titlePosition == TitlePosition.LEFT) Alignment.TopStart else Alignment.Center
-                    ) {
-                        HeaderTitle(
-                            title = title,
-                            color = tintIconColor,
-                            modifier = Modifier
-                                .setAutomationId("title_navigation_header")
-                                .fillMaxWidth(fraction = if(titlePosition == TitlePosition.LEFT) 0.7f else 0.5f)
-                            ,
-                            textAlign = if(titlePosition == TitlePosition.LEFT) TextAlign.Start else TextAlign.Center
-                        )
-                    }
-                }
-            }
-
-            if (searchAnimationEnable) {
-                AnimationSearchInput(
-                    animations = animations,
-                    inputSearchProps = inputSearchProps!!
-                )
-            }
-        }
-    }
-}

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

@@ -1,48 +0,0 @@
-package vn.momo.kits.application
-
-import androidx.compose.animation.core.animateFloatAsState
-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.runtime.getValue
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.graphicsLayer
-import androidx.compose.ui.unit.dp
-import vn.momo.kits.components.Image
-
-@Deprecated("Use vn.momo.kits.navigation.component.Header instead", ReplaceWith("vn.momo.kits.navigation.component.Header"))
-@Composable
-fun HeaderAnimated(image: String, scrollState: Int = 0) {
-    // Scale animation
-    val scale by animateFloatAsState(
-        targetValue = when {
-            scrollState < 0 -> (-(scrollState / 300f)).coerceIn(1f, 4f)
-            scrollState.toFloat() in 0f..300f -> 1f
-            else -> 1f
-        }
-    )
-
-    // Opacity animation
-    val opacity by animateFloatAsState(
-        targetValue = when {
-            scrollState.toFloat() in 0f..150f -> 1f - (scrollState / 300f)
-            scrollState.toFloat() in 150f..300f -> 0.5f - ((scrollState - 150f) / 300f)
-            else -> 1f
-        }
-    )
-
-    // Translation Y animation
-
-    Box(modifier = Modifier.fillMaxWidth().height(200.dp)
-        .graphicsLayer {
-            scaleX = scale
-            scaleY = scale
-        }) {
-        if (image.isEmpty()) return
-        Image(
-            source = image,
-            modifier = Modifier.fillMaxWidth().height(200.dp)
-        )
-    }
-}

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

@@ -1,86 +0,0 @@
-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.AppTheme
-import vn.momo.kits.utils.getAppStatusBarHeight
-
-enum class TitlePosition {
-    LEFT, CENTER,
-}
-
-enum class AnimatedHeaderRatio(val value: Float){
-    RATIO_16_9(16f / 9f),
-    RATIO_1_1(1f),
-    RATIO_3_2(3f / 2f)
-}
-
-data class AnimatedHeader(
-    val aspectRatio: AnimatedHeaderRatio = AnimatedHeaderRatio.RATIO_16_9,
-    val isSurface: Boolean = true,
-    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)
-    )
-}
-
-@Deprecated("Use vn.momo.kits.navigation.component.HeaderBackground instead", ReplaceWith("vn.momo.kits.navigation.component.HeaderBackground"))
-@Composable
-fun HeaderBackground(
-    headerType: HeaderType = HeaderType.DEFAULT,
-    scrollState: Int,
-    headerTransparent: Boolean = false,
-) {
-    val statusBarHeight = getAppStatusBarHeight()
-
-    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

@@ -1,76 +0,0 @@
-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
-
-@Deprecated("Use vn.momo.kits.navigation.component.Header instead", ReplaceWith("vn.momo.kits.navigation.component.Header"))
-@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

@@ -1,76 +0,0 @@
-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
-
-@Deprecated("Use vn.momo.kits.navigation.component.Header instead", ReplaceWith("vn.momo.kits.navigation.component.Header"))
-@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
-            )
-    )
-}