@momo-kits/native-kits 0.151.2-test.2 → 0.151.2-test.3

package/compose/build.gradle.kts

@@ -47,6 +47,8 @@ kotlin {
                 implementation(libs.coil.multiplatform.network.ktor)
                 implementation(libs.jetbrains.serialization.json)
                 implementation(libs.kotlinx.datetime)
+                implementation(libs.compottie)
+                implementation(libs.compottie.res)
                 api(project(":NativeMaxApi"))
             }
         }

package/compose/src/commonMain/composeResources/files/lottie_circle_loader.json

@@ -0,0 +1 @@
+{"v":"5.10.2","fr":30,"ip":0,"op":50,"w":100,"h":100,"nm":"Spinner3_white","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"loading","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":13,"s":[0],"e":[200]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":25,"s":[200],"e":[360]},{"t":35}],"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[44.124,44.124,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[90,90],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.996078431373,0.956862745098,0.980392156863,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":9,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[44.124,44.124],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.392],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":18,"s":[0],"e":[100]},{"t":50}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0],"e":[100]},{"t":28}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":50,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"loading 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":15,"s":[0],"e":[200]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":27,"s":[200],"e":[360]},{"t":37}],"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[44.124,44.124,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[90,90],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.98431372549,0.835294117647,0.917647058824,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":9,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[44.124,44.124],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.392],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":20,"s":[0],"e":[100]},{"t":49}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[0],"e":[100]},{"t":30}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":30,"op":50,"st":2,"ct":1,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"base","sr":1,"ks":{"o":{"a":0,"k":40,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[44.124,44.124,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[90,90],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.996078431373,0.956862745098,0.980392156863,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":9,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[44.124,44.124],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":50,"st":0,"ct":1,"bm":0}],"markers":[]}

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

@@ -2,6 +2,7 @@ package vn.momo.kits.application
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.Immutable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -63,6 +64,7 @@ class Navigator {
     }
 }
 
+@Immutable
 data class MiniAppContext(
     val appIcon: String = "",
     val appName: Any? = null,
@@ -156,6 +158,7 @@ val AppLanguage = staticCompositionLocalOf<String?> {
     null
 }
 
+@Immutable
 data class KitConfig(
     val trustBanner: TrustBannerData? = null,
     val headerBar: String? = null,

package/compose/src/commonMain/kotlin/vn/momo/kits/components/Button.kt

@@ -11,23 +11,30 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import io.github.alexzhirkevich.compottie.Compottie
+import io.github.alexzhirkevich.compottie.LottieCompositionSpec
+import io.github.alexzhirkevich.compottie.animateLottieCompositionAsState
+import io.github.alexzhirkevich.compottie.rememberLottieComposition
+import io.github.alexzhirkevich.compottie.rememberLottiePainter
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Radius
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
 import vn.momo.kits.modifier.activeOpacityClickable
+import vn.momo.uikits.resources.Res
 
 enum class ButtonType {
     PRIMARY,
@@ -145,22 +152,35 @@ fun RenderLeading(
     ) {
         if (loading) {
             Box(Modifier.padding(end = marginRight)) {
-                CircularProgressIndicator(
+                val composition by rememberLottieComposition {
+                    LottieCompositionSpec.JsonString(
+                        Res.readBytes("files/spinner_white.json").decodeToString()
+                    )
+                }
+
+                val progress by animateLottieCompositionAsState(
+                    composition = composition,
+                    iterations = Compottie.IterateForever
+                )
+
+                Image(
+                    source = rememberLottiePainter(
+                        composition = composition,
+                        progress = { progress }
+                    ),
                     modifier = Modifier.size(iconSize - 4.dp),
+                )
+            }
+        } else {
+            if (iconLeft.isNotEmpty()) {
+                Icon(
+                    source = iconLeft,
                     color = color,
-                    trackColor = Color.Transparent,
-                    strokeWidth = 2.dp
+                    size = iconSize,
+                    modifier = Modifier.padding(end = marginRight)
                 )
             }
         }
-        if (iconLeft.isNotEmpty()) {
-            Icon(
-                source = iconLeft,
-                color = color,
-                size = iconSize,
-                modifier = Modifier.padding(end = marginRight)
-            )
-        }
     }
 }
 
@@ -261,7 +281,7 @@ fun Button(
         }
     }.activeOpacityClickable(
         activeOpacity = 0.5f,
-        enabled = isEnabled,
+        enabled = isEnabled && !loading,
         onClick = onClick
     )
 
@@ -272,7 +292,8 @@ fun Button(
             .then(getTypeStyle(type, size = size))
             .padding(horizontal = sizeSpecs.padding)
             .defaultMinSize(minWidth = sizeSpecs.width)
-            .height(sizeSpecs.height),
+            .height(sizeSpecs.height)
+            .alpha(if(loading) 0.75f else 1f),
         horizontalArrangement = Arrangement.Center,
         verticalAlignment = Alignment.CenterVertically,
     ) {

package/compose/src/commonMain/kotlin/vn/momo/kits/components/datetimepicker/DateTimePickerUtils.kt

@@ -2,7 +2,6 @@ package vn.momo.kits.components.datetimepicker
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
-import kotlinx.datetime.Clock
 import kotlinx.datetime.DatePeriod
 import kotlinx.datetime.LocalDateTime
 import kotlinx.datetime.TimeZone
@@ -10,6 +9,8 @@ import kotlinx.datetime.minus
 import kotlinx.datetime.number
 import kotlinx.datetime.plus
 import kotlinx.datetime.toLocalDateTime
+import kotlin.time.Clock.System.now
+import kotlin.time.ExperimentalTime
 
 /**
  * Format a LocalDateTime object into a string
@@ -149,8 +150,9 @@ val timeMode = listOf("AM", "PM")
 /**
  * Get today's date
  */
+@OptIn(ExperimentalTime::class)
 fun getCurrentDateTime(): LocalDateTime {
-    return Clock.System.now().toLocalDateTime(TimeZone.currentSystemDefault())
+    return now().toLocalDateTime(TimeZone.currentSystemDefault())
 }
 
 /**

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

@@ -2,6 +2,7 @@ package vn.momo.kits.navigation
 
 import androidx.compose.foundation.gestures.ScrollableState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Stable
 import androidx.compose.runtime.State
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.staticCompositionLocalOf
@@ -66,6 +67,7 @@ val LocalNavigation = staticCompositionLocalOf<Navigation> {
     error("No NavigationStack provided")
 }
 
+@Stable
 data class NavigationOptions(
     val onBackHandler: (() -> Unit)? = null,
     val hiddenBack: Boolean = false,
@@ -87,6 +89,6 @@ data class KeyboardOptions(
 
 
 data class ScrollData(
-    val scrollable: Boolean = false,
+    val scrollable: Boolean = true,
     val scrollState: ScrollableState? = null,
 )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.151.2-test.2",
+  "version": "0.151.2-test.3",
   "private": false,
   "dependencies": {
     "@momo-platform/native-max-api": "1.0.18"