update UKInputField to support titlePosition

Author: mikhailChelbaev

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/InputFieldPreview.swift

@@ -46,7 +46,7 @@ struct InputFieldPreview: View {
             return self.model.placeholder != nil
           },
           set: { newValue in
-            self.model.placeholder = newValue ? "Placeholder" : nil
+            self.model.placeholder = newValue ? Self.placeholder : nil
           }
         ))
         Toggle("Required", isOn: self.$model.isRequired)
@@ -66,7 +66,7 @@ struct InputFieldPreview: View {
             return self.model.title != nil
           },
           set: { newValue in
-            self.model.title = newValue ? "Title" : nil
+            self.model.title = newValue ? Self.title : nil
           }
         ))
         Picker("Title Position", selection: self.$model.titlePosition) {
@@ -87,9 +87,12 @@ struct InputFieldPreview: View {
     }
   }
 
+  private static let title = "Title"
+  private static let placeholder = "Placeholder"
   private static var initialModel: InputFieldVM {
     return .init {
-      $0.title = "Title"
+      $0.title = Self.title
+      $0.placeholder = Self.placeholder
     }
   }
 }

Sources/ComponentsKit/Components/InputField/Models/InputFieldVM.swift

@@ -108,10 +108,6 @@ extension InputFieldVM {
     }
   }
   var spacing: CGFloat {
-    guard self.title.isNotNilAndEmpty else {
-      return 0
-    }
-
     switch self.titlePosition {
     case .inside:
       return 12
@@ -203,14 +199,16 @@ extension InputFieldVM {
     }
     return attributedString
   }
+  func shouldUpdateTitlePosition(_ oldModel: Self) -> Bool {
+    return self.titlePosition != oldModel.titlePosition
+  }
   func shouldUpdateLayout(_ oldModel: Self) -> Bool {
     return self.size != oldModel.size
     || self.horizontalPadding != oldModel.horizontalPadding
     || self.spacing != oldModel.spacing
     || self.cornerRadius != oldModel.cornerRadius
-  }
-  func shouldUpdateCornerRadius(_ oldModel: Self) -> Bool {
-    return self.cornerRadius != oldModel.cornerRadius
+    || self.titlePosition != oldModel.titlePosition
+    || self.title.isNilOrEmpty != oldModel.title.isNilOrEmpty
   }
 }
 

Sources/ComponentsKit/Components/InputField/UKInputField.swift

@@ -3,7 +3,7 @@ import UIKit
 
 /// A UIKit component that displays a field to input a text.
 open class UKInputField: UIView, UKComponent {
-  // MARK: Properties
+  // MARK: Public Properties
 
   /// A closure that is triggered when the text changes.
   public var onValueChange: (String) -> Void
@@ -28,15 +28,23 @@ open class UKInputField: UIView, UKComponent {
     }
   }
 
-  private var titleLabelConstraints: LayoutConstraints?
-  private var inputFieldConstraints: LayoutConstraints?
-
   // MARK: Subviews
 
   /// A label that displays the title from the model.
   public var titleLabel = UILabel()
   /// An underlying text field from the standard library.
   public var textField = UITextField()
+  /// A view that contains `horizontalStackView` and `titleLabel` whet it is outside.
+  public var textFieldContainer = UIView()
+  /// A stack view that contains `textField` and `titleLabel` whet it is inside.
+  public var horizontalStackView = UIStackView()
+  /// A stack view that contains `textFieldContainer`.
+  public var verticalStackView = UIStackView()
+
+  // MARK: Private Properties
+
+  private var textFieldContainerConstraints = LayoutConstraints()
+  private var horizontalStackViewConstraints = LayoutConstraints()
 
   // MARK: UIView Properties
 
