@momo-kits/native-kits 0.163.1-beta.8-debug → 0.163.1-beta.9-debug

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

@@ -1,17 +1,35 @@
 package vn.momo.kits.navigation
 
-import androidx.compose.animation.*
 import androidx.compose.animation.core.tween
-import androidx.compose.runtime.*
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.slideInHorizontally
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutHorizontally
+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 vn.momo.kits.application.*
-import vn.momo.kits.const.*
+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
@@ -27,7 +45,7 @@ fun NavigationContainer(
     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) }
@@ -57,77 +75,79 @@ fun NavigationContainer(
     registry.bind(screenId, initialScreenName, initialScreen, options)
     val startDestination = remember(screenId) { DynamicScreenRoute(screenId) }
 
-    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,
+    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,
             ) {
-            LaunchedEffect(Unit) {
-                setNavigator?.invoke(navigator)
-            }
-
-            NavHost(navController, startDestination = startDestination) {
-                composable<DynamicScreenRoute>(
-                    enterTransition = {
-                        slideInHorizontally(
-                            animationSpec = tween(300),
-                            initialOffsetX = { it }
-                        )
-                    },
-                    exitTransition = null,
-                    popEnterTransition = { fadeIn(animationSpec = tween(0)) },
-                    popExitTransition = {
-                        slideOutHorizontally(
-                            animationSpec = tween(300),
-                            targetOffsetX = { it }
-                        )
-                    }
-                ) { backStackEntry ->
-                    val route = backStackEntry.toRoute<DynamicScreenRoute>()
-                    val screen = registry.getScreen(route.id)
-
-                    if (screen != null) {
-                        StackScreen(
-                            id = route.id,
-                            name = screen.name,
-                            content = screen.content,
-                            navigationOptions = screen.options
-                        )
-                    }
+                LaunchedEffect(Unit) {
+                    setNavigator?.invoke(navigator)
                 }
 
-                composable<DynamicDialogRoute>(
-                    enterTransition = {
-                        slideInVertically(
-                            animationSpec = tween(300),
-                            initialOffsetY = { it }
-                        )
-                    },
-                    exitTransition = null,
-                    popEnterTransition = { fadeIn(animationSpec = tween(0)) },
-                    popExitTransition = {
-                        slideOutVertically(
-                            animationSpec = tween(300),
-                            targetOffsetY = { it }
-                        )
+                NavHost(navController, startDestination = startDestination) {
+                    composable<DynamicScreenRoute>(
+                        enterTransition = {
+                            slideInHorizontally(
+                                animationSpec = tween(300),
+                                initialOffsetX = { it }
+                            )
+                        },
+                        exitTransition = null,
+                        popEnterTransition = { fadeIn(animationSpec = tween(0)) },
+                        popExitTransition = {
+                            slideOutHorizontally(
+                                animationSpec = tween(300),
+                                targetOffsetX = { it }
+                            )
+                        }
+                    ) { backStackEntry ->
+                        val route = backStackEntry.toRoute<DynamicScreenRoute>()
+                        val screen = registry.getScreen(route.id)
+
+                        if (screen != null) {
+                            StackScreen(
+                                id = route.id,
+                                name = screen.name,
+                                content = screen.content,
+                                navigationOptions = screen.options
+                            )
+                        }
                     }
-                ) { backStackEntry ->
-                    val route = backStackEntry.toRoute<DynamicDialogRoute>()
-                    val screen = registry.getScreen(route.id)
-
-                    if (screen != null) {
-                        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) {
+                            StackScreen(
+                                id = route.id,
+                                name = screen.name,
+                                content = screen.content,
+                                navigationOptions = screen.options
+                            )
+                        }
                     }
                 }
             }
@@ -142,9 +162,7 @@ fun NavigationContainer(
     }
 }
 
-val LocalMaxApi = staticCompositionLocalOf<IMaxApi?> {
-    error("No MaxApi provided")
-}
+val LocalMaxApi = staticCompositionLocalOf<IMaxApi?> { null }
 
 private fun parseLanguage(raw: Map<String, Any?>?): String? {
     val code = (raw?.get("response") as? String)?.trim()?.lowercase()

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

@@ -56,6 +56,7 @@ import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.hideKeyboardOnTap
+import vn.momo.kits.navigation.bottomtab.BOTTOM_TAB_BAR_HEIGHT
 import vn.momo.kits.navigation.component.FABPosition
 import vn.momo.kits.navigation.component.FloatingButton
 import vn.momo.kits.navigation.component.HEADER_HEIGHT
@@ -77,6 +78,13 @@ import kotlin.time.ExperimentalTime
 internal val LocalFooterHeightPx = staticCompositionLocalOf { mutableIntStateOf(0) }
 internal val LocalHeaderRightWidthPx = staticCompositionLocalOf { mutableIntStateOf(0) }
 
+@Composable
+private fun bottomTabBarInset(): Dp {
+    if (LocalNavigation.current.bottomTabIndex == -1) return 0.dp
+    val keyboard = keyboardSizeState().value
+    return (BOTTOM_TAB_BAR_HEIGHT.dp + Spacing.S - keyboard).coerceAtLeast(0.dp)
+}
+
 @OptIn(ExperimentalMaterialApi::class, ExperimentalTime::class)
 @Composable
 internal fun StackScreen(
@@ -195,12 +203,12 @@ internal fun StackScreen(
             }
 
             Column(Modifier.zIndex(2f).fillMaxSize()) {
-                MainContent(content = content, isBottomTab = isBottomTabRoot)
+                MainContent(content = content, isBottomTabRoot = isBottomTabRoot, isBottomTabChild = isBottomTabChild)
                 FooterContent()
             }
 
             Box(Modifier.zIndex(6f)) {
-                FloatingContent()
+                FloatingContent(isBottomTabChild = isBottomTabChild)
             }
 
             OverplayView(isBottomTabChild = isBottomTabChild, id = id)
@@ -210,7 +218,7 @@ internal fun StackScreen(
 
 @Suppress("FrequentlyChangingValue")
 @Composable
-internal fun FloatingContent() {
+internal fun FloatingContent(isBottomTabChild: Boolean) {
     val options = LocalOptions.current
     val density = LocalDensity.current
     val footerHeightPx = LocalFooterHeightPx.current
@@ -219,7 +227,11 @@ internal fun FloatingContent() {
 
     val fabProps = options.floatingButtonProps ?: return
     val bottomPadding = fabProps.bottom
-        ?: (Spacing.M + if (options.footerComponent != null) with(density) { footerHeightPx.intValue.toDp() } else navigationBar)
+        ?: (Spacing.M + when {
+            options.hasFooter() -> with(density) { footerHeightPx.intValue.toDp() }
+            isBottomTabChild -> bottomTabBarInset() + (navigationBar - keyboardSizeState().value).coerceAtLeast(0.dp)
+            else -> navigationBar
+        })
 
     FloatingButton(
         scrollPosition = fabProps.scrollState?.value ?: scrollState.value,
@@ -235,7 +247,7 @@ internal fun FloatingContent() {
 }
 
 @Composable
-internal fun ColumnScope.MainContent(content: @Composable () -> Unit, isBottomTab: Boolean) {
+internal fun ColumnScope.MainContent(content: @Composable () -> Unit, isBottomTabRoot: Boolean, isBottomTabChild: Boolean) {
     val options = LocalOptions.current
     val inputSearchType = getInputSearchType(options)
     val density = LocalDensity.current
@@ -264,7 +276,14 @@ internal fun ColumnScope.MainContent(content: @Composable () -> Unit, isBottomTa
             .conditional(options.scrollData.scrollable && options.scrollData.scrollState is ScrollState) {
                 verticalScroll(scrollState)
             }
-            .padding(bottom = if (options.footerComponent != null || isBottomTab) 0.dp else navigationBar)
+            .padding(
+                bottom = when {
+                    options.hasFooter() || isBottomTabRoot -> 0.dp
+                    isBottomTabChild -> bottomTabBarInset() + (navigationBar - keyboardSizeState().value).coerceAtLeast(0.dp)
+                    !options.scrollData.scrollable -> 0.dp
+                    else -> navigationBar
+                }
+            )
     ) {
         ScreenContent(content = content)
     }
@@ -294,7 +313,7 @@ internal fun ScreenContent(content: @Composable () -> Unit) {
 @Composable
 internal fun FooterContent() {
     val options = LocalOptions.current
-    if (options.footerComponent != null) {
+    if (options.hasFooter()) {
         val keyboardSize = keyboardSizeState()
         val bottomPadding = (AppNavigationBar.current - keyboardSize.value).coerceAtLeast(0.dp)
         Footer(footerComponent = options.footerComponent, bottomPadding = bottomPadding)

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

@@ -18,6 +18,7 @@ import androidx.navigation.compose.rememberNavController
 import vn.momo.kits.const.AppNavigationBar
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Spacing
+import vn.momo.kits.navigation.KeyboardOptions
 import vn.momo.kits.navigation.LocalNavigation
 import vn.momo.kits.navigation.LocalNavigator
 import vn.momo.kits.navigation.NavigationOptions
@@ -53,7 +54,8 @@ fun BottomTab(
     LaunchedEffect(Unit){
         navigation.markAsBottomTabRoot()
         navigation.setOptions(
-            headerType = HeaderType.None
+            headerType = HeaderType.None,
+            keyboardOptions = KeyboardOptions(useAvoidKeyboard = false)
         )
     }
 

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

@@ -5,10 +5,12 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.rememberUpdatedState
+import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import io.github.alexzhirkevich.compottie.Compottie
 import io.github.alexzhirkevich.compottie.ExperimentalCompottieApi
 import io.github.alexzhirkevich.compottie.LottieCompositionSpec
 import io.github.alexzhirkevich.compottie.animateLottieCompositionAsState
@@ -23,6 +25,9 @@ internal fun ComposeLottieAnimation(
     path: String,
     tintColor: Color?,
     bgColor: Color?,
+    iterations: Int,
+    isPlaying: Boolean,
+    onEvent: ((String) -> Unit)?,
     modifier: Modifier,
 ) {
     val json = readJson(path)
@@ -49,9 +54,25 @@ internal fun ComposeLottieAnimation(
 
     val lottieState = animateLottieCompositionAsState(
         composition = composition,
-        iterations = Compottie.IterateForever,
+        iterations = iterations,
+        isPlaying = isPlaying,
+        restartOnPlay = false,
     )
 
+    val currentOnEvent by rememberUpdatedState(onEvent)
+
+    LaunchedEffect(isPlaying) {
+        currentOnEvent?.invoke(if (isPlaying) LottieEvent.Start else LottieEvent.Pause)
+    }
+
+    LaunchedEffect(lottieState) {
+        var armed = false
+        snapshotFlow { lottieState.isAtEnd }.collect { atEnd ->
+            if (!atEnd) armed = true
+            else if (armed) { armed = false; currentOnEvent?.invoke(LottieEvent.Finish) }
+        }
+    }
+
     Box(modifier.background(bgColor ?: Color.Transparent)) {
         Image(
             painter = rememberLottiePainter(

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

@@ -0,0 +1,9 @@
+package vn.momo.kits.platform
+
+import androidx.compose.runtime.Composable
+
+// Overrides LocalDensity.fontScale with the live OS Dynamic Type scale so text re-scales while a
+// screen is visible. Wrapped inside the containers so every screen is covered, not just callers of
+// the app-level wrappers.
+@Composable
+expect fun ProvideOsFontScale(content: @Composable () -> Unit)

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

@@ -43,12 +43,23 @@ fun supportsImePadding(): Boolean = when (val v = getOSVersion()) {
     is OSVersion.Android -> v.sdk > 29
     is OSVersion.IOS -> true
 }
+const val LottieIterateForever: Int = Int.MAX_VALUE
+
+object LottieEvent {
+    const val Start = "start"
+    const val Pause = "pause"
+    const val Finish = "finish"
+}
+
 @Composable
 expect fun LottieAnimation(
     path: String,
     tintColor: Color? = null,
     bgColor: Color? = null,
     placedAsOverlay: Boolean = false,
+    iterations: Int = LottieIterateForever,
+    isPlaying: Boolean = true,
+    onEvent: ((String) -> Unit)? = null,
     modifier: Modifier = Modifier,
     useCompose: Boolean = false
 )

package/compose/src/iosMain/kotlin/vn/momo/kits/platform/OsFontScale.ios.kt

@@ -0,0 +1,66 @@
+package vn.momo.kits.platform
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Density
+import kotlinx.cinterop.ExperimentalForeignApi
+import kotlinx.cinterop.ObjCAction
+import platform.Foundation.NSNotification
+import platform.Foundation.NSNotificationCenter
+import platform.Foundation.NSSelectorFromString
+import platform.UIKit.UIContentSizeCategoryDidChangeNotification
+import platform.UIKit.UIFont
+import platform.UIKit.UIFontTextStyleBody
+import platform.darwin.NSObject
+
+// Compose MP iOS reads LocalDensity.fontScale once at ComposeUIViewController creation and does not
+// recompose it when UIContentSizeCategory changes (Android tracks Configuration.fontScale live). We
+// observe the notification and override LocalDensity.fontScale so scaleSize() recomposes live. The
+// formula matches the SwiftUI kit (UIFont body point size / 17) so both iOS surfaces scale alike.
+private const val DEFAULT_BODY_POINT_SIZE = 17.0
+
+private fun currentOsFontScale(): Float =
+    (UIFont.preferredFontForTextStyle(UIFontTextStyleBody).pointSize / DEFAULT_BODY_POINT_SIZE).toFloat()
+
+@OptIn(ExperimentalForeignApi::class)
+@Composable
+actual fun ProvideOsFontScale(content: @Composable () -> Unit) {
+    val osFontScale = remember { mutableStateOf(currentOsFontScale()) }
+
+    val listener = remember {
+        object : NSObject() {
+            @Suppress("unused")
+            @ObjCAction
+            fun contentSizeChanged(arg: NSNotification) {
+                osFontScale.value = currentOsFontScale()
+            }
+        }
+    }
+
+    DisposableEffect(Unit) {
+        NSNotificationCenter.defaultCenter.addObserver(
+            observer = listener,
+            selector = NSSelectorFromString(listener::contentSizeChanged.name + ":"),
+            name = UIContentSizeCategoryDidChangeNotification,
+            `object` = null,
+        )
+        onDispose {
+            NSNotificationCenter.defaultCenter.removeObserver(
+                observer = listener,
+                name = UIContentSizeCategoryDidChangeNotification,
+                `object` = null,
+            )
+        }
+    }
+
+    val density = LocalDensity.current
+    CompositionLocalProvider(
+        LocalDensity provides Density(density.density, osFontScale.value),
+    ) {
+        content()
+    }
+}

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

@@ -11,6 +11,7 @@ import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.InternalComposeUiApi
@@ -96,20 +97,41 @@ actual fun LottieAnimation(
     tintColor: Color?,
     bgColor: Color?,
     placedAsOverlay: Boolean,
+    iterations: Int,
+    isPlaying: Boolean,
+    onEvent: ((String) -> Unit)?,
     modifier: Modifier,
     useCompose: Boolean
 ) {
     if (useCompose) {
-        ComposeLottieAnimation(path, tintColor, bgColor, modifier)
+        ComposeLottieAnimation(path, tintColor, bgColor, iterations, isPlaying, onEvent, modifier)
         return
     }
 
+    val loopCount = if (iterations == LottieIterateForever) -1.0 else iterations.toDouble()
+
     var animation by remember { mutableStateOf<CompatibleAnimation?>(null) }
+    val animationView = remember { mutableStateOf<CompatibleAnimationView?>(null) }
 
     LaunchedEffect(Unit) {
         animation = CompatibleAnimation(name = "compose-resources/composeResources/vn.momo.compose.resources/".plus(path), subdirectory = null, NSBundle.mainBundle)
     }
 
+    val currentOnEvent by rememberUpdatedState(onEvent)
+
+    LaunchedEffect(isPlaying) {
+        currentOnEvent?.invoke(if (isPlaying) LottieEvent.Start else LottieEvent.Pause)
+    }
+
+    LaunchedEffect(animationView.value, isPlaying) {
+        val view = animationView.value ?: return@LaunchedEffect
+        if (isPlaying) {
+            view.playWithCompletion(completion = { finished -> if (finished) currentOnEvent?.invoke(LottieEvent.Finish) })
+        } else {
+            view.pause()
+        }
+    }
+
     when (val value = animation) {
         null -> {
             Box(modifier)
@@ -126,7 +148,7 @@ actual fun LottieAnimation(
 
                             setBackgroundColor(bgColor?.toUIColor() ?: UIColor.clearColor)
 
-                            setLoopAnimationCount(-1.0)
+                            setLoopAnimationCount(loopCount)
                             setAnimationSpeed(1.0)
 
                             if (tintColor != null) {
@@ -140,12 +162,13 @@ actual fun LottieAnimation(
                                 setColorValue(uiColor, CompatibleAnimationKeypath("**.Stroke.Color"))
                             }
 
-                            play()
+                            animationView.value = this
                         }
                     },
 
                     update = { view ->
                         view.setBackgroundColor(bgColor?.toUIColor() ?: UIColor.clearColor)
+                        view.setLoopAnimationCount(loopCount)
 
                         if (tintColor != null) {
                             val uiColor = tintColor.toUIColor()

package/gradle.properties

@@ -18,7 +18,7 @@ kotlin.apple.xcodeCompatibility.nowarn=true
 name="ComposeKits"
 group=vn.momo.kits
 artifact.id=kits
-version=0.163.1-beta.8
+version=0.163.1-beta.9
 
 repo=GitLab
 url=https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven

package/ios/Application/ApplicationEnvironment.swift

@@ -41,10 +41,23 @@ public class ApplicationEnvironment: ObservableObject {
     let applicationContext: MiniAppContext?
     let composeApi: KitComposeApi?
     let config: KitConfig?
-    
-    public init(applicationContext: MiniAppContext? = nil, composeApi: KitComposeApi? = nil, config: KitConfig? = nil) {
+    let maxApi: MaxApi?
+
+    public init(applicationContext: MiniAppContext? = nil, composeApi: KitComposeApi? = nil, config: KitConfig? = nil, maxApi: MaxApi? = nil) {
         self.applicationContext = applicationContext
         self.composeApi = composeApi
         self.config = config
+        self.maxApi = maxApi
+    }
+}
+
+private struct ApplicationEnvironmentKey: EnvironmentKey {
+    static let defaultValue = ApplicationEnvironment()
+}
+
+public extension EnvironmentValues {
+    var applicationEnvironment: ApplicationEnvironment {
+        get { self[ApplicationEnvironmentKey.self] }
+        set { self[ApplicationEnvironmentKey.self] = newValue }
     }
 }