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

package/ios/Input/InputPhoneNumber.swift

@@ -0,0 +1,192 @@
+//
+//  InputPhoneNumber.swift
+//  Pods
+//
+//  Created by sophia on 20/10/25.
+//
+
+import SwiftUI
+public struct InputPhoneNumber: View {
+    @Environment(\.appTheme) private var theme
+    @Environment(\.momoFontScale) private var fontScale
+    @Binding public var text: String
+    
+    public var placeholder: String
+    public var size: InputSize
+    public var hintText: String
+    public var error: String
+    public var errorSpacing: Bool
+    public var loading: Bool
+    public var required: Bool
+    public var rightIcon: String
+    public var rightIconColor: Color?
+    public var autofocus: Bool
+    public var onChangeText: ((String) -> Void)?
+    public var onFocus: (() -> Void)?
+    public var onBlur: (() -> Void)?
+    public var onRightIconPressed: (() -> Void)?
+    public var accessibilityLabel: String?
+
+    @State private var isFocused: Bool = false
+    @FocusState private var isFieldFocused: Bool
+    
+    public init(
+        text: Binding<String>,
+        placeholder: String = "0123456789",
+        size: InputSize = .small,
+        hintText: String = "",
+        error: String = "",
+        errorSpacing: Bool = false,
+        loading: Bool = false,
+        required: Bool = false,
+        rightIcon: String = "",
+        rightIconColor: Color? = nil,
+        autofocus: Bool = false,
+        onChangeText: ((String) -> Void)? = nil,
+        onFocus: (() -> Void)? = nil,
+        onBlur: (() -> Void)? = nil,
+        onRightIconPressed: (() -> Void)? = nil,
+        accessibilityLabel: String? = nil
+    ) {
+        self._text = text
+        self.placeholder = placeholder
+        self.size = size
+        self.hintText = hintText
+        self.error = error
+        self.errorSpacing = errorSpacing
+        self.loading = loading
+        self.required = required
+        self.rightIcon = rightIcon
+        self.rightIconColor = rightIconColor
+        self.autofocus = autofocus
+        self.onChangeText = onChangeText
+        self.onFocus = onFocus
+        self.onBlur = onBlur
+        self.onRightIconPressed = onRightIconPressed
+        self.accessibilityLabel = accessibilityLabel
+    }
+    
+    // MARK: - Body
+    public var body: some View {
+        let textBinding = Binding<String>(
+            get: { self.text },
+            set: { newValue in
+                self.text = newValue
+                self.onChangeText?(newValue)
+            }
+        )
+        
+        VStack(alignment: .leading, spacing: 4) {
+            HStack(spacing: 0) {
+                // 🇻🇳 Flag
+                ImageView("https://static.momocdn.net/app/img/icon/ic-qrcode-package/ic_vn_flag.png")
+                    .frame(width: 24, height: 24)
+                    .padding(.trailing, Spacing.XS)
+                
+                MomoText("+84", typography: size == .small ? .headerSSemibold : .headerMBold)
+                    .foregroundColor(theme.colors.text.default)
+                
+                Rectangle()
+                    .fill(theme.colors.border.default)
+                    .frame(width: 1, height: size == .small ? 24 : 32)
+                    .padding(.horizontal, Spacing.M)
+                
+                // Text input
+                ZStack(alignment: .leading) {
+                    if text.isEmpty {
+                        MomoText(
+                            placeholder + (required ? " *" : ""),
+                            typography: size == .small ? .headerSSemibold : .headerMBold,
+                            color: theme.colors.text.hint
+                        )
+                    }
+
+                    TextField("", text: textBinding, onEditingChanged: { focused in
+                        handleFocusChange(focused)
+                    })
+                    .keyboardType(.numberPad)
+                    .font(size == .small ? .header_s_semibold : .header_m_bold)
+                    .ignoreBoldTextSetting()
+                    .foregroundColor(theme.colors.text.default)
+                    .applyCursorColor(theme.colors.primary)
+                    .lineLimit(1)
+                    .focused($isFieldFocused)
+                    .onAppear {
+                        if autofocus { isFieldFocused = true }
+                    }
+                    .accessibility(identifier: accessibilityLabel ?? "")
+                    .accessibilityValue(textBinding.wrappedValue.isEmpty ? placeholder : textBinding.wrappedValue)
+                }
+                
+                // Clear button
+                if isFocused && !text.isEmpty {
+                    SwiftUI.Button(action: {
+                        text = ""
+                        onChangeText?("")
+                    }) {
+                        Icon(source: "24_navigation_close_circle_full", size: 16, color: theme.colors.text.hint)
+                            .padding(.leading, Spacing.S).accessibility(identifier: "ic_clear")
+                    }
+                }
+                
+                // Loading indicator
+                if loading {
+                    ActivityIndicator(isAnimating: .constant(true), style: .medium)
+                        .frame(width: 16, height: 16)
+                }
+                
+                // ✅ Right icon
+                if !rightIcon.isEmpty {
+                    SwiftUI.Button(action: { onRightIconPressed?() }) {
+                        Icon(source: rightIcon, size: 24, color: rightIconColor ?? theme.colors.text.default)
+                            .padding(.leading, Spacing.S)
+                    }
+                }
+            }
+            .padding(.horizontal, Spacing.M)
+            .frame(height: fontScale(size == .small ? 48 : 56))
+            .background(
+                RoundedRectangle(cornerRadius: Radius.S)
+                    .fill(theme.colors.background.surface)
+            )
+            .overlay(
+                RoundedRectangle(cornerRadius: Radius.S)
+                    .stroke(borderColor(), lineWidth: isFocused ? 1.5 : 1)
+            )
+            
+            // Error or hint
+            ErrorView(
+                errorMessage: error,
+                errorSpacing: errorSpacing,
+                hintText: hintText
+            )
+        }
+    }
+    
+    // MARK: - Helpers
+    
+    private func handleFocusChange(_ focused: Bool) {
+        isFocused = focused
+        if focused {
+            onFocus?()
+        } else {
+            onBlur?()
+        }
+    }
+    
+    private func borderColor() -> Color {
+        if !error.isEmpty { return theme.colors.error.primary }
+        if isFocused { return theme.colors.primary }
+        return theme.colors.border.default
+    }
+}
+
+private extension View {
+    func applyCursorColor(_ color: Color) -> some View {
+        if #available(iOS 15.0, *) {
+            return self.tint(color)
+        } else {
+            return self
+        }
+    }
+}

