@momo-kits/native-kits 0.162.22-debug → 0.162.23-debug

package/compose/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.162.22-debug"
+        version = "0.162.23-debug"
         summary = "IOS Shared module"
         homepage = "https://momo.vn"
         ios.deploymentTarget = "15.0"

package/compose/compose.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |spec|
     spec.name                     = 'compose'
-    spec.version                  = '0.162.2-sp.9-debug'
+    spec.version                  = '0.162.2-test.22'
     spec.homepage                 = 'https://momo.vn'
     spec.source                   = { :http=> ''}
     spec.authors                  = ''

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

@@ -8,7 +8,10 @@ import android.graphics.PorterDuffColorFilter
 import android.os.Build
 import androidx.compose.foundation.layout.Box
 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 androidx.compose.ui.graphics.NativePaint
@@ -21,7 +24,7 @@ import androidx.compose.ui.unit.dp
 import com.airbnb.lottie.LottieProperty
 import com.airbnb.lottie.compose.LottieAnimation
 import com.airbnb.lottie.compose.LottieCompositionSpec
-import com.airbnb.lottie.compose.LottieConstants
+import com.airbnb.lottie.compose.animateLottieCompositionAsState
 import com.airbnb.lottie.compose.rememberLottieComposition
 import com.airbnb.lottie.compose.rememberLottieDynamicProperties
 import com.airbnb.lottie.compose.rememberLottieDynamicProperty
@@ -78,11 +81,14 @@ 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
     }
 
@@ -110,9 +116,30 @@ actual fun LottieAnimation(
         )
     )
 
+    val lottieState = animateLottieCompositionAsState(
+        composition = composition,
+        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) }
+        }
+    }
+
     LottieAnimation(
         composition = composition,
-        iterations = LottieConstants.IterateForever,
+        progress = { lottieState.progress },
         dynamicProperties = if (tintColor != null) dynamicProperties else null,
         modifier = modifier
     )

package/compose/src/commonMain/kotlin/vn/momo/kits/layout/Card.kt

