@momo-kits/native-kits 0.0.1-beta.5 → 0.0.2-alpha.1-debug

package/ios/Popup/PopupDisplay.swift

@@ -1,4 +1,3 @@
-
 import SDWebImageSwiftUI
 import SwiftUI
 
@@ -7,6 +6,7 @@ import SwiftUI
 public enum PopupButtonDirection {
     case row
     case column
+    case auto
 }
 
 // MARK: - PopupButtonType
@@ -16,14 +16,50 @@ public enum PopupButtonType {
     case button
 }
 
+extension View {
+    func measureLineHeights(font: Font,
+                            oneLine: Binding<CGFloat>,
+                            twoLines: Binding<CGFloat>) -> some View {
+        overlay(
+            VStack(spacing: 0) {
+                Text("A")
+                    .font(font)
+                    .ignoreBoldTextSetting()
+                    .lineLimit(1)
+                    .fixedSize()
+                    .background(
+                        GeometryReader { g in
+                            Color.clear.onAppear { oneLine.wrappedValue = g.size.height }
+                        }
+                    )
+                    .hidden()
+
+                Text("A\nA")
+                    .font(font)
+                    .ignoreBoldTextSetting()
+                    .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 {
+    @Environment(\.localize) private var localize
+
     // MARK: Lifecycle
 
-    public init(isPresented: Binding<Bool>, title: String = "title", description: String = "description", url: String = "", buttonDirection: PopupButtonDirection = .column, buttonType: PopupButtonType = .button, onPressAction: @escaping () -> Void = {}, onPressCloseButton: @escaping () -> Void = {}, onClose: @escaping () -> Void = {}, haveInput: Bool = false, inputPlaceholder: String = "", inputValue: Binding<String> = Binding.constant(""), onTextChange: ((String) -> Void)? = nil) {
+    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._inputValue = inputValue
         self.title = title
         self.description = description
         self.url = url
@@ -32,15 +68,142 @@ public struct PopupDisplay: View {
         self.onPressAction = onPressAction
         self.onPressCloseButton = onPressCloseButton
         self.onClose = onClose
-        self.haveInput = haveInput
-        self.inputPlaceholder = inputPlaceholder
-        self.onTextChange = onTextChange
+        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 {
+        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))
+                                    .aspectRatio(1.777, contentMode: .fit)
+                                    .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) {
+                        MomoText(title, typography: .headerDefaultBold)
+                            .padding(.top, 24)
+                            .padding(.bottom, 8)
+                            .lineLimit(2)
+                            .accessibility(identifier: "title_popup_permission")
+                        
+                        Group {
+                            if isScrollable {
+                                ScrollView(showsIndicators: false) {
+                                    MomoText(description, typography: .bodyDefaultRegular)
+                                        .multilineTextAlignment(.leading)
+                                        .background(GeometryReader { geo in
+                                            Color.clear.onAppear { textHeight = geo.size.height }
+                                        })
+                                        .measureLineHeights(font: .body_default_regular,
+                                                            oneLine: $oneLineH,
+                                                            twoLines: $twoLineH)
+                                        .accessibility(identifier: "description_popup_permission")
+                                }
+                                // Cap the visible height to ~8.5 lines
+                                .frame(height: min(maxHeight8_5, textHeight))
+                            } else {
+                                MomoText(description, typography: .bodyDefaultRegular)
+                                    .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)
+                                    .accessibility(identifier: "description_popup_permission")
+                            }
+                        }
+                        .padding(.bottom, 8)
+                        
+                        if(!errorCode.isEmpty) {
+                            MomoText(localize.translate("errorCode") + errorCode, typography: .descriptionXsRegular, color: Colors.black12)
+                                .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
-    @Binding var inputValue: String
     var title: String
     var description: String
     var url: String
@@ -49,22 +212,21 @@ public struct PopupDisplay: View {
     var onPressAction: () -> Void
     var onPressCloseButton: () -> Void
     var onClose: () -> Void
-    var haveInput: Bool
-    var inputPlaceholder: String
-    var onTextChange: ((String) -> Void)?
+    var actionButtonTitle: String
+    var closeButtonTitle: String
+    var errorCode: String
+    var isShowCloseIcon: Bool
 
     var RowTextButtons: some View {
         HStack {
             SwiftUI.Button(action: onPressCloseButton) {
-                Text("Button")
-                    .font(.action2)
-            }.foregroundColor(Colors.black09)
+                MomoText(closeButtonTitle, typography: .actionSBold, color: Colors.black09)
+            }
                 .padding(.trailing, 12)
 
             SwiftUI.Button(action: onPressAction) {
-                Text("Long text button")
-                    .font(.action2)
-            }.foregroundColor(Colors.primary)
+                MomoText(actionButtonTitle, typography: .actionSBold, color: Colors.primary)
+            }
         }
         .frame(maxWidth: .infinity, alignment: .trailing)
         .padding(EdgeInsets(top: 0, leading: 0, bottom: 24, trailing: 24))
@@ -73,15 +235,13 @@ public struct PopupDisplay: View {
     var ColumnTextButtons: some View {
         VStack(alignment: .trailing) {
             SwiftUI.Button(action: onPressAction) {
-                Text("Long text button")
-                    .font(.action2)
-            }.foregroundColor(Colors.primary)
+                MomoText(actionButtonTitle, typography: .actionSBold, color: Colors.primary)
+            }
                 .padding(.bottom, 6)
 
             SwiftUI.Button(action: onPressCloseButton) {
-                Text("Button")
-                    .font(.action2)
-            }.foregroundColor(Colors.black09)
+                MomoText(closeButtonTitle, typography: .actionSBold, color: Colors.black09)
+            }
         }
         .frame(maxWidth: .infinity, alignment: .trailing)
         .padding(EdgeInsets(top: 0, leading: 0, bottom: 24, trailing: 24))
@@ -89,8 +249,11 @@ public struct PopupDisplay: View {
 
     var RowButtons: some View {
         HStack {
-            Button(title: "Button", action: onPressCloseButton, type: .secondary)
-            Button(title: "Button", action: onPressAction)
+            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)
@@ -99,80 +262,18 @@ public struct PopupDisplay: View {
 
     var ColumnButtons: some View {
         VStack(alignment: .trailing) {
-            Button(title: "Button", action: onPressAction)
-            Button(title: "Button", action: onPressCloseButton, type: .secondary)
+            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)
     }
 
-    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 {
-                    WebImage(url: URL(string: url), isAnimating: .constant(true))
-                        .resizable()
-                        .scaledToFill()
-                        .frame(maxWidth: .infinity, maxHeight: 164)
-                        .cornerRadius(8, corners: .topLeft)
-                        .cornerRadius(8, corners: .topRight)
-
-                    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)
-
-                    if haveInput {
-                        Input($inputValue, placeholder: inputPlaceholder, onChange: onTextChange)
-                            .padding(.horizontal, 24)
-                    }
-
-                    if buttonDirection == .row {
-                        if buttonType == .text {
-                            RowTextButtons
-                        } else {
-                            RowButtons
-                        }
-                    } else {
-                        if buttonType == .text {
-                            ColumnTextButtons
-                        } else {
-                            ColumnButtons
-                        }
-                    }
-
-                }.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)
-    }
-
-
-    func onPressClose(){
-        isPresented = false
-        onClose()
-    }
 }

package/ios/Popup/PopupInput.swift

@@ -0,0 +1,92 @@
+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) {
+                        MomoText(title, typography: .headerDefaultBold, color: .black)
+                            .padding(.top, 12)
+                            .padding(.bottom, 24)
+
+                        MomoText(description, typography: .bodyDefaultRegular, color: .black)
+                            .opacity(0.6)
+                            .multilineTextAlignment(.leading)
+                            .padding(.bottom, 20)
+                    }.padding(.horizontal, 24)
+
+                    Input(text: $inputValue, placeholder: inputPlaceholder, onChangeText: 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/PopupNotify.swift

@@ -0,0 +1,219 @@
+import SDWebImageSwiftUI
+import SwiftUI
+
+public typealias PopupActionDirection = PopupButtonDirection
+
+public struct PopupNotifyProps {
+    public var image: String
+    public var title: String
+    public var description: String
+    public var error: String
+    public var primary: PopupAction?
+    public var secondary: PopupAction?
+    public var buttonDirection: PopupActionDirection
+    public var onIconClose: () -> Void
+    public var isShowCloseIcon: Bool
+
+    public init(
+        image: String = "",
+        title: String = "Title",
+        description: String = "Description",
+        error: String = "",
+        primary: PopupAction? = nil,
+        secondary: PopupAction? = nil,
+        buttonDirection: PopupActionDirection = .row,
+        onIconClose: @escaping () -> Void,
+        isShowCloseIcon: Bool = true
+    ) {
+        self.image = image
+        self.title = title
+        self.description = description
+        self.error = error
+        self.primary = primary
+        self.secondary = secondary
+        self.buttonDirection = buttonDirection
+        self.onIconClose = onIconClose
+        self.isShowCloseIcon = isShowCloseIcon
+    }
+}
+
+public struct PopupNotify: View {
+    @Environment(\.localize) private var localize
+    @Environment(\.momoFontScale) private var fontScale
+
+    public let props: PopupNotifyProps
+
+    @State private var descriptionHeight: CGFloat = 0
+
+    private var errorCodePrefix: String {
+        localize.translate("errorCode")
+    }
+
+    private var maxDescriptionHeight: CGFloat {
+        fontScale(TypographyStyle.bodyDefaultRegular.lineHeight) * 8.5
+    }
+
+    private var shouldUseColumnButtons: Bool {
+        switch props.buttonDirection {
+        case .column:
+            return true
+        case .row:
+            return false
+        case .auto:
+            return (props.secondary?.title.count ?? 0) > 12 || (props.primary?.title.count ?? 0) > 12
+        }
+    }
+
+    public init(props: PopupNotifyProps) {
+        self.props = props
+    }
+
+    public var body: some View {
+        ZStack(alignment: .topTrailing) {
+            VStack(spacing: 0) {
+                if !props.image.isEmpty {
+                    popupImage
+                }
+
+                VStack(alignment: .leading, spacing: 0) {
+                    MomoText(
+                        props.title,
+                        typography: .headerDefaultBold,
+                        maxLines: 2,
+                        accessibilityId: "title_popup_permission"
+                    )
+                    .padding(.bottom, Spacing.S)
+
+                    descriptionContent
+
+                    if !props.error.isEmpty {
+                        MomoText(
+                            errorCodePrefix + props.error,
+                            typography: .descriptionXsRegular,
+                            color: Colors.black12,
+                            maxLines: 1
+                        )
+                        .padding(.top, Spacing.S)
+                    }
+                }
+                .frame(maxWidth: .infinity, alignment: .leading)
+                .padding(Spacing.XL)
+
+                actionButtons
+                    .padding(.horizontal, Spacing.XL)
+                    .padding(.bottom, Spacing.XL)
+            }
+            .background(Colors.black01)
+            .clipShape(RoundedRectangle(cornerRadius: Radius.L))
+
+            if props.isShowCloseIcon {
+                closeButton
+                    .offset(x: 1, y: -11)
+            }
+        }
+        .padding(.horizontal, Spacing.M)
+        .accessibilityElement(children: .ignore)
+        .accessibilityIdentifier("popup_notify")
+    }
+
+    private var popupImage: some View {
+        WebImage(url: URL(string: props.image), isAnimating: .constant(true))
+            .resizable()
+            .placeholder {
+                Rectangle()
+                    .fill(Colors.black03)
+                    .aspectRatio(1.777, contentMode: .fit)
+                    .frame(maxWidth: .infinity)
+            }
+            .aspectRatio(1.777, contentMode: .fit)
+            .frame(maxWidth: .infinity)
+            .clipShape(RoundedCorner(radius: Radius.L, corners: [.topLeft, .topRight]))
+    }
+
+    @ViewBuilder
+    private var descriptionContent: some View {
+        if descriptionHeight > maxDescriptionHeight {
+            ScrollView(.vertical, showsIndicators: false) {
+                descriptionText
+            }
+            .frame(height: maxDescriptionHeight)
+        } else {
+            descriptionText
+        }
+    }
+
+    private var descriptionText: some View {
+        MomoText(
+            props.description,
+            typography: .bodyDefaultRegular,
+            accessibilityId: "description_popup_permission"
+        )
+        .frame(maxWidth: .infinity, alignment: .leading)
+        .background(
+            GeometryReader { proxy in
+                Color.clear
+                    .onAppear { descriptionHeight = proxy.size.height }
+                    .onChange(of: props.description) { _ in
+                        descriptionHeight = proxy.size.height
+                    }
+            }
+        )
+    }
+
+    @ViewBuilder
+    private var actionButtons: some View {
+        if shouldUseColumnButtons {
+            VStack(spacing: Spacing.S) {
+                primaryButton
+                if props.secondary != nil {
+                    secondaryButton
+                }
+            }
+        } else {
+            HStack(spacing: Spacing.S) {
+                if props.secondary != nil {
+                    secondaryButton
+                        .frame(maxWidth: .infinity)
+                }
+                primaryButton
+                    .frame(maxWidth: .infinity)
+            }
+        }
+    }
+
+    private var primaryButton: some View {
+        Button(
+            title: props.primary?.title ?? "",
+            action: { props.primary?.onPress?() },
+            size: .medium
+        )
+        .accessibilityIdentifier("btn_popup_allow")
+    }
+
+    private var secondaryButton: some View {
+        Button(
+            title: props.secondary?.title ?? "",
+            action: { props.secondary?.onPress?() },
+            type: .text,
+            size: .medium
+        )
+        .accessibilityIdentifier("btn_popup_cancel")
+    }
+
+    private var closeButton: some View {
+        SwiftUI.Button(action: props.onIconClose) {
+            ZStack {
+                Circle()
+                    .fill(Colors.black17)
+                    .overlay(
+                        Circle()
+                            .stroke(Colors.black01, lineWidth: 2)
+                    )
+                    .frame(width: 22, height: 22)
+
+                Icon(source: "navigation_close", size: 16, color: Colors.black01)
+            }
+        }
+        .accessibilityIdentifier("ic_popup_close")
+    }
+}