change appearance of SUInputField

Author: mikhailChelbaev

Sources/SwiftComponents/InputField/Models/InputFieldVM.swift

@@ -13,7 +13,7 @@ public struct InputFieldVM: ComponentVM {
 
   /// The corner radius of the input field.
   ///
-  /// /// Defaults to `.medium`.
+  /// Defaults to `.medium`.
   public var cornerRadius: ComponentRadius = .medium
 
   /// The font used for the input field's text.
@@ -65,7 +65,7 @@ public struct InputFieldVM: ComponentVM {
   public var tintColor: UniversalColor = .accent
 
   /// The title displayed on the input field.
-  public var title: String = ""
+  public var title: String?
 
   /// Initializes a new instance of `InputFieldVM` with default values.
   public init() {}
@@ -96,6 +96,9 @@ extension InputFieldVM {
       return 16
     }
   }
+  var spacing: CGFloat {
+    return 12
+  }
   var backgroundColor: UniversalColor {
     if let color {
       return color.main.withOpacity(0.25)
@@ -166,7 +169,11 @@ extension InputFieldVM {
     }
   }
   var height: CGFloat {
-    return self.inputFieldHeight + self.inputFieldTopPadding + self.verticalPadding
+    return switch self.size {
+    case .small: 40
+    case .medium: 60
+    case .large: 80
+    }
   }
 }
 
@@ -183,9 +190,13 @@ extension InputFieldVM {
     ])
   }
   func nsAttributedTitle(for position: InputFieldTitlePosition) -> NSAttributedString {
+    guard let title else {
+      return NSAttributedString()
+    }
+
     let attributedString = NSMutableAttributedString()
     attributedString.append(NSAttributedString(
-      string: self.title,
+      string: title,
       attributes: [
         .font: self.titleFont(for: position).uiFont,
         .foregroundColor: self.titleColor(for: position).uiColor
@@ -223,9 +234,13 @@ extension InputFieldVM {
   func attributedTitle(
     for position: InputFieldTitlePosition
   ) -> AttributedString {
+    guard let title else {
+      return AttributedString()
+    }
+
     var attributedString = AttributedString()
 
-    var attributedTitle = AttributedString(self.title)
+    var attributedTitle = AttributedString(title)
     attributedTitle.font = self.titleFont(for: position).font
     attributedTitle.foregroundColor = self.titleColor(for: position).uiColor
     attributedString.append(attributedTitle)

Sources/SwiftComponents/InputField/SUInputField.swift

@@ -27,16 +27,6 @@ public struct SUInputField<FocusValue: Hashable>: View {
 
   @Environment(\.colorScheme) private var colorScheme
 
-  private var titlePosition: InputFieldTitlePosition {
-    if self.model.placeholder.isNilOrEmpty,
-       self.text.isEmpty,
-       self.globalFocus != self.localFocus {
-      return .center
-    } else {
-      return .top
-    }
-  }
-
   // MARK: Initialization
 
   /// Initializer.
@@ -60,19 +50,14 @@ public struct SUInputField<FocusValue: Hashable>: View {
   // MARK: Body
 
   public var body: some View {
-    ZStack(alignment: Alignment(
-      horizontal: .leading,
-      vertical: self.titlePosition == .top ? .top : .center
-    )) {
-      Text(self.model.attributedTitle(for: self.titlePosition))
-        .font(self.model.titleFont(for: self.titlePosition).font)
-        .foregroundStyle(
-          self.model
-            .titleColor(for: self.titlePosition)
-            .color(for: self.colorScheme)
-        )
-        .padding(.top, self.titlePosition == .top ? self.model.verticalPadding : 0)
-        .animation(.linear(duration: 0.1), value: self.titlePosition)
+    HStack(spacing: self.model.spacing) {
+      if self.model.title.isNotNilAndEmpty {
+        Text(self.model.attributedTitle(for: .center))
+          .font(self.model.preferredFont.font)
+          .foregroundStyle(
+            self.model.foregroundColor.color(for: self.colorScheme)
+          )
+      }
 
       Group {
         if self.model.isSecureInput {
@@ -96,11 +81,9 @@ public struct SUInputField<FocusValue: Hashable>: View {
       .submitLabel(self.model.submitType.submitLabel)
       .autocorrectionDisabled(!self.model.isAutocorrectionEnabled)
       .textInputAutocapitalization(self.model.autocapitalization.textInputAutocapitalization)
-      .frame(height: self.model.inputFieldHeight)
-      .padding(.bottom, self.model.verticalPadding)
-      .padding(.top, self.model.inputFieldTopPadding)
     }
     .padding(.horizontal, self.model.horizontalPadding)
+    .frame(height: self.model.height)
     .background(self.model.backgroundColor.color(for: self.colorScheme))
     .onTapGesture {
       self.globalFocus = self.localFocus
@@ -110,11 +93,6 @@ public struct SUInputField<FocusValue: Hashable>: View {
         cornerRadius: self.model.cornerRadius.value()
       )
     )
-    .onChange(of: self.globalFocus) { _ in
-      // NOTE: Workaround to force `globalFocus` value update properly
-      // Without this workaround the title position changes to `center`
-      // when the text is cleared
-    }
   }
 }
 

Sources/SwiftComponents/Shared/Initializable.swift

@@ -1,9 +1,9 @@
 /// A type that can be initialized with an empty initializer or with a transformation closure that modifies default parameters.
 public protocol Initializable {
-  
+
   /// Initializes a new instance with default values.
   init()
-  
+
   /// Initializes a new instance by applying a transformation closure to the default values.
   ///
   /// - Parameter transform: A closure that defines the transformation.