@momo-kits/native-kits 0.164.1-beta.13 → 0.164.1-beta.14-debug

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

@@ -0,0 +1,191 @@
+package vn.momo.kits.navigation
+
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.unit.Dp
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.rememberNavController
+import androidx.navigation.toRoute
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.flow.collectLatest
+import vn.momo.kits.application.LocalContext
+import vn.momo.kits.application.LocalLocalize
+import vn.momo.kits.application.Localize
+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.Theme
+import vn.momo.kits.const.defaultTheme
+import vn.momo.kits.platform.ProvideNavigationEventDispatcherOwner
+import vn.momo.kits.platform.ProvideOsFontScale
+import vn.momo.kits.utils.getAppStatusBarHeight
+import vn.momo.kits.utils.getNavigationBarHeight
+import vn.momo.maxapi.IMaxApi
+import kotlin.time.Duration.Companion.milliseconds
+
+@Composable
+fun NavigationContainer(
+    initialScreenName: String,
+    initialScreen: @Composable () -> Unit,
+    options: NavigationOptions? = null,
+    initialTheme: Theme = defaultTheme,
+    miniAppContext: MiniAppContext? = null,
+    maxApi: IMaxApi? = null,
+    setNavigator: ((Navigator) -> Unit)? = null,
+    statusBarHeight: Dp? = null,
+    localize: Localize? = null,
+) {
+    val navController = rememberNavController()
+    val registry = remember { DynamicScreenRegistry() }
+    val navigator = remember { Navigator(navController = navController, maxApi = maxApi, registry = registry) }
+    val statusBarHeight = statusBarHeight ?: getAppStatusBarHeight()
+    val navigationBarHeight = getNavigationBarHeight()
+
+    val parentContext = LocalContext.current
+    val mergedContext = MiniAppContext.merge(parentContext, miniAppContext)
+
+    val stackTransition = remember { StackTransitionCoordinator() }
+    val theme = remember { mutableStateOf(initialTheme) }
+    val fallbackLocalize = remember { Localize() }
+
+    val resolvedLocalize = localize ?: fallbackLocalize
+
+    LaunchedEffect(maxApi, resolvedLocalize) {
+        val api = maxApi ?: return@LaunchedEffect
+        runCatching {
+            api.getLanguage(callback = { data ->
+                if (parseLanguage(data) == Localize.EN) {
+                    resolvedLocalize.changeLanguage(Localize.EN)
+                }
+            })
+        }
+    }
+
+    val screenId = rememberSaveable { registry.nextId() }
+    registry.bind(screenId, initialScreenName, initialScreen, options)
+    val startDestination = remember(screenId) { DynamicScreenRoute(screenId) }
+
+    ProvideOsFontScale {
+        ProvideNavigationEventDispatcherOwner {
+            CompositionLocalProvider(
+                LocalNavigator provides navigator,
+                LocalDynamicScreenRegistry provides registry,
+                LocalMaxApi provides maxApi,
+                AppTheme provides theme.value,
+                AppStatusBar provides statusBarHeight,
+                AppNavigationBar provides navigationBarHeight,
+                LocalContext provides mergedContext,
+                LocalLocalize provides resolvedLocalize,
+                LocalStackTransition provides stackTransition,
+            ) {
+                LaunchedEffect(Unit) {
+                    setNavigator?.invoke(navigator)
+                }
+
+                SwipeBackHaptic(maxApi)
+
+                // Gesture pops never reach Navigator.dismissScreen(), so prune the registry from
+                // the back stack itself. collectLatest lets a rapid re-push cancel a pending prune.
+                LaunchedEffect(navController, registry) {
+                    navController.currentBackStack.collectLatest { entries ->
+                        delay(STACK_TRANSITION_DURATION.milliseconds)
+                        val aliveIds = entries.mapNotNullTo(mutableSetOf()) { entry ->
+                            runCatching { entry.toRoute<DynamicScreenRoute>().id }.getOrNull()
+                                ?: runCatching { entry.toRoute<DynamicDialogRoute>().id }.getOrNull()
+                        }
+                        aliveIds.add(screenId)
+                        registry.retainOnly(aliveIds)
+                    }
+                }
+
+                // The transitions must live on the NavHost call site, not on the destinations:
+                // NavHost.uikit computes isDefaultTransition from these arguments alone, and while
+                // it is true the library paints its own hard-coded black iOS blackout that would
+                // sit over the pink scrim.
+                NavHost(
+                    navController,
+                    startDestination = startDestination,
+                    enterTransition = { stackEnter() },
+                    exitTransition = { stackExit() },
+                    popEnterTransition = { stackPopEnter() },
+                    popExitTransition = { stackPopExit() },
+                ) {
+                    composable<DynamicScreenRoute> { backStackEntry ->
+                        val route = backStackEntry.toRoute<DynamicScreenRoute>()
+                        val screen = registry.getScreen(route.id)
+
+                        if (screen != null) {
+                            StackTransitionDecor(id = route.id, isStackRoute = true) {
+                                StackScreen(
+                                    id = route.id,
+                                    name = screen.name,
+                                    content = screen.content,
+                                    navigationOptions = screen.options
+                                )
+                            }
+                        }
+                    }
+
+                    composable<DynamicDialogRoute>(
+                        enterTransition = {
+                            slideInVertically(
+                                animationSpec = tween(300),
+                                initialOffsetY = { it }
+                            )
+                        },
+                        exitTransition = null,
+                        popEnterTransition = { fadeIn(animationSpec = tween(0)) },
+                        popExitTransition = {
+                            slideOutVertically(
+                                animationSpec = tween(300),
+                                targetOffsetY = { it }
+                            )
+                        }
+                    ) { backStackEntry ->
+                        val route = backStackEntry.toRoute<DynamicDialogRoute>()
+                        val screen = registry.getScreen(route.id)
+
+                        if (screen != null) {
+                            StackTransitionDecor(id = route.id, isStackRoute = false) {
+                                StackScreen(
+                                    id = route.id,
+                                    name = screen.name,
+                                    content = screen.content,
+                                    navigationOptions = screen.options
+                                )
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    DisposableEffect(Unit) {
+        onDispose {
+            navigator.dispose()
+            registry.unregisterScreen(screenId)
+        }
+    }
+}
+
+val LocalMaxApi = staticCompositionLocalOf<IMaxApi?> { null }
+
+private fun parseLanguage(raw: Map<String, Any?>?): String? {
+    val code = (raw?.get("response") as? String)?.trim()?.lowercase()
+    if (code.isNullOrEmpty()) return null
+    return if (code.startsWith(Localize.EN)) Localize.EN else Localize.VI
+}
+

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

@@ -0,0 +1,386 @@
+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
+import androidx.navigation.NavController
+import androidx.navigation.toRoute
+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 kotlinx.serialization.Serializable
+import vn.momo.kits.components.PopupAction
+import vn.momo.kits.components.PopupNotify
+import vn.momo.kits.navigation.BottomHeader.*
+import vn.momo.kits.navigation.component.SnackBar
+import vn.momo.maxapi.IMaxApi
+import kotlin.time.Duration.Companion.milliseconds
+
+class Navigator(
+    private val navController: NavController,
+    private val maxApi: IMaxApi?,
+    private val registry: DynamicScreenRegistry
+) {
+    private val scope = CoroutineScope(SupervisorJob() + Dispatchers.Main)
+
+    private fun currentScreen(): DynamicScreen? {
+        val entry = navController.currentBackStackEntry ?: return null
+        val id = runCatching { entry.toRoute<DynamicScreenRoute>().id }.getOrNull()
+            ?: runCatching { entry.toRoute<DynamicDialogRoute>().id }.getOrNull()
+            ?: return null
+        return registry.getScreen(id)
+    }
+
+    fun push(screenName: String, content: @Composable () -> Unit, options: NavigationOptions? = null) {
+        val route = registry.register(screenName, content, options)
+        navController.navigate(DynamicScreenRoute(route.id))
+    }
+
+    fun replace(screenName: String, content: @Composable () -> Unit, options: NavigationOptions? = null) {
+        val replacedScreen = currentScreen()
+        replacedScreen?.let { registry.unregisterScreen(it.id) }
+        navController.popBackStack()
+        push(screenName, content, options)
+    }
+
+    fun onBackSafe(callBack: (() -> Unit)? = null) {
+        val currentScreen = currentScreen()
+        val options = currentScreen?.options
+        if (options?.onBackHandler != null) {
+            options.onBackHandler.invoke()
+            return
+        }
+        val preventBack = options?.headerBackProps?.preventBack
+        if (preventBack != null) {
+            showModal(
+                content = {
+                    PopupNotify(preventBack.copy(
+                        primary = PopupAction(
+                            title = preventBack.primary?.title ?: "",
+                            onPress = {
+                                preventBack.primary?.onPress?.invoke()
+                                pop(2, callBack) // close popup notify, then close the screen
+                            }
+                        )
+                    ))
+                }
+            )
+        } else {
+            pop(1, callBack)
+        }
+    }
+
+    // The swipe-back opt-out predicate in StackScreen needs this: the root screen must keep custom
+    // back handling so it still reaches maxApi.dismiss.
+    // Public: the iOS host asks this to decide whether the kit owns the swipe on this screen.
+    fun canPop(): Boolean = navController.previousBackStackEntry != null
+
+    fun pop(count: Int = 1, callBack: (() -> Unit)? = null) {
+        scope.launch {
+            repeat(count) {
+                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.milliseconds)
+        OverplayComponentRegistry.hardClearAfterDismiss()
+    }
+
+    private suspend fun dismissScreen() {
+        if (navController.previousBackStackEntry != null){
+            val dismissing = currentScreen()
+            navController.popBackStack()
+            delay(STACK_TRANSITION_DURATION.milliseconds)
+            dismissing?.let { registry.unregisterScreen(it.id) }
+        } else {
+            maxApi?.dismiss {  }
+        }
+    }
+
+    fun present(screenName: String, content: @Composable () -> Unit, options: NavigationOptions? = null) {
+        val route = registry.register(screenName, content, options)
+        navController.navigate(DynamicDialogRoute(route.id))
+    }
+
+    fun reset(screenName: String, content: @Composable () -> Unit, options: NavigationOptions? = null) {
+        registry.unregisterAll()
+
+        val route = registry.register(screenName, content, options)
+        navController.navigate(DynamicScreenRoute(route.id)) {
+            popUpTo(0) { inclusive = true }
+        }
+    }
+
+    fun showModal(
+        content: @Composable () -> Unit,
+        barrierDismissible: Boolean = true,
+        onDismiss: (() -> Unit)? = null
+    ){
+        val id = currentScreen()?.id ?: -1
+        OverplayComponentRegistry.registerOverplay(id, content, OverplayComponentType.MODAL, false, barrierDismissible, onDismiss)
+    }
+
+    fun showBottomSheet(
+        content: @Composable () -> Unit,
+        isSurface: Boolean = false,
+        barrierDismissible: Boolean = true,
+        onDismiss: (() -> Unit)? = null,
+        bottomSheetHeader: BottomHeader? = null,
+        draggable: Boolean = true,
+        useBottomInset: Boolean = true,
+        footerComponent: (@Composable () -> Unit)? = null
+    ){
+        val id = currentScreen()?.id ?: -1
+        OverplayComponentRegistry.registerOverplay(id, content, OverplayComponentType.BOTTOM_SHEET, isSurface, barrierDismissible, onDismiss, bottomSheetHeader, draggable, useBottomInset, footerComponent)
+    }
+
+    fun showSnackBar(snackBar: SnackBar, onDismiss: (() -> Unit)? = null) {
+        val id = currentScreen()?.id ?: -1
+        scope.launch {
+            OverplayComponentRegistry.registerOverplay(
+                id = id,
+                content = {
+                    SnackBar(snackBar, onDismiss)
+                },
+                type = OverplayComponentType.SNACK_BAR,
+                onDismiss = onDismiss
+            )
+        }
+    }
+
+    fun hideSnackBar() {
+        scope.launch {
+            OverplayComponentRegistry.clear()
+            delay(250L.milliseconds)
+            OverplayComponentRegistry.hardClearAfterDismiss()
+        }
+    }
+
+    fun dispose(){
+        scope.cancel()
+    }
+}
+
+val LocalNavigator = staticCompositionLocalOf<Navigator> {
+    error("No NavigationStack provided")
+}
+
+@Serializable
+data class DynamicScreenRoute(val id: Int)
+
+@Serializable
+data class DynamicDialogRoute(val id: Int)
+
+data class DynamicScreen(
+    val id: Int,
+    val name: String,
+    val content: @Composable () -> Unit,
+    var options: NavigationOptions? = null
+)
+
+class DynamicScreenRegistry {
+    private val screens = mutableMapOf<Int, DynamicScreen>()
+
+    fun register(screenName: String, content: @Composable () -> Unit, options: NavigationOptions?): DynamicScreenRoute {
+        val id = nextGlobalId()
+        screens[id] = DynamicScreen(
+            id = id,
+            name = screenName,
+            content = content,
+            options = options
+        )
+        return DynamicScreenRoute(id)
+    }
+
+    fun nextId(): Int = nextGlobalId()
+
+    fun bind(id: Int, screenName: String, content: @Composable () -> Unit, options: NavigationOptions?) {
+        screens[id] = DynamicScreen(
+            id = id,
+            name = screenName,
+            content = content,
+            options = options
+        )
+        advanceGlobalIdPast(id) // keep counter ahead after process-death restore
+    }
+
+    fun unregisterScreen(id: Int) {
+        screens.remove(id)
+    }
+
+    // Gesture pops go through composeNavigator.popBackStack() inside NavHost and never reach
+    // Navigator.dismissScreen(), so screens would leak without a stack-driven prune.
+    fun retainOnly(ids: Set<Int>) {
+        val stale = screens.keys.filter { it !in ids }
+        for (id in stale) {
+            screens.remove(id)
+        }
+    }
+
+    fun unregisterAll(){
+        val ids = screens.keys.toList()
+        for (id in ids) {
+            unregisterScreen(id)
+        }
+    }
+
+    fun getScreen(id: Int): DynamicScreen? = screens[id]
+
+    fun setOptions(id: Int, options: NavigationOptions){
+        screens[id]?.options = options
+    }
+
+    companion object {
+        private var globalIdCounter = 1
+
+        private fun nextGlobalId(): Int = globalIdCounter++
+
+        private fun advanceGlobalIdPast(id: Int) {
+            if (id >= globalIdCounter) globalIdCounter = id + 1
+        }
+    }
+}
+
+val LocalDynamicScreenRegistry = staticCompositionLocalOf<DynamicScreenRegistry?> { null }
+
+
+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,
+        val draggable: Boolean = true,
+        val useBottomInset: Boolean = true,
+        val footerComponent: (@Composable () -> Unit)? = 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,
+        draggable: Boolean = true,
+        useBottomInset: Boolean = true,
+        footerComponent: (@Composable () -> Unit)? = null,
+    ){
+        val params = when(type){
+            OverplayComponentType.MODAL -> OverplayComponentParams.Modal(onDismiss, barrierDismissible)
+            OverplayComponentType.BOTTOM_SHEET -> OverplayComponentParams.BottomSheet(isSurface, onDismiss, barrierDismissible, bottomSheetHeader, draggable, useBottomInset, footerComponent)
+            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
+    internal 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,
+                    draggable = params.draggable,
+                    useBottomInset = params.useBottomInset,
+                    footerComponent = params.footerComponent,
+                    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/ScrollToTop.kt

@@ -0,0 +1,8 @@
+package vn.momo.kits.navigation
+
+import androidx.compose.runtime.Composable
+
+@Composable
+internal expect fun RegisterScrollToTop(callback: (() -> Unit)?)
+
+