@@ -1,2 +1,65 @@
 package vn.momo.kits.layout
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Image
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Radius
+
+/**
+ * A white rounded surface card that lays its [Item]s on a 12-column grid
+ * (React kit foundations/Layout/Card). 8dp gutter, 12dp padding, 12dp
+ * horizontal margin, Radius.M corners, background = theme surface, optional
+ * shadow or [backgroundImage]. Items flow left-to-right and wrap.
+ */
+@OptIn(ExperimentalLayoutApi::class)
+@Composable
+fun Card(
+    useShadow: Boolean = false,
+    backgroundImage: String? = null,
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+) {
+    val columns = 12
+    val gutter = 8.dp
+    val shape = RoundedCornerShape(Radius.M)
+    var surface = modifier.fillMaxWidth().padding(horizontal = 12.dp)
+    if (useShadow) surface = surface.shadow(4.dp, shape)
+    surface = surface.clip(shape)
+    // The React kit drops the surface colour when a backgroundImage is supplied
+    // (`!!backgroundImage && { backgroundColor: undefined }`).
+    if (backgroundImage == null) surface = surface.background(AppTheme.current.colors.background.surface)
+    Box(modifier = surface) {
+        // React renders this as an absolutely-filled child BEHIND the content
+        // (styles.imageBackground: position absolute, inset 0) — matchParentSize
+        // fills the card without contributing to its measured size.
+        if (backgroundImage != null) {
+            Image(source = backgroundImage, modifier = Modifier.matchParentSize())
+        }
+        BoxWithConstraints(modifier = Modifier.fillMaxWidth().padding(12.dp)) {
+            // `- 1.dp / columns` mirrors the React kit's `- 1 / numberOfColumns`
+            // nudge: it keeps a full 12-span Item ~1dp narrower than the content
+            // box so sub-pixel rounding can never overflow and wrap the FlowRow.
+            val sizePerSpan = (maxWidth - gutter * (columns - 1)) / columns - 1.dp / columns
+            CompositionLocalProvider(LocalGridContext provides GridContext(columns, gutter, sizePerSpan)) {
+                FlowRow(
+                    horizontalArrangement = Arrangement.spacedBy(gutter),
+                    verticalArrangement = Arrangement.spacedBy(gutter),
+                ) { content() }
+            }
+        }
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/layout/Item.kt

@@ -4,32 +4,45 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.compositionLocalOf
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
 
+/**
+ * Grid context supplied by [Section] / [Card]: the per-span cell size + gutter,
+ * so an [Item] can resolve its pixel width from a 1-12 `widthSpan`. Mirrors the
+ * React kit's GridContext (foundations/Layout/GridSystem).
+ */
 data class GridContext(
-    val numberOfColumns: Number,
-    val gutterSize: Number,
-    val sizePerSpan: Number,
-    val getSizeSpan: (Number) -> Number
-)
+    val numberOfColumns: Int = 12,
+    val gutter: Dp = 12.dp,
+    val sizePerSpan: Dp = 0.dp,
+) {
+    /** Width covering `span` columns + the (span-1) gutters between them. */
+    fun sizeForSpan(span: Int): Dp = sizePerSpan * span + gutter * (span - 1)
+}
+
+/** Provided by Section/Card; null when an Item is rendered outside a grid. */
+val LocalGridContext = compositionLocalOf<GridContext?> { null }
 
+/**
+ * A grid cell. `widthSpan` (1-12) sets the width as a fraction of the parent
+ * Section/Card; the parent's flex-wrap flows the cells into rows. Rendered
+ * outside a grid it just wraps its content at its natural size.
+ */
 @Composable
 fun Item(
-    heightSpan: Number = 1,
-    widthSpan: Number = 1,
-    content: @Composable () -> Unit,
+    widthSpan: Int = 12,
+    heightSpan: Int = 0,
     modifier: Modifier = Modifier,
-    grid: GridContext
+    content: @Composable () -> Unit,
 ) {
-
-    val widthItem = grid.getSizeSpan(widthSpan)
-    val heightItem = grid.getSizeSpan(heightSpan)
-
-    Box(
-        modifier = modifier.width(width = Dp(widthItem.toFloat()))
-            .height(height = Dp(heightItem.toFloat()))
-    ) {
-        content()
+    val grid = LocalGridContext.current
+    var m = modifier
+    if (grid != null) {
+        m = m.width(grid.sizeForSpan(widthSpan))
+        if (heightSpan > 0) m = m.height(grid.sizeForSpan(heightSpan))
     }
-}
+    Box(modifier = m) { content() }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/layout/Section.kt

@@ -1,2 +1,51 @@
 package vn.momo.kits.layout
 
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Image
+
+/**
+ * A transparent 12-column grid row that wraps its [Item]s (React kit
+ * foundations/Layout/Section). 12dp gutter; 12dp horizontal margin when
+ * `useMargin`; optional [backgroundImage]. Items flow left-to-right and wrap.
+ */
+@OptIn(ExperimentalLayoutApi::class)
+@Composable
+fun Section(
+    useMargin: Boolean = true,
+    backgroundImage: String? = null,
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+) {
+    val columns = 12
+    val gutter = 12.dp
+    val margin = if (useMargin) 12.dp else 0.dp
+    Box(modifier = modifier.fillMaxWidth().padding(horizontal = margin)) {
+        // React renders this as an absolutely-filled child behind the content
+        // (styles.imageBackground: position absolute, inset 0).
+        if (backgroundImage != null) {
+            Image(source = backgroundImage, modifier = Modifier.matchParentSize())
+        }
+        BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
+            // `- 1.dp / columns` mirrors the React kit's `- 1 / numberOfColumns`
+            // nudge — keeps a full 12-span Item ~1dp inside the content box so
+            // sub-pixel rounding can never overflow and wrap the FlowRow.
+            val sizePerSpan = (maxWidth - gutter * (columns - 1)) / columns - 1.dp / columns
+            CompositionLocalProvider(LocalGridContext provides GridContext(columns, gutter, sizePerSpan)) {
+                FlowRow(
+                    horizontalArrangement = Arrangement.spacedBy(gutter),
+                    verticalArrangement = Arrangement.spacedBy(gutter),
+                ) { content() }
+            }
+        }
+    }
+}

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

@@ -117,7 +117,7 @@ internal fun BottomSheet(
                     easing = CubicBezierEasing(0.3f, 0.0f, 0.8f, 0.15f)
                 )
             )
-            navigator.pop()
+            OverplayComponentRegistry.hardClearAfterDismiss()
         }
     }
 

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

@@ -81,7 +81,7 @@ internal fun ModalScreen(
                 targetValue = 0.8f,
                 animationSpec = tween(durationMillis = 200)
             )
-            navigator.pop()
+            OverplayComponentRegistry.hardClearAfterDismiss()
         }
     }
 

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/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/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.162.22
+version=0.162.23
 
 repo=GitLab
 url=https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.162.22-debug",
+  "version": "0.162.23-debug",
   "private": false,
   "dependencies": {},
   "devDependencies": {},

package/publish.sh

@@ -301,6 +301,9 @@ phase_publish_maven() {
 
     # Temporarily remove composeResources and compose { resources { ... } } block
     echo "📦 Backing up sample/shared composeResources and build.gradle.kts..."
+    # mv into an existing dir nests instead of renaming, so a backup left behind by a
+    # crashed run must be cleared first or the restore below puts back the wrong tree.
+    rm -rf sample/shared/src/commonMain/composeResources.backup
     if [ -d "sample/shared/src/commonMain/composeResources" ]; then
         mv sample/shared/src/commonMain/composeResources sample/shared/src/commonMain/composeResources.backup
     fi