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

package/ios/Input/Input.swift

@@ -1,98 +1,482 @@
 import Foundation
 import SwiftUI
-
-
-fileprivate struct FloatingComponent: View {
-    var floatingValue: String
-    
-    public init (_ floatingValue: String = ""){
-        self.floatingValue = floatingValue
-    }
-    
-    public var body: some View {
-        return HStack {
-            Text(floatingValue)
-                .foregroundColor(Colors.black09)
-                .font(.system(size: 12))
-                .padding(.leading, 8)
-            Image(systemName: "info.circle")
-                .foregroundColor(Colors.black09)
-                .frame(width: 16, height: 16)
-                .padding(.leading, -4)
-                .padding(.trailing, 8)
-        }
-        .background(Colors.black01)
-        .offset(x: 16, y:-8)
-        .zIndex(10)
-    }
-}
+import Combine
 
 public struct Input: View {
-    @State var value: String = ""
-    @State var focused: Bool = false
+    @Environment(\.appTheme) private var theme
+    @Environment(\.momoFontScale) private var fontScale
+    @Binding public var text: String
     
-    var iconPadding: CGFloat
-    var multilines: Bool
-    var placeholder: String
-    var floatingValue: String
-    var errorMessage: String
+    public var placeholder: String
+    public var floatingValue: String
+    public var floatingValueColor: Color?
+    public var floatingIcon: String
+    public var floatingIconColor: Color?
+    public var size: InputSize
+    public var hintText: String
+    public var error: String
+    public var errorSpacing: Bool
+    public var disabled: Bool
+    public var readOnly: Bool
+    public var secureTextEntry: Bool
+    public var rightIcon: String
+    public var rightIconColor: Color?
+    public var leadingIcon: String
+    public var leadingIconColor: Color?
+    public var loading: Bool
+    public var required: Bool
+    public var maxLength: Int?
+    public var fontWeight: InputFontWeight
+    public var keyboardType: UIKeyboardType
+    public var autofocus: Bool
+    public var onChangeText: ((String) -> Void)?
+    public var onFocus: (() -> Void)?
+    public var onBlur: (() -> Void)?
+    public var onRightIconPressed: (() -> Void)?
     
-    func onEditingChanged(_ focused: Bool){
-        self.focused = focused
-    }
+    @State private var isFocused: Bool = false
+    @State private var isPasswordHidden: Bool = true
+    @FocusState private var isFieldFocused: Bool
+    @State private var floatingLabelHeight: CGFloat = 16
     
-    public init(placeholder: String  = "", floatingValue: String = "", multilines: Bool  = false, errorMessage: String = ""){
+    public init(
+        text: Binding<String>,
+        placeholder: String = "",
+        floatingValue: String = "",
+        floatingValueColor: Color? = nil,
+        floatingIcon: String = "",
+        floatingIconColor: Color? = nil,
+        size: InputSize = .small,
+        hintText: String = "",
+        error: String = "",
+        errorSpacing: Bool = false,
+        disabled: Bool = false,
+        readOnly: Bool = false,
+        secureTextEntry: Bool = false,
+        rightIcon: String = "",
+        rightIconColor: Color? = nil,
+        leadingIcon: String = "",
+        leadingIconColor: Color? = nil,
+        loading: Bool = false,
+        required: Bool = false,
+        maxLength: Int? = nil,
+        fontWeight: InputFontWeight = .regular,
+        keyboardType: UIKeyboardType = .default,
+        autofocus: Bool = false,
+        onChangeText: ((String) -> Void)? = nil,
+        onFocus: (() -> Void)? = nil,
+        onBlur: (() -> Void)? = nil,
+        onRightIconPressed: (() -> Void)? = nil
+    ) {
+        self._text = text
         self.placeholder = placeholder
         self.floatingValue = floatingValue
-        self.multilines = multilines
-        self.iconPadding = multilines == true ? 16 : 0
-        self.errorMessage = errorMessage
+        self.floatingValueColor = floatingValueColor
+        self.floatingIcon = floatingIcon
+        self.floatingIconColor = floatingIconColor
+        self.size = size
+        self.hintText = hintText
+        self.error = error
+        self.errorSpacing = errorSpacing
+        self.disabled = disabled
+        self.readOnly = readOnly
+        self.secureTextEntry = secureTextEntry
+        self.rightIcon = rightIcon
+        self.rightIconColor = rightIconColor
+        self.leadingIcon = leadingIcon
+        self.leadingIconColor = leadingIconColor
+        self.loading = loading
+        self.required = required
+        self.maxLength = maxLength
+        self.fontWeight = fontWeight
+        self.keyboardType = keyboardType
+        self.autofocus = autofocus
+        self.onChangeText = onChangeText
+        self.onFocus = onFocus
+        self.onBlur = onBlur
+        self.onRightIconPressed = onRightIconPressed
     }
-    
+
+    // MARK: - Body
     public var body: some View {
-        return ZStack (alignment: .topLeading){
-            
-            HStack(alignment: multilines == true ? .top : .center){
-                if (multilines){
-                    if #available(iOS 14.0, *) {
-                        TextEditor(text: $value)
-                            .frame(maxWidth: .infinity, minHeight: 48)
-                            .padding(.horizontal, 8)
-                            .padding(.top,4 )
-                            .accentColor(Colors.pink03)
-                            .fixedSize(horizontal: false, vertical: true)
+        let textBinding = Binding<String>(
+            get: { self.text },
+            set: { newValue in
+                // Trim atomically before publishing, mirroring Kotlin's `onValueChange`
+                // (`newText.take(maxLength)` before the state ever updates) — avoids a
+                // render with the untrimmed value that a separate `.onChange` correction
+                // would otherwise briefly show.
+                let limited = limitText(newValue)
+                self.text = limited
+                self.onChangeText?(limited)
+            }
+        )
+
+        VStack(alignment: .leading, spacing: 4) {
+            ZStack(alignment: .topLeading) {
+                // Floating label
+                if !floatingValue.isEmpty || !floatingIcon.isEmpty {
+                    HStack(spacing: Spacing.XS) {
+                        MomoText(floatingValue, typography: .labelSMedium, color: getFloatingColor())
+                        if required {
+                            MomoText("*", typography: .labelSMedium, color: theme.colors.error.primary)
+                        }
+                        if !floatingIcon.isEmpty {
+                            Icon(source: floatingIcon, size: 16, color: getFloatingIconColor())
+                        }
                     }
+                    .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
+                    // (spanning -labelHeight/2 ... +labelHeight/2 around y=0). Our ZStack
+                    // anchors top-leading instead, so reproducing 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)
                 }
-                else {
-                    TextField("",text: $value, onEditingChanged:{ isChange in
-                        onEditingChanged(isChange)
-                    })
-                    .padding(.horizontal, 12)
-                    .accentColor(Colors.pink03)
+                
+                // Input container
+                HStack(alignment: .center, spacing: 0) {
+                    // Leading icon
+                    if !leadingIcon.isEmpty {
+                        Icon(source: leadingIcon, size: size == .small ? 24 : 32, color: getLeadingIconColor())
+                            .padding(.trailing, Spacing.M)
+                    }
+                    
+                    // Text input field
+                    ZStack(alignment: .leading) {
+                        if text.isEmpty {
+                            MomoText(
+                                placeholder + (required && floatingValue.isEmpty ? " *" : ""),
+                                typography: fontWeight == .bold ? .actionSBold : .bodyDefaultRegular,
+                                color: getPlaceholderColor()
+                            )
+                        }
+                        
+                        if secureTextEntry && isPasswordHidden {
+                            SecureInputField(
+                                text: $text,
+                                keyboardType: keyboardType,
+                                fontSize: fontScale(14),
+                                fontWeight: fontWeight == .bold ? .bold : .regular,
+                                textColor: UIColor(getTextColor()),
+                                cursorColor: UIColor(theme.colors.primary),
+                                isDisabled: disabled || readOnly,
+                                maxLength: maxLength,
+                                autofocus: autofocus,
+                                onFocusChange: { focused in
+                                    handleFocusChange(focused)
+                                },
+                                onChangeText: onChangeText
+                            )
+                        } else {
+                            TextField("", text: textBinding, onEditingChanged: { focused in
+                                handleFocusChange(focused)
+                            })
+                            .keyboardType(keyboardType)
+                            .font(fontWeight == .bold ? .action_s_bold : .body_default_regular)
+                            .ignoreBoldTextSetting()
+                            .foregroundColor(getTextColor())
+                            .disabled(disabled || readOnly)
+                            .applyCursorColor(theme.colors.primary)
+                            .focused($isFieldFocused)
+                            .onAppear {
+                                if autofocus { isFieldFocused = true }
+                            }
+                            // SwiftUI reads a TextField's UIKit input traits only when it
+                            // builds the backing UITextField, so a later `keyboardType`
+                            // change is silently dropped. The secure path can call
+                            // `reloadInputViews()` in `updateUIView`; here the only lever
+                            // is to force a rebuild.
+                            .id(keyboardType.rawValue)
+                        }
+                    }
                     
+                    // Clear button (only show when focused and has text)
+                    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)
+                            .padding(.leading, Spacing.S)
+                    }
                     
+                    // Right icon (password toggle or custom icon)
+                    if secureTextEntry {
+                        if !text.isEmpty {
+                            SwiftUI.Button(action: togglePasswordVisibility) {
+                                Icon(
+                                    source: isPasswordHidden ? "24_security_eye_off" : "24_security_eye_open",
+                                    size: 24,
+                                    color: getRightIconColor()
+                                )
+                                .padding(.leading, Spacing.S).accessibility(identifier: "ic_show_hide")
+                            }
+                        }
+                    } else if !rightIcon.isEmpty {
+                        SwiftUI.Button(action: { onRightIconPressed?() }) {
+                            Icon(source: rightIcon, size: 24, color: getRightIconColor())
+                                .padding(.leading, Spacing.S)
+                        }
+                    }
                 }
-                
-                Image(systemName: "info.circle")
-                    .foregroundColor(Colors.black09)
-                    .frame(width: 16, height: 16)
-                    .padding(.leading, -4)
-                    .padding(.trailing, 8)
-                    .padding(.top, iconPadding)
+                .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: 1)
+                )
             }
-            .frame(maxWidth: .infinity, minHeight: 48)
-            .overlay(RoundedRectangle(cornerRadius: 8).stroke(focused == true ? Colors.pink03 : Colors.border, lineWidth: 1))
-            .padding(.horizontal, 1)
-            if (value.isEmpty){
-                Text(placeholder)
-                    .font(.system(size: 16))
-                    .foregroundColor(Colors.black09)
-                    .padding(.leading, 12)
-                    .padding(.top, 14)
-                    .allowsHitTesting(false)
+            
+            // Error or hint
+            ErrorView(
+                errorMessage: error,
+                errorSpacing: errorSpacing,
+                hintText: hintText
+            )
+        }
+        .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillHideNotification)) { _ in
+            if isFocused && !secureTextEntry {
+                DispatchQueue.main.async {
+                    handleFocusChange(false)
+                }
             }
-            FloatingComponent(floatingValue)
-        }.padding(.bottom, 8)
+        }
+    }
+    
+    // MARK: - Helpers
+    
+    private func handleFocusChange(_ focused: Bool) {
+        isFocused = focused
+        if focused {
+            onFocus?()
+        } else {
+            onBlur?()
+        }
     }
     
