@momo-kits/native-kits 0.162.2-test.23-debug → 0.162.2-test.24-debug

package/compose/build.gradle.kts

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

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

@@ -129,8 +129,6 @@ actual fun LottieAnimation(
         currentOnEvent?.invoke(if (isPlaying) LottieEvent.Start else LottieEvent.Pause)
     }
 
-    // Only fire finish once the animation has actually advanced (armed by a not-at-end frame) then
-    // reaches the end, so a transient isAtEnd at init can't produce a spurious callback.
     LaunchedEffect(lottieState) {
         var armed = false
         snapshotFlow { lottieState.isAtEnd }.collect { atEnd ->

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

@@ -24,6 +24,7 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
@@ -101,7 +102,11 @@ internal fun BottomSheet(
         )
     }
 
+    val isClosing = remember { mutableStateOf(false) }
+
     fun closeEvent(){
+        if (isClosing.value) return
+        isClosing.value = true
         coroutineScope.launch {
             sheetOffset.animateTo(
                 targetValue = screenHeightPx,

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

@@ -71,7 +71,11 @@ internal fun ModalScreen(
         }
     }
 
+    val isClosing = remember { mutableStateOf(false) }
+
     fun closeEvent() {
+        if (isClosing.value) return
+        isClosing.value = true
         coroutineScope.launch {
             alpha.animateTo(
                 targetValue = 0f,

package/gradle.properties

@@ -18,7 +18,7 @@ kotlin.apple.xcodeCompatibility.nowarn=true
 name="ComposeKits"
 group=vn.momo.kits
 artifact.id=kits
-version=0.162.2-test.23
+version=0.162.2-test.24
 
 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.2-test.23-debug",
+  "version": "0.162.2-test.24-debug",
   "private": false,
   "dependencies": {},
   "devDependencies": {},

package/publish.sh

@@ -251,6 +251,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