package/ios/Input/InputSearch.swift

@@ -0,0 +1,301 @@
+//
+//  InputSearch.swift
+//  Pods
+//
+//  Created by dung.pham2 on 3/12/24.
+//
+import SwiftUI
+
+// MARK: - RenderRightIconSearch
+
+struct RenderRightIconSearch: View {
+    @Environment(\.appTheme) private var theme
+    let loading: Bool
+    let icon: String
+    let color: Color
+    let onClick: () -> Void
+
+    var body: some View {
+        HStack(spacing: 0) {
+            if loading {
+                ActivityIndicator(isAnimating: .constant(true), style: .medium)
+                    .frame(width: 16, height: 16)
+                    .padding(.horizontal, Spacing.S)
+            }
+            if !icon.isEmpty {
+                Divider()
+                    .frame(width: 1)
+                    .background(theme.colors.primary)
+                    .padding(.leading, Spacing.S)
+                
+                Icon(source: icon, size: 24, color: color)
+                    .padding(.leading, Spacing.S)
+                    .onTapGesture(perform: onClick)
+            }
+        }
+    }
+}
+
+public struct InputSearchProps {
+    @Binding var text: String
+    var buttonText: String = ""
+    var showButtonText: Bool = false
+    var showBorder: Bool = true
+    var placeholder: String = ""
+    var onChangeText: (String) -> Void = { _ in }
+    var onPressButtonText: () -> Void = {}
+    var error: String = ""
+    var disabled: Bool = false
+    var icon: String = ""
+    var iconColor: Color? = nil
+    var onRightIconPressed: () -> Void = {}
+    var onFocus: () -> Void = {}
+    var onBlur: () -> Void = {}
+    var loading: Bool = false
+    var fontWeight: Font.Weight = .regular
+    var keyboardType: UIKeyboardType = .default
+    // Mirrors Compose's InputSearchProps.searchIcon — a custom leading icon view.
+    var searchIcon: (() -> AnyView)? = nil
+    // Mirrors Compose's InputSearchProps.placeholderCustomRender — a custom placeholder view.
+    var placeholderCustomRender: (() -> AnyView)? = nil
+
+    public init(text: Binding<String>,
+                buttonText: String = "",
+                showButtonText: Bool = false,
+                showBorder: Bool = true,
+                placeholder: String = "",
+                onChangeText: @escaping (String) -> Void = { _ in },
+                onPressButtonText: @escaping () -> Void = {},
+                error: String = "",
+                disabled: Bool = false,
+                icon: String = "",
+                iconColor: Color? = nil,
+                onRightIconPressed: @escaping () -> Void = {},
+                onFocus: @escaping () -> Void = {},
+                onBlur: @escaping () -> Void = {},
+                loading: Bool = false,
+                fontWeight: Font.Weight = .regular,
+                keyboardType: UIKeyboardType = .default,
+                searchIcon: (() -> AnyView)? = nil,
+                placeholderCustomRender: (() -> AnyView)? = nil) {
+        self._text = text
+        self.buttonText = buttonText
+        self.showButtonText = showButtonText
+        self.showBorder = showBorder
+        self.placeholder = placeholder
+        self.onChangeText = onChangeText
+        self.onPressButtonText = onPressButtonText
+        self.error = error
+        self.disabled = disabled
+        self.icon = icon
+        self.iconColor = iconColor
+        self.onRightIconPressed = onRightIconPressed
+        self.onFocus = onFocus
+        self.onBlur = onBlur
+        self.loading = loading
+        self.fontWeight = fontWeight
+        self.keyboardType = keyboardType
+        self.searchIcon = searchIcon
+        self.placeholderCustomRender = placeholderCustomRender
+        }
+}
+
+// MARK: - InputSearch
+
+public struct InputSearch: View {
+    @Environment(\.appTheme) private var theme
+    @Environment(\.momoFontScale) private var fontScale
+    @Binding var text: String
+    var buttonText: String = ""
+    var showButtonText: Bool = false
+    var showBorder: Bool = true
+    var placeholder: String = ""
+    var onChangeText: (String) -> Void = { _ in }
+    var onPressButtonText: () -> Void = {}
+    var error: String = ""
+    var disabled: Bool = false
+    var icon: String = ""
+    var iconColor: Color? = nil
+    var onRightIconPressed: () -> Void = {}
+    var onFocus: () -> Void = {}
+    var onBlur: () -> Void = {}
+    var loading: Bool = false
+    var fontWeight: Font.Weight = .regular
+    var keyboardType: UIKeyboardType = .default
+    var searchIcon: (() -> AnyView)? = nil
+    var placeholderCustomRender: (() -> AnyView)? = nil
+
+    @State private var isFocused = false
+    @State private var isBlurred = false
+
+    public init(text: Binding<String>,
+                buttonText: String = "",
+                showButtonText: Bool = false,
+                showBorder: Bool = true,
+                placeholder: String = "",
+                onChangeText: @escaping (String) -> Void = { _ in },
+                onPressButtonText: @escaping () -> Void = {},
+                error: String = "",
+                disabled: Bool = false,
+                icon: String = "",
+                iconColor: Color? = nil,
+                onRightIconPressed: @escaping () -> Void = {},
+                onFocus: @escaping () -> Void = {},
+                onBlur: @escaping () -> Void = {},
+                loading: Bool = false,
+                fontWeight: Font.Weight = .regular,
+                keyboardType: UIKeyboardType = .default,
+                searchIcon: (() -> AnyView)? = nil,
+                placeholderCustomRender: (() -> AnyView)? = nil) {
+        self._text = text
+        self.buttonText = buttonText
+        self.showButtonText = showButtonText
+        self.showBorder = showBorder
+        self.placeholder = placeholder
+        self.onChangeText = onChangeText
+        self.onPressButtonText = onPressButtonText
+        self.error = error
+        self.disabled = disabled
+        self.icon = icon
+        self.iconColor = iconColor
+        self.onRightIconPressed = onRightIconPressed
+        self.onFocus = onFocus
+        self.onBlur = onBlur
+        self.loading = loading
+        self.fontWeight = fontWeight
+        self.keyboardType = keyboardType
+        self.searchIcon = searchIcon
+        self.placeholderCustomRender = placeholderCustomRender
+        }
+
+    /// Convenience initializer mirroring Compose's `InputSearch(inputSearchProps)`.
+    public init(props: InputSearchProps) {
+        self.init(
+            text: props.$text,
+            buttonText: props.buttonText,
+            showButtonText: props.showButtonText,
+            showBorder: props.showBorder,
+            placeholder: props.placeholder,
+            onChangeText: props.onChangeText,
+            onPressButtonText: props.onPressButtonText,
+            error: props.error,
+            disabled: props.disabled,
+            icon: props.icon,
+            iconColor: props.iconColor,
+            onRightIconPressed: props.onRightIconPressed,
+            onFocus: props.onFocus,
+            onBlur: props.onBlur,
+            loading: props.loading,
+            fontWeight: props.fontWeight,
+            keyboardType: props.keyboardType,
+            searchIcon: props.searchIcon,
+            placeholderCustomRender: props.placeholderCustomRender
+        )
+    }
+
+
+    public var body: some View {
+        let iconColor: Color = disabled ? theme.colors.text.disable : (self.iconColor ?? theme.colors.text.default)
+        VStack(alignment: .leading, spacing: 0) {
+            HStack(spacing: 0) {
+                HStack {
+                    if let searchIcon = searchIcon {
+                        searchIcon()
+                    } else {
+                        Image(systemName: "magnifyingglass")
+                            .foregroundColor(theme.colors.text.hint)
+                            .frame(width: 24, height: 24)
+                            .padding(.trailing, Spacing.XS)
+                    }
+
+                    ZStack(alignment: .leading) {
+                        if text.isEmpty {
+                            if let placeholderCustomRender = placeholderCustomRender {
+                                placeholderCustomRender()
+                            } else {
+                                Text(placeholder)
+                                    .foregroundColor(disabled ? theme.colors.text.disable : theme.colors.text.hint)
+                                    .font(.system(size: fontScale(14), weight: fontWeight))
+                                    .ignoreBoldTextSetting()
+                            }
+                        }
+                        TextField("", text: $text, onEditingChanged: { editing in
+                            isFocused = editing
+                            if editing {
+                                onFocus()
+                            } else if isBlurred {
+                                onBlur()
+                            }
+                            if editing && !isBlurred {
+                                isBlurred = true
+                            }
+                        }, onCommit: {})
+                        .disabled(disabled)
+                        .foregroundColor(disabled ? theme.colors.text.disable : theme.colors.text.default)
+                        .font(.system(size: fontScale(14), weight: fontWeight))
+                        .ignoreBoldTextSetting()
+                        .keyboardType(keyboardType)
+                        .applyCursorColor(theme.colors.primary)
+                    }
+                    
+                    if isFocused && !text.isEmpty {
+                        SwiftButton(action: {
+                            text = ""
+                            // Kotlin's clear icon fires a callback distinct from
+                            // onChangeText (`onClearPress`, not ported here); route
+                            // through onChangeText so clearing isn't a silent no-op.
+                            onChangeText("")
+                        }) {
+                            Image(systemName: "xmark.circle.fill")
+                                .foregroundColor(theme.colors.text.hint)
+                                .frame(width: 16, height: 16)
+                        }
+                        .padding(.leading, Spacing.S)
+                    }
+                    
+                    RenderRightIconSearch(loading: loading, icon: icon, color: iconColor, onClick: onRightIconPressed)
+                }
+                .padding(.horizontal, Spacing.M)
+                .padding(.vertical, Spacing.S)
+                .background(theme.colors.background.surface)
+                .cornerRadius(Radius.XL)
+                .overlay(
+                    RoundedRectangle(cornerRadius: Radius.XL)
+                        .stroke(getBorderColor(isFocused: isFocused, error: error, disabled: disabled), lineWidth: showBorder ? 1 : 0)
+                )
+                .frame(maxWidth: showButtonText ? .infinity : nil, alignment: .leading)
+                
+                if showButtonText {
+                    SwiftButton(action: onPressButtonText) {
+                        MomoText(buttonText, typography: .actionDefaultBold, color: theme.colors.text.default)
+                    }
+                    .padding(.leading, Spacing.L)
+                }
+            }
+        }
+    }
+
+    // MARK: - Helper Functions
+
+    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
+        }
+    }
+}
+
+private extension View {
+    func applyCursorColor(_ color: Color) -> some View {
+        if #available(iOS 15.0, *) {
+            return self.tint(color)
+        } else {
+            return self
+        }
+    }
+}