@momo-kits/native-kits 0.89.19 → 0.89.20

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

@@ -1,48 +1,23 @@
 package vn.momo.kits.application
 
-import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.asPaddingValues
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.systemBars
-import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.runtime.remember
 import androidx.compose.runtime.staticCompositionLocalOf
-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 cafe.adriel.voyager.core.screen.Screen
-import cafe.adriel.voyager.navigator.LocalNavigator
-import cafe.adriel.voyager.navigator.bottomSheet.BottomSheetNavigator
-import cafe.adriel.voyager.navigator.bottomSheet.LocalBottomSheetNavigator
-import cafe.adriel.voyager.navigator.currentOrThrow
-import cafe.adriel.voyager.transitions.SlideTransition
 import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
-import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Theme
 import vn.momo.kits.const.defaultTheme
+import vn.momo.kits.platform.disableOverscroll
 
 val AppNavigator = staticCompositionLocalOf<Navigator> {
     error("no navigator provided!")
 }
 
-class Navigator(
-    private val stack: cafe.adriel.voyager.navigator.Navigator,
-    private val sheet: BottomSheetNavigator,
-) {
+class Navigator {
     fun push(content: @Composable () -> Unit) {
-        stack.push(StackScreen {
-            content()
-        })
     }
 
     fun present(content: @Composable () -> Unit) {
@@ -54,21 +29,12 @@ class Navigator(
     }
 
     fun pop() {
-        if (sheet.isVisible) {
-            sheet.hide()
-        } else {
-            stack.pop()
-        }
     }
 
     fun replace(content: @Composable () -> Unit) {
-        stack.replace(StackScreen {
-            content()
-        })
     }
 
     fun popToTop() {
-        stack.popUntilRoot()
     }
 
     fun showModal(
@@ -76,122 +42,24 @@ class Navigator(
         canBackgroundClose: Boolean = true,
         content: @Composable () -> Unit,
     ) {
-        sheet.show(ModalScreen(onClose = onClose, barrierDismissible = canBackgroundClose) {
-            content()
-        })
     }
 
     fun showBottomSheet(content: @Composable () -> Unit) {
-        sheet.show(SheetScreen {
-            content()
-        })
     }
 }
 
-@OptIn(ExperimentalMaterialApi::class)
 @Composable
 fun ApplicationContainer(
     theme: Theme = defaultTheme,
-    statusBarHeight: Dp = WindowInsets.systemBars.asPaddingValues().calculateTopPadding(),
     content: @Composable () -> Unit,
 ) {
+    disableOverscroll()
     CompositionLocalProvider(
         AppTheme provides theme,
-        AppStatusBar provides statusBarHeight,
+        AppNavigator provides Navigator(),
+        AppStatusBar provides WindowInsets.systemBars.asPaddingValues().calculateTopPadding(),
     ) {
-        BottomSheetNavigator(sheetBackgroundColor = Color.Transparent, sheetElevation = 0.dp) {
-            cafe.adriel.voyager.navigator.Navigator(MainScreen {
-                content()
-            }) {
-                SlideTransition(it)
-            }
-        }
-    }
-
-}
-
-class MainScreen(private val content: @Composable () -> Unit) : Screen {
-    @Composable
-    override fun Content() {
-        CompositionLocalProvider(
-            AppNavigator provides Navigator(
-                LocalNavigator.currentOrThrow,
-                LocalBottomSheetNavigator.current
-            ),
-        ) {
-            content()
-        }
-    }
-}
-
-class StackScreen(private val content: @Composable () -> Unit) : Screen {
-    @Composable
-    override fun Content() {
-        CompositionLocalProvider(
-            AppNavigator provides Navigator(
-                LocalNavigator.currentOrThrow,
-                LocalBottomSheetNavigator.current
-            ),
-        ) {
-            content()
-        }
+        content()
     }
-}
 
-class SheetScreen(private val content: @Composable () -> Unit) : Screen {
-    @Composable
-    override fun Content() {
-        CompositionLocalProvider(
-            AppNavigator provides Navigator(
-                LocalNavigator.currentOrThrow,
-                LocalBottomSheetNavigator.current
-            ),
-        ) {
-            content()
-        }
-    }
-}
-
-class ModalScreen(
-    private val onClose: () -> Unit,
-    private val barrierDismissible: Boolean = true,
-    private val content: @Composable () -> Unit,
-) :
-    Screen {
-    @Composable
-    override fun Content() {
-        val navigator = Navigator(
-            LocalNavigator.currentOrThrow,
-            LocalBottomSheetNavigator.current
-        )
-        CompositionLocalProvider(
-            AppNavigator provides navigator,
-        ) {
-            Box(
-                modifier = Modifier.fillMaxSize().padding(horizontal = Spacing.XL)
-                    .background(Color.Transparent)
-                    .clickable(
-                        interactionSource = remember { MutableInteractionSource() },
-                        indication = null,
-                        onClick = {
-                            if (barrierDismissible) {
-                                navigator.pop()
-                                onClose()
-                            }
-                        }
-                    ),
-                contentAlignment = Alignment.Center
-            ) {
-                Box(
-                    modifier = Modifier.clickable(
-                        interactionSource = remember { MutableInteractionSource() },
-                        indication = null
-                    ) {},
-                    contentAlignment = Alignment.Center
-                ) {
-                    content()
-                }
-            }
-        }
-    }
-}
+}

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

@@ -1,10 +1,12 @@
 package vn.momo.kits.application
 
+import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
@@ -16,14 +18,18 @@ 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.getValue
 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.input.pointer.pointerInput
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.min
+import androidx.compose.ui.zIndex
+import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Spacing
@@ -51,6 +57,9 @@ fun Screen(
     useAvoidKeyboard: Boolean = true,
     footer: @Composable (() -> Unit)? = null,
     headerRight: @Composable (() -> Unit)? = null,
+    fabProps: FabProps? = null,
+    animatedHeader: AnimatedHeader? = null,
+    layoutOffset: Dp = 56.dp,
     content: @Composable () -> Unit,
 ) {
     val keyboardController = LocalSoftwareKeyboardController.current
@@ -62,50 +71,108 @@ fun Screen(
         else -> 0.dp
     }
 
+    val indicator = WindowInsets.systemBars.asPaddingValues().calculateBottomPadding()
+    val bottomPadding = min(indicator, 21.dp)
+    val scrollState = rememberScrollState()
+
+    val opacity by animateFloatAsState(
+        targetValue = ((scrollState.value / 114f)).coerceIn(0f, 1f)
+    )
+
+    val headerAnimated =
+        @Composable { animatedHeader?.composable?.invoke(scrollState.value) }
+
     Box(
-        Modifier.fillMaxSize().background(backgroundColor ?: AppTheme.current.colors.background.default)
+        Modifier.fillMaxSize()
+            .background(backgroundColor ?: AppTheme.current.colors.background.default)
     ) {
-        HeaderImage(headerType, headerBackground ?: AppTheme.current.assets.headerBackground)
+
+        if (animatedHeader === null) {
+            HeaderImage(
+                headerType,
+                headerBackground ?: AppTheme.current.assets.headerBackground
+            )
+        } else {
+            Box(
+                Modifier.zIndex(5f).background(Color.White.copy(alpha = opacity))
+                    .graphicsLayer { alpha = opacity }) {
+                HeaderImage(
+                    headerType,
+                    headerBackground ?: AppTheme.current.assets.headerBackground
+                )
+            }
+        }
+
+        Header(
+            headerType = headerType,
+            title = title,
+            titlePosition = titlePosition,
+            headerRight = headerRight,
+            isBack = isBack,
+            goBack = goBack,
+            opacity = opacity,
+            animatedHeader = animatedHeader,
+            scrollState = scrollState.value
+        )
+
         Column(
-            modifier = Modifier.fillMaxSize().pointerInput(Unit) {
-                detectTapGestures(onTap = {
-                    keyboardController?.hide()
-                })
-            },
+            modifier = Modifier.fillMaxSize()
+                .padding(top = if (animatedHeader === null && headerType !== HeaderType.NONE) AppStatusBar.current + 52.dp else 0.dp)
+                .pointerInput(Unit) {
+                    detectTapGestures(onTap = {
+                        keyboardController?.hide()
+                    })
+                }
+                .zIndex(1f),
         ) {
-            Header(
-                headerType = headerType,
-                title = title,
-                titlePosition = titlePosition,
-                headerRight = headerRight,
-                isBack = isBack,
-                goBack = goBack,
-            )
 
             Column(
                 modifier = if (scrollable) Modifier.weight(1f).padding(bottom = keyboardSize)
-                    .verticalScroll(rememberScrollState()) else
+                    .verticalScroll(scrollState) else
                     Modifier.padding(bottom = keyboardSize),
                 verticalArrangement = verticalArrangement,
                 horizontalAlignment = horizontalAlignment
             ) {
-                content()
+                Box {
+                    headerAnimated()
+                    Column {
+                        if (animatedHeader !== null) {
+                            Spacer(modifier = Modifier.padding(top = AppStatusBar.current + 52.dp + layoutOffset))
+                        }
+                        content()
+                    }
+                }
             }
 
             footer?.let {
-                Footer(footer, keyboardSize)
+                Footer(footer, keyboardSize, bottomPadding)
             }
         }
+
+        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,
+                keyboardSize = keyboardSize
+            )
+        }
     }
 }
 
 @Composable
