@momo-kits/native-kits 0.162.49 → 0.162.50-debug

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

@@ -0,0 +1,148 @@
+package vn.momo.kits.navigation
+
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.CubicBezierEasing
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.absolutePadding
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.sizeIn
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.draw.scale
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import kotlinx.coroutines.launch
+import vn.momo.kits.application.LocalContext
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.Colors
+import vn.momo.kits.modifier.conditional
+import vn.momo.kits.modifier.noFeedbackClickable
+import vn.momo.kits.navigation.tracking.ScreenTracker
+import vn.momo.kits.platform.BackHandler
+import vn.momo.kits.layout.duoModalMaxHeight
+import vn.momo.kits.layout.duoModalMaxWidth
+import vn.momo.kits.layout.getScreenLayout
+
+@Composable
+internal fun ModalScreen(
+    content: @Composable () -> Unit,
+    barrierDismissible: Boolean = true,
+    onDismiss: (() -> Unit)? = null
+) {
+    val navigator = LocalNavigator.current
+
+    val alpha = remember { Animatable(0f) }
+    val scale = remember { Animatable(0.8f) }
+
+    val coroutineScope = rememberCoroutineScope()
+
+    val maxApi = LocalMaxApi.current
+    val context = LocalContext.current
+
+    DisposableEffect(Unit) {
+        ScreenTracker.trackPopupDisplayed(
+            maxApi = maxApi,
+            context = context,
+            parentScreenName = ScreenTracker.getLastScreenName()
+        )
+        onDispose { }
+    }
+
+    fun openEvent() {
+        coroutineScope.launch {
+            launch {
+                alpha.animateTo(
+                    targetValue = 1f,
+                    animationSpec = tween(durationMillis = 250)
+                )
+            }
+            launch {
+                scale.animateTo(
+                    targetValue = 1f,
+                    animationSpec = tween(
+                        durationMillis = 250,
+                        easing = CubicBezierEasing(0.2f, 0.0f, 0f, 1f)
+                    )
+                )
+            }
+        }
+    }
+
+    fun closeEvent() {
+        coroutineScope.launch {
+            alpha.animateTo(
+                targetValue = 0f,
+                animationSpec = tween(durationMillis = 200)
+            )
+            scale.animateTo(
+                targetValue = 0.8f,
+                animationSpec = tween(durationMillis = 200)
+            )
+            OverplayComponentRegistry.hardClearAfterDismiss()
+        }
+    }
+
+    LaunchedEffect(Unit) {
+        openEvent()
+    }
+
+    DisposableEffect(Unit) {
+        OverplayComponentRegistry.bindClose { closeEvent() }
+        onDispose {
+            onDismiss?.invoke()
+        }
+    }
+
+    BackHandler(enabled = true) {
+        closeEvent()
+    }
+
+    val layout = getScreenLayout()
+
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(Color.Black.copy(alpha = 0.6f * alpha.value))
+            .noFeedbackClickable {
+                if(barrierDismissible) closeEvent()
+            }
+            // center in the safe area, clear of the side toolbar strip and the home indicator
+            .conditional(layout.isIPhoneDuoDevice) {
+                absolutePadding(
+                    left = layout.insetLeft,
+                    top = layout.insetTop,
+                    right = layout.insetRight,
+                    bottom = layout.insetBottom,
+                )
+            },
+        contentAlignment = Alignment.Center
+    ) {
+        Box(
+            modifier = Modifier
+                .scale(scale.value)
+                .alpha(alpha.value)
+                .conditional(layout.isIPhoneDuoDevice) {
+                    sizeIn(maxWidth = layout.duoModalMaxWidth, maxHeight = layout.duoModalMaxHeight)
+                }
+                .wrapContentSize()
+                .conditional(IsShowBaseLineDebug) {
+                    border(1.dp, Colors.blue_03)
+                }
+                .clickable(
+                    indication = null,
+                    interactionSource = remember { MutableInteractionSource() }
+                ) {},
+        contentAlignment = Alignment.Center
+        ) {
+            content()
+        }
+    }
+}

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

