Merge pull request #1 from swiftcomponentsio/input-field

Changed the appearance of InputField components

Author: mikhailChelbaev

App/SwiftComponentsApp/SwiftComponentsApp/Previews/InputFieldPreview.swift

@@ -1,3 +1,4 @@
+import Observation
 import SwiftComponents
 import SwiftUI
 import UIKit
@@ -10,11 +11,14 @@ struct InputFieldPreview: View {
   @State private var text: String = ""
   @FocusState private var isFocused: Bool
 
+  private let inputField = UKInputField()
+  private let inputFieldDelegate = InputFieldDelegate()
+
   var body: some View {
     VStack {
       PreviewWrapper(title: "UIKit") {
         UKComponentPreview(model: self.model) {
-          UKInputField(model: self.model)
+          self.inputField
         }
       }
       PreviewWrapper(title: "SwiftUI") {
@@ -59,11 +63,7 @@ struct InputFieldPreview: View {
             return self.model.placeholder.isNotNilAndEmpty
           },
           set: { newValue in
-            if newValue {
-              self.model.placeholder = "Placeholder"
-            } else {
-              self.model.placeholder = nil
-            }
+            self.model.placeholder = newValue ? "Placeholder" : nil
           }
         ))
         Toggle("Required", isOn: self.$model.isRequired)
@@ -82,11 +82,44 @@ struct InputFieldPreview: View {
           title: "Tint Color",
           selection: self.$model.tintColor
         )
+        Toggle("Title", isOn: .init(
+          get: {
+            return self.model.title.isNotNilAndEmpty
+          },
+          set: { newValue in
+            self.model.title = newValue ? "Title" : nil
+          }
+        ))
+      }
+    }
+    .onAppear {
+      self.inputField.textField.delegate = self.inputFieldDelegate
+    }
+    .toolbar {
+      ToolbarItem(placement: .primaryAction) {
+        if self.inputFieldDelegate.isEditing || self.isFocused {
+          Button("Hide Keyboard") {
+            self.isFocused = false
+            self.inputField.resignFirstResponder()
+          }
+        }
       }
     }
   }
 }
 
+@Observable
+private final class InputFieldDelegate: NSObject, UITextFieldDelegate {
+  var isEditing: Bool = false
+
+  func textFieldDidBeginEditing(_ textField: UITextField) {
+    self.isEditing = true
+  }
+  func textFieldDidEndEditing(_ textField: UITextField) {
+    self.isEditing = false
+  }
+}
+
 #Preview {
   InputFieldPreview()
 }

Sources/SwiftComponents/InputField/Models/InputFieldTitlePosition.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() {}
@@ -88,6 +88,13 @@ extension InputFieldVM {
       return UniversalFont.Component.large
     }
   }
