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

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/ios/Button/Button.swift

@@ -1,6 +1,7 @@
 
 import Foundation
 import SwiftUI
+import Lottie
 
 // MARK: - ButtonType
 
@@ -27,13 +28,14 @@ public enum ButtonSize {
 public struct Button: View {
     // MARK: Lifecycle
 
-    public init(title: String = "", action: @escaping () -> Void, type: ButtonType = .primary, size: ButtonSize = .large, iconLeft: AnyView? = nil, iconRight: AnyView? = nil) {
+    public init(title: String = "", action: @escaping () -> Void, type: ButtonType = .primary, size: ButtonSize = .large, iconLeft: AnyView? = nil, iconRight: AnyView? = nil, loading: Bool = false) {
         self.title = title
         self.action = action
         self.type = type
         self.size = size
         self.iconLeft = iconLeft
         self.iconRight = iconRight
+        self.loading = loading
     }
 
     // MARK: Public
@@ -41,13 +43,26 @@ public struct Button: View {
     public var body: some View {
         SwiftUI.Button(action: action) {
             HStack {
-                iconLeft
+                if (loading) {
+                    LottieView(
+                        name: "lottie_circle_loader",
+                        loopMode: .loop,
+                        contentMode: .center
+                    )
+                    .frame(width: 32, height: 32)
+                    .foregroundColor(.white)
+                    .colorMultiply(.white)
+                } else {
+                    iconLeft
+                }
                 renderTitle(title: title, type: type, size: size).lineLimit(1).truncationMode(.tail)
                 iconRight
             }
             .buttonSize(size)
             .buttonType(type)
-        }.disabled(type == .disabled)
+            .opacity(loading ? 0.75 : 1.0)
+        }
+        .disabled(type == .disabled && !loading)
         .clipShape(RoundedRectangle(cornerRadius: Radius.S))
     }
 
@@ -59,6 +74,7 @@ public struct Button: View {
     var size: ButtonSize = .large
     var iconLeft: AnyView?
     var iconRight: AnyView?
+    var loading: Bool
 
     func renderTitle(title: String, type: ButtonType, size: ButtonSize) -> Text {
         switch size {

package/ios/Lottie/LottieView.swift

@@ -0,0 +1,86 @@
+//
+//  LottieView.swift
+//  MoMoPlatform
+//
+//  Created by thanhdat on 16/01/2023.
+//  Copyright © 2023 Facebook. All rights reserved.
+//
+
+import SwiftUI
+import Lottie
+
+struct LottieView: UIViewRepresentable {
+  var name: String = ""
+  var url: String?
+  var loopMode: LottieLoopMode = .playOnce
+  var contentMode : UIView.ContentMode  = .scaleAspectFit
+  var onDone: (() -> Void)?
+  
+  // Add static cache for animations
+  private static var animationCache = NSCache<NSString, LottieAnimation>()
+  
+  func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView {
+    let view = UIView(frame: .zero)
+    
+    // Configure Lottie with optimized settings
+    let configuration = LottieConfiguration(
+      renderingEngine: .coreAnimation,
+      decodingStrategy: .dictionaryBased
+    )
+    
+    let animationView = LottieAnimationView(configuration: configuration)
+    
+    if let url = url {
+      // Use cached animation if available
+      if let cachedAnimation = Self.animationCache.object(forKey: url as NSString) {
+        animationView.animation = cachedAnimation
+        setupAnimationView(animationView, view)
+      } else {
+        LottieAnimation.loadedFrom(url: URL(string: url)!, closure: { animation in
+          if let animation = animation {
+            Self.animationCache.setObject(animation, forKey: url as NSString)
+            animationView.animation = animation
+            setupAnimationView(animationView, view)
+          }
+        }, animationCache: nil)
+      }
+    } else {
+      // Use cached animation if available
+      if let cachedAnimation = Self.animationCache.object(forKey: name as NSString) {
+        animationView.animation = cachedAnimation
+        setupAnimationView(animationView, view)
+      } else if let animation = LottieAnimation.named(name) {
+          Self.animationCache.setObject(animation, forKey: name as NSString)
+          animationView.animation = animation
+          setupAnimationView(animationView, view)
+      }
+    }
+    
+    return view
+  }
+  
+  private func setupAnimationView(_ animationView: LottieAnimationView, _ containerView: UIView) {
+    animationView.contentMode = contentMode
+    animationView.loopMode = loopMode
+    animationView.backgroundBehavior = loopMode == .loop ? .pauseAndRestore : .pause
+    
+    // Optimize rendering
+    animationView.shouldRasterizeWhenIdle = true
+    
+    animationView.translatesAutoresizingMaskIntoConstraints = false
+    containerView.addSubview(animationView)
+    
+    NSLayoutConstraint.activate([
+      animationView.widthAnchor.constraint(equalTo: containerView.widthAnchor),
+      animationView.heightAnchor.constraint(equalTo: containerView.heightAnchor)
+    ])
+    
+    animationView.play { finished in
+      if finished {
+        onDone?()
+      }
+    }
+  }
+  
+  func updateUIView(_ uiView: UIView, context: UIViewRepresentableContext<LottieView>) {}
+}

package/ios/Lottie/LottieViewController.swift

@@ -0,0 +1,55 @@
+//
+//  LottieViewController.swift
+//  MoMoPlatform
+//
+//  Created by Đại Trịnh on 26/09/2023.
+//  Copyright © 2023 Facebook. All rights reserved.
+//
+
+import Foundation
+import Lottie
+import SwiftUI
+
+public class LottieViewController: UIViewController {
+  var name: String = ""
+  var url: String?
+  var loopMode: LottieLoopMode = .playOnce
+  var frame: CGRect
+  var id: String?
+
+  init(name: String, url: String? = nil, loopMode: LottieLoopMode, frame: CGRect, id: String? = nil) {
+    self.name = name
+    self.url = url
+    self.loopMode = loopMode
+    self.frame = frame
+    self.id = id
+
+    super.init(nibName: nil, bundle: nil)
+  }
+
+  required init?(coder: NSCoder) {
+    fatalError("init(coder:) has not been implemented")
+  }
+
+  public override func viewDidLoad() {
+    super.viewDidLoad()
+    setupCustomView()
+  }
+
+  private func setupCustomView() {
+    let basicView = UIView()
+    basicView.frame = frame
+
+    let customLottieView = LottieView(name: name, url: url, loopMode: loopMode)
+    let hostViewController = UIHostingController(rootView: customLottieView)
+    hostViewController.view.frame = basicView.bounds;
+    hostViewController.view.backgroundColor = .clear
+
+    // set accessibility label
+    basicView.accessibilityLabel = id ?? "" // Set accessibility label directly to basicView
+    basicView.isAccessibilityElement = true // Ensure basicView is treated as an accessible element
+
+    basicView.addSubview(hostViewController.view)
+    view.addSubview(basicView)
+  }
+}

package/package.json

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