@momo-kits/native-kits 0.167.1-beta.15-debug → 0.167.1-beta.16

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

@@ -1,183 +0,0 @@
-package vn.momo.kits.application
-
-import androidx.compose.animation.*
-import androidx.compose.animation.core.CubicBezierEasing
-import androidx.compose.animation.core.animateDpAsState
-import androidx.compose.animation.core.tween
-import androidx.compose.foundation.ScrollState
-import androidx.compose.foundation.background
-import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.*
-import androidx.compose.material3.AlertDialogDefaults.shape
-import androidx.compose.material3.FloatingActionButton
-import androidx.compose.material3.FloatingActionButtonDefaults
-import androidx.compose.runtime.*
-import androidx.compose.runtime.saveable.rememberSaveable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.zIndex
-import kotlinx.coroutines.delay
-import kotlinx.coroutines.flow.MutableStateFlow
-import kotlinx.coroutines.flow.collectLatest
-import kotlinx.coroutines.launch
-import vn.momo.kits.components.Icon
-import vn.momo.kits.components.Text
-import vn.momo.kits.const.Typography
-import kotlin.time.Duration.Companion.milliseconds
-
-enum class FABSize {
-    SMALL,
-    DEFAULT,
-}
-
-enum class FABPosition {
-    END,
-    CENTER,
-}
-
-data class FabProps(
-    val icon: String,
-    val iconColor: Color? = null,
-    val label: String? = null,
-    val onClick: () -> Unit,
-    val size: FABSize = FABSize.DEFAULT,
-    val bottom: Dp? = null,
-    val scrollState: ScrollState? = null,
-    val position: FABPosition? = FABPosition.END,
-)
-
-@Deprecated("Use vn.momo.kits.navigation.FloatingButton instead", ReplaceWith("vn.momo.kits.navigation.FloatingButton"))
-@Composable
-internal fun FloatingButton(
-    scrollPosition: Int,
-    bottom: Dp,
-    onClick: () -> Unit,
-    containerColor: Color,
-    contentColor: Color = containerColor,
-    icon: String,
-    iconColor: Color? = null,
-    text: String? = null,
-    elevation: androidx.compose.material3.FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(
-        4.dp,
-        4.dp,
-        4.dp,
-        4.dp
-    ),
-    size: FABSize = FABSize.DEFAULT,
-    position: FABPosition = FABPosition.END,
-    keyboardSize: Dp = 0.dp,
-) {
-    val scrollPositionStateFlow = remember { MutableStateFlow(scrollPosition) }
-    var lastScrollPosition by rememberSaveable { mutableStateOf(0) }
-    val coroutineScope = rememberCoroutineScope()
-    var isExpanded by rememberSaveable { mutableStateOf(false) }
-
-    val startPadding = if (isExpanded) 12.dp else 0.dp
-    val endPadding = if (isExpanded) 12.dp else 0.dp
-    val widthIn = if ((size === FABSize.SMALL)) 36.dp else 48.dp
-
-
-    val width = animateDpAsState(
-        targetValue = if (isExpanded && text != null) 80.dp else widthIn,
-        animationSpec = tween(
-            durationMillis = 200,
-            easing = CubicBezierEasing(0.2f, 0.2f, 0.2f, 0.2f),
-        )
-    )
-
-    LaunchedEffect(text) {
-        if (text != null) {
-            coroutineScope.launch {
-                scrollPositionStateFlow
-                    .collectLatest { debouncedScrollPosition ->
-                        isExpanded = debouncedScrollPosition > lastScrollPosition
-                        delay(300.milliseconds)
-                        lastScrollPosition = debouncedScrollPosition
-
-                    }
-            }
-        }
-    }
-
-    LaunchedEffect(scrollPosition) {
-        scrollPositionStateFlow.value = scrollPosition
-    }
-
-    Box(
-        Modifier
-            .fillMaxSize()
-            .padding(end = 12.dp, bottom = bottom)
-            .offset(y = -keyboardSize)
-            .background(Color.Transparent)
-            .zIndex(10f),
-        contentAlignment = if (position == FABPosition.END) Alignment.BottomEnd else Alignment.BottomCenter,
-    ) {
-        FloatingActionButton(
-            onClick = onClick,
-            shape = shape,
-            containerColor = containerColor,
-            contentColor = contentColor,
-            elevation = elevation,
-            interactionSource = remember { MutableInteractionSource() },
-            modifier = Modifier
-                .sizeIn(minWidth = width.value)
-                .height(widthIn)
-        ) {
-            Row(
-                modifier = Modifier.padding(start = startPadding, end = endPadding),
-                verticalAlignment = Alignment.CenterVertically,
-                horizontalArrangement = if (isExpanded) Arrangement.Start else Arrangement.Center
-            ) {
-                Icon(
-                    icon,
-                    size = if (size === FABSize.SMALL) 12.dp else 24.dp,
-                    color = iconColor ?: Color.White
-                )
-                AnimatedVisibility(
-                    visible = isExpanded,
-                    enter = ExtendedFabExpandAnimation,
-                    exit = ExtendedFabCollapseAnimation,
-                ) {
-                    Row {
-                        Spacer(Modifier.width(12.dp))
-                        Text(
-                            text ?: "",
-                            color = Color.White,
-                            style = Typography.actionDefaultBold
-                        )
-                    }
-                }
-            }
-        }
-    }
-}
-
-private val ExtendedFabCollapseAnimation = fadeOut(
-    animationSpec = tween(
-        durationMillis = 800,
-        easing = CubicBezierEasing(0.0f, 0.0f, 1.0f, 1.0f),
-    )
-) + shrinkHorizontally(
-    animationSpec = tween(
-        durationMillis = 500,
-        easing = CubicBezierEasing(0.2f, 0.0f, 0.0f, 1.0f),
-    ),
-    shrinkTowards = Alignment.Start,
-)
-
-private val ExtendedFabExpandAnimation = fadeIn(
-    animationSpec = tween(
-        durationMillis = 200,
-        delayMillis = 100,
-        easing = CubicBezierEasing(0.0f, 0.0f, 1.0f, 1.0f),
-    ),
-) + expandHorizontally(
-    animationSpec = tween(
-        durationMillis = 500,
-        easing = CubicBezierEasing(0.2f, 0.0f, 0.0f, 1.0f),
-    ),
-    expandFrom = Alignment.Start,
-)

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

@@ -1,207 +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.*
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.runtime.*
-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
-internal 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,39 +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
-internal 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
-        }
-    )
-
-    // 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 = {}
-)
-
-internal 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
-internal 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
-internal 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
-internal 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
-            )
-    )
-}