Add case with TextField (#31)

Oleksandr Zarochintsev · erichoracek · Oleksandr Zarochintsev · web-flow · commit edaad3bf89f4 · 2021-05-07T15:57:48.000-07:00
* Add text field case

* Update CHANGELOG.md

* Update CHANGELOG.md

Co-authored-by: Eric Horacek &lt;horacek.eric@gmail.com&gt;

* Update Example/EpoxyExample/ViewControllers/TextFieldViewController.swift

Co-authored-by: Eric Horacek &lt;horacek.eric@gmail.com&gt;

* Update Example/EpoxyExample/ViewControllers/TextFieldViewController.swift

Co-authored-by: Eric Horacek &lt;horacek.eric@gmail.com&gt;

* Update TextFieldViewController.swift

* Update Example.swift

* Run the linter

Co-authored-by: Eric Horacek &lt;horacek.eric@gmail.com&gt;
Co-authored-by: Oleksandr Zarochintsev &lt;oleksandr.zarochintsev@ext.airbnb.com&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased](https://github.com/airbnb/epoxy-ios/compare/0.3.0...HEAD)
 
+### Added
+- Added an example with text field to show how can we use `avoidsKeyboard` feature
+
 ## [0.3.0](https://github.com/airbnb/epoxy-ios/compare/0.2.0...0.3.0) - 2021-04-23
 
 ### Added
diff --git a/Example/EpoxyExample.xcodeproj/project.pbxproj b/Example/EpoxyExample.xcodeproj/project.pbxproj
@@ -21,6 +21,8 @@
 		25FEB79225AE431100F8EFBD /* MainViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 25FEB79125AE431100F8EFBD /* MainViewController.swift */; };
 		2E8B007623F47E7E00D82A31 /* CustomSizingView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2E8B007523F47E7E00D82A31 /* CustomSizingView.swift */; };
 		2E8B007823F4800000D82A31 /* CustomSelfSizingContentViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2E8B007723F4800000D82A31 /* CustomSelfSizingContentViewController.swift */; };
+		A5AD02A72637CBF9007261BC /* TextFieldRow.swift in Sources */ = {isa = PBXBuildFile; fileRef = A5AD02A62637CBF9007261BC /* TextFieldRow.swift */; };
+		A5AD02AA2637CE5E007261BC /* TextFieldViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = A5AD02A92637CE5E007261BC /* TextFieldViewController.swift */; };
 		A61AFF592602B86E005356A8 /* Example.swift in Sources */ = {isa = PBXBuildFile; fileRef = A61AFF582602B86E005356A8 /* Example.swift */; };
 		A61AFF5C2602B8D7005356A8 /* ReadmeExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = A61AFF5B2602B8D7005356A8 /* ReadmeExample.swift */; };
 		A61AFF5F2602B99E005356A8 /* TapMeViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = A61AFF5E2602B99E005356A8 /* TapMeViewController.swift */; };
@@ -56,6 +58,8 @@
 		25FEB79125AE431100F8EFBD /* MainViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MainViewController.swift; sourceTree = "<group>"; };
 		2E8B007523F47E7E00D82A31 /* CustomSizingView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CustomSizingView.swift; sourceTree = "<group>"; };
 		2E8B007723F4800000D82A31 /* CustomSelfSizingContentViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CustomSelfSizingContentViewController.swift; sourceTree = "<group>"; };
+		A5AD02A62637CBF9007261BC /* TextFieldRow.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TextFieldRow.swift; sourceTree = "<group>"; };
+		A5AD02A92637CE5E007261BC /* TextFieldViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TextFieldViewController.swift; sourceTree = "<group>"; };
 		A61AFF582602B86E005356A8 /* Example.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Example.swift; sourceTree = "<group>"; };
 		A61AFF5B2602B8D7005356A8 /* ReadmeExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ReadmeExample.swift; sourceTree = "<group>"; };
 		A61AFF5E2602B99E005356A8 /* TapMeViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TapMeViewController.swift; sourceTree = "<group>"; };
@@ -136,6 +140,7 @@
 				25FEB79125AE431100F8EFBD /* MainViewController.swift */,
 				2518441825B8E35A000B801F /* FlowLayoutViewController.swift */,
 				A667554325D3028D00AC4FC8 /* CardStackViewController.swift */,