@@ -78,10 +86,18 @@ open class UKInputField: UIView, UKComponent {
   // MARK: Setup
 
   private func setup() {
-    self.addSubview(self.titleLabel)
-    self.addSubview(self.textField)
+    self.addSubview(self.verticalStackView)
+    switch self.model.titlePosition {
+    case .inside:
+      self.horizontalStackView.addArrangedSubview(self.titleLabel)
+    case .outside:
+      self.verticalStackView.addArrangedSubview(self.titleLabel)
+    }
+    self.verticalStackView.addArrangedSubview(self.textFieldContainer)
+    self.horizontalStackView.addArrangedSubview(self.textField)
+    self.textFieldContainer.addSubview(self.horizontalStackView)
 
-    self.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(self.handleTap)))
+    self.textFieldContainer.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(self.handleTap)))
     self.textField.addTarget(self, action: #selector(self.handleTextChange), for: .editingChanged)
 
     if #available(iOS 17.0, *) {
@@ -102,46 +118,48 @@ open class UKInputField: UIView, UKComponent {
   // MARK: Style
 
   private func style() {
-    Self.Style.mainView(self, model: self.model)
+    Self.Style.textFieldContainer(self.textFieldContainer, model: self.model)
+    Self.Style.horizontalStackView(self.horizontalStackView, model: self.model)
+    Self.Style.verticalStackView(self.verticalStackView, model: self.model)
     Self.Style.textField(self.textField, model: self.model)
     Self.Style.titleLabel(self.titleLabel, model: self.model)
   }
 
   // MARK: Layout
 
   private func layout() {
-    self.titleLabelConstraints = self.titleLabel.leading(self.model.horizontalPadding)
-    self.titleLabel.centerVertically()
+    self.verticalStackView.allEdges()
 
-    self.textField.trailing(self.model.horizontalPadding)
-    self.textField.vertically()
+    self.textFieldContainerConstraints = self.textFieldContainer.height(self.model.height)
+    self.textFieldContainer.horizontally()
 
-    self.inputFieldConstraints = self.textField.after(
-      self.titleLabel,
-      padding: self.model.spacing
-    )
+    self.horizontalStackView.vertically()
+    self.horizontalStackViewConstraints = self.horizontalStackView.horizontally(self.model.horizontalPadding)
 
     self.textField.setContentHuggingPriority(.defaultLow, for: .horizontal)
     self.titleLabel.setContentHuggingPriority(.defaultHigh, for: .horizontal)
   }
 
-  open override func layoutSubviews() {
-    super.layoutSubviews()
-
-    self.updateCornerRadius()
-  }
-
   // MARK: Update
 
   public func update(_ oldModel: InputFieldVM) {
     guard self.model != oldModel else { return }
 
     self.style()
 
-    self.inputFieldConstraints?.leading?.constant = self.model.spacing
-    self.titleLabelConstraints?.leading?.constant = self.model.horizontalPadding
-    if self.model.shouldUpdateCornerRadius(oldModel) {
-      self.updateCornerRadius()
+    self.horizontalStackViewConstraints.leading?.constant = self.model.horizontalPadding
+    self.horizontalStackViewConstraints.trailing?.constant = -self.model.horizontalPadding
+    self.textFieldContainerConstraints.height?.constant = self.model.height
+
+    if self.model.shouldUpdateTitlePosition(oldModel) {
+      switch self.model.titlePosition {
+      case .inside:
+        self.verticalStackView.removeArrangedSubview(self.titleLabel)
+        self.horizontalStackView.insertArrangedSubview(self.titleLabel, at: 0)
+      case .outside:
+        self.horizontalStackView.removeArrangedSubview(self.titleLabel)
+        self.verticalStackView.insertArrangedSubview(self.titleLabel, at: 0)
+      }
     }
     if self.model.shouldUpdateLayout(oldModel) {
       self.setNeedsLayout()
@@ -169,52 +187,52 @@ open class UKInputField: UIView, UKComponent {
     } else {
       width = 10_000
     }
+
+    let height = self.verticalStackView.sizeThatFits(UIView.layoutFittingCompressedSize).height
+
     return .init(
       width: min(size.width, width),
-      height: min(size.height, self.model.height)
+      height: min(size.height, height)
     )
   }
-  
+
   open override func traitCollectionDidChange(
     _ previousTraitCollection: UITraitCollection?
   ) {
     super.traitCollectionDidChange(previousTraitCollection)
     self.handleTraitChanges()
   }
-  
+
   // MARK: Helpers
-  
-  @objc private func handleTraitChanges() {
-    Self.Style.mainView(self, model: self.model)
-  }
 
-  private func updateCornerRadius() {
-    self.layer.cornerRadius = self.model.cornerRadius.value(for: self.bounds.height)
+  @objc private func handleTraitChanges() {
+    Self.Style.textFieldContainer(self.textFieldContainer, model: self.model)
   }
 }
 
 // MARK: - Style Helpers
 
 extension UKInputField {
   fileprivate enum Style {
-    static func mainView(
+    static func textFieldContainer(
       _ view: UIView,
-      model: InputFieldVM
+      model: Model
     ) {
       view.backgroundColor = model.backgroundColor.uiColor
-      view.layer.cornerRadius = model.cornerRadius.value(for: view.bounds.height)
+      view.layer.cornerRadius = model.cornerRadius.value(for: model.height)
       view.layer.borderWidth = model.borderWidth
       view.layer.borderColor = model.borderColor.cgColor
     }
     static func titleLabel(
       _ label: UILabel,
-      model: InputFieldVM
+      model: Model
     ) {
       label.attributedText = model.nsAttributedTitle
+      label.isVisible = model.title.isNotNilAndEmpty
     }
     static func textField(
       _ textField: UITextField,
-      model: InputFieldVM
+      model: Model
     ) {
       textField.font = model.preferredFont.uiFont
       textField.textColor = model.foregroundColor.uiColor
@@ -227,5 +245,21 @@ extension UKInputField {
       textField.autocorrectionType = model.autocorrectionType
       textField.autocapitalizationType = model.autocapitalization.textAutocapitalizationType
     }
+    static func horizontalStackView(
+      _ stackView: UIStackView,
+      model: Model
+    ) {
+      stackView.axis = .horizontal
+      stackView.spacing = model.spacing
+    }
+    static func verticalStackView(
+      _ stackView: UIStackView,
+      model: Model
+    ) {
+      stackView.axis = .vertical
+      stackView.spacing = model.spacing
+      stackView.alignment = .leading
+      stackView.distribution = .fillProportionally
+    }
   }
 }