-fun Footer(footer: @Composable (() -> Unit)? = null, keyboardSize: Dp = 0.dp) {
-    val indicator = WindowInsets.systemBars.asPaddingValues().calculateBottomPadding()
+fun Footer(footer: @Composable (() -> Unit)? = null, keyboardSize: Dp = 0.dp, bottom: Dp = 0.dp) {
     Box(
         Modifier
-            .offset(y = - keyboardSize)
-            .padding(bottom = min(indicator, 21.dp))
+            .offset(y = -keyboardSize)
+            .padding(bottom = bottom)
             .shadow(
                 Colors.black_20.copy(alpha = 0.1f),
                 borderRadius = 0.dp,

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

@@ -18,10 +18,26 @@ 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.utils.primaryColors
+
+
 
 @Composable
 fun Badge(label: String = "Label", backgroundColor: Color? = null) {
+    val primaryColors = listOf(
+        Color(0xFFF0F0F0),
+        Color(0xFFEB2F96),
+        Color(0xFF962AF0),
+        Color(0xFF4E4BFF),
+        Color(0xFF007AFF),
+        Color(0xFF13C2C2),
+        Color(0xFF34C759),
+        Color(0xFFA0D911),
+        Color(0xFFFFCC00),
+        Color(0xFFFA8C16),
+        Color(0xFFFA541C),
+        Color(0xFFF5222D)
+    )
+
     fun isNumber(label: String): Boolean {
         val numberRegex = "^\\d+$".toRegex()
         return numberRegex.matches(label)

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

@@ -11,8 +11,7 @@ import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import com.skydoves.landscapist.ImageOptions
-import com.skydoves.landscapist.coil3.CoilImage
+import coil3.compose.AsyncImage
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.utils.Icons
 
@@ -29,13 +28,12 @@ fun Icon(
         Icons[source]
     }
     Box(modifier.size(size), contentAlignment = Alignment.Center) {
-        CoilImage(
+        AsyncImage(
             modifier = Modifier.fillMaxSize(),
-            imageOptions = ImageOptions(
-                contentScale = ContentScale.Fit,
-                colorFilter = color?.let { ColorFilter.tint(it) }
-            ),
-            imageModel = { icon },
+            model = icon,
+            contentDescription = null,
+            contentScale = ContentScale.Fit,
+            colorFilter = color?.let { ColorFilter.tint(it) }
         )
     }
 }

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

@@ -1,6 +1,11 @@
 package vn.momo.kits.components
 
+import androidx.compose.foundation.layout.Box
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.ColorFilter
@@ -10,9 +15,7 @@ import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTag
-import com.skydoves.landscapist.ImageOptions
-import com.skydoves.landscapist.coil3.CoilImage
-import org.jetbrains.compose.resources.ExperimentalResourceApi
+import coil3.compose.AsyncImage
 import vn.momo.kits.const.AppTheme
 
 data class Options(
@@ -22,38 +25,54 @@ data class Options(
     val alpha: Float = DefaultAlpha,
 )
 
-@OptIn(ExperimentalResourceApi::class)
+enum class ImageState {
+    Loading, Success, Error
+}
+
 @Composable
 fun Image(
-    source: String,
+    source: Any,
     modifier: Modifier = Modifier,
     options: Options? = null,
     loading: Boolean = true,
 ) {
     modifier.semantics {contentDescription = "img|$source"; testTag = "img|$source"}
-    var imageOptions = ImageOptions()
+    var imageOptions = Options()
+    var imageState by remember { mutableStateOf(ImageState.Loading) }
+
     options?.let {
-        imageOptions = ImageOptions(
+        imageOptions = Options(
             alignment = options.alignment,
             contentScale = options.contentScale,
             colorFilter = options.colorFilter,
             alpha = DefaultAlpha,
         )
     }
-    CoilImage(
-        modifier = modifier,
-        imageOptions = imageOptions,
-        imageModel = { source },
-        loading = {
-            if (loading) Skeleton()
-        },
-        failure = {
-            Icon(
+
+    Box(modifier = modifier) {
+        AsyncImage(
+            modifier = modifier,
+            model = source,
+            contentDescription = null,
+            contentScale = imageOptions.contentScale,
+            alignment = imageOptions.alignment,
+            colorFilter = imageOptions.colorFilter,
+            alpha = imageOptions.alpha,
+            onLoading = { imageState = ImageState.Loading },
+            onSuccess = { imageState = ImageState.Success },
+            onError = { imageState = ImageState.Error },
+        )
+        when (imageState) {
+            ImageState.Loading -> Skeleton()
+            ImageState.Error -> Icon(
                 source = "media_fail",
                 color = AppTheme.current.colors.text.disable,
+                modifier = modifier
             )
+            ImageState.Success -> {}
         }
-    )
+    }
+
 }
 
 @Composable

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

@@ -32,6 +32,8 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
 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.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -116,6 +118,36 @@ fun RenderRightIcon(loading: Boolean, icon: String, color: Color, onClick: () ->
     }
 }
 
+@Composable
+fun ErrorView(errorMessage: String, errorSpacing: Boolean, hintText: String) {
+    val errorColor = AppTheme.current.colors.error.primary
+    val hintColor = AppTheme.current.colors.text.hint
+    val hintTextDefault = hintText.ifEmpty { "Không thể chỉnh sửa" }
+
+    if (errorMessage.isNotEmpty() || hintText.isNotEmpty()) {
+        val color: Color =
+            if (errorMessage.isNotEmpty()) errorColor else hintColor
+        Row(
+            Modifier.padding(top = Spacing.XS),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Icon(
+                size = 16.dp,
+                color = color,
+                source = "ic_error"
+            )
+            Text(
+                errorMessage.ifEmpty { hintTextDefault },
+                style = Typography.descriptionS,
+                modifier = Modifier.padding(start = Spacing.XS),
+                color = color,
+            )
+        }
+    } else if (errorSpacing) {
+        Spacer(Modifier.padding(top = Spacing.XS).height(18.dp))
+    }
+}
+
 @Composable
 fun Input(
     text: MutableState<String> = remember { mutableStateOf("") },
@@ -126,8 +158,12 @@ fun Input(
     placeholder: String = "",
     size: InputSize = InputSize.SMALL,
     onChangeText: (String) -> Unit = {},
+    hintText: String = "",
     error: String = "",
+    errorSpacing: Boolean = false,
     disabled: Boolean = false,
+    readOnly: Boolean = false,
+    secureTextEntry: Boolean = false,
     icon: String = "",
     iconColor: Color = AppTheme.current.colors.text.default,
     onRightIconPressed: () -> Unit = {},
@@ -141,6 +177,7 @@ fun Input(
     keyboardType: KeyboardType = KeyboardType.Text,
 ) {
     var isFocused by remember { mutableStateOf(false) }
+    var passHidden by remember { mutableStateOf(false) }
     var isBlurred = false
     val disabledColor = AppTheme.current.colors.text.disable
     var textColor = AppTheme.current.colors.text.default
@@ -164,6 +201,7 @@ fun Input(
     Column {
         BasicTextField(
             enabled = !disabled,
+            readOnly = readOnly,
             singleLine = true,
             value = text.value,
             textStyle = TextStyle(
@@ -172,7 +210,8 @@ fun Input(
                 lineHeight = 24.sp,
                 fontWeight = fontWeight.value
             ),
-            keyboardOptions = KeyboardOptions.Default.copy(keyboardType = keyboardType),
+            visualTransformation = if (secureTextEntry && !passHidden) PasswordVisualTransformation() else VisualTransformation.None,
+            keyboardOptions = KeyboardOptions.Default.copy(keyboardType = if (secureTextEntry) KeyboardType.Ascii else keyboardType),
             modifier = Modifier.height(size.values.height).onFocusChanged {
                 isFocused = it.isFocused
                 if (it.isFocused) {
@@ -237,7 +276,7 @@ fun Input(
                         if (leadingIcon.isNotEmpty()) {
                             Icon(
                                 source = leadingIcon,
-                                modifier = Modifier.padding(end = Spacing.XS),
+                                modifier = Modifier.padding(end = Spacing.M),
                                 size = if (size.name == InputSize.SMALL.name) 24.dp else 32.dp,
                                 color = leadingIconColor
                             )
@@ -271,29 +310,23 @@ fun Input(
                                 )
                             }
                         }
-                        RenderRightIcon(loading, icon, iconTintColor, onRightIconPressed)
+                        if (secureTextEntry && passHidden) {
+                            val hidePassword = { onRightIconPressed(); passHidden = !passHidden}
+                            RenderRightIcon(loading, "24_security_eye_open", iconTintColor,
+                                hidePassword)
+                        } else if (secureTextEntry && !passHidden) {
+                            val showPassword = { onRightIconPressed(); passHidden = !passHidden}
+                            RenderRightIcon(loading, "24_security_eye_off", iconTintColor,
+                                showPassword)
+                        } else {
+                            RenderRightIcon(loading, icon, iconTintColor,
+                                onRightIconPressed)
+                        }
                     }
                 }
             },
         )
         // show error
-        if (error.isNotEmpty()) {
-            Row(
-                Modifier.padding(top = Spacing.XS),
-                verticalAlignment = Alignment.CenterVertically
-            ) {
-                Icon(
-                    size = 16.dp,
-                    color = AppTheme.current.colors.error.primary,
-                    source = "ic_error"
-                )
-                Text(
-                    error,
-                    style = Typography.descriptionS,
-                    modifier = Modifier.padding(start = Spacing.XS),
-                    color = AppTheme.current.colors.error.primary,
-                )
-            }
-        }
+        ErrorView(error, errorSpacing, hintText)
     }
 }