+  var height: CGFloat {
+    return switch self.size {
+    case .small: 40
+    case .medium: 60
+    case .large: 80
+    }
+  }
   var horizontalPadding: CGFloat {
     switch self.cornerRadius {
     case .none, .small, .medium, .large, .custom:
@@ -96,6 +103,9 @@ extension InputFieldVM {
       return 16
     }
   }
+  var spacing: CGFloat {
+    return self.title.isNotNilAndEmpty ? 12 : 0
+  }
   var backgroundColor: UniversalColor {
     if let color {
       return color.main.withOpacity(0.25)
@@ -118,56 +128,6 @@ extension InputFieldVM {
   var placeholderColor: UniversalColor {
     return self.foregroundColor.withOpacity(self.isEnabled ? 0.7 : 0.3)
   }
-  func titleColor(for position: InputFieldTitlePosition) -> UniversalColor {
-    switch position {
-    case .top:
-      return self.foregroundColor
-    case .center:
-      return self.foregroundColor.withOpacity(self.isEnabled ? 0.8 : 0.45)
-    }
-  }
-  func titleFont(for position: InputFieldTitlePosition) -> UniversalFont {
-    switch position {
-    case .top:
-      return self.preferredFont.withRelativeSize(-1)
-    case .center:
-      let relativePadding: CGFloat = switch self.size {
-      case .small: 1.5
-      case .medium: 2
-      case .large: 3
-      }
-      return self.preferredFont.withRelativeSize(relativePadding)
-    }
-  }
-}
-
-// MARK: - Layout Helpers
-
-extension InputFieldVM {
-  var inputFieldTopPadding: CGFloat {
-    switch self.size {
-    case .small: 30
-    case .medium: 34
-    case .large: 38
-    }
-  }
-  var inputFieldHeight: CGFloat {
-    switch self.size {
-    case .small: 26
-    case .medium: 28
-    case .large: 30
-    }
-  }
-  var verticalPadding: CGFloat {
-    switch self.size {
-    case .small: 12
-    case .medium: 14
-    case .large: 16
-    }
-  }
-  var height: CGFloat {
-    return self.inputFieldHeight + self.inputFieldTopPadding + self.verticalPadding
-  }
 }
 
 // MARK: - UIKit Helpers
@@ -182,13 +142,17 @@ extension InputFieldVM {
       .foregroundColor: self.placeholderColor.uiColor
     ])
   }
-  func nsAttributedTitle(for position: InputFieldTitlePosition) -> NSAttributedString {
+  var nsAttributedTitle: NSAttributedString? {
+    guard let title else {
+      return nil
+    }
+
     let attributedString = NSMutableAttributedString()
     attributedString.append(NSAttributedString(
-      string: self.title,
+      string: title,
       attributes: [
-        .font: self.titleFont(for: position).uiFont,
-        .foregroundColor: self.titleColor(for: position).uiColor
+        .font: self.preferredFont.uiFont,
+        .foregroundColor: self.foregroundColor.uiColor
       ]
     ))
     if self.isRequired {
@@ -201,7 +165,7 @@ extension InputFieldVM {
       attributedString.append(NSAttributedString(
         string: "*",
         attributes: [
-          .font: self.titleFont(for: position).uiFont,
+          .font: self.preferredFont.uiFont,
           .foregroundColor: UniversalColor.danger.uiColor
         ]
       ))
@@ -211,36 +175,22 @@ extension InputFieldVM {
   func shouldUpdateLayout(_ oldModel: Self) -> Bool {
     return self.size != oldModel.size
     || self.horizontalPadding != oldModel.horizontalPadding
+    || self.spacing != oldModel.spacing
+    || self.cornerRadius != oldModel.cornerRadius
   }
 }
 
-// MARK: - UIKit Helpers
+// MARK: - SwiftUI Helpers
 
 extension InputFieldVM {
   var autocorrectionType: UITextAutocorrectionType {
     return self.isAutocorrectionEnabled ? .yes : .no
   }
-  func attributedTitle(
-    for position: InputFieldTitlePosition
-  ) -> AttributedString {
-    var attributedString = AttributedString()
-
-    var attributedTitle = AttributedString(self.title)
-    attributedTitle.font = self.titleFont(for: position).font
-    attributedTitle.foregroundColor = self.titleColor(for: position).uiColor
-    attributedString.append(attributedTitle)
-
-    if self.isRequired {
-      var space = AttributedString(" ")
-      space.font = .systemFont(ofSize: 5)
-      attributedString.append(space)
-
-      var requiredSign = AttributedString("*")
-      requiredSign.font = self.titleFont(for: position).font
-      requiredSign.foregroundColor = UniversalColor.danger.uiColor
-      attributedString.append(requiredSign)
+  var attributedTitle: AttributedString? {
+    guard let nsAttributedTitle else {
+      return nil
     }
 
-    return attributedString
+    return AttributedString(nsAttributedTitle)
   }
 }

Sources/SwiftComponents/InputField/Models/InputFieldVM.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 let title = self.model.attributedTitle {
+        Text(title)
+          .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
-    }
   }
 }