@momo-kits/native-kits 0.0.1-beta.4 → 0.2.0-kt22

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/OTPKeyboard/KeyboardButton.swift

@@ -8,9 +8,13 @@ typealias SwiftButton = SwiftUI.Button
 public struct KeyboardButton: View {
     // MARK: Lifecycle
 
-    public init(_ key: String, action: @escaping (_ key: String)->Void) {
+    public init(_ key: String, action: @escaping (_ key: String)->Void, width: CGFloat = .infinity, height: CGFloat = 48, color: Color = Colors.card, textColor: Color = Colors.text) {
         self.key = key
         self.action = action
+        self.width = width
+        self.height = height
+        self.color = color
+        self.textColor = textColor
     }
 
     // MARK: Public
@@ -19,9 +23,9 @@ public struct KeyboardButton: View {
         SwiftUI.Button(action: { self.action(key) }) {
             HStack {
                 Text(key).font(.system(size: 24, weight: .bold))
-            }.frame(maxWidth: .infinity, minHeight: 48)
-                .background(Colors.card)
-                .foregroundColor(Colors.text)
+            }.frame(maxWidth: CGFloat(width), minHeight: height)
+                .background(color)
+                .foregroundColor(textColor)
                 .clipShape(RoundedRectangle(cornerRadius: 8))
         }
     }
@@ -30,4 +34,8 @@ public struct KeyboardButton: View {
 
     var key: String = ""
     var action: (_ key: String)->Void
+    var width: CGFloat
+    var height: CGFloat
+    var color: Color
+    var textColor: Color
 }

package/ios/OTPKeyboard/OTPKeyboard.swift

@@ -119,7 +119,7 @@ public struct OTPKeyboard: View {
 private struct ValueView: View {
     // MARK: Lifecycle
 
-    public init(_ value: String, valueLength: Int) {
+    init(_ value: String, valueLength: Int) {
         self.value = value
         self.valueLength = valueLength
     }

package/ios/Popup/PopupDisplay.swift

@@ -0,0 +1,287 @@
+import SDWebImageSwiftUI
+import SwiftUI
+
+// MARK: - PopupButtonDirection
+
+public enum PopupButtonDirection {
+    case row
+    case column
+    case auto
+}
+
+// MARK: - PopupButtonType
+
+public enum PopupButtonType {
+    case text
+    case button
+}
+
+extension View {
+    func measureLineHeights(font: Font,
+                            oneLine: Binding<CGFloat>,
+                            twoLines: Binding<CGFloat>) -> some View {
+        overlay(
+            VStack(spacing: 0) {
+                Text("A")
+                    .font(font)
+                    .lineLimit(1)
+                    .fixedSize()
+                    .background(
+                        GeometryReader { g in
+                            Color.clear.onAppear { oneLine.wrappedValue = g.size.height }
+                        }
+                    )
+                    .hidden()
+
+                Text("A\nA")
+                    .font(font)
+                    .lineLimit(2)
+                    .fixedSize(horizontal: false, vertical: true)
+                    .background(
+                        GeometryReader { g in
+                            Color.clear.onAppear { twoLines.wrappedValue = g.size.height }
+                        }
+                    )
+                    .hidden()
+            }
+            .frame(width: 0, height: 0)
+        )
+    }
+}
+
+// MARK: - PopupDisplay
+
+public struct PopupDisplay: View {
+    // MARK: Lifecycle
+
+    public init(isPresented: Binding<Bool>, title: String = "", description: String = "", url: String = "", buttonDirection: PopupButtonDirection = .column, buttonType: PopupButtonType = .button, actionButtonTitle: String = "", closeButtonTitle: String = "", onPressAction: @escaping () -> Void = {}, onPressCloseButton: @escaping () -> Void = {}, onClose: @escaping () -> Void = {}, errorCode: String = "", isShowCloseIcon: Bool = true) {
+        self._isPresented = isPresented
+        self.title = title
+        self.description = description
+        self.url = url
+        self.buttonDirection = buttonDirection
+        self.buttonType = buttonType
+        self.onPressAction = onPressAction
+        self.onPressCloseButton = onPressCloseButton
+        self.onClose = onClose
+        self.closeButtonTitle = closeButtonTitle
+        self.actionButtonTitle = actionButtonTitle
+        self.errorCode = errorCode
+        self.isShowCloseIcon = isShowCloseIcon
+    }
+
+    // MARK: Public
+    
+    @State private var oneLineH: CGFloat = 0
+    @State private var twoLineH: CGFloat = 0
+
+    private var fallbackLH: CGFloat { UIFont.preferredFont(forTextStyle: .body).lineHeight }
+    private var perLine: CGFloat { max(twoLineH - oneLineH, oneLineH > 0 ? oneLineH : fallbackLH) }
+
+    private func heightForLines(lines: CGFloat) -> CGFloat {
+        guard oneLineH > 0 && twoLineH > 0 else { return ceil(fallbackLH * lines) }
+        return ceil(oneLineH + max(0, lines - 1) * (twoLineH - oneLineH))
+    }
+    private var maxHeight8_5: CGFloat { heightForLines(lines: 8.5) }
+
+
+    @State private var textHeight: CGFloat = .zero
+    @State private var isScrollable = false
+    
+    public var body: some View {
+        let language = UserDefaults.standard.string(forKey: "language")?.replacingOccurrences(of: "\"", with: "") ?? "vi"
+        let errorCodeLabels: [String: String] = ["vi": "Mã lỗi: ", "en": "Error code: "]
+        
+        var shouldUseColumn: Bool {
+            buttonDirection == .column || (buttonDirection == .auto && (closeButtonTitle.count > 12 || actionButtonTitle.count > 12))
+        }
+
+        VStack(spacing: 12) {
+            ZStack(alignment: .topTrailing) {
+                if(isShowCloseIcon) {
+                    SwiftUI.Button(action: onClose) {
+                        Image(systemName: "xmark.circle.fill")
+                            .resizable()
+                            .frame(width: 22, height: 22)
+                            .overlay(RoundedRectangle(cornerRadius: Radius.L).stroke(Colors.black01, lineWidth: 2))
+                    }.foregroundColor(Colors.black20)
+                        .background(Colors.black01.cornerRadius(15))
+                        .padding(.trailing, -11)
+                        .padding(.top, -11)
+                        .zIndex(1)
+                        .accessibility(identifier: "ic_popup_close")
+                }
+                
+                VStack(spacing: 0) {
+                    if(!url.isEmpty) {
+                        WebImage(url: URL(string: url), isAnimating: .constant(true))
+                            .resizable()
+                            .placeholder {
+                                Rectangle()
+                                    .fill(Color.gray.opacity(0.3))
+                                    .frame(maxWidth: .infinity, maxHeight: 184)
+                            }
+                            .aspectRatio(1.777, contentMode: .fit)
+                            .frame(maxWidth: .infinity, alignment: .center)
+                            .clipShape(RoundedCorner(radius: 15, corners: [.topLeft, .topRight]))
+                            .clipped()
+                    }
+                    VStack(alignment: .leading, spacing: 0) {
+                        Text(title)
+                            .foregroundColor(.black)
+                            .font(.header_default_semibold)
+                            .padding(.top, 24)
+                            .padding(.bottom, 8)
+                            .lineLimit(2)
+                            .accessibility(identifier: "title_popup_permission")
+                        
+                        Group {
+                            if isScrollable {
+                                ScrollView(showsIndicators: false) {
+                                    Text(description)
+                                        .font(.body_default_regular)
+                                        .foregroundColor(Colors.black17)
+                                        .multilineTextAlignment(.leading)
+                                        .background(GeometryReader { geo in
+                                            Color.clear.onAppear { textHeight = geo.size.height }
+                                        })
+                                        .measureLineHeights(font: .body_default_regular,
+                                                            oneLine: $oneLineH,
+                                                            twoLines: $twoLineH)
+                                }
+                                // Cap the visible height to ~8.5 lines
+                                .frame(height: min(maxHeight8_5, textHeight))
+                            } else {
+                                Text(description)
+                                    .font(.body_default_regular)
+                                    .foregroundColor(Colors.black17)
+                                    .multilineTextAlignment(.leading)
+                                    .background(GeometryReader { geo in
+                                        Color.clear.onAppear {
+                                            textHeight = geo.size.height
+                                            // Trigger scroll at ~8.5 lines
+                                            isScrollable = textHeight > maxHeight8_5
+                                        }
+                                    })
+                                    .measureLineHeights(font: .body_default_regular,
+                                                        oneLine: $oneLineH,
+                                                        twoLines: $twoLineH)
+                            }
+                        }
+                        .padding(.bottom, 8)
+                        
+                        if(!errorCode.isEmpty) {
+                            Text((errorCodeLabels[language] ?? "Mã lỗi: ") + errorCode)
+                                .foregroundColor(Colors.black12)
+                                .font(.description_xs_regular)
+                                .lineLimit(1)
+                                .padding(.bottom, 8)
+                        }
+                    }
+                    .frame(maxWidth: .infinity, alignment: .leading)
+                    .padding(.horizontal, 24)
+                    .padding(.bottom, 16)
+                    
+                    if shouldUseColumn {
+                        if buttonType == .text {
+                            ColumnTextButtons
+                        } else {
+                            ColumnButtons
+                        }
+                    } else {
+                        if buttonType == .text {
+                            RowTextButtons
+                        } else {
+                            RowButtons
+                        }
+                    }
+                }
+                .fixedSize(horizontal: false, vertical: true)
+            }
+        }
+            .background(Color.white.cornerRadius(15))
+            .padding(.horizontal, 12)
+            .accessibilityElement(children: .ignore)
+            .accessibility(identifier: "popup_notify")
+    }
+
+    // MARK: Internal
+
+    @Binding var isPresented: Bool
+    var title: String
+    var description: String
+    var url: String
+    var buttonDirection: PopupButtonDirection
+    var buttonType: PopupButtonType
+    var onPressAction: () -> Void
+    var onPressCloseButton: () -> Void
+    var onClose: () -> Void
+    var actionButtonTitle: String
+    var closeButtonTitle: String
+    var errorCode: String
+    var isShowCloseIcon: Bool
+
+    var RowTextButtons: some View {
+        HStack {
+            SwiftUI.Button(action: onPressCloseButton) {
+                Text(closeButtonTitle)
+                    .font(.action2)
+            }.foregroundColor(Colors.black09)
+                .padding(.trailing, 12)
+
+            SwiftUI.Button(action: onPressAction) {
+                Text(actionButtonTitle)
+                    .font(.action2)
+            }.foregroundColor(Colors.primary)
+        }
+        .frame(maxWidth: .infinity, alignment: .trailing)
+        .padding(EdgeInsets(top: 0, leading: 0, bottom: 24, trailing: 24))
+    }
+
+    var ColumnTextButtons: some View {
+        VStack(alignment: .trailing) {
+            SwiftUI.Button(action: onPressAction) {
+                Text(actionButtonTitle)
+                    .font(.action2)
+            }.foregroundColor(Colors.primary)
+                .padding(.bottom, 6)
+
+            SwiftUI.Button(action: onPressCloseButton) {
+                Text(closeButtonTitle)
+                    .font(.action2)
+            }.foregroundColor(Colors.black09)
+        }
+        .frame(maxWidth: .infinity, alignment: .trailing)
+        .padding(EdgeInsets(top: 0, leading: 0, bottom: 24, trailing: 24))
+    }
+
+    var RowButtons: some View {
+        HStack {
+            if(!closeButtonTitle.isEmpty) {
+                Button(title: closeButtonTitle, action: onPressCloseButton, type: .text, size: .medium).accessibility(identifier: "btn_popup_cancel")
+            }
+            Button(title: actionButtonTitle, action: onPressAction, size: .medium)
+                .accessibility(identifier: "btn_popup_allow")
+        }
+        .frame(maxWidth: .infinity, alignment: .center)
+        .padding(.horizontal, 24)
+        .padding(.bottom, 24)
+    }
+
+    var ColumnButtons: some View {
+        VStack(alignment: .trailing) {
+            Button(
+                title: actionButtonTitle,
+                action: onPressAction,
+                size: .medium
+            ).accessibility(identifier: "btn_popup_allow")
+            if(!closeButtonTitle.isEmpty) {
+                Button(title: closeButtonTitle, action: onPressCloseButton, type: .text, size: .medium).accessibility(identifier: "btn_popup_cancel")
+            }
+        }
+        .frame(maxWidth: .infinity, alignment: .trailing)
+        .padding(.horizontal, 24)
+        .padding(.bottom, 24)
+    }
+
+}

package/ios/Popup/PopupInput.swift

@@ -0,0 +1,96 @@
+import SDWebImageSwiftUI
+import SwiftUI
+
+public struct PopupInput: View {
+    // MARK: Lifecycle
+
+    public init(isPresented: Binding<Bool>, title: String = "", description: String = "", numberOfButtons: Int = 1, actionButtonTitle: String = "", closeButtonTitle: String = "", onPressAction: @escaping () -> Void = {}, onPressCloseButton: @escaping () -> Void = {}, onClose: @escaping () -> Void = {}, inputPlaceholder: String = "", inputValue: Binding<String> = Binding.constant(""), onTextChange: ((String) -> Void)? = nil) {
+        self._isPresented = isPresented
+        self._inputValue = inputValue
+        self.title = title
+        self.description = description
+        self.onPressAction = onPressAction
+        self.onPressCloseButton = onPressCloseButton
+        self.onClose = onClose
+        self.inputPlaceholder = inputPlaceholder
+        self.onTextChange = onTextChange
+        self.numberOfButtons = numberOfButtons
+        self.closeButtonTitle = closeButtonTitle
+        self.actionButtonTitle = actionButtonTitle
+    }
+
+    // MARK: Public
+
+    public var body: some View {
+        VStack(spacing: 12) {
+            ZStack(alignment: .topTrailing) {
+                SwiftUI.Button(action: onPressClose) {
+                    Image(systemName: "xmark.circle.fill")
+                        .resizable()
+                        .frame(width: 16, height: 16)
+                }.foregroundColor(Colors.black20)
+                    .background(Colors.black01.cornerRadius(8))
+                    .offset(x: 6, y: -6)
+                    .zIndex(1)
+
+                VStack {
+                    VStack(alignment: .leading) {
+                        Text(title)
+                            .foregroundColor(.black)
+                            .font(.headerText1)
+                            .padding(.top, 12)
+                            .padding(.bottom, 24)
+
+                        Text(description)
+                            .foregroundColor(.black)
+                            .font(.paragraph)
+                            .opacity(0.6)
+                            .multilineTextAlignment(.leading)
+                            .padding(.bottom, 20)
+                    }.padding(.horizontal, 24)
+
+                    Input($inputValue, placeholder: inputPlaceholder, onChange: onTextChange)
+                        .padding(.horizontal, 24)
+
+                    if numberOfButtons == 1 {
+                        Button(title: actionButtonTitle, action: onPressAction)
+                            .padding(.horizontal, 24)
+                            .padding(.bottom, 24)
+                    } else {
+                        HStack {
+                            Button(title: closeButtonTitle, action: onPressCloseButton, type: .secondary)
+                            Button(title: actionButtonTitle, action: onPressAction)
+                        }.padding(.horizontal, 24)
+                            .padding(.bottom, 24)
+                    }
+
+                }.clipped()
+            }
+        }
+        .background(Color.white.cornerRadius(8))
+        .shadow(color: .black.opacity(0.08), radius: 2, x: 0, y: 0)
+        .shadow(color: .black.opacity(0.16), radius: 24, x: 0, y: 0)
+        .padding(.horizontal, 40)
+    }
+
+    // MARK: Internal
+
+    @Binding var isPresented: Bool
+    @Binding var inputValue: String
+    var title: String
+    var description: String
+    var onPressAction: () -> Void
+    var onPressCloseButton: () -> Void
+    var onClose: () -> Void
+    var inputPlaceholder: String
+    var onTextChange: ((String) -> Void)?
+    var numberOfButtons: Int
+    var actionButtonTitle: String
+    var closeButtonTitle: String
+
+
+    func onPressClose(){
+        isPresented = false
+        onClose()
+    }
+}

package/ios/Popup/PopupPromotion.swift

@@ -0,0 +1,73 @@
+import SwiftUI
+import SDWebImageSwiftUI
+
+public struct PopupPromotion: View {
+    var imageUrl: String
+    var onIconClose: (() -> Void)?
+    var onAction: (() -> Void)?
+
+
+    public init(
+        imageUrl: String,
+        onIconClose: (() -> Void)? = nil,
+        onAction: (() -> Void)? = nil
+    ) {
+        self.imageUrl = imageUrl
+        self.onIconClose = onIconClose
+        self.onAction = onAction
+    }
+
+    public var body: some View {
+        VStack(spacing: 8) {
+            if(imageUrl.isEmpty) {
+                Icon(source: "media_fail", size: UIScreen.main.bounds.width - Spacing.XL * 2)
+            }
+            else {
+                WebImage(url: URL(string: imageUrl)!)
+                    .resizable()
+                    .placeholder {
+                        Color.gray
+                            .aspectRatio(0.72, contentMode: .fit)
+                            .frame(maxWidth: UIScreen.main.bounds.width - Spacing.XL * 2)
+                            .clipped()
+                    }
+                    .scaledToFill()
+                    .aspectRatio(0.72, contentMode: .fit)
+                    .frame(maxWidth: UIScreen.main.bounds.width - Spacing.XL * 2, alignment: .center)
+                    .clipped()
+                    .onTapGesture {
+                        onAction?()
+                    }
+            }
+            buildCloseIcon()
+                .accessibility(identifier: "ic_popup_close")
+        }
+        .accessibilityElement(children: .ignore)
+        .accessibility(identifier: "popup_promotion")
+    }
+
+    @ViewBuilder
+    private func buildCloseIcon() -> some View {
+        HStack(alignment: .center, spacing: 0) {
+            SwiftUI.Button(action: {
+                onIconClose?()
+            }) {
+                ZStack {
+                    Circle()
+                        .strokeBorder(Colors.black01, lineWidth: 2)
+                        .background(Circle().fill(Colors.black17))
+                        .frame(width: 22, height: 22)
+
+                    Icon(source: "navigation_close", size: 16,  color: Colors.black01)
+                }
+                .frame(width: 40, height: 40)
+                .padding(8)
+                .zIndex(1)
+            }
+        }
+    }
+
+}
+
+
+