@momo-kits/native-kits 0.163.1-beta.2 → 0.163.1-beta.20-debug

package/ios/InputDropDown/InputDropDown.swift

@@ -0,0 +1,201 @@
+//
+//  InputDropDown.swift
+//  Pods
+//
+//  Hand-written SwiftUI reimplementation of Compose `InputDropDown`.
+//
+
+import SwiftUI
+
+// MARK: - RenderRightIcon (mirrors Compose RenderRightIcon for InputDropDown)
+
+private struct RenderRightIcon: View {
+    let loading: Bool
+    let icon: String
+    let color: Color
+    let onPressed: () -> Void
+
+    var body: some View {
+        // Mirrors Compose's two independent `if` blocks: loading spinner and icon
+        // can both render at once, not exclusively (not an if/else).
+        if loading {
+            ActivityIndicator(isAnimating: .constant(true), style: .medium)
+                .frame(width: 16, height: 16)
+        }
+        if !icon.isEmpty {
+            SwiftUI.Button(action: onPressed) {
+                Icon(source: icon, size: 24, color: color)
+            }
+        }
+    }
+}
+
+// MARK: - InputDropDown
+
+public struct InputDropDown: View {
+    @Environment(\.appTheme) private var theme
+    @Binding public var value: String
+
+    public var floatingValue: String
+    public var floatingValueColor: Color?
+    public var floatingIcon: String
+    public var floatingIconColor: Color?
+    public var placeholder: String
+    public var size: InputSize
+    public var onPress: () -> Void
+    public var hintText: String
+    public var error: String
+    public var errorSpacing: Bool
+    public var disabled: Bool
+    public var icon: String
+    public var iconColor: Color?
+    public var onRightIconPressed: () -> Void
+    public var leadingIcon: String
+    public var leadingIconColor: Color?
+    public var loading: Bool
+    public var required: Bool
+
+    public init(
+        value: Binding<String>,
+        floatingValue: String = "",
+        floatingValueColor: Color? = nil,
+        floatingIcon: String = "",
+        floatingIconColor: Color? = nil,
+        placeholder: String = "",
+        size: InputSize = .small,
+        onPress: @escaping () -> Void = {},
+        hintText: String = "",
+        error: String = "",
+        errorSpacing: Bool = false,
+        disabled: Bool = false,
+        icon: String = "arrow_chevron_down_small",
+        iconColor: Color? = nil,
+        onRightIconPressed: @escaping () -> Void = {},
+        leadingIcon: String = "",
+        leadingIconColor: Color? = nil,
+        loading: Bool = false,
+        required: Bool = false
+    ) {
+        self._value = value
+        self.floatingValue = floatingValue
+        self.floatingValueColor = floatingValueColor
+        self.floatingIcon = floatingIcon
+        self.floatingIconColor = floatingIconColor
+        self.placeholder = placeholder
+        self.size = size
+        self.onPress = onPress
+        self.hintText = hintText
+        self.error = error
+        self.errorSpacing = errorSpacing
+        self.disabled = disabled
+        self.icon = icon
+        self.iconColor = iconColor
+        self.onRightIconPressed = onRightIconPressed
+        self.leadingIcon = leadingIcon
+        self.leadingIconColor = leadingIconColor
+        self.loading = loading
+        self.required = required
+    }
+
+    public var body: some View {
+        VStack(alignment: .leading, spacing: 4) {
+            ZStack(alignment: .topLeading) {
+                // Floating label
+                if !floatingValue.isEmpty || !floatingIcon.isEmpty {
+                    HStack(spacing: 0) {
+                        MomoText(floatingValue, typography: .labelSMedium, color: floatingTitleColor)
+                        if required {
+                            MomoText("*", typography: .labelSMedium, color: theme.colors.error.primary)
+                        }
+                        if !floatingIcon.isEmpty {
+                            Icon(source: floatingIcon, size: 16, color: floatingIconTintColor)
+                                .padding(.leading, Spacing.XS)
+                        }
+                    }
+                    .padding(.horizontal, Spacing.S)
+                    .background(theme.colors.background.surface)
+                    .offset(x: Spacing.S, y: -8)
+                    .zIndex(10)
+                }
+
+                // Input container
+                HStack(alignment: .center, spacing: 0) {
+                    if !leadingIcon.isEmpty {
+                        Icon(source: leadingIcon, size: size == .small ? 24 : 32, color: leadingIconTintColor)
+                            .padding(.trailing, Spacing.M)
+                    }
+
+                    MomoText(
+                        value.isEmpty ? placeholder : value,
+                        typography: .bodyDefaultRegular,
+                        color: value.isEmpty ? placeholderColor : textColor
+                    )
+                    .frame(maxWidth: .infinity, alignment: .leading)
+
+                    RenderRightIcon(
+                        loading: loading,
+                        icon: icon,
+                        color: iconTintColor,
+                        onPressed: onRightIconPressed
+                    )
+                }
+                .padding(.horizontal, Spacing.M)
+                .frame(height: size == .small ? 48 : 56)
+                .overlay(
+                    RoundedRectangle(cornerRadius: Radius.S)
+                        .stroke(getBorderColor(isFocused: false, error: error, disabled: disabled), lineWidth: 1)
+                )
+            }
+            .contentShape(Rectangle())
+            .onTapGesture {
+                if !disabled { onPress() }
+            }
+
+            ErrorView(
+                errorMessage: error,
+                errorSpacing: errorSpacing,
+                hintText: hintText
+            )
+        }
+        .accessibilityElement(children: .combine)
+        .accessibility(label: Text(floatingValue))
+    }
+
+    // MARK: - Computed colors
+
+    private var textColor: Color {
+        disabled ? theme.colors.text.disable : theme.colors.text.default
+    }
+
+    private var placeholderColor: Color {
+        disabled ? theme.colors.text.disable : theme.colors.text.hint
+    }
+
+    private var iconTintColor: Color {
+        disabled ? theme.colors.text.disable : (iconColor ?? theme.colors.text.default)
+    }
+
+    private var floatingTitleColor: Color {
+        disabled ? theme.colors.text.disable : (floatingValueColor ?? theme.colors.text.hint)
+    }
+
+    private var floatingIconTintColor: Color {
+        disabled ? theme.colors.text.disable : (floatingIconColor ?? theme.colors.text.default)
+    }
+
+    private var leadingIconTintColor: Color {
+        disabled ? theme.colors.text.disable : (leadingIconColor ?? theme.colors.text.hint)
+    }
+
+    private func getBorderColor(isFocused: Bool, error: String, disabled: Bool) -> Color {
+        if disabled {
+            return theme.colors.border.disable
+        } else if !error.isEmpty {
+            return theme.colors.error.primary
+        } else if isFocused {
+            return theme.colors.primary
+        } else {
+            return theme.colors.border.default
+        }
+    }
+}

