@momo-kits/native-kits 0.156.6-dialog.1-debug → 0.156.6-newcompose.1-debug

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

@@ -18,10 +18,8 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.window.DialogProperties
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
-import androidx.navigation.compose.dialog
 import androidx.navigation.compose.rememberNavController
 import androidx.navigation.toRoute
 import vn.momo.kits.application.AppConfig
@@ -32,11 +30,9 @@ import vn.momo.kits.application.MiniAppContext
 import vn.momo.kits.const.AppNavigationBar
 import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
-import vn.momo.kits.const.AppThemeController
 import vn.momo.kits.const.Theme
 import vn.momo.kits.const.ThemeAssets
 import vn.momo.kits.const.defaultTheme
-import vn.momo.kits.platform.ConfigureDialogWindow
 import vn.momo.kits.utils.getAppStatusBarHeight
 import vn.momo.maxapi.IMaxApi
 
@@ -83,7 +79,6 @@ fun NavigationContainer(
         LocalNavigator provides navigator,
         LocalMaxApi provides maxApi,
         AppTheme provides theme.value,
-        AppThemeController provides { theme.value = it },
         AppStatusBar provides statusBarHeight,
         AppNavigationBar provides navigationBarHeight,
         ApplicationContext provides mergedContext,
@@ -95,7 +90,6 @@ fun NavigationContainer(
         }
 
         NavHost(navController, startDestination = startDestination) {
-            // ── Stack screens (push/replace/reset) ──────────────────────────
             composable<DynamicScreenRoute>(
                 enterTransition = {
                     slideInHorizontally(
@@ -124,7 +118,6 @@ fun NavigationContainer(
                 }
             }
 
-            // ── Present screens (vertical slide dialog) ──────────────────────
             composable<DynamicDialogRoute>(
                 enterTransition = {
                     slideInVertically (
@@ -152,48 +145,6 @@ fun NavigationContainer(
                     )
                 }
             }
-
-            // ── Bottom Sheet dialog ──────────────────────────────────────────
-            dialog<DynamicBottomSheetRoute>(
-                dialogProperties = DialogProperties(
-                    dismissOnBackPress = false,
-                    dismissOnClickOutside = false,
-                    usePlatformDefaultWidth = false
-                )
-            ) { backStackEntry ->
-                val route = backStackEntry.toRoute<DynamicBottomSheetRoute>()
-                val screen = DynamicScreenRegistry.getScreen(route.id)
-                ConfigureDialogWindow()
-                screen?.content?.invoke()
-            }
-
-            // ── Modal dialog ─────────────────────────────────────────────────
-            dialog<DynamicModalRoute>(
-                dialogProperties = DialogProperties(
-                    dismissOnBackPress = false,
-                    dismissOnClickOutside = false,
-                    usePlatformDefaultWidth = false,
-                )
-            ) { backStackEntry ->
-                val route = backStackEntry.toRoute<DynamicModalRoute>()
-                val screen = DynamicScreenRegistry.getScreen(route.id)
-                ConfigureDialogWindow()
-                screen?.content?.invoke()
-            }
-
-            // ── Snack Bar dialog ─────────────────────────────────────────────
-            dialog<DynamicSnackBarRoute>(
-                dialogProperties = DialogProperties(
-                    dismissOnBackPress = false,
-                    dismissOnClickOutside = false,
-                    usePlatformDefaultWidth = false
-                )
-            ) { backStackEntry ->
-                val route = backStackEntry.toRoute<DynamicSnackBarRoute>()
-                val screen = DynamicScreenRegistry.getScreen(route.id)
-                ConfigureDialogWindow()
-                screen?.content?.invoke()
-            }
         }
     }
 
@@ -207,3 +158,4 @@ fun NavigationContainer(
 val LocalMaxApi = staticCompositionLocalOf<IMaxApi?> {
     error("No MaxApi provided")
 }
+

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/Navigator.kt

@@ -3,6 +3,8 @@ package vn.momo.kits.navigation
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -70,18 +72,31 @@ class Navigator(
     fun pop(count: Int = 1, callBack: (() -> Unit)? = null) {
         scope.launch {
             repeat(count) {
-                dismissEntry()
+                if (OverplayComponentRegistry.getOverplayType() == OverplayComponentType.SNACK_BAR){
+                    dismissScreen()
+                    OverplayComponentRegistry.hardClearAfterDismiss()
+                }
+                else if (OverplayComponentRegistry.isOverplayShowing()){
+                    dismissOverplay()
+                } else {
+                    dismissScreen()
+                }
             }
             callBack?.invoke()
         }
     }
+    private suspend fun dismissOverplay(isDelay: Boolean = true) {
+        OverplayComponentRegistry.clear()
+        if (isDelay) delay(300L)
+        OverplayComponentRegistry.hardClearAfterDismiss()
+    }
 
-    private suspend fun dismissEntry() {
-        if (navController.previousBackStackEntry != null) {
+    private suspend fun dismissScreen() {
+        if (navController.previousBackStackEntry != null){
             navController.popBackStack()
             delay(300L)
-            DynamicScreenRegistry.getLatestScreen()?.let {
-                DynamicScreenRegistry.unregisterScreen(it.id)
+            DynamicScreenRegistry.getLatestScreen()?.let { it1 ->
+                DynamicScreenRegistry.unregisterScreen(it1.id)
             }
         } else {
             maxApi?.dismiss {  }
@@ -107,14 +122,8 @@ class Navigator(
         barrierDismissible: Boolean = true,
         onDismiss: (() -> Unit)? = null
     ){
-        val route = DynamicScreenRegistry.register({
-            ModalScreen(
-                content = content,
-                barrierDismissible = barrierDismissible,
-                onDismiss = onDismiss
-            )
-        }, null)
-        navController.navigate(DynamicModalRoute(route.id))
+        val id = DynamicScreenRegistry.getLatestScreen()?.id ?: -1
+        OverplayComponentRegistry.registerOverplay(id, content, OverplayComponentType.MODAL, false, barrierDismissible, onDismiss)
     }
 
     fun showBottomSheet(
@@ -124,42 +133,32 @@ class Navigator(
         onDismiss: (() -> Unit)? = null,
         bottomSheetHeader: BottomHeader? = null
     ){
-        val route = DynamicScreenRegistry.register({
-            BottomSheet(
-                content = content,
-                header = bottomSheetHeader ?: Title(),
-                isSurface = isSurface,
-                barrierDismissible = barrierDismissible,
-                onDismiss = onDismiss
-            )
-        }, null)
-        navController.navigate(DynamicBottomSheetRoute(route.id))
+        val id = DynamicScreenRegistry.getLatestScreen()?.id ?: -1
+        OverplayComponentRegistry.registerOverplay(id, content, OverplayComponentType.BOTTOM_SHEET, isSurface, barrierDismissible, onDismiss, bottomSheetHeader)
     }
 
     fun showSnackBar(snackBar: SnackBar, onDismiss: (() -> Unit)? = null) {
-        val capturedSnackBar = snackBar
-        val capturedOnDismiss = onDismiss
-        val route = DynamicScreenRegistry.register({
-            Box(Modifier.fillMaxSize(), contentAlignment = Alignment.BottomCenter) {
-                SnackBar(capturedSnackBar, capturedOnDismiss)
-            }
-        }, null)
-        navController.navigate(DynamicSnackBarRoute(route.id))
+        val id = DynamicScreenRegistry.getLatestScreen()?.id ?: -1
+        scope.launch {
+            OverplayComponentRegistry.registerOverplay(
+                id = id,
+                content = {
+                    SnackBar(snackBar, onDismiss)
+                },
+                type = OverplayComponentType.SNACK_BAR,
+                onDismiss = onDismiss
+            )
+        }
     }
 
     fun hideSnackBar() {
         scope.launch {
-            if (navController.previousBackStackEntry != null) {
-                navController.popBackStack()
-                delay(250L)
-                DynamicScreenRegistry.getLatestScreen()?.let {
-                    DynamicScreenRegistry.unregisterScreen(it.id)
-                }
-            }
+            OverplayComponentRegistry.clear()
+            delay(250L)
+            OverplayComponentRegistry.hardClearAfterDismiss()
         }
     }
 
-
     fun dispose(){
         scope.cancel()
     }
@@ -175,15 +174,6 @@ data class DynamicScreenRoute(val id: Int)
 @Serializable
 data class DynamicDialogRoute(val id: Int)
 
-@Serializable
-data class DynamicBottomSheetRoute(val id: Int)
-
-@Serializable
-data class DynamicModalRoute(val id: Int)
-
-@Serializable
-data class DynamicSnackBarRoute(val id: Int)
-
 data class DynamicScreen(
     val id: Int,
     val content: @Composable () -> Unit,
@@ -225,3 +215,117 @@ object DynamicScreenRegistry {
         screens[id]?.options = options
     }
 }
+
+
+sealed class OverplayComponentParams {
+    class Modal(
+        val onDismiss: (() -> Unit)? = null,
+        val barrierDismissible: Boolean = true
+    ) : OverplayComponentParams()
+
+    class BottomSheet(
+        val isSurface: Boolean = false,
+        val onDismiss: (() -> Unit)? = null,
+        val barrierDismissible: Boolean = true,
+        val bottomSheetHeader: BottomHeader? = null,
+    ) : OverplayComponentParams()
+
+    class SnackBar() : OverplayComponentParams()
+}
+
+data class OverplayComponent(
+    val id: Int,
+    val type: OverplayComponentType? = null,
+    val content: @Composable () -> Unit,
+    val params: OverplayComponentParams? = null
+)
+
+enum class OverplayComponentType {
+    MODAL, BOTTOM_SHEET, SNACK_BAR
+}
+
+object OverplayComponentRegistry {
+    private var currentOverlayComponent : MutableState<OverplayComponent?> = mutableStateOf(null)
+    private var requestClose: (() -> Unit)? = null
+    internal fun bindClose(handler: (() -> Unit)?) {
+        requestClose = handler
+    }
+
+    fun registerOverplay(
+        id: Int,
+        content: @Composable () -> Unit,
+        type: OverplayComponentType,
+        isSurface: Boolean = false,
+        barrierDismissible: Boolean = true,
+        onDismiss: (() -> Unit)?,
+        bottomSheetHeader: BottomHeader? = null,
+    ){
+        val params = when(type){
+            OverplayComponentType.MODAL -> OverplayComponentParams.Modal(onDismiss, barrierDismissible)
+            OverplayComponentType.BOTTOM_SHEET -> OverplayComponentParams.BottomSheet(isSurface, onDismiss, barrierDismissible, bottomSheetHeader)
+            OverplayComponentType.SNACK_BAR -> OverplayComponentParams.SnackBar()
+        }
+
+        currentOverlayComponent.value = OverplayComponent(
+            id = id,
+            type = type,
+            content = content,
+            params = params
+        )
+    }
+
+    fun isOverplayShowing(): Boolean = currentOverlayComponent.value != null
+
+    fun getOverplayType(): OverplayComponentType? = currentOverlayComponent.value?.type
+
+    fun currentRootId(): Int? = currentOverlayComponent.value?.id
+
+    fun clear(){
+        if (requestClose != null) {
+            requestClose?.invoke()
+        } else {
+            currentOverlayComponent.value = null
+        }
+    }
+
+    internal fun hardClearAfterDismiss() {
+        currentOverlayComponent.value = null
+        requestClose = null
+    }
+
+    @Composable
+    fun OverlayComponent(){
+        val overplay = currentOverlayComponent.value ?: return
+
+        when (val params = overplay.params) {
+            is OverplayComponentParams.BottomSheet -> {
+                BottomSheet(
+                    content = overplay.content,
+                    header = params.bottomSheetHeader ?: Title(),
+                    isSurface = params.isSurface,
+                    barrierDismissible = params.barrierDismissible,
+                    onDismiss = params.onDismiss
+                )
+            }
+
+            is OverplayComponentParams.Modal -> {
+                ModalScreen(
+                    content = overplay.content,
+                    barrierDismissible = params.barrierDismissible,
+                    onDismiss = params.onDismiss
+                )
+            }
+
+            is OverplayComponentParams.SnackBar -> {
+                Box(
+                    modifier = Modifier.fillMaxSize(),
+                    contentAlignment = Alignment.BottomCenter
+                ) {
+                    overplay.content()
+                }
+            }
+
+            null -> {}
+        }
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/StackScreen.kt

@@ -138,6 +138,8 @@ internal fun StackScreen(
             Box(Modifier.zIndex(7f)){
                 FloatingContent()
             }
+
+            OverplayView(bottomTabIndex = bottomTabIndex, id = id)
         }
     }
 }
@@ -237,7 +239,18 @@ fun FooterContent(){
     }
 }
 
-
+@Composable
+fun OverplayView(bottomTabIndex: Int, id: Int){
+    val overplayType = OverplayComponentRegistry.getOverplayType()
+
+    if (overplayType != null) {
+        Box(Modifier.zIndex(if (overplayType == OverplayComponentType.SNACK_BAR) 3f else 8f).fillMaxSize()){
+            if (bottomTabIndex != -1) return@Box
+            if (OverplayComponentRegistry.currentRootId() != id) return@Box
+            OverplayComponentRegistry.OverlayComponent()
+        }
+    }
+}
 
 @Composable
 fun Footer(footerComponent: @Composable (() -> Unit)?, bottomPadding: Dp) {

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/bottomtab/BottomTabBar.kt

@@ -40,13 +40,15 @@ import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Radius
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.components.BadgeDot
+import vn.momo.kits.components.DotSize
 import vn.momo.kits.const.Typography
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.noFeedbackClickable
 import vn.momo.kits.platform.getScreenDimensions
 
 val floatingButtonWidth = 75.dp
-const val BOTTOM_TAB_BAR_HEIGHT = 56
+const val BOTTOM_TAB_BAR_HEIGHT = 64
 
 @Composable
 fun BottomTabBar(
@@ -142,6 +144,18 @@ fun RowScope.renderTabBarItem(
 
 @Composable
 fun TabBarItem(item: BottomTabItem, selected: Boolean, onClick: () -> Unit) {
+    fun isNumber(label: String): Boolean {
+        val numberRegex = "^\\d+$".toRegex()
+        return numberRegex.matches(label)
+    }
+    fun formatLabel(label: String): String? {
+        if (isNumber(label) && label.toInt() == 0) {
+            return null
+        }
+        return label
+    }
+    val badgeLabel = item.badgeLabel?.let { formatLabel(it) }
+
     Box(modifier = Modifier
         .fillMaxSize()
         .padding(horizontal = Spacing.XXS)
@@ -156,31 +170,34 @@ fun TabBarItem(item: BottomTabItem, selected: Boolean, onClick: () -> Unit) {
         Column(
             modifier = Modifier
                 .fillMaxSize()
-                .padding(horizontal = Spacing.XXS)
+                .padding(horizontal = Spacing.S, vertical = Spacing.S)
                 .noFeedbackClickable {
                     onClick()
                 },
             horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.Bottom
+            verticalArrangement = Arrangement.Center
         ) {
             Icon(
                 source = item.icon,
-                modifier = Modifier.weight(1f),
+                size = 28.dp,
+                modifier = Modifier.padding(Spacing.XS),
                 color = if (selected) AppTheme.current.colors.primary else AppTheme.current.colors.text.hint)
             Text(
                 text = item.label,
                 color = if (selected) AppTheme.current.colors.primary else AppTheme.current.colors.text.hint,
-                style = Typography.labelXsMedium,
+                style = if (selected) Typography.labelXsMedium else Typography.descriptionXsRegular,
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis
             )
         }
-        if(item.badgeLabel != null){
-            Box(modifier = Modifier
-                .offset(x = 44.dp, y = (-32).dp)
-            ){
-                Badge(item.badgeLabel)
-            }
+        if (badgeLabel != null) {
+            if (badgeLabel.isEmpty())
+                BadgeDot(
+                    size = DotSize.Small,
+                    modifier = Modifier.offset(x = 50.dp, y = (-48).dp)
+                )
+            else
+                Badge(badgeLabel, modifier = Modifier.offset(x = 44.dp, y = (-42).dp))
         }
     }
 }
@@ -190,7 +207,7 @@ fun FloatingButton(data: BottomTabFloatingButton) {
     Column(
         modifier = Modifier
             .width(floatingButtonWidth)
-            .padding(horizontal = Spacing.XXS)
+            .padding(horizontal = Spacing.XXS, vertical = Spacing.S)
             .conditional(IsShowBaseLineDebug) {
                 border(1.dp, Colors.blue_03)
             }

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

@@ -35,6 +35,7 @@ import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.modifier.activeOpacityClickable
 import vn.momo.kits.modifier.conditional
+import vn.momo.kits.modifier.setAutomationId
 import vn.momo.kits.navigation.LocalHeaderRightWidthPx
 import vn.momo.kits.navigation.LocalNavigator
 import vn.momo.kits.navigation.LocalOptions
@@ -119,14 +120,15 @@ fun Header(onBackHandler: (() -> Unit)? = null) {
 }
 
 @Composable
-fun BackButton(borderColor: Color, backgroundButton: Color, tintIconColor: Color, onBackHandler: () -> Unit){
+private fun BackButton(borderColor: Color, backgroundButton: Color, tintIconColor: Color, onBackHandler: () -> Unit){
     Box(
         modifier = Modifier
             .size(28.dp)
             .background(backgroundButton, RoundedCornerShape(100))
             .border(width = 0.2.dp, color = borderColor, shape = RoundedCornerShape(100))
             .activeOpacityClickable(onClick = onBackHandler)
-            .padding(Spacing.XS),
+            .padding(Spacing.XS)
+            .setAutomationId("btn_navigation_back"),
         contentAlignment = Alignment.Center
     ) {
         Icon(

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/component/HeaderTitle.kt

@@ -10,6 +10,7 @@ import androidx.compose.ui.unit.sp
 import androidx.compose.ui.zIndex
 import vn.momo.kits.components.Text
 import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.setAutomationId
 
 @Composable
 fun HeaderTitle(
@@ -17,7 +18,7 @@ fun HeaderTitle(
     color: Color? = null,
 ) {
     Text(
-        modifier = Modifier.fillMaxWidth().zIndex(1f),
+        modifier = Modifier.fillMaxWidth().zIndex(1f).setAutomationId("title_navigation_header"),
         text = title,
         textAlign = TextAlign.Start,
         style = Typography.actionSBold.copy(

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/component/SnackBar.kt

@@ -29,7 +29,7 @@ import vn.momo.kits.const.AppNavigationBar
 import vn.momo.kits.navigation.LocalFooterHeightPx
 import vn.momo.kits.navigation.LocalNavigator
 import vn.momo.kits.navigation.LocalOptions
-
+import vn.momo.kits.navigation.OverplayComponentRegistry
 
 sealed class SnackBar(open val duration: Long? = null) {
     data class Custom(
@@ -102,6 +102,9 @@ fun SnackBar(
     }
 
     DisposableEffect(Unit) {
+        OverplayComponentRegistry.bindClose {
+            closeEvent()
+        }
         onDispose {
             onDismiss?.invoke()
         }

package/compose/src/commonMain/kotlin/vn/momo/kits/platform/Platform.kt

@@ -5,7 +5,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.NativePaint
 import androidx.compose.ui.unit.Dp
-import vn.momo.kits.components.Options
 
 data class ScreenDimension(
     val width: Int,
@@ -40,24 +39,4 @@ expect fun LottieAnimation(
 
 expect fun NativePaint.setColor(
     color: Color = Color.Black
-)
-@Composable
-expect fun NativeImage(
-    source: Any,
-    options: Options,
-    loading: Boolean,
-    onLoading: () -> Unit = {},
-    onSuccess: () -> Unit = {},
-    onError: () -> Unit = {},
-)
-
-/**
- * Configures the current Dialog window's system-bar behaviour.
- *
- * @param decorFitsSystemWindows When `false` (the default) the dialog window
- *   extends behind the status bar and navigation bar so that a full-screen
- *   scrim/background covers the entire display uniformly.
- *   Pass `true` to restore the default platform inset handling.
- */
-@Composable
-expect fun ConfigureDialogWindow(decorFitsSystemWindows: Boolean = false)
+)

package/compose/src/commonMain/kotlin/vn/momo/kits/utils/Tracking.kt

@@ -0,0 +1,15 @@
+package vn.momo.kits.utils
+
+import androidx.compose.runtime.Composable
+import vn.momo.kits.application.LocalComponentInformation
+
+@Composable
+fun getComponentId(
+    componentName: String? = null,
+    accessibilityLabel: String? = null,
+): String {
+    val componentInformation = LocalComponentInformation.current
+    if (accessibilityLabel != null) return accessibilityLabel
+    if (componentInformation?.componentId != null) return componentInformation.componentId
+    return ""
+}