+    private func togglePasswordVisibility() {
+        isPasswordHidden.toggle()
+        onRightIconPressed?()
+    }
+
+    private func limitText(_ value: String) -> String {
+        guard let maxLength = maxLength else {
+            return value
+        }
+        return String(value.prefix(maxLength))
+    }
+    
+    private func 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 func getTextColor() -> Color {
+        return disabled ? theme.colors.text.disable : theme.colors.text.default
+    }
+    
+    private func getPlaceholderColor() -> Color {
+        return disabled ? theme.colors.text.disable : theme.colors.text.hint
+    }
+    
+    private func getFloatingColor() -> Color {
+        return disabled ? theme.colors.text.disable : (floatingValueColor ?? theme.colors.text.hint)
+    }
+    
+    private func getFloatingIconColor() -> Color {
+        return disabled ? theme.colors.text.disable : (floatingIconColor ?? theme.colors.text.default)
+    }
+
+    private func getLeadingIconColor() -> Color {
+        return disabled ? theme.colors.text.disable : (leadingIconColor ?? theme.colors.text.hint)
+    }
+
+    private func getRightIconColor() -> Color {
+        return disabled ? theme.colors.text.disable : (rightIconColor ?? theme.colors.text.default)
+    }
+}
+
+
+// MARK: - Secure Input Field (UIViewRepresentable)
+private struct SecureInputField: UIViewRepresentable {
+    @Binding var text: String
+    var keyboardType: UIKeyboardType
+    var fontSize: CGFloat
+    var fontWeight: UIFont.Weight
+    var textColor: UIColor
+    var cursorColor: UIColor
+    var isDisabled: Bool
+    var maxLength: Int?
+    var autofocus: Bool = false
+    var onFocusChange: (Bool) -> Void
+    var onChangeText: ((String) -> Void)?
+
+    func makeCoordinator() -> Coordinator {
+        Coordinator(self)
+    }
+
+    func makeUIView(context: Context) -> UITextField {
+        let textField = UITextField()
+        textField.isSecureTextEntry = true
+        textField.delegate = context.coordinator
+        textField.keyboardType = keyboardType
+        textField.font = UIFont.systemFont(ofSize: fontSize, weight: fontWeight)
+        textField.textColor = textColor
+        textField.isEnabled = !isDisabled
+        textField.setContentHuggingPriority(.defaultLow, for: .horizontal)
+        textField.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
+        textField.text = text
+        textField.tintColor = cursorColor
+        textField.addTarget(
+            context.coordinator,
+            action: #selector(Coordinator.textFieldDidChange(_:)),
+            for: .editingChanged
+        )
+        if autofocus {
+            DispatchQueue.main.async {
+                textField.becomeFirstResponder()
+            }
+        }
+        return textField
+    }
+
+    func updateUIView(_ textField: UITextField, context: Context) {
+        context.coordinator.parent = self
+        if textField.text != text {
+            textField.text = text
+        }
+        textField.isEnabled = !isDisabled
+        textField.textColor = textColor
+        textField.tintColor = cursorColor
+        if textField.keyboardType != keyboardType {
+            textField.keyboardType = keyboardType
+            textField.reloadInputViews()
+        }
+    }
+
+    class Coordinator: NSObject, UITextFieldDelegate {
+        var parent: SecureInputField
+        private var isResettingText = false
+
+        init(_ parent: SecureInputField) {
+            self.parent = parent
+        }
+
+        func textFieldDidBeginEditing(_ textField: UITextField) {
+            let existingText = textField.text ?? ""
+            if !existingText.isEmpty {
+                // When a secure text field regains focus, iOS marks the
+                // existing text as "committed". The next keystroke would
+                // replace ALL committed text with the new character.
+                // Prevent this by clearing and re-inserting via insertText(),
+                // which puts the text into an "active editing" state.
+                isResettingText = true
+                textField.text = ""
+                textField.insertText(existingText)
+                isResettingText = false
+            }
+            parent.onFocusChange(true)
+        }
+
+        func textFieldDidEndEditing(_ textField: UITextField) {
+            parent.text = limitText(textField.text ?? "")
+            parent.onFocusChange(false)
+        }
+
+        func textField(
+            _ textField: UITextField,
+            shouldChangeCharactersIn range: NSRange,
+            replacementString string: String
+        ) -> Bool {
+            if isResettingText { return true }
+            return true
+        }
+
+        @objc func textFieldDidChange(_ textField: UITextField) {
+            if isResettingText { return }
+            let newText = limitText(textField.text ?? "")
+            if textField.text != newText {
+                textField.text = newText
+            }
+            parent.text = newText
+            parent.onChangeText?(newText)
+        }
+
+        func textFieldShouldReturn(_ textField: UITextField) -> Bool {
+            textField.resignFirstResponder()
+            return true
+        }
+
+        private func limitText(_ value: String) -> String {
+            guard let maxLength = parent.maxLength else {
+                return value
+            }
+            return String(value.prefix(maxLength))
+        }
+    }
+}
+
+// MARK: - Helper Extension
+private extension View {
+    func applyCursorColor(_ color: Color) -> some View {
+        if #available(iOS 15.0, *) {
+            return self.tint(color)
+        } else {
+            return self
+        }
+    }
+}
+
+// MARK: - Activity Indicator
+struct ActivityIndicator: UIViewRepresentable {
+    @Binding var isAnimating: Bool
+    let style: UIActivityIndicatorView.Style
+
+    func makeUIView(context: UIViewRepresentableContext<ActivityIndicator>) -> UIActivityIndicatorView {
+        return UIActivityIndicatorView(style: style)
+    }
+
+    func updateUIView(_ uiView: UIActivityIndicatorView, context: UIViewRepresentableContext<ActivityIndicator>) {
+        isAnimating ? uiView.startAnimating() : uiView.stopAnimating()
+    }
+}
+
+// MARK: - Enums
+public enum InputSize {
+    case small
+    case large
+}
+
+public enum InputFontWeight {
+    case regular
+    case bold
 }