@momo-kits/native-kits 0.163.1-beta.3-debug → 0.163.1-beta.5-debug

package/ios/Input/InputTextArea.swift

@@ -12,6 +12,12 @@ public let DEFAULT_HEIGHT: CGFloat = 104
 
 struct UITextViewWrapper: UIViewRepresentable {
     @Binding var text: String
+    var maxLength: Int
+    var textColor: Color
+    var cursorColor: Color
+    var fontWeight: Font.Weight
+    var disabled: Bool
+    var onChangeText: (String) -> Void
     var onDone: (() -> Void)?
     var onFocus: (() -> Void)?
     var onBlur: (() -> Void)?
@@ -19,11 +25,20 @@ struct UITextViewWrapper: UIViewRepresentable {
     func makeUIView(context: Context) -> UITextView {
         let textView = UITextView()
         textView.delegate = context.coordinator
+        textView.backgroundColor = .clear
+        textView.textContainerInset = .zero
+        textView.textContainer.lineFragmentPadding = 0
         return textView
     }
     
     func updateUIView(_ uiView: UITextView, context: Context) {
-        uiView.text = text
+        if uiView.text != text {
+            uiView.text = text
+        }
+        uiView.textColor = UIColor(textColor)
+        uiView.tintColor = UIColor(cursorColor)
+        uiView.font = UIFont.systemFont(ofSize: scaleSize(16), weight: fontWeight == .bold ? .bold : .regular)
+        uiView.isEditable = !disabled
     }
     
     func makeCoordinator() -> Coordinator {
@@ -38,7 +53,12 @@ struct UITextViewWrapper: UIViewRepresentable {
         }
         
         func textViewDidChange(_ textView: UITextView) {
-            parent.text = textView.text
+            let limited = String(textView.text.prefix(parent.maxLength))
+            if textView.text != limited {
+                textView.text = limited
+            }
+            parent.text = limited
+            parent.onChangeText(limited)
         }
         
         func textViewDidBeginEditing(_ textView: UITextView) {
@@ -54,27 +74,31 @@ struct UITextViewWrapper: UIViewRepresentable {
                 parent.onDone?()
                 return false
             }
-            return true
+            let current = textView.text ?? ""
+            guard let range = Range(range, in: current) else { return false }
+            let proposed = current.replacingCharacters(in: range, with: text)
+            return proposed.count <= parent.maxLength
         }
     }
 }
 
 // Make the struct public
 public struct InputTextArea: View {
+    @Environment(\.appTheme) private var theme
     @Binding var text: String
     var maxLength: Int = MAX_LENGTH
     var height: CGFloat = DEFAULT_HEIGHT
     var floatingValue: String = ""
-    var floatingValueColor: Color = .gray
+    var floatingValueColor: Color?
     var floatingIcon: String = ""
-    var floatingIconColor: Color = .black
+    var floatingIconColor: Color?
     var placeholder: String = ""
     var onChangeText: (String) -> Void = { _ in }
     var error: String = ""
     var errorSpacing: Bool = false
     var disabled: Bool = false
     var icon: String = ""
-    var iconColor: Color = .black
+    var iconColor: Color?
     var onRightIconPressed: () -> Void = {}
     var onFocus: () -> Void = {}
     var onBlur: () -> Void = {}
@@ -92,16 +116,16 @@ public struct InputTextArea: View {
         maxLength: Int = MAX_LENGTH,
         height: CGFloat = DEFAULT_HEIGHT,
         floatingValue: String = "",
-        floatingValueColor: Color = .gray,
+        floatingValueColor: Color? = nil,
         floatingIcon: String = "",
-        floatingIconColor: Color = .black,
+        floatingIconColor: Color? = nil,
         placeholder: String = "",
         onChangeText: @escaping (String) -> Void = { _ in },
         error: String = "",
         errorSpacing: Bool = false,
         disabled: Bool = false,
         icon: String = "",
-        iconColor: Color = Colors.pink03,
+        iconColor: Color? = nil,
         onRightIconPressed: @escaping () -> Void = {},
         onFocus: @escaping () -> Void = {},
         onBlur: @escaping () -> Void = {},
@@ -138,24 +162,27 @@ public struct InputTextArea: View {
                     ZStack(alignment: .topLeading) {
                         if !floatingValue.isEmpty || !floatingIcon.isEmpty {
                             HStack(spacing: 4) {
-                                Text(floatingValue)
-                                    .font(.caption)
-                                    .foregroundColor(disabled ? .gray : floatingValueColor)
+                                MomoText(
+                                    floatingValue,
+                                    typography: .labelSMedium,
+                                    color: disabled ? theme.colors.text.disable : (floatingValueColor ?? theme.colors.text.hint)
+                                )
                                 
                                 if required {
-                                    Text("*")
-                                        .font(.caption)
-                                        .foregroundColor(.red)
+                                    MomoText("*", typography: .labelSMedium, color: theme.colors.error.primary)
                                 }
                                 
                                 if !floatingIcon.isEmpty {
-                                    Image(systemName: floatingIcon)
-                                        .font(.caption)
-                                        .foregroundColor(disabled ? .gray : floatingIconColor)
+                                    Icon(
+                                        source: floatingIcon,
+                                        size: 16,
+                                        color: disabled ? theme.colors.text.disable : (floatingIconColor ?? theme.colors.text.default)
+                                    )
+                                    .padding(.leading, Spacing.XS)
                                 }
                             }
-                            .padding(.horizontal, 8)
-                            .background(Colors.black01)
+                            .padding(.horizontal, Spacing.S)
+                            .background(theme.colors.background.surface)
                             .offset(x: Spacing.S, y: -height / 10)
                             .zIndex(10)
                         }
@@ -164,13 +191,21 @@ public struct InputTextArea: View {
                             ZStack(alignment: .topLeading) {
                                 if text.isEmpty {
                                     Text(placeholder)
-                                        .foregroundColor(disabled ? .gray : .gray)
+                                        .foregroundColor(disabled ? theme.colors.text.disable : theme.colors.text.hint)
                                         .font(.system(size: 16, weight: fontWeight))
                                         .padding(.horizontal, 16)
                                         .padding(.vertical, 12)
                                 }
                                 
-                                UITextViewWrapper(text: $text, onDone: {
+                                UITextViewWrapper(
+                                    text: $text,
+                                    maxLength: maxLength,
+                                    textColor: disabled ? theme.colors.text.disable : theme.colors.text.default,
+                                    cursorColor: theme.colors.primary,
+                                    fontWeight: fontWeight,
+                                    disabled: disabled,
+                                    onChangeText: onChangeText,
+                                    onDone: {
                                     // Handle done action if needed
                                 },
                                 onFocus: {
@@ -188,27 +223,20 @@ public struct InputTextArea: View {
                             
                             HStack {
                                 Spacer()
-                                Text("\(text.count)/\(maxLength)")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
+                                MomoText("\(text.count)/\(maxLength)", typography: .descriptionXsRegular, color: theme.colors.text.hint)
                             }
                             .padding(.horizontal, 16)
                             .padding(.bottom, 12)
                         }
-                        .background(Color.white)
-                        .cornerRadius(8)
+                        .background(theme.colors.background.surface)
+                        .cornerRadius(Radius.S)
                         .overlay(
-                            RoundedRectangle(cornerRadius: 8)
+                            RoundedRectangle(cornerRadius: Radius.S)
                                 .stroke(borderColor, lineWidth: 1)
                         )
                     }
                     
-                    if !error.isEmpty {
-                        Text(error)
-                            .font(.caption)
-                            .foregroundColor(.red)
-                            .padding(.top, errorSpacing ? 8 : 4)
-                    }
+                    ErrorView(errorMessage: error, errorSpacing: errorSpacing, hintText: "")
                 }
                 .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillShowNotification)) { _ in
                     if !isBlurred {
@@ -228,16 +256,14 @@ public struct InputTextArea: View {
     
     private var borderColor: Color {
         if disabled {
-            return Colors.black03
+            return theme.colors.border.disable
         } else if !error.isEmpty {
-            return .red
+            return theme.colors.error.primary
         } else if isFocused {
-            return Colors.pink03
+            return theme.colors.primary
         } else {
-            return Colors.border
+            return theme.colors.border.default
         }
 
     }
 }
-
-

package/ios/InputDropDown/InputDropDown.swift

@@ -0,0 +1,198 @@
+//
+//  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 {
+        if loading {
+            ActivityIndicator(isAnimating: .constant(true), style: .medium)
+                .frame(width: 16, height: 16)
+        } else 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
+        }
+    }
+}