@@ -0,0 +1,116 @@
+package vn.momo.kits.navigation
+
+import androidx.compose.foundation.gestures.ScrollableState
+import androidx.compose.runtime.*
+import androidx.compose.ui.graphics.Color
+import vn.momo.kits.navigation.bottomtab.setBottomTabOption
+import vn.momo.kits.navigation.component.*
+
+class Navigation(
+    val id: Int = -1,
+    val bottomTabIndex: Int = -1,
+    val initOptions: NavigationOptions? = null,
+    private val registry: DynamicScreenRegistry? = null
+) {
+    private val _options = mutableStateOf(initOptions ?: NavigationOptions())
+    val currentOptions: State<NavigationOptions> get() = _options
+    val options: NavigationOptions get() = _options.value
+
+    private val _isBottomTabRoot = mutableStateOf(false)
+    internal val isBottomTabRoot: Boolean get() = _isBottomTabRoot.value
+    internal fun markAsBottomTabRoot() { _isBottomTabRoot.value = true }
+
+    fun setOptions(
+        onBackHandler: (() -> Unit)? = null,
+        hiddenBack: Boolean? = null,
+        headerBackProps: HeaderBackProps? = null,
+        headerTitle: HeaderTitle? = null,
+        titlePosition: TitlePosition? = null,
+        headerRight: HeaderRight? = null,
+        headerType: HeaderType? = null,
+        scrollData: ScrollData? = null,
+        backgroundColor: Color? = null,
+        // AI-GENERATED START: custom screen background
+        backgroundComponent: (@Composable () -> Unit)? = null,
+        // AI-GENERATED END: custom screen background
+        tintColor: Color? = null,
+        footerComponent: (@Composable () -> Unit)? = null,
+        footerTransparent: Boolean? = null,
+        footerUseMargin: Boolean? = null,
+        floatingButtonProps: FloatingButtonProps? = null,
+        keyboardOptions: KeyboardOptions? = null
+    ) {
+        updateOptions(
+            options.copy(
+                onBackHandler = onBackHandler ?: options.onBackHandler,
+                hiddenBack = hiddenBack ?: options.hiddenBack,
+                headerBackProps = headerBackProps ?: options.headerBackProps,
+                headerTitle = headerTitle ?: options.headerTitle,
+                titlePosition = titlePosition ?: options.titlePosition,
+                headerRight = headerRight ?: options.headerRight,
+                headerType = headerType ?: options.headerType,
+                scrollData = scrollData ?: options.scrollData,
+                backgroundColor = backgroundColor ?: options.backgroundColor,
+                // AI-GENERATED START: custom screen background
+                backgroundComponent = backgroundComponent ?: options.backgroundComponent,
+                // AI-GENERATED END: custom screen background
+                tintColor = tintColor ?: options.tintColor,
+                footerComponent = footerComponent ?: options.footerComponent,
+                footerTransparent = footerTransparent ?: options.footerTransparent,
+                footerUseMargin = footerUseMargin ?: options.footerUseMargin,
+                floatingButtonProps = floatingButtonProps ?: options.floatingButtonProps,
+                keyboardOptions = keyboardOptions ?: options.keyboardOptions,
+            )
+        )
+    }
+
+    fun setOptions(newOptions: NavigationOptions) {
+        updateOptions(newOptions)
+    }
+
+    private fun updateOptions(updated: NavigationOptions) {
+        _options.value = updated
+        if (bottomTabIndex != -1) setBottomTabOption(bottomTabIndex, updated)
+        if (id != -1) registry?.setOptions(id, updated)
+    }
+}
+
+val LocalNavigation = staticCompositionLocalOf<Navigation> {
+    error("No NavigationStack provided")
+}
+
+@Stable
+data class NavigationOptions(
+    val screenName: String? = null,
+    val onBackHandler: (() -> Unit)? = null,
+    val hiddenBack: Boolean = false,
+    val headerBackProps: HeaderBackProps = HeaderBackProps(),
+    val headerTitle: HeaderTitle = HeaderTitle.Default("Stack"),
+    val titlePosition: TitlePosition = TitlePosition.LEFT,
+    val headerRight: HeaderRight = HeaderRight.Toolkit(),
+    val headerType: HeaderType = HeaderType.Default(),
+    val scrollData: ScrollData = ScrollData(),
+    val backgroundColor: Color? = null,
+    // AI-GENERATED START: custom screen background (SwiftUI `NavigationOptions.background`)
+    /** Drawn instead of `backgroundColor` over the whole screen: under the header, outside the keyboard padding. */
+    val backgroundComponent: @Composable (() -> Unit)? = null,
+    // AI-GENERATED END: custom screen background (SwiftUI `NavigationOptions.background`)
+    val tintColor: Color? = null,
+    val footerComponent: @Composable (() -> Unit)? = null,
+    val footerTransparent: Boolean = false,
+    val footerUseMargin: Boolean = true,
+    val floatingButtonProps: FloatingButtonProps? = null,
+    val keyboardOptions: KeyboardOptions = KeyboardOptions()
+) {
+    internal fun hasFooter() : Boolean = footerComponent != null
+}
+
+data class KeyboardOptions(
+    val keyboardShouldPersistTaps: Boolean = false,
+    val useAvoidKeyboard: Boolean = true
+)
+data class ScrollData(
+    val scrollable: Boolean = true,
+    val scrollState: ScrollableState? = null,
+    val scrollToTopCallback: (() -> Unit)? = null,
+)

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

