@momo-kits/native-kits 0.151.2-test.1 → 0.151.2-test.10

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,23 @@ public struct Button: View {
     public var body: some View {
         SwiftUI.Button(action: action) {
             HStack {
-                iconLeft
+                if loading {
+                    LottieView(name: "lottie_circle_loader", loopMode: .loop)
+                        .frame(width: iconSize, height: iconSize)
+                        .colorMultiply(.white)
+                } else if let iconLeft = iconLeft {
+                    iconLeft.frame(width: iconSize, height: iconSize)
+                }
                 renderTitle(title: title, type: type, size: size).lineLimit(1).truncationMode(.tail)
-                iconRight
+                if let iconRight = iconRight {
+                    iconRight.frame(width: iconSize, height: iconSize)
+                }
             }
             .buttonSize(size)
             .buttonType(type)
-        }.disabled(type == .disabled)
+            .opacity(loading ? 0.75 : 1.0)
+        }
+        .disabled(type == .disabled || loading)
         .clipShape(RoundedRectangle(cornerRadius: Radius.S))
     }
 
@@ -59,6 +71,15 @@ public struct Button: View {
     var size: ButtonSize = .large
     var iconLeft: AnyView?
     var iconRight: AnyView?
+    var loading: Bool
+    
+    private var iconSize: CGFloat {
+        switch size {
+            case .large: return 24
+            case .medium: return 16
+            case .small: return 16
+        }
+    }
 
     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/native-kits.podspec

@@ -13,5 +13,6 @@ Pod::Spec.new do |spec|
 
     spec.framework      = 'SwiftUI', 'Combine'
     spec.dependency       'SDWebImageSwiftUI'
+    spec.dependency       'lottie-ios'
     spec.dependency       'SkeletonUI', '1.0.11'
   end

package/package.json

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

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

@@ -1,385 +0,0 @@
-package vn.momo.kits.navigation.component
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.layout.widthIn
-import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.Immutable
-import androidx.compose.runtime.remember
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.draw.clipToBounds
-import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import vn.momo.kits.components.Image
-import vn.momo.kits.components.Options
-import vn.momo.kits.components.Skeleton
-import vn.momo.kits.components.Text
-import vn.momo.kits.const.AppTheme
-import vn.momo.kits.const.Colors
-import vn.momo.kits.const.Spacing
-import vn.momo.kits.const.Typography
-import vn.momo.kits.const.scaleSize
-import vn.momo.kits.modifier.activeOpacityClickable
-import vn.momo.kits.navigation.component.HeaderTitle.User
-import vn.momo.kits.platform.getScreenDimensions
-
-@Composable
-fun HeaderUser(
-    data: HeaderTitle
-) {
-    if (data !is User) return
-
-    if (data.isLoading) {
-        return TitleUserShimmer()
-    }
-
-    val maxWidth = getScreenDimensions().width.dp - scaleSize(172.dp)- (data.icons.size * 16).dp
-
-    Row(
-        modifier = Modifier
-            .fillMaxWidth()
-            .padding(vertical = Spacing.XS)
-            .activeOpacityClickable(enabled = data.onPress != null, onClick = { data.onPress?.invoke() }),
-        horizontalArrangement = Arrangement.SpaceBetween,
-        verticalAlignment = Alignment.CenterVertically
-    ) {
-        Row(
-            modifier = Modifier.widthIn(max = maxWidth),
-            verticalAlignment = Alignment.CenterVertically
-        ) {
-            Box(modifier = Modifier.size(Spacing.XXL)) {
-                AvatarGroup(urls = AvatarUrls(data.image ?: listOf()), title = data.title)
-                if (data.dotColor != null) {
-                    Box(
-                        modifier = Modifier
-                            .align(Alignment.BottomEnd)
-                            .size(10.dp)
-                            .clip(CircleShape)
-                            .background(data.dotColor)
-                    )
-                }
-            }
-
-            Spacer(Modifier.width(6.dp))
-
-            Column(modifier = Modifier.weight(1f, fill = false)) {
-                Row(verticalAlignment = Alignment.CenterVertically) {
-                    Text(
-                        text = data.title,
-                        color = data.tintColor,
-                        style = Typography.actionXsBold,
-                        maxLines = 1,
-                        overflow = TextOverflow.Ellipsis
-                    )
-                    if (data.icons.isNotEmpty()) {
-                        Spacer(Modifier.width(6.dp))
-                        Row(verticalAlignment = Alignment.CenterVertically) {
-                            data.icons.forEach { icon ->
-                                RemoteIcon16(url = icon)
-                            }
-                        }
-                    }
-                }
-
-                if (!data.subTitle.isNullOrEmpty()) {
-                    Spacer(Modifier.height(2.dp))
-                    Text(
-                        text = data.subTitle,
-                        color = data.tintColor,
-                        style = Typography.descriptionXsRegular,
-                        maxLines = 1,
-                        overflow = TextOverflow.Ellipsis
-                    )
-                }
-            }
-        }
-    }
-}
-
-@Composable
-private fun TitleUserShimmer() {
-    val theme = AppTheme.current
-    Row(
-        modifier = Modifier
-            .fillMaxWidth()
-            .padding(vertical = Spacing.XS),
-        verticalAlignment = Alignment.CenterVertically
-    ) {
-        Box(
-            modifier = Modifier
-                .size(Spacing.XXL)
-                .clip(CircleShape)
-                .background(theme.colors.border.default)
-        ) {
-            Skeleton()
-        }
-        Spacer(Modifier.width(Spacing.M / 2))
-        Column(modifier = Modifier.fillMaxWidth()) {
-            Box(
-                modifier = Modifier
-                    .height(18.dp)
-                    .width(120.dp)
-                    .clip(RoundedCornerShape(8.dp))
-            ) { Skeleton() }
-            Spacer(Modifier.height(Spacing.XXS))
-            Box(
-                modifier = Modifier
-                    .height(12.dp)
-                    .width(120.dp)
-                    .clip(RoundedCornerShape(8.dp))
-            ) { Skeleton() }
-        }
-    }
-}
-
-@Composable
-private fun AvatarGroup(
-    urls: AvatarUrls?,
-    title: String? = null,
-    size: Dp = Spacing.XXL
-) {
-    val theme = AppTheme.current
-    val modifierBorder = remember {
-        Modifier.clip(CircleShape).border(width = (0.5).dp, color = theme.colors.border.default, shape = CircleShape)
-    }
-
-    when (urls?.items?.size) {
-        0 -> InitialsAvatar(
-            modifier = modifierBorder,
-            name = title ?: "",
-            fallbackInitials = null,
-            size = size
-        )
-        1 -> SingleAvatar(modifier = modifierBorder, urls.items[0], size)
-        2 -> TwoAvatar(modifier = modifierBorder, urls, size)
-        3 -> ThreeAvatar(modifier = modifierBorder, urls, size)
-        4 -> FourAvatar(modifier = modifierBorder, urls, size)
-        else -> ManyAvatar(modifier = modifierBorder, urls!!, size)
-    }
-}
-
-@Composable
-private fun SingleAvatar(modifier: Modifier = Modifier, url: String, size: Dp) {
-    Image(
-        source = url,
-        options = Options(
-            contentScale = ContentScale.Crop
-        ),
-        modifier = modifier
-            .size(size)
-    )
-}
-
-@Composable
-private fun TwoAvatar(modifier: Modifier = Modifier, urls: AvatarUrls, size: Dp) {
-    val child = 24.dp
-    Box(modifier = Modifier.size(size)) {
-        Image(
-            source = urls.items[0],
-            options = Options(
-                contentScale = ContentScale.Crop
-            ),
-            modifier = modifier
-                .size(child)
-                .align(Alignment.TopEnd)
-        )
-        Image(
-            source = urls.items[1],
-            options = Options(
-                contentScale = ContentScale.Crop
-            ),
-            modifier = modifier
-                .size(child)
-                .align(Alignment.BottomStart)
-        )
-    }
-}
-
-@Composable
-private fun ThreeAvatar(modifier: Modifier = Modifier, urls: AvatarUrls, size: Dp) {
-    val child = 16.dp
-    Box(modifier = Modifier.size(size).padding(2.dp)) {
-        Image(
-            source = urls.items[0],
-            options = Options(
-                contentScale = ContentScale.Crop
-            ),
-            modifier = modifier
-                .size(child)
-                .align(Alignment.BottomEnd)
-        )
-        Image(
-            source = urls.items[1],
-            options = Options(
-                contentScale = ContentScale.Crop
-            ),
-            modifier = modifier
-                .size(child)
-                .align(Alignment.TopCenter)
-        )
-        Image(
-            source = urls.items[2],
-            options = Options(
-                contentScale = ContentScale.Crop
-            ),
-            modifier = modifier
-                .size(child)
-                .align(Alignment.BottomStart)
-        )
-    }
-}
-
-@Composable
-private fun FourAvatar(modifier: Modifier = Modifier, urls: AvatarUrls, size: Dp) {
-    val child = 16.dp
-    Box(modifier = Modifier.size(size).padding(1.dp)) {
-        Image(
-            source = urls.items[0],
-            options = Options(
-                contentScale = ContentScale.Crop
-            ),
-            modifier = modifier
-                .size(child)
-                .align(Alignment.BottomStart)
-        )
-        Image(
-            source = urls.items[1],
-            options = Options(
-                contentScale = ContentScale.Crop
-            ),
-            modifier = modifier
-                .size(child)
-                .align(Alignment.BottomEnd)
-        )
-        Image(
-            source = urls.items[2],
-            options = Options(
-                contentScale = ContentScale.Crop
-            ),
-            modifier = modifier
-                .size(child)
-                .align(Alignment.TopEnd)
-        )
-        Image(
-            source = urls.items[3],
-            options = Options(
-                contentScale = ContentScale.Crop
-            ),
-            modifier = modifier
-                .size(child)
-                .align(Alignment.TopStart)
-        )
-    }
-}
-
-@Composable
-private fun ManyAvatar(modifier: Modifier = Modifier, urls: AvatarUrls, size: Dp) {
-    val child = 16.dp
-    val more = urls.items.size - 3
-    Box(modifier = Modifier.size(size).padding(1.dp)) {
-        Image(
-            source = urls.items[0],
-            options = Options(
-                contentScale = ContentScale.Crop
-            ),
-            modifier = modifier
-                .size(child)
-                .align(Alignment.BottomStart)
-        )
-        Image(
-            source = urls.items[1],
-            options = Options(
-                contentScale = ContentScale.Crop
-            ),
-            modifier = modifier
-                .size(child)
-                .align(Alignment.TopEnd)
-        )
-        Image(
-            source = urls.items[2],
-            options = Options(
-                contentScale = ContentScale.Crop
-            ),
-            modifier = modifier
-                .size(child)
-                .align(Alignment.TopStart)
-        )
-        Box(
-            modifier = modifier
-                .size(child)
-                .align(Alignment.BottomEnd)
-                .background(Colors.pink_09)
-                .padding(1.dp)
-                .clipToBounds(),
-            contentAlignment = Alignment.Center
-        ) {
-            Text(
-                text = "+$more",
-                color = Colors.pink_03,
-                style = Typography.descriptionXsRegular.copy(fontSize = 8.sp),
-                maxLines = 1,
-                overflow = TextOverflow.Visible
-            )
-        }
-    }
-}
-
-@Composable
-private fun InitialsAvatar(
-    modifier: Modifier = Modifier,
-    name: String,
-    fallbackInitials: String? = null,
-    size: Dp = Spacing.XXL
-) {
-    val initials = remember(name, fallbackInitials) {
-        fallbackInitials ?: run {
-            val words = name.trim().split(Regex("\\s+")).takeLast(2)
-            words.joinToString("") { it.firstOrNull()?.uppercase() ?: "" }
-        }
-    }
-    Box(
-        modifier = modifier
-            .size(size)
-            .background(Colors.pink_09),
-        contentAlignment = Alignment.Center
-    ) {
-        Text(
-            text = initials,
-            color = Colors.pink_03,
-            style = Typography.descriptionXsRegular
-        )
-    }
-}
-
-@Composable
-private fun RemoteIcon16(url: String) {
-    Image(
-        source = url,
-        options = Options(
-            contentScale = ContentScale.Crop
-        ),
-        modifier = Modifier
-            .size(16.dp)
-            .clip(RoundedCornerShape(4.dp)),
-    )
-}
-
-@Immutable
-data class AvatarUrls(val items: List<String>)

package/compose/src/commonMain/kotlin/vn/momo/kits/utils/Localize.kt

@@ -1,35 +0,0 @@
-package vn.momo.kits.utils
-
-import vn.momo.kits.application.ComposeApi
-import vn.momo.maxapi.IMaxApi
-
-object Localize {
-    val vi = mapOf(
-        "enterPhoneNumber" to "Vui lòng nhập số điện thoại",
-        "invalidPhoneNumber" to "Số điện thoại không đúng"
-    )
-
-    val en = mapOf(
-        "enterPhoneNumber" to "Please enter your phone number",
-        "invalidPhoneNumber" to "Invalid phone number"
-    )
-
-
-
-
-    fun getLocalized(composeApi: ComposeApi?, maxApi: IMaxApi?, key: String): String {
-        return when {
-            composeApi != null -> getLocalized(composeApi, key)
-            maxApi != null -> getLocalized(maxApi, key)
-            else -> ""
-        }
-    }
-
-    private fun getLocalized(api: ComposeApi?, key: String): String {
-        return if (api?.request("getLanguage"){} == "vi") vi[key] ?: key else en[key] ?: key
-    }
-
-    private fun getLocalized(api: IMaxApi?, key: String): String {
-        return if (api?.getLanguage{} == "vi") vi[key] ?: key else en[key] ?: key
-    }
-}