package/ios/InputMoney/InputMoney.swift

@@ -0,0 +1,347 @@
+//
+//  InputMoney.swift
+//  MoMoUIKits
+//
+//  Native SwiftUI reimplementation of Compose `InputMoney`.
+//  The bound `text` holds RAW DIGITS only (mirrors Compose, where the
+//  field stores the numeric string and a VisualTransformation renders the
+//  thousands-separated currency). Display formatting is applied live.
+//
+
+import Foundation
+import SwiftUI
+import UIKit
+
+// MARK: - Currency formatting
+
+/// Mirrors Compose `formatNumberToMoney` exactly (group separator ".").
+/// Input is a raw-digit string; output has thousands separators + currency.
+public func formatNumberToMoney(_ digits: String, currency: String = "đ") -> String {
+    let numeric = digits.filter { $0.isNumber }
+    if numeric.isEmpty || numeric == "0" {
+        return "0" + currency
+    }
+    // Strip leading zeros to match Long parsing semantics.
+    var trimmed = String(numeric.drop(while: { $0 == "0" }))
+    if trimmed.isEmpty { trimmed = "0" }
+    if trimmed == "0" {
+        return "0" + currency
+    }
+    if trimmed.count < 3 {
+        return trimmed + currency
+    }
+    var chars: [Character] = []
+    var count = 0
+    let reversed = Array(trimmed.reversed())
+    for i in 0..<reversed.count {
+        count += 1
+        chars.append(reversed[i])
+        // i counts from the least significant digit; original index = len-1-i.
+        let originalIndex = reversed.count - 1 - i
+        if count == 3 && originalIndex >= 1 {
+            chars.append(".")
+            count = 0
+        }
+    }
+    return String(chars.reversed()) + currency
+}
+
+// MARK: - InputMoney
+
+public struct InputMoney: View {
+    @Environment(\.appTheme) private var theme
+    @Binding public var text: String
+
+    public var floatingValue: String
+    public var floatingValueColor: Color?
+    public var floatingIcon: String
+    public var floatingIconColor: Color?
+    public var placeholder: String
+    public var size: InputSize
+    public var error: String
+    public var errorSpacing: Bool
+    public var disabled: Bool
+    public var icon: String
+    public var iconColor: Color?
+    public var leadingIcon: String
+    public var leadingIconColor: Color?
+    public var loading: Bool
+    public var required: Bool
+    public var fontWeight: InputFontWeight
+    public var keyboardType: UIKeyboardType
+    public var onChangeText: ((String) -> Void)?
+    public var onPressIcon: (() -> Void)?
+    public var onFocus: (() -> Void)?
+    public var onBlur: (() -> Void)?
+
+    @State private var isFocused: Bool = false
+    @State private var floatingLabelHeight: CGFloat = 16
+
+    public init(
+        text: Binding<String>,
+        floatingValue: String = "",
+        floatingValueColor: Color? = nil,
+        floatingIcon: String = "",
+        floatingIconColor: Color? = nil,
+        placeholder: String = "0đ",
+        size: InputSize = .small,
+        error: String = "",
+        errorSpacing: Bool = false,
+        disabled: Bool = false,
+        icon: String = "",
+        iconColor: Color? = nil,
+        leadingIcon: String = "",
+        leadingIconColor: Color? = nil,
+        loading: Bool = false,
+        required: Bool = false,
+        fontWeight: InputFontWeight = .bold,
+        keyboardType: UIKeyboardType = .numberPad,
+        onChangeText: ((String) -> Void)? = nil,
+        onPressIcon: (() -> Void)? = nil,
+        onFocus: (() -> Void)? = nil,
+        onBlur: (() -> Void)? = nil
+    ) {
+        self._text = text
+        self.floatingValue = floatingValue
+        self.floatingValueColor = floatingValueColor
+        self.floatingIcon = floatingIcon
+        self.floatingIconColor = floatingIconColor
+        self.placeholder = placeholder
+        self.size = size
+        self.error = error
+        self.errorSpacing = errorSpacing
+        self.disabled = disabled
+        self.icon = icon
+        self.iconColor = iconColor
+        self.leadingIcon = leadingIcon
+        self.leadingIconColor = leadingIconColor
+        self.loading = loading
+        self.required = required
+        self.fontWeight = fontWeight
+        self.keyboardType = keyboardType
+        self.onChangeText = onChangeText
+        self.onPressIcon = onPressIcon
+        self.onFocus = onFocus
+        self.onBlur = onBlur
+    }
+
+    // MARK: - Body
+
+    public var body: some View {
+        VStack(alignment: .leading, spacing: 4) {
+            ZStack(alignment: .topLeading) {
+                // Floating label
+                if !floatingValue.isEmpty || !floatingIcon.isEmpty {
+                    HStack(spacing: Spacing.XS) {
+                        MomoText(floatingValue, typography: .labelSMedium, color: floatingTitleColor)
+                        if required {
+                            MomoText("*", typography: .labelSMedium, color: theme.colors.error.primary)
+                        }
+                        if !floatingIcon.isEmpty {
+                            Icon(source: floatingIcon, size: 16, color: floatingIconTintColor)
+                        }
+                    }
+                    .padding(.horizontal, Spacing.S)
+                    .background(
+                        GeometryReader { geo in
+                            Color.clear.onAppear { floatingLabelHeight = geo.size.height }
+                        }
+                    )
+                    .background(theme.colors.background.surface)
+                    // Kotlin centers the label within the box-height-tall decorationBox by
+                    // default, then applies `offsetY = -size.values.height / 2` — net effect:
+                    // the label ends up centered exactly on the box's top border. Our ZStack
+                    // anchors top-leading instead, so matching that requires offsetting by
+                    // half the label's OWN measured height, not half the box height.
+                    .offset(x: Spacing.S, y: -floatingLabelHeight / 2)
+                    .zIndex(10)
+                }
+
+                // Input container
+                HStack(alignment: .center, spacing: 0) {
+                    // Leading icon
+                    if !leadingIcon.isEmpty {
+                        Icon(source: leadingIcon, size: size == .small ? 24 : 32, color: leadingIconTintColor)
+                            .padding(.trailing, Spacing.XS)
+                    }
+
+                    // Money field
+                    ZStack(alignment: .leading) {
+                        if text.filter({ $0.isNumber }).isEmpty {
+                            MomoText(
+                                placeholder,
+                                typography: fontWeight == .bold ? .actionSBold : .bodyDefaultRegular,
+                                color: placeholderColor
+                            )
+                        }
+                        MoneyTextField(
+                            digits: $text,
+                            keyboardType: keyboardType,
+                            fontWeight: fontWeight == .bold ? .bold : .regular,
+                            textColor: UIColor(textColor),
+                            cursorColor: UIColor(theme.colors.primary),
+                            isDisabled: disabled,
+                            onFocusChange: { focused in handleFocusChange(focused) },
+                            onChangeText: onChangeText
+                        )
+                    }
+                    .frame(maxWidth: .infinity, alignment: .leading)
+
+                    // Clear button (focused + has value)
+                    if isFocused && !text.filter({ $0.isNumber }).isEmpty {
+                        SwiftUI.Button(action: {
+                            text = ""
+                            onChangeText?("")
+                        }) {
+                            Icon(source: "24_navigation_close_circle_full", size: 16, color: theme.colors.text.hint)
+                                .padding(.leading, Spacing.XS)
+                                .accessibility(identifier: "ic_clear")
+                        }
+                    }
+
+                    // Loading indicator and right icon can both render (mirrors
+                    // Compose's two independent `if` blocks, not if/else).
+                    if loading {
+                        ActivityIndicator(isAnimating: .constant(true), style: .medium)
+                            .frame(width: 16, height: 16)
+                            .padding(.leading, Spacing.S)
+                    }
+                    if !icon.isEmpty {
+                        SwiftUI.Button(action: { onPressIcon?() }) {
+                            Icon(source: icon, size: 24, color: iconTintColor)
+                                .padding(.leading, Spacing.S)
+                        }
+                    }
+                }
+                .padding(.horizontal, Spacing.M)
+                .frame(height: scaleSize(size == .small ? 48 : 56, 1.1))
+                .background(
+                    RoundedRectangle(cornerRadius: Radius.S)
+                        .fill(theme.colors.background.surface)
+                )
+                .overlay(
+                    RoundedRectangle(cornerRadius: Radius.S)
+                        .stroke(borderColor, lineWidth: 1)
+                )
+            }
+
+            ErrorView(errorMessage: error, errorSpacing: errorSpacing, hintText: "")
+        }
+        .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillHideNotification)) { _ in
+            if isFocused {
+                DispatchQueue.main.async { handleFocusChange(false) }
+            }
+        }
+    }
+
+    // MARK: - Helpers
+
+    private func handleFocusChange(_ focused: Bool) {
+        guard isFocused != focused else { return }
+        isFocused = focused
+        if focused { onFocus?() } else { onBlur?() }
+    }
+
+    private var borderColor: Color {
+        if disabled { return theme.colors.border.disable }
+        if !error.isEmpty { return theme.colors.error.primary }
+        if isFocused { return theme.colors.primary }
+        return theme.colors.border.default
+    }
+
+    private var textColor: Color { disabled ? theme.colors.text.disable : theme.colors.text.default }
+    private var placeholderColor: Color { disabled ? theme.colors.text.disable : theme.colors.text.hint }
+    private var iconTintColor: Color { disabled ? theme.colors.text.disable : (iconColor ?? theme.colors.text.default) }
+    private var leadingIconTintColor: Color { disabled ? theme.colors.text.disable : (leadingIconColor ?? theme.colors.text.hint) }
+    private var floatingTitleColor: Color { disabled ? theme.colors.text.disable : (floatingValueColor ?? theme.colors.text.hint) }
+    private var floatingIconTintColor: Color { disabled ? theme.colors.text.disable : (floatingIconColor ?? theme.colors.text.default) }
+}
+
+// MARK: - MoneyTextField (UIViewRepresentable)
+
+/// A UITextField that shows live thousands-separated currency while the bound
+/// `digits` string holds only the raw numeric value. Caret is pinned before
+/// the trailing currency symbol.
+private struct MoneyTextField: UIViewRepresentable {
+    @Binding var digits: String
+    var keyboardType: UIKeyboardType
+    var fontWeight: UIFont.Weight
+    var textColor: UIColor
+    var cursorColor: UIColor
+    var isDisabled: Bool
+    var onFocusChange: (Bool) -> Void
+    var onChangeText: ((String) -> Void)?
+
+    func makeCoordinator() -> Coordinator { Coordinator(self) }
+
+    func makeUIView(context: Context) -> UITextField {
+        let field = UITextField()
+        field.delegate = context.coordinator
+        field.keyboardType = keyboardType
+        field.font = UIFont.systemFont(ofSize: scaleSize(20), weight: fontWeight)
+        field.textColor = textColor
+        field.isEnabled = !isDisabled
+        field.tintColor = cursorColor
+        field.setContentHuggingPriority(.defaultLow, for: .horizontal)
+        field.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
+        field.text = displayValue(digits)
+        field.addTarget(
+            context.coordinator,
+            action: #selector(Coordinator.editingChanged(_:)),
+            for: .editingChanged
+        )
+        return field
+    }
+
+    func updateUIView(_ field: UITextField, context: Context) {
+        context.coordinator.parent = self
+        field.isEnabled = !isDisabled
+        field.textColor = textColor
+        field.tintColor = cursorColor
+        let expected = displayValue(digits)
+        if !field.isFirstResponder && field.text != expected {
+            field.text = expected
+        }
+    }
+
+    private func displayValue(_ raw: String) -> String {
+        let numeric = raw.filter { $0.isNumber }
+        return numeric.isEmpty ? "" : formatNumberToMoney(numeric)
+    }
+
+    final class Coordinator: NSObject, UITextFieldDelegate {
+        var parent: MoneyTextField
+
+        init(_ parent: MoneyTextField) { self.parent = parent }
+
+        func textFieldDidBeginEditing(_ textField: UITextField) {
+            parent.onFocusChange(true)
+        }
+
+        func textFieldDidEndEditing(_ textField: UITextField) {
+            parent.onFocusChange(false)
+        }
+
+        func textFieldShouldReturn(_ textField: UITextField) -> Bool {
+            textField.resignFirstResponder()
+            return true
+        }
+
+        @objc func editingChanged(_ textField: UITextField) {
+            // Extract digits from whatever the user typed/deleted.
+            let numeric = (textField.text ?? "").filter { $0.isNumber }
+            let formatted = numeric.isEmpty ? "" : formatNumberToMoney(numeric)
+            if textField.text != formatted {
+                textField.text = formatted
+                // Keep caret before the currency suffix ("đ").
+                if let end = textField.position(from: textField.endOfDocument, offset: -1) {
+                    textField.selectedTextRange = textField.textRange(from: end, to: end)
+                }
+            }
+            if parent.digits != numeric {
+                parent.digits = numeric
+            }
+            parent.onChangeText?(numeric)
+        }
+    }
+}