@momo-kits/native-kits 0.155.1-test.2 → 0.155.1-test.20

package/ios/Input/Input.swift

@@ -1,188 +1,285 @@
 import Foundation
 import SwiftUI
 
-
-fileprivate struct FloatingComponent: View {
-    var floatingValue: String
-    var floatingIcon: AnyView?
-    
-    public init (_ floatingValue: String = "", floatingIcon: AnyView? = nil){
-        self.floatingValue = floatingValue
-        self.floatingIcon = floatingIcon
-    }
-    
-    public var body: some View {
-        return HStack {
-            Text(floatingValue)
-                .font(.paragraph)
-                .foregroundColor(Colors.black09)
-                .font(.system(size: 12))
-                .padding(.leading, 8)
-                .padding(.trailing, 8)
-            floatingIcon
-        }
-        .background(Colors.black01)
-        .offset(x: 16, y:-8)
-        .zIndex(10)
-    }
-}
-
-struct DotTextField: View{
-    @Binding var value: String
-    @State var isHide: Bool = true
-    
-    
-    func onToggle(){
-        isHide.toggle()
-    }
-    
-    public var body: some View {
-        return HStack {
-            if (isHide){
-                SecureField("", text: $value)
-            }
-            else {
-                TextField("", text: $value)
-            }
-            
-            SwiftButton(action: onToggle){
-                Image(systemName: isHide ?  "eye.slash" : "eye")
-                    .foregroundColor(Colors.text)
-                    .frame(width: 16, height: 16)
-                    .padding(.leading, -4)
-            }
-            
-            
-        }
-        
-    }
-}
-
 public struct Input: View {
-    @Binding var value: String
-    @State var focused: Bool = false
+    @Binding public var text: String
     
-    var placeholder: String
-    var floatingValue: String
-    var errorMessage: String
-    var errorSpacing: Bool
-    var isSecure: Bool
-    var keyboardType: UIKeyboardType
-    var floatingIcon: AnyView?
-    var rightIcon: AnyView?
-    var onChange: ((String) -> Void)?
-    var onBlur: (() -> Void)?
-    var floatingIconURL: String?
-    var floatingIconColor: Color?
-    var size: InputSize
-    var fontWeight: InputFontWeight
-    var disabled: Bool
-    var leadingIcon: String?
-    var leadingIconColor: Color?
-    var loading: Bool
-    var required: Bool
-    var hintText: String?
+    public var placeholder: String
+    public var floatingValue: String
+    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 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 onCancel(){
-        self.value.removeAll()
-    }
+    @State private var isFocused: Bool = false
+    @State private var isPasswordHidden: Bool = true
+    @FocusState private var isTextFieldFocused: Bool
     
-    public init(_ value: Binding<String>, placeholder: String  = "", floatingValue: String = "", multilines: Bool  = false, errorMessage: String = "", isSecure: Bool = false, keyboardType: UIKeyboardType = .default, floatingIcon:  AnyView? = nil, rightIcon:  AnyView? = nil, onChange: ((String)->Void)? = nil, onBlur: (()->Void)? = nil, floatingIconURL: String? = nil, floatingIconColor: Color? = Colors.pink03, size: InputSize = .small, fontWeight: InputFontWeight = .regular, disabled: Bool = false, leadingIcon: String? = nil, leadingIconColor: Color? = Colors.pink03, loading: Bool = false, required: Bool = false, hintText: String? = nil, errorSpacing: Bool = false){
+    public init(
+        text: Binding<String>,
+        placeholder: String = "",
+        floatingValue: String = "",
+        floatingIcon: String = "",
+        floatingIconColor: Color = Colors.primary,
+        size: InputSize = .small,
+        hintText: String = "",
+        error: String = "",
+        errorSpacing: Bool = false,
+        disabled: Bool = false,
+        readOnly: Bool = false,
+        secureTextEntry: Bool = false,
+        rightIcon: String = "",
+        rightIconColor: Color = Colors.black17,
+        leadingIcon: String = "",
+        leadingIconColor: Color = Colors.black12,
+        loading: Bool = false,
+        required: Bool = false,
+        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.errorMessage = errorMessage
-        self.isSecure = isSecure
-        self._value = value
-        self.keyboardType = keyboardType
-        self.rightIcon = rightIcon
         self.floatingIcon = floatingIcon
-        self.onChange = onChange
-        self.floatingIconURL = floatingIconURL
         self.floatingIconColor = floatingIconColor
         self.size = size
-        self.fontWeight = fontWeight
+        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.hintText = hintText
-        self.errorSpacing = errorSpacing
-    }
-    
-    func onChangeText(value: String){
-        onChange?(value)
+        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 {
-            VStack(alignment: .leading, spacing: 4) {
-                ZStack(alignment: .topLeading) {
-                    HStack(alignment: .center) {
-                        if let leadingIcon = leadingIcon {
-                            Icon(source: leadingIcon, size: 16, color: leadingIconColor)
+        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: Colors.red03)
                         }
-                        
-                        if !isSecure {
-                            TextField("", text: $value, onEditingChanged: { isChange in
-                                self.focused = isChange
-                            })
-                            .disabled(disabled)
-                            .font(fontWeight == .bold ? .headline : .body)
-                        } else {
-                            DotTextField(value: $value)
-                                .disabled(disabled)
+                        if !floatingIcon.isEmpty {
+                            Icon(source: floatingIcon, size: 16, color: getFloatingIconColor())
+                        }
+                    }
+                    .padding(.horizontal, Spacing.S)
+                    .background(Colors.black01)
+                    .offset(x: Spacing.S, y: -8)
+                    .zIndex(10)
+                }
+                
+                // Input container
+                HStack(alignment: .center, spacing: 0) {
+                    // Leading icon
+                    if !leadingIcon.isEmpty {
+                        Icon(source: leadingIcon, size: size == .small ? 24 : 32, color: leadingIconColor)
+                            .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 loading {
-                            ActivityIndicator(isAnimating: .constant(true), style: .medium)
-                                .frame(width: 20, height: 20)
-                        } else if !value.isEmpty {
-                            SwiftButton(action: onCancel){
-                                Image(systemName: "x.circle.fill")
-                                    .foregroundColor(Colors.text)
-                                    .frame(width: 16, height: 16)
-                                    .padding(.leading, -4)
-                                    .padding(.trailing, 8)
+                        if secureTextEntry && isPasswordHidden {
+                            SecureField("", text: $text, onCommit: {})
+                                .font(fontWeight == .bold ? .action_s_bold : .body_default_regular)
+                                .foregroundColor(getTextColor())
+                                .disabled(disabled || readOnly)
+                                .applyPrimaryCursorColor()
+                                .focused($isTextFieldFocused)
+                                .onChange(of: text) { newValue in
+                                    onChangeText?(newValue)
+                                }
+                        } else {
+                            TextField("", text: $text, onEditingChanged: { focused in
+                                handleFocusChange(focused)
+                            })
+                            .keyboardType(secureTextEntry ? .default : keyboardType)
+                            .font(fontWeight == .bold ? .action_s_bold : .body_default_regular)
+                            .foregroundColor(getTextColor())
+                            .disabled(disabled || readOnly)
+                            .applyPrimaryCursorColor()
+                            .focused($isTextFieldFocused)
+                            .onChange(of: text) { newValue in
+                                onChangeText?(newValue)
                             }
                         }
-
-                        rightIcon
                     }
-                    .padding(.horizontal, 12)
-                    .frame(height: scaleSize(size == .small ? 48 : 56, 1.1))
-                    .background(
-                        RoundedRectangle(cornerRadius: Radius.S)
-                            .fill(Colors.black01)
-                    )
-                    .overlay(RoundedRectangle(cornerRadius: 8).stroke(focused ? Colors.pink03 : Colors.border, lineWidth: 1))
                     
-                    if value.isEmpty {
-                        MomoText(placeholder + (required ? " *" : ""), typography: size == .small ? .headerSSemibold : .headerMBold, color: Colors.black09)
-                            .padding(.horizontal, leadingIcon == nil ? 12 : 32)
-                            .padding(.top, 12)
-                            .allowsHitTesting(false)
+                    // Clear button (only show when focused and has text)
+                    if isFocused && !text.isEmpty {
+                        SwiftUI.Button(action: { text = "" }) {
+                            Icon(source: "24_navigation_close_circle_full", size: 16, color: Colors.black12)
+                                .padding(.leading, Spacing.S)
+                        }
                     }
                     
-                    if !floatingValue.isEmpty {
-                        FloatingComponent(floatingValue, floatingIcon: floatingIconURL.map { url in
-                            AnyView(
-                                Icon(source: url, size: 16, color: floatingIconColor)
-                                )
-                        })
-                            
+                    // 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 {
+                        SwiftUI.Button(action: togglePasswordVisibility) {
+                            Icon(
+                                source: isPasswordHidden ? "24_security_eye_off" : "24_security_eye_open",
+                                size: 24,
+                                color: rightIconColor
+                            )
+                            .padding(.leading, Spacing.S)
+                        }
+                    } else if !rightIcon.isEmpty {
+                        SwiftUI.Button(action: { onRightIconPressed?() }) {
+                            Icon(source: rightIcon, size: 24, color: rightIconColor)
+                                .padding(.leading, Spacing.S)
+                        }
                     }
                 }
-                
-                ErrorView(
-                    errorMessage: errorMessage,
-                    errorSpacing: errorSpacing,
-                    hintText: hintText ?? ""
+                .padding(.horizontal, Spacing.M)
+                .frame(height: scaleSize(size == .small ? 48 : 56, 1.1))
+                .background(
+                    RoundedRectangle(cornerRadius: Radius.S)
+                        .fill(Colors.black01)
+                )
+                .overlay(
+                    RoundedRectangle(cornerRadius: Radius.S)
+                        .stroke(borderColor(), lineWidth: 1)
                 )
             }
+            
+            // Error or hint
+            ErrorView(
+                errorMessage: error,
+                errorSpacing: errorSpacing,
+                hintText: hintText
+            )
         }
+        .onAppear {
+            if autofocus {
+                DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
+                    isTextFieldFocused = true
+                }
+            }
+        }
+        .onChange(of: isTextFieldFocused) { newValue in
+            isFocused = newValue
+            if newValue {
+                onFocus?()
+            } else {
+                onBlur?()
+            }
+        }
+    }
+    
+    // MARK: - Helpers
+    
+    private func handleFocusChange(_ focused: Bool) {
+        isFocused = focused
+        isTextFieldFocused = focused
+        if focused {
+            onFocus?()
+        } else {
+            onBlur?()
+        }
+    }
+    
+    private func togglePasswordVisibility() {
+        isPasswordHidden.toggle()
+        onRightIconPressed?()
+    }
+    
+    private func borderColor() -> Color {
+        if disabled {
+            return Colors.black04 // border.disable
+        }
+        if !error.isEmpty {
+            return Colors.red03 // error.primary
+        }
+        if isFocused {
+            return Colors.primary
+        }
+        return Colors.black04 // border.default
+    }
+    
+    private func getTextColor() -> Color {
+        return disabled ? Colors.black09 : Colors.black17
+    }
+    
+    private func getPlaceholderColor() -> Color {
+        return disabled ? Colors.black09 : Colors.black12
+    }
+    
+    private func getFloatingColor() -> Color {
+        return disabled ? Colors.black09 : Colors.black12
+    }
+    
+    private func getFloatingIconColor() -> Color {
+        return disabled ? Colors.black09 : floatingIconColor
+    }
 }
 
 
+// MARK: - Helper Extension
+private extension View {
+    func applyPrimaryCursorColor() -> some View {
+        if #available(iOS 15.0, *) {
+            return self.tint(Colors.primary)
+        } else {
+            return self
+        }
+    }
+}
+
+// MARK: - Activity Indicator
 struct ActivityIndicator: UIViewRepresentable {
     @Binding var isAnimating: Bool
     let style: UIActivityIndicatorView.Style
@@ -196,6 +293,7 @@ struct ActivityIndicator: UIViewRepresentable {
     }
 }
 
+// MARK: - Enums
 public enum InputSize {
     case small
     case large

package/ios/Input/InputPhoneNumber.swift

@@ -17,11 +17,13 @@ public struct InputPhoneNumber: View {
     public var loading: Bool
     public var rightIcon: String
     public var rightIconColor: Color
+    public var autofocus: Bool
     public var onFocus: (() -> Void)?
     public var onBlur: (() -> Void)?
     public var onRightIconPressed: (() -> Void)?
     
     @State private var isFocused: Bool = false
+    @FocusState private var isTextFieldFocused: Bool
     
     public init(
         text: Binding<String>,
@@ -33,6 +35,7 @@ public struct InputPhoneNumber: View {
         required: Bool = false,
         rightIcon: String = "",
         rightIconColor: Color = Colors.black12,
+        autofocus: Bool = false,
         onFocus: (() -> Void)? = nil,
         onBlur: (() -> Void)? = nil,
         onRightIconPressed: (() -> Void)? = nil
@@ -45,6 +48,7 @@ public struct InputPhoneNumber: View {
         self.loading = loading
         self.rightIcon = rightIcon
         self.rightIconColor = rightIconColor
+        self.autofocus = autofocus
         self.onFocus = onFocus
         self.onBlur = onBlur
         self.onRightIconPressed = onRightIconPressed
@@ -81,6 +85,7 @@ public struct InputPhoneNumber: View {
                     .foregroundColor(Colors.black17)
                     .applyPrimaryCursorColor()
                     .lineLimit(1)
+                    .focused($isTextFieldFocused)
                     
                 }
                 
@@ -124,12 +129,21 @@ public struct InputPhoneNumber: View {
                 hintText: hintText
             )
         }
+        .onAppear {
+            if autofocus {
+                // Small delay to ensure the view is fully loaded
+                DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
+                    isTextFieldFocused = true
+                }
+            }
+        }
     }
     
     // MARK: - Helpers
     
     private func handleFocusChange(_ focused: Bool) {
         isFocused = focused
+        isTextFieldFocused = focused
         if focused {
             onFocus?()
         } else {

package/ios/Popup/PopupDisplay.swift

@@ -113,12 +113,17 @@ public struct PopupDisplay: View {
                 }
                 
                 VStack(spacing: 0) {
-                    if(!url.isEmpty) {
+                    if(url.isEmpty) {
+                        Icon(source: "media_fail")
+                            .frame(width: .infinity, height: 184)
+                    }
+                    else {
                         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)

package/ios/Popup/PopupInput.swift

@@ -49,7 +49,7 @@ public struct PopupInput: View {
                             .padding(.bottom, 20)
                     }.padding(.horizontal, 24)
 
-                    Input($inputValue, placeholder: inputPlaceholder, onChange: onTextChange)
+                    Input(text: $inputValue, placeholder: inputPlaceholder, onChangeText: onTextChange)
                         .padding(.horizontal, 24)
 
                     if numberOfButtons == 1 {

package/ios/Popup/PopupPromotion.swift

@@ -27,12 +27,11 @@ public struct PopupPromotion: View {
                     .resizable()
                     .placeholder {
                         Color.gray
-                            .aspectRatio(0.72, contentMode: .fit)
+                            .aspectRatio(0.5625, contentMode: .fit)
                             .frame(maxWidth: UIScreen.main.bounds.width - Spacing.XL * 2)
                             .clipped()
                     }
-                    .scaledToFill()
-                    .aspectRatio(0.72, contentMode: .fit)
+                    .aspectRatio(0.5625, contentMode: .fit)
                     .frame(maxWidth: UIScreen.main.bounds.width - Spacing.XL * 2, alignment: .center)
                     .clipped()
                     .onTapGesture {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.155.1-test.2",
+  "version": "0.155.1-test.20",
   "private": false,
   "dependencies": {},
   "devDependencies": {},