@momo-kits/native-kits 0.152.4-beta.9 → 0.152.4-scale.3

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

@@ -14,6 +14,7 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Stable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -32,6 +33,7 @@ import vn.momo.kits.components.Icon
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
 
+@Stable
 data class HeaderRightData(
     val useShortcut: Boolean = false,
     val useMore: Boolean = false,

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

@@ -85,7 +85,6 @@ import vn.momo.kits.modifier.shadow
 import vn.momo.kits.utils.getAppStatusBarHeight
 import kotlin.math.max
 
-@Deprecated("Use NavigationContainer(StackScreen) instead", ReplaceWith("NavigationContainer(StackScreen)"))
 @Composable
 fun LiteScreen(
     scrollable: Boolean = true,
@@ -352,7 +351,8 @@ private class LiteScreenHeaderPolicy(
         val realConstraints = constraints.copy(
             minWidth = 0,
             minHeight = 0,
-            maxWidth = constraints.maxWidth - spacing12 * 2,
+            maxWidth = (constraints.maxWidth - spacing12 * 2)
+                .coerceAtLeast(0),
         )
         val backIconPlaceable =
             measurables.find { it.layoutId == HeaderId.BACK_ID }?.measure(realConstraints)

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

@@ -1,6 +1,8 @@
 package vn.momo.kits.application
 
+import androidx.compose.animation.core.Animatable
 import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
 import androidx.compose.foundation.ScrollState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.gestures.detectTapGestures
@@ -13,14 +15,23 @@ import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.ime
 import androidx.compose.foundation.layout.imePadding
+import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.systemBars
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.DisposableEffect
+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.staticCompositionLocalOf
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -30,15 +41,24 @@ import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.min
 import androidx.compose.ui.zIndex
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.SupervisorJob
+import kotlinx.coroutines.cancel
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
 import vn.momo.kits.components.InputSearchProps
+import vn.momo.kits.const.AppNavigationBar
 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.shadow
+import vn.momo.kits.navigation.component.SnackBar
 import vn.momo.kits.platform.getAndroidBuildVersion
 import vn.momo.kits.utils.getAppStatusBarHeight
 
@@ -102,97 +122,134 @@ fun Screen(
                 animatedHeader?.composable?.invoke(scrollState.value)
             }
         }
+    val helper = remember { ScreenHelper() }
 
-    Box(
-        Modifier.fillMaxSize()
-            .background(backgroundColor ?: AppTheme.current.colors.background.default)
-            .conditional(useAvoidKeyboard && getAndroidBuildVersion() > 29) {
-                imePadding()
-            }
-    ) {
-
-        if (animatedHeader === null) {
-            HeaderBackground(
-                headerType = headerType,
-                scrollState = scrollState.value,
-                headerTransparent = headerTransparent
-            )
-        }
+    DisposableEffect(Unit) {
+        onDispose { helper.dispose() }
+    }
 
-        Header(
-            headerType = headerType,
-            title = title,
-            titlePosition = titlePosition,
-            headerRight = headerRight,
-            headerRightWidth = headerRightWidth,
-            goBack = goBack,
-            opacity = opacity,
-            animatedHeader = animatedHeader,
-            inputSearchProps = inputSearchProps,
-            scrollState = scrollState.value,
-            useAnimationSearch = useAnimationSearch,
-            tintColor = tintColor
-        )
-
-        Column(
-            modifier = Modifier.fillMaxSize()
-                .padding( top = when {
-                    animatedHeader != null -> 0.dp
-                    headerType == HeaderType.NONE -> 0.dp
-                    fullScreenContent -> 0.dp
-                    else -> statusBarHeight + HEADER_HEIGHT.dp
-                })
-                .pointerInput(Unit) {
-                    detectTapGestures(onTap = {
-                        keyboardController?.hide()
-                    })
+    CompositionLocalProvider(
+        LocalScreenHelper provides helper
+    ) {
+        Box(
+            Modifier.fillMaxSize()
+                .background(backgroundColor ?: AppTheme.current.colors.background.default)
+                .conditional(useAvoidKeyboard && getAndroidBuildVersion() > 29) {
+                    imePadding()
                 }
-                .zIndex(1f),
         ) {
+            val footerHeightPx = remember { mutableStateOf(0) }
 
-            Column(
-                modifier = Modifier
-                    .conditional(scrollable) { weight(1f) }
-                    .conditional(onContentLayout != null) {
-                        onGloballyPositioned(onContentLayout ?: {})
-                    }
-                    .conditional(scrollable) { verticalScroll(scrollState) },
-                verticalArrangement = verticalArrangement,
-                horizontalAlignment = horizontalAlignment
-            ) {
-                Box {
-                    if (animatedHeader !== null) headerAnimated()
-                    Column {
-                        if (animatedHeader !== null) {
-                            Spacer(modifier = Modifier.padding(top = statusBarHeight + HEADER_HEIGHT.dp + layoutOffset))
+            Box(Modifier.zIndex(1f)) {
+                if (animatedHeader === null) {
+                    HeaderBackground(
+                        headerType = headerType,
+                        scrollState = scrollState.value,
+                        headerTransparent = headerTransparent
+                    )
+                }
+            }
+
+            Box(Modifier.zIndex(5f)) {
+                Header(
+                    headerType = headerType,
+                    title = title,
+                    titlePosition = titlePosition,
+                    headerRight = headerRight,
+                    headerRightWidth = headerRightWidth,
+                    goBack = goBack,
+                    opacity = opacity,
+                    animatedHeader = animatedHeader,
+                    inputSearchProps = inputSearchProps,
+                    scrollState = scrollState.value,
+                    useAnimationSearch = useAnimationSearch,
+                    tintColor = tintColor
+                )
+            }
+
+            Box(Modifier.zIndex(2f).fillMaxSize()){
+                Column(
+                    modifier = Modifier.fillMaxSize()
+                        .padding( top = when {
+                            animatedHeader != null -> 0.dp
+                            headerType == HeaderType.NONE -> 0.dp
+                            fullScreenContent -> 0.dp
+                            else -> statusBarHeight + HEADER_HEIGHT.dp
+                        })
+                        .pointerInput(Unit) {
+                            detectTapGestures(onTap = {
+                                keyboardController?.hide()
+                            })
                         }
+                        .zIndex(1f),
+                ) {
 
-                        if (useAnimationSearch && inputSearchProps != null && headerType == HeaderType.EXTENDED) {
-                            Spacer(modifier = Modifier.padding(top = (HEADER_HEIGHT.dp + Spacing.S)))
+                    Column(
+                        modifier = Modifier
+                            .conditional(scrollable) { weight(1f) }
+                            .conditional(onContentLayout != null) {
+                                onGloballyPositioned(onContentLayout ?: {})
+                            }
+                            .conditional(scrollable) { verticalScroll(scrollState) },
+                        verticalArrangement = verticalArrangement,
+                        horizontalAlignment = horizontalAlignment
+                    ) {
+                        Box {
+                            if (animatedHeader !== null) headerAnimated()
+                            Column {
+                                if (animatedHeader !== null) {
+                                    Spacer(modifier = Modifier.padding(top = statusBarHeight + HEADER_HEIGHT.dp + layoutOffset))
+                                }
+
+                                if (useAnimationSearch && inputSearchProps != null && headerType == HeaderType.EXTENDED) {
+                                    Spacer(modifier = Modifier.padding(top = (HEADER_HEIGHT.dp + Spacing.S)))
+                                }
+                                content()
+                            }
                         }
-                        content()
+                    }
+
+                    footer?.let {
+                        val footerHeight = with(LocalDensity.current) { footerHeightPx.value.toDp() }
+                        Spacer(Modifier.height(footerHeight))
                     }
                 }
             }
 
-            footer?.let {
-                Footer(footer, bottomPadding)
+            Box(Modifier.zIndex(4f).align(Alignment.BottomCenter)) {
+                footer?.let {
+                    Footer(
+                        footer = footer,
+                        bottom = bottomPadding,
+                        onFooterMeasured = { footerHeightPx.value = it }
+                    )
+                }
             }
-        }
 
-        if (fabProps != null) {
-            FloatingButton(
-                scrollPosition = fabProps.scrollState?.value ?: scrollState.value,
-                onClick = fabProps.onClick,
-                containerColor = AppTheme.current.colors.primary,
-                bottom = fabProps.bottom
-                    ?: if (footer != null) bottomPadding + 76.dp else bottomPadding + 12.dp,
-                icon = fabProps.icon,
-                iconColor = fabProps.iconColor,
-                text = fabProps.label,
-                size = fabProps.size,
-                position = fabProps.position ?: FABPosition.END,
-            )
+            Column (Modifier.zIndex(6f)) {
+                if (fabProps != null) {
+                    FloatingButton(
+                        scrollPosition = fabProps.scrollState?.value ?: scrollState.value,
+                        onClick = fabProps.onClick,
+                        containerColor = AppTheme.current.colors.primary,
+                        bottom = fabProps.bottom
+                            ?: if (footer != null) bottomPadding + 76.dp else bottomPadding + 12.dp,
+                        icon = fabProps.icon,
+                        iconColor = fabProps.iconColor,
+                        text = fabProps.label,
+                        size = fabProps.size,
+                        position = fabProps.position ?: FABPosition.END,
+                    )
+                }
+            }
+
+            Box(
+                modifier = Modifier
+                    .align(Alignment.BottomCenter)
+                    .zIndex(3f)
+            ) {
+                ScreenSnackBarHost(if (footer == null) 0 else footerHeightPx.value)
+            }
         }
     }
 }
@@ -206,7 +263,11 @@ internal fun isKeyboardVisible(): Boolean {
 }
 
 @Composable
-fun Footer(footer: @Composable (() -> Unit)? = null, bottom: Dp = 0.dp) {
+fun Footer(
+    footer: @Composable (() -> Unit)? = null,
+    bottom: Dp = 0.dp,
+    onFooterMeasured: ((Int) -> Unit)? = null
+) {
     Box(
         Modifier
             .shadow(
@@ -216,6 +277,9 @@ fun Footer(footer: @Composable (() -> Unit)? = null, bottom: Dp = 0.dp) {
                 offsetY = (-4).dp
             )
             .background(AppTheme.current.colors.background.surface)
+            .onGloballyPositioned {
+                onFooterMeasured?.invoke(it.size.height)
+            }
     ) {
         Box(
             Modifier.fillMaxWidth()
@@ -228,6 +292,110 @@ fun Footer(footer: @Composable (() -> Unit)? = null, bottom: Dp = 0.dp) {
 }
 
 
+class ScreenHelper {
+
+    private val scope = CoroutineScope(SupervisorJob() + Dispatchers.Main)
+
+    internal var snackBarState by mutableStateOf<SnackBarData?>(null)
+
+    internal var requestHide by mutableStateOf(false)
+
+    fun showSnackBar(snackBar: SnackBar, onDismiss: (() -> Unit)? = null) {
+        scope.launch {
+            requestHide = false
+            snackBarState = SnackBarData(snackBar, onDismiss)
+        }
+    }
+
+    fun hideSnackBar() {
+        scope.launch {
+            requestHide = true
+        }
+    }
+
+    internal fun removeSnackBarNow() {
+        snackBarState = null
+        requestHide = false
+    }
+
+    fun dispose() {
+        scope.cancel()
+    }
+}
+data class SnackBarData(
+    val type: SnackBar,
+    val onDismiss: (() -> Unit)?
+)
+
+val LocalScreenHelper = staticCompositionLocalOf<ScreenHelper> {
+    error("No Screen helper provided")
+}
+
+@Composable
+fun ScreenSnackBarHost(footerHeightPx: Int) {
+    val helper = LocalScreenHelper.current
+    val snackBarData = helper.snackBarState ?: return
+    val density = LocalDensity.current
+    val navigationBar = AppNavigationBar.current
+
+    val footerHeight = if (footerHeightPx > 0) {
+            footerHeightPx
+    } else {
+        with(density) {
+            min(navigationBar, 21.dp).toPx()
+        }
+    }.toInt()
+
+    var startPosition by remember { mutableStateOf(Float.MAX_VALUE) }
+    val targetPosition = 0f
+
+    var offsetY by remember { mutableStateOf(Animatable(startPosition)) }
+
+    LaunchedEffect(startPosition) {
+        if (startPosition != Float.MAX_VALUE){
+            offsetY.snapTo(startPosition)
+            offsetY.animateTo(targetPosition, tween(350))
+        }
+    }
+
+    LaunchedEffect(helper.requestHide) {
+        if (helper.requestHide) {
+            offsetY.animateTo(startPosition, tween(200))
+            helper.removeSnackBarNow()
+            snackBarData.onDismiss?.invoke()
+        }
+    }
+
+    LaunchedEffect(snackBarData.type.duration) {
+        val duration = snackBarData.type.duration
+        if (duration != null) {
+            delay(duration)
+            helper.hideSnackBar()
+        }
+    }
+
+    DisposableEffect(Unit) {
+        onDispose { snackBarData.onDismiss?.invoke() }
+    }
+
+    Box(
+        modifier = Modifier
+            .offset { IntOffset(0, offsetY.value.toInt() - footerHeight) }
+            .onGloballyPositioned {
+                if (startPosition != it.size.height.toFloat()) {
+                    startPosition = it.size.height.toFloat()
+                    offsetY = Animatable(startPosition)
+                }
+            }
+            .fillMaxWidth()
+    ) {
+        when (val type = snackBarData.type) {
+            is SnackBar.Custom -> type.content()
+            is SnackBar.Toast -> {}
+        }
+    }
+}
+
 
 
 

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

@@ -59,11 +59,12 @@ fun Badge(label: String = "Label", backgroundColor: Color? = null) {
     if (backgroundColor != null && primaryColors.contains(backgroundColor)) {
         badgeColor = backgroundColor
     }
+    val scaleSize = scaleSize(16f)
 
     Box(
         modifier = Modifier
-            .height(scaleSize(16.toFloat()).dp)
-            .widthIn(min = scaleSize(16.toFloat()).dp)
+            .height(scaleSize.dp)
+            .widthIn(min = scaleSize.dp)
             .background(color = badgeColor, shape = RoundedCornerShape(Radius.M))
             .border(width = 1.dp, shape = RoundedCornerShape(Radius.M), color = Colors.black_01)
             .padding(horizontal = Spacing.XS), contentAlignment = Alignment.Center

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

@@ -60,27 +60,29 @@ fun Chip(
     val (height, horizontal, iconSize, iconSpacing) =
         listOf(scaleSize(dims.height), scaleSize(dims.horizontal), scaleSize(dims.iconSize), scaleSize(dims.iconSpacing))
 
+    val radius = scaleSize(Radius.L)
+
     Row(
         modifier
             .wrapContentWidth()
-            .height(height)
-            .clip(RoundedCornerShape(Radius.L))
+            .height(height.dp)
+            .clip(RoundedCornerShape(radius))
             .background(bg)
             .conditional(selected) {
-                Modifier.border(width = 2.dp, color = theme.colors.secondary, shape = RoundedCornerShape(Radius.L))
+                Modifier.border(width = 2.dp, color = theme.colors.secondary, shape = RoundedCornerShape(radius))
             }
             .activeOpacityClickable {
                 onClick()
             }
-            .padding(horizontal = horizontal)
+            .padding(horizontal = horizontal.dp)
             .conditional(accessibilityLabel != null) {
                 setAutomationId(accessibilityLabel.toString())
             },
         verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.spacedBy(iconSpacing)
+        horizontalArrangement = Arrangement.spacedBy(iconSpacing.dp)
     ) {
         if (iconLeft != null) {
-            Icon(source = iconLeft, size = dims.iconSize, color = leftTint)
+            Icon(source = iconLeft, size = dims.iconSize.dp, color = leftTint)
         }
 
         if (!label.isNullOrEmpty()) {
@@ -99,7 +101,7 @@ fun Chip(
         }
 
         if (iconRight != null) {
-            Icon(source = iconRight, size = iconSize, color = rightTint)
+            Icon(source = iconRight, size = iconSize.dp, color = rightTint)
         }
     }
 }
@@ -109,23 +111,23 @@ enum class ChipSize { SMALL, LARGE }
 object ChipDefaults {
     @Immutable
     data class Dimensions(
-        val height: Dp,
-        val horizontal: Dp,
-        val iconSize: Dp,
-        val iconSpacing: Dp,
+        val height: Float,
+        val horizontal: Float,
+        val iconSize: Float,
+        val iconSpacing: Float,
     )
 
     val Large = Dimensions(
-        height = 32.dp,
-        horizontal = 12.dp,
-        iconSize = 20.dp,
-        iconSpacing = 4.dp,
+        height = 32f,
+        horizontal = 12f,
+        iconSize = 20f,
+        iconSpacing = 4f,
     )
 
     val Small = Dimensions(
-        height = 24.dp,
-        horizontal = 10.dp,
-        iconSize = 16.dp,
-        iconSpacing = 4.dp,
+        height = 24f,
+        horizontal = 10f,
+        iconSize = 16f,
+        iconSpacing = 4f,
     )
 }

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

@@ -13,6 +13,8 @@ import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import coil3.compose.AsyncImage
+import coil3.compose.LocalPlatformContext
+import coil3.request.ImageRequest
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.utils.Icons
 import vn.momo.kits.utils.noThemeIcons
@@ -24,6 +26,9 @@ fun Icon(
     color: Color? = AppTheme.current.colors.text.default,
     modifier: Modifier = Modifier,
 ) {
+    // decode image without downscaling it
+    val context = LocalPlatformContext.current
+
     val iconUrl = remember(source) {
         if (source.contains("https")) {
             source
@@ -49,7 +54,13 @@ fun Icon(
     ) {
         AsyncImage(
             modifier = Modifier.matchParentSize(),
-            model = iconUrl,
+            model = ImageRequest.Builder(context)
+                .data(iconUrl)
+                .size(
+                    coil3.size.Dimension.Undefined,
+                    coil3.size.Dimension.Undefined
+                )
+                .build(),
             contentDescription = null,
             contentScale = ContentScale.Fit,
             colorFilter = colorFilter,

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

@@ -34,6 +34,7 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.input.PasswordVisualTransformation
 import androidx.compose.ui.text.input.VisualTransformation
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -42,7 +43,9 @@ import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Radius
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
+import vn.momo.kits.const.scaleSize
 import vn.momo.kits.modifier.setAutomationId
+import vn.momo.kits.navigation.ScaleSizeScope
 
 data class InputSizeDetail(
     val borderWidth: Dp,
@@ -213,20 +216,24 @@ fun Input(
         if (disabled) "input_${floatingValue}_disabled" else "input_$floatingValue"
     }
 
+    val fontSize = scaleSize(16.sp)
+    val lineHeight = scaleSize(24.sp)
+
     val textStyle = remember(textColor, fontWeight) {
         TextStyle(
             color = textColor,
-            fontSize = 16.sp,
-            lineHeight = 24.sp,
+            fontSize = fontSize,
+            lineHeight = lineHeight,
             fontWeight = fontWeight.value
         )
     }
 
     val placeholderStyle = remember(placeholderColor, fontWeight) {
         TextStyle(
-            fontSize = 16.sp,
-            lineHeight = 24.sp,
-            fontWeight = fontWeight.value
+            fontSize = fontSize,
+            lineHeight = lineHeight,
+            fontWeight = fontWeight.value,
+            textAlign = TextAlign.Center
         )
     }
 
@@ -331,13 +338,17 @@ fun Input(
                             )
                         }
 
-                        Box(Modifier.weight(1f)) {
+                        Box(Modifier.weight(1f), contentAlignment = Alignment.CenterStart) {
                             if (text.value.isEmpty()) {
-                                Text(
-                                    text = placeholder,
-                                    style = placeholderStyle,
-                                    color = placeholderColor
-                                )
+                                ScaleSizeScope(
+                                    disableScale = true
+                                ) {
+                                    Text(
+                                        text = placeholder,
+                                        style = placeholderStyle,
+                                        color = placeholderColor
+                                    )
+                                }
                             }
                             innerTextField()
                         }

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

@@ -30,6 +30,7 @@ import androidx.compose.ui.zIndex
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
+import vn.momo.kits.const.scaleSize
 
 @Composable
 fun InputDropDown(
@@ -76,6 +77,9 @@ fun InputDropDown(
 
     val testId = if (disabled) "input_${floatingValue}_disabled" else "input_$floatingValue"
 
+    val fontSize = scaleSize(16.sp)
+    val lineHeight = scaleSize(24.sp)
+
     Column(modifier = Modifier.clickable(enabled = !disabled, onClick = onPress).semantics {
         contentDescription = floatingValue; testTag = testId
     }) {
@@ -142,8 +146,8 @@ fun InputDropDown(
                         Text(
                             text = value.value.ifEmpty { placeholder },
                             style = TextStyle(
-                                fontSize = 16.sp,
-                                lineHeight = 24.sp
+                                fontSize = fontSize,
+                                lineHeight = lineHeight
                             ),
                             color = if (value.value.isEmpty()) placeholderColor else textColor
                         )