Merge pull request #4 from youjinp/develop

Update currencyTextField and readme

Author: youjinp

.DS_Store

@@ -1,35 +1,112 @@
-# SwiftUIKit, a collection of missing SwiftUI components
+![SwiftUIKit](https://user-images.githubusercontent.com/15708500/86090069-83443900-bafd-11ea-8692-41713679bae7.png)
 
-There is an example app at `SwiftUIKitExampleApp` which can be built and run.
+# SwiftUIKit
+
+A collection of components that will simplify and accelerate your iOS development.
+
+## Components
+
+1. [CurrencyTextField](#1-currencytextfield)
+1. [AdaptToKeyboard](#2-adapttokeyboard)
+1. [ContactPicker](#3-contactpicker)
 
-# CurrencyTextField
 ## Demo
+
+There is an example app at `SwiftUIKitExampleApp` which can be built and run. Just clone this repo and run it.
+
+# 1. CurrencyTextField
+
+## Demo
+
 ![Currency Text Field Demo](demo/currencyTextField.gif)
 
 ## Description
+
 Real time formatting of users input into currency format.
 
 ## Usage
+
 ```swift
+import SwiftUIKit
+
 struct ContentView: View {
- @State private var value = 0.0
- var body: some View {
- CurrencyTextField("Amount", value: self.$value)
- .font(.largeTitle)
- .multilineTextAlignment(TextAlignment.center)
- }
+ @State private var value = 0.0
+
+ var body: some View {
+ CurrencyTextField("Amount", value: self.$value)
+ .font(.largeTitle)
+ .multilineTextAlignment(TextAlignment.center)
+ }
 }
 ```
 
-# AdaptToKeyboard
+# 2. AdaptToKeyboard
+
 ## Demo
+
 ![Adapt to keyboard demo](demo/keyboardAdapt.gif)
 
 ## Description
+
 Animate view's position when keyboard is shown / hidden
 
 ## Usage
+
+```swift
+import SwiftUIKit
+
+struct ContentView: View {
+ var body: some View {
+ VStack {
+ Spacer()
+ Button(action: {}) {
+ Text("Hi")
+ .adaptToKeyboard()
+ }
+ }
+ }
+}
+```
+
+# 3. ContactPicker
+
+## Demo
+
+![Contact picker demo](https://user-images.githubusercontent.com/15708500/86092942-55152800-bb02-11ea-9065-623a1a80d808.gif)
+
+## Description
+
+SwiftUI doesn't work well with `CNContactPickerViewController` if you just put it inside a `UIViewControllerRepresentable`. See this [stackoverflow post](https://stackoverflow.com/questions/57246685/uiviewcontrollerrepresentable-and-cncontactpickerviewcontroller/57621666#57621666). With `ContactPicker` here its just a one liner.
+
+To enable multiple selection use `onSelectContacts` instead.
+
+## Usage
+
 ```swift
-someView()
- .adaptToKeyboard()
+import SwiftUIKit
+
+struct ContentView: View {
+ @State var showPicker = false
+
+ var body: some View {
+ ZStack {
+ // This is just a dummy view to present the contact picker,
+ // it won't display anything, so place this anywhere.
+ // Here I have created a ZStack and placed it beneath the main view.
+ ContactPicker(
+ showPicker: $showPicker,
+ onSelectContact: {c in
+ self.contact = c
+ }
+ )
+ VStack {
+ Button(action: {
+ self.showPicker.toggle()
+ }) {
+ Text("Pick a contact")
+ }
+ }
+ }
+ }
+}
 ```

README.md

@@ -11,8 +11,8 @@ import UIKit
 public struct CurrencyTextField: UIViewRepresentable {
 
  @Binding var value: Double?
- 
- public typealias UIViewType = UITextField
+ private var isResponder: Binding<Bool>?
+ private var tag: Int
 
  private var placeholder: String
 
@@ -31,6 +31,7 @@ public struct CurrencyTextField: UIViewRepresentable {
  private var isUserInteractionEnabled: Bool
  private var clearsOnBeginEditing: Bool
 
+ private var onReturn: () -> Void
  private var onEditingChanged: (Bool) -> Void
 
  @Environment(\.layoutDirection) private var layoutDirection: LayoutDirection
@@ -39,6 +40,9 @@ public struct CurrencyTextField: UIViewRepresentable {
  public init(
  _ placeholder: String = "",
  value: Binding<Double?>,
+ isResponder: Binding<Bool>? = nil,
+ tag: Int = 0,
+ 
  font: UIFont? = nil,
  foregroundColor: UIColor? = nil,
  accentColor: UIColor? = nil,
@@ -51,10 +55,14 @@ public struct CurrencyTextField: UIViewRepresentable {
  isSecure: Bool = false,
  isUserInteractionEnabled: Bool = true,
  clearsOnBeginEditing: Bool = false,
+ onReturn: @escaping () -> Void = {},
  onEditingChanged: @escaping (Bool) -> Void = { _ in }
  ) {
  self._value = value
  self.placeholder = placeholder
+ self.isResponder = isResponder
+ self.tag = tag
+ 
  self.font = font
  self.foregroundColor = foregroundColor
  self.accentColor = accentColor
@@ -67,24 +75,21 @@ public struct CurrencyTextField: UIViewRepresentable {
  self.isSecure = isSecure
  self.isUserInteractionEnabled = isUserInteractionEnabled
  self.clearsOnBeginEditing = clearsOnBeginEditing
+ self.onReturn = onReturn
  self.onEditingChanged = onEditingChanged
  }
 
- public func makeCoordinator() -> CurrencyTextField.Coordinator {
- Coordinator(value: $value){ flag in
- self.onEditingChanged(flag)
- }
- }
- 
  public func makeUIView(context: UIViewRepresentableContext<CurrencyTextField>) -> UITextField {
 
  let textField = UITextField()
  textField.delegate = context.coordinator
- textField.addDoneButtonOnKeyboard()
 
  textField.addTarget(context.coordinator, action: #selector(context.coordinator.textFieldEditingDidBegin(_:)), for: .editingDidBegin)
  textField.addTarget(context.coordinator, action: #selector(context.coordinator.textFieldEditingDidEnd(_:)), for: .editingDidEnd)
 
+ // tag
+ textField.tag = self.tag
+ 
  // font
  if let f = context.environment.font {
  switch f {
@@ -156,14 +161,33 @@ public struct CurrencyTextField: UIViewRepresentable {
  return textField
  }
 
+ public func makeCoordinator() -> CurrencyTextField.Coordinator {
+ Coordinator(value: $value, isResponder: self.isResponder, onReturn: self.onReturn){ flag in
+ self.onEditingChanged(flag)
+ }
+ }
+ 
  public func updateUIView(_ textField: UITextField, context: UIViewRepresentableContext<CurrencyTextField>) {
+ 
+ // value
  if self.value != context.coordinator.internalValue {
  if self.value == nil {
  textField.text = nil
  } else {
  textField.text = Formatter.currency.string(from: NSNumber(value: self.value!))
  }
  }
+ 
+ // set first responder ONCE
+ // other times, let textfield handle it
+ if self.isResponder?.wrappedValue == true && !textField.isFirstResponder && !context.coordinator.didBecomeFirstResponder {
+ textField.becomeFirstResponder()
+ context.coordinator.didBecomeFirstResponder = true
+ }
+ 
+ // to dismiss, use dismissKeyboard()
+ // don't uiView.resignFirstResponder()
+ // otherwise many uibugs when using NavigationView
  }
 
  public static func dismantleUIView(_ uiView: UITextField, coordinator: CurrencyTextField.Coordinator) {
@@ -172,13 +196,18 @@ public struct CurrencyTextField: UIViewRepresentable {
 
  public class Coordinator: NSObject, UITextFieldDelegate {
  @Binding var value: Double?
+ private var isResponder: Binding<Bool>?
+ private var onReturn: ()->()
  var internalValue: Double?
  var onEditingChanged: (Bool)->()
+ var didBecomeFirstResponder = false
 
- init(value: Binding<Double?>, onEditingChanged: @escaping (Bool) -> Void = { _ in }) {
+ init(value: Binding<Double?>, isResponder: Binding<Bool>?, onReturn: @escaping () -> Void = {}, onEditingChanged: @escaping (Bool) -> Void = { _ in }) {
  print("coordinator init")
  _value = value
  internalValue = value.wrappedValue
+ self.isResponder = isResponder
+ self.onReturn = onReturn
  self.onEditingChanged = onEditingChanged
  }
 
@@ -251,17 +280,33 @@ public struct CurrencyTextField: UIViewRepresentable {
  return true
  }
 
+ public func textFieldDidBeginEditing(_ textField: UITextField) {
+ DispatchQueue.main.async {
+ self.isResponder?.wrappedValue = true
+ }
+ }
+ 
+ public func textFieldDidEndEditing(_ textField: UITextField) {
+ DispatchQueue.main.async {
+ self.isResponder?.wrappedValue = false
+ }
+ }
+ 
  @objc func textFieldEditingDidBegin(_ textField: UITextField){
  onEditingChanged(true)
  }
  @objc func textFieldEditingDidEnd(_ textField: UITextField){
  onEditingChanged(false)
  }
 
- public func textFieldDidEndEditing(_ textField: UITextField, reason: UITextField.DidEndEditingReason) {
- if reason == .committed {
+ public func textFieldShouldReturn(_ textField: UITextField) -> Bool {
+ if let nextField = textField.superview?.superview?.viewWithTag(textField.tag + 1) as? UITextField {
+ nextField.becomeFirstResponder()
+ } else {
  textField.resignFirstResponder()
  }
+ self.onReturn()
+ return true
  }
  }
 }
@@ -350,36 +395,3 @@ fileprivate extension NumberFormatter {
  self.numberStyle = numberStyle
  }
 }
-
-fileprivate extension UITextField{
- 
- @IBInspectable var doneAccessory: Bool{
- get{
- return self.doneAccessory
- }
- set (hasDone) {
- if hasDone{
- addDoneButtonOnKeyboard()
- }
- }
- }
- 
- func addDoneButtonOnKeyboard(){
- let doneToolbar: UIToolbar = UIToolbar(frame: CGRect.init(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 50))
- doneToolbar.barStyle = .default
- 
- let flexSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
- let done: UIBarButtonItem = UIBarButtonItem(title: "Done", style: .done, target: self, action: #selector(self.doneButtonAction))
- 
- let items = [flexSpace, done]
- doneToolbar.items = items
- doneToolbar.sizeToFit()
- 
- self.inputAccessoryView = doneToolbar
- }
- 
- @objc func doneButtonAction(){
- self.resignFirstResponder()
- }
-}
-

Sources/SwiftUIKit/views/CurrencyTextField.swift

@@ -12,33 +12,26 @@ import SwiftUIKit
 struct CurrencyTextFieldDemoView: View {
 
  @State private var value: Double? = 0.0
- @State private var offset: CGFloat = 0
+ @State private var focus = false
 
  var body: some View {
- GeometryReader { geometry in
- VStack {
- CurrencyTextField("Amount", value: self.$value, onEditingChanged: { flag in
- self.offset = flag ? -150 : 0
- })
- .font(.largeTitle)
- .multilineTextAlignment(TextAlignment.center)
- .padding()
- .background(
- RoundedRectangle(cornerRadius: 10)
- .fill(Color.white))
- .shadow(radius: 15)
- .padding()
- Button(action: {
- print("\(self.value)")
- UIApplication.shared.resignFirstResponder()
- }) {
- Text("Print")
- }
- }.frame(width: geometry.size.width, height: geometry.size.height)
- .edgesIgnoringSafeArea(.all)
- .background(Color(hue: 0, saturation: 0, brightness: 0.9))
- 
- }.offset(y: self.offset)
+ VStack {
+ CurrencyTextField("Amount", value: self.$value, isResponder: $focus)
+ .font(.largeTitle)
+ .multilineTextAlignment(TextAlignment.center)
+ Button(action: {
+ print("\(String(describing: self.value))")
+ }) {
+ Text("Print")
+ }
+ Spacer()
+ }.padding([.top], 40)
+ .contentShape(Rectangle())
+ .dismissKeyboardOnSwipe()
+ .dismissKeyboardOnTap()
+ .onAppear {
+ self.focus = true
+ }
  }
-
+ 
 }