+				A5AD02A92637CE5E007261BC /* TextFieldViewController.swift */,
 				A61AFF612602BA20005356A8 /* Helpers */,
 			);
 			path = ViewControllers;
@@ -145,6 +150,7 @@
 			isa = PBXGroup;
 			children = (
 				A6F0928A25B9E983007D902B /* TextRow.swift */,
+				A5AD02A62637CBF9007261BC /* TextFieldRow.swift */,
 				2E8B007523F47E7E00D82A31 /* CustomSizingView.swift */,
 				25B6766125AE898B00C00B20 /* ImageRow.swift */,
 				25B6766725AFA67100C00B20 /* ButtonRow.swift */,
@@ -285,6 +291,7 @@
 			files = (
 				A633B24625B6507A0095E464 /* ImageMarquee.swift in Sources */,
 				25627B95232ABF0F00D7327A /* CompositionalLayoutViewController.swift in Sources */,
+				A5AD02A72637CBF9007261BC /* TextFieldRow.swift in Sources */,
 				BACF3E8C23DBB8DC0001CCD1 /* ShuffleViewController.swift in Sources */,
 				25627B93232ABF0F00D7327A /* AppDelegate.swift in Sources */,
 				25B6766825AFA67100C00B20 /* ButtonRow.swift in Sources */,
@@ -310,6 +317,7 @@
 				2518441925B8E35A000B801F /* FlowLayoutViewController.swift in Sources */,
 				259863A225AE47710065024B /* UICollectionViewCompositionalLayout+List.swift in Sources */,
 				A667554125D2FEC400AC4FC8 /* CardContainer.swift in Sources */,
+				A5AD02AA2637CE5E007261BC /* TextFieldViewController.swift in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
diff --git a/Example/EpoxyExample/Data/Example.swift b/Example/EpoxyExample/Data/Example.swift
@@ -10,6 +10,7 @@ enum Example: CaseIterable {
   case flowLayout
   case shuffle
   case customSelfSizing
+  case textField
 
   // MARK: Internal
 
@@ -29,6 +30,8 @@ enum Example: CaseIterable {
       return "Flow Layout demo"
     case .cardStack:
       return "Card Stack"
+    case .textField:
+      return "Text Field"
     }
   }
 
@@ -48,6 +51,8 @@ enum Example: CaseIterable {
       return "A CollectionView with a UICollectionViewFlowLayout"
     case .cardStack:
       return "A CollectionView with BarStackView items that have a card drawn around each stack"
+    case .textField:
+      return "An example that combines collections, bars, and text field with keyboard avoidance"
     }
   }
 }
diff --git a/Example/EpoxyExample/ViewControllers/MainViewController.swift b/Example/EpoxyExample/ViewControllers/MainViewController.swift
@@ -96,6 +96,8 @@ final class MainViewController: NavigationController {
       viewController = FlowLayoutViewController()
     case .cardStack:
       viewController = CardStackViewController()
+    case .textField:
+      viewController = TextFieldViewController()
     }
     viewController.title = example.title
     return viewController
diff --git a/Example/EpoxyExample/ViewControllers/TextFieldViewController.swift b/Example/EpoxyExample/ViewControllers/TextFieldViewController.swift
@@ -0,0 +1,50 @@
+// Created by oleksandr_zarochintsev on 4/26/21.
+// Copyright © 2021 Airbnb Inc. All rights reserved.
+
+import Epoxy
+import UIKit
+
+final class TextFieldViewController: CollectionViewController {
+
+  // MARK: Lifecycle
+
+  init() {
+    super.init(layout: UICollectionViewCompositionalLayout.listNoDividers)
+    setSections([.init(items: [textFieldRowItem])], animated: true)
+  }
+
+  // MARK: Internal
+
+  override func viewDidLoad() {
+    super.viewDidLoad()
+    bottomBarInstaller.install()
+  }
+
+  // MARK: Private
+
+  private enum DataID {
+    case username
+    case button
+  }
+
+  private lazy var bottomBarInstaller = BottomBarInstaller(
+    viewController: self,
+    avoidsKeyboard: true,
+    bars: [buttonRowBar])
+
+  private var textFieldRowItem: ItemModeling {
+    TextFieldRow.itemModel(
+      dataID: DataID.username,
+      content: .init(placeholder: "Username"),
+      style: .base)
+  }
+
+  private var buttonRowBar: BarModeling {
+    ButtonRow.barModel(
+      dataID: DataID.button,
+      content: .init(text: "Submit"),
+      behaviors: .init(didTap: { [weak self] in
+        self?.view.endEditing(true)
+      }))
+  }
+}
diff --git a/Example/EpoxyExample/Views/TextFieldRow.swift b/Example/EpoxyExample/Views/TextFieldRow.swift
@@ -0,0 +1,78 @@
+// Created by oleksandr_zarochintsev on 4/26/21.
+// Copyright © 2021 Airbnb Inc. All rights reserved.
+
+import Epoxy
+import UIKit
+
+final class TextFieldRow: UIView, EpoxyableView {
+
+  // MARK: Lifecycle
+
+  init(style: Style) {
+    self.style = style
+    super.init(frame: .zero)
+    translatesAutoresizingMaskIntoConstraints = false
+    setUpViews()
+    setUpConstraints()
+  }
+
+  required init?(coder aDecoder: NSCoder) {
+    fatalError("init(coder:) has not been implemented")
+  }
+
+  // MARK: Internal
+
+  enum Style {
+    case base
+  }
+
+  struct Content: Equatable {
+    var text: String?
+    var placeholder: String?
+  }
+
+  func setContent(_ content: Content, animated: Bool) {
+    text = content.text
+    placeholder = content.placeholder
+  }
+
+  // MARK: Private
+
+  private let style: Style
+  private let textField = UITextField()
+
+  private var text: String? {
+    get { textField.text }
+    set {
+      guard textField.text != newValue else { return }
+      textField.text = newValue
+    }
+  }
+
+  private var placeholder: String? {
+    get { textField.placeholder }
+    set {
+      guard textField.placeholder != newValue else { return }
+      textField.placeholder = newValue
+    }
+  }
+
+  private func setUpViews() {
+    setUpTextField()
+  }
+
+  private func setUpTextField() {
+    textField.translatesAutoresizingMaskIntoConstraints = false
+    textField.borderStyle = .roundedRect
+    addSubview(textField)
+  }
+
+  private func setUpConstraints() {
+    NSLayoutConstraint.activate([
+      textField.topAnchor.constraint(equalTo: topAnchor, constant: 16),
+      textField.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 16),
+      textField.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -16),
+      textField.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -16),
+    ])
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,7 @@ enum Example: CaseIterable {`
`10`	`10`	`case flowLayout`
`11`	`11`	`case shuffle`
`12`	`12`	`case customSelfSizing`
	`13`	`+ case textField`
`13`	`14`
`14`	`15`	`// MARK: Internal`
`15`	`16`
`@@ -29,6 +30,8 @@ enum Example: CaseIterable {`
`29`	`30`	`return "Flow Layout demo"`
`30`	`31`	`case .cardStack:`
`31`	`32`	`return "Card Stack"`
	`33`	`+ case .textField:`
	`34`	`+ return "Text Field"`
`32`	`35`	`}`
`33`	`36`	`}`
`34`	`37`
`@@ -48,6 +51,8 @@ enum Example: CaseIterable {`
`48`	`51`	`return "A CollectionView with a UICollectionViewFlowLayout"`
`49`	`52`	`case .cardStack:`
`50`	`53`	`return "A CollectionView with BarStackView items that have a card drawn around each stack"`
	`54`	`+ case .textField:`
	`55`	`+ return "An example that combines collections, bars, and text field with keyboard avoidance"`
`51`	`56`	`}`
`52`	`57`	`}`
`53`	`58`	`}`
Original file line number	Diff line number	Diff line change
`@@ -96,6 +96,8 @@ final class MainViewController: NavigationController {`
`96`	`96`	`viewController = FlowLayoutViewController()`
`97`	`97`	`case .cardStack:`
`98`	`98`	`viewController = CardStackViewController()`
	`99`	`+ case .textField:`
	`100`	`+ viewController = TextFieldViewController()`
`99`	`101`	`}`
`100`	`102`	`viewController.title = example.title`
`101`	`103`	`return viewController`