@@ -0,0 +1,205 @@
+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.DesignSystemConfig
+import vn.momo.kits.application.DesignSystemKits
+import vn.momo.kits.application.LocalContext
+import vn.momo.kits.application.LocalDesignSystemConfig
+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.layout.LocalScreenLayout
+import vn.momo.kits.layout.calculateScreenLayout
+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,
+    maxApi: IMaxApi,
+    options: NavigationOptions? = null,
+    initialTheme: Theme = defaultTheme,
+    miniAppContext: MiniAppContext? = null,
+    setNavigator: ((Navigator) -> Unit)? = null,
+    statusBarHeight: Dp? = null,
+    localize: Localize? = null,
+    designSystemConfig: DesignSystemConfig? = 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 screenLayout = calculateScreenLayout(statusBarHeight, parent = LocalScreenLayout.current)
+
+    val parentContext = LocalContext.current
+    val mergedContext = MiniAppContext.merge(parentContext, miniAppContext)
+
+    val stackTransition = remember { StackTransitionCoordinator() }
+    val theme = remember { mutableStateOf(initialTheme) }
+    val resolvedDesignSystemConfig =
+        designSystemConfig ?: LocalDesignSystemConfig.current ?: DesignSystemKits.getConfigs().designSystemConfig
+    val headerBar = resolvedDesignSystemConfig?.headerBar
+    // RN parity: the theme's own header image wins; config headerBar is only the fallback.
+    val resolvedTheme = remember(theme.value, headerBar) {
+        if (theme.value.isHeaderImage() || headerBar.isNullOrEmpty()) {
+            theme.value
+        } else {
+            theme.value.copy(assets = theme.value.assets.copy(headerBackground = headerBar))
+        }
+    }
+    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(navigator) {
+            CompositionLocalProvider(
+                LocalNavigator provides navigator,
+                LocalDynamicScreenRegistry provides registry,
+                LocalMaxApi provides maxApi,
+                AppTheme provides resolvedTheme,
+                AppStatusBar provides statusBarHeight,
+                AppNavigationBar provides navigationBarHeight,
+                LocalScreenLayout provides screenLayout,
+                LocalContext provides mergedContext,
+                LocalDesignSystemConfig provides resolvedDesignSystemConfig,
+                LocalLocalize provides resolvedLocalize,
+                LocalStackTransition provides stackTransition,
+            ) {
+                LaunchedEffect(Unit) {
+                    setNavigator?.invoke(navigator)
+                }
+
+                SwipeBackHaptic(maxApi)
+
+                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)
+                    }
+                }
+
+                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
+}
+