Currency text field formatter available for UIKit and SwiftUI 💶✏️

New fields begin with no contents, and editing fields begin with some content to be edited.

Why?

Help us better see how the field reacts in multiple currencies and field configurations all at once.

Changes

Added 5 text fields in various configurations of initial values to just the example app.

Tests

Run the example app.

Issue (optional) add link to the issue here

All fields that do not contain initial values, but also have decimal values configured, where hasDecimal is set true, misbehave when the user types "1" then "2" in those fields.

In Euros the value result is "10,02 €". The expected result is "0,12 €". In Dollars the value result is "$10.02". In Dollars the value result is "$0.12"

So far I haven't noticed any other problems with editing or cursor.

Why?

I discovered that setting a minimum dollar amount of 1 caused an extraneous 1 to appended to the user entered value on the first key press. This was caused by formatting, and enforcement of the minimum value, being applied to an empty field.

I found that cursor handling was not working well. The cursor was leaping forward and backward 2 positions while entering and editing values.

Changes

Do not apply formatting to empty text from the text field. Only apply to the result of appending the newly entered character.

To fix the cursor position I calculate the difference between the previous text and the newly formatted text and move the cursor to its correct new position by wrapping all text modifying actions in a cursor handler.

Tests

To create the issue start in the Example ViewController and change the formatter setup: $0.minValue = 1 $0.currency = .dollar $0.locale = CurrencyLocale.englishUnitedStates

For the cursor testing I set formatter maxValue = 100000000, then I entered 12345678 in the example field. I then moved the cursor around with both the mouse and the arrow keys and used the delete key followed by a new number.

We are currently using this new code in an enterprise app and it works great.

Issue (optional) add link to the issue here

What problems I want to solve?

If the CurrencyFormatter currency value is changed and re-rendered, the CurrencyTextField does not update with the new currency value.

Example:

struct SomeView: View {
    @State var currency: String
    @State var text: String
    @State var unformatted: String?
    @State var input: Double?
    
    var body: some View {
        Picker("Currency", selection: $currency) {
            ForEach(["EUR", "GBP", "USD"], id: \.self) { currency in
                Text(currency)
            }
        }
        CurrencyTextField(
            configuration: .init(
                placeholder: "0",
                text: $text,
                unformattedText: $unformatted,
                inputAmount: $input,
                formatter: CurrencyFormatter {
                    // HERE the View is not updated when `$currency` changes
                    $0.currency = Currency(rawValue: currency)!
                },
                textFieldConfiguration: { uiTextField in
                    // …
                }
            )
        )
    }
}

What value it delivers?

It would allow to dynamically change the currency of the CurrencyTextField

Tasks

TBD

Dependecies / References

No dependencies and/or references by now.

Luckily there is a uiTextField callback provided and I can set it up by doing this, but it's very ugly

textFieldConfiguration: { uiTextField in
                                DispatchQueue.main.async {
                                    if !becomeFirstResponderCalled {
                                        uiTextField.becomeFirstResponder()
                                    }
                                    becomeFirstResponderCalled = true
                                }
                            }

If we can use it with https://developer.apple.com/documentation/swiftui/link/focused(_:)?changes=latest_minor, then great~~

What problems I want to solve?

The functionality provided by CurrencyText should be available not only on UIKit, but also on SwiftUI.

I imagine CurrencyFormatter can still be used, but a separate library must be created to support using a currency formatter along with SwiftUI's TextField.

What problems I want to solve?

Awesome Library The decimal place is recognized as values e.g

1,200.00 is interpreted as 120000 which is wrong. Can there be a fix to this please

Description

As reported:

The starting cursor positioning code hasn't been working for us when we fill the text field with a formatted currency string so the user can edit it. Under this condition, when the user taps the field the initial cursor position is forced to be somewhere in the middle of the string. So something similar to this "$123,|456".

Setup to reproduce the issue: $0.minValue = 1 $0.currency = .dollar $0.locale = CurrencyLocale.englishUnitedStates $0.maxValue = 100000000 Text entered in the filed: 12345678

Dependecies / References

Reported by @CGKarnlund on #59

Why?

Trying to fully resolve #87

Changes

Breaking: Make the formatter a Binding property on CurrencyTextFieldConfiguration, so changing it propagates an update on SwiftUI and then on updating the CurrencyTextField content.

WIP

• Still evaluating and testing the changes
• Evaluating making bits of CurrencyFormatter Bindings in isolation, which would require a more complex update of the library and might be avoided at this moment

Tests

Tests updated to cover the scenario

Why?

#87

Changes

Fix WrappedTextFiled to update the formatter when updateConfigurationIfNeeded gets called. This aims to ensure SwiftUI updates have an effect on formatter changes.

Tests

Added a test to cover the scenario

Why?

To provide a better API for making CurrencyTextField the first responder in SwiftUI.

Context

CurrencyTextField is currently bridged from UIKit to SwiftUI, so iOS 15's focus API doesn't work for it. The only way to make a CurrencyTextField the first responder programmatically is as indicated by YeungKC on #81:

textFieldConfiguration: { uiTextField in
    DispatchQueue.main.async {
        if !becomeFirstResponderCalled {
            uiTextField.becomeFirstResponder()
        }
        becomeFirstResponderCalled = true
    }
}

which is error prone and ugly.

Changes

This PR adds a new property to CurrencyTextFieldConfiguration called hasFocus, an OptionalBinding to drive an listen to the first responder state of a CurrencyTextField wrapped UITextField.

The usage is as follows:

struct SwiftUIExampleView2: View {
    @State private var hasFocus: Bool? = false // or this initially as true
    @State private var text = ""

    var body: some View {
        CurrencyTextField(
            configuration: .init(
                placeholder: "type here...",
                text: $text,
                hasFocus: $hasFocus,
                formatter: .default,
                textFieldConfiguration: { uiTextField in
                    uiTextField.borderStyle = .roundedRect
                    uiTextField.font = UIFont.preferredFont(forTextStyle: .body)
                },
                onEditingChanged: { isEditing in
                    print("onEditingChanged: \(isEditing)")
                },
                onCommit: {
                    print("onCommit")
                }
            )
        )
        .onAppear {
            hasFocus = true
        }
    }
}

Tests

Tests were updated and CurrencyTextFieldConfigurationTests was extended.

Related issue: #81

Changes

Introduce CurrencyTextField that conforms to UIViewRepresentable and bridges the UIKit implementation to SwiftUI, by creating UITextField that has a CurrencyUITextFieldDelegate instance as delegate.

Decision context:

• Bridging UIKit was needed since unfortunately Apple doesn't provide API for changing the selectedTextRange on TextField yet, which compromised a vanilla SwiftUI implementation given that defining the selected text range is important, mostly for formatters configured with currencies that have the currency symbol at the end
• I wanted to make it possible to use CurrencyTextField without having to import UIKit, but fully wrapping UITextField wasn't feasible since once again Apple doesn't provide API to go from SwiftUI to UIKit, but mainly the opposite direction. What I mean by that, as a matter of exemplifying is:

// UIViewRepresentable provides a function to update the underlying `uiView`
func updateUIView(_ uiView: Self.UIViewType, context: Self.Context)

// This function is called whenever there are updates, for example, 
// when a modifier is used or in a new layout cycle done by SwiftUI
CurrencyTextField()
   .font(.title)
   
// triggers
func updateUIView(_ uiView: Self.UIViewType, context: Self.Context) {
    context.environment.font // .title
}
// with font as part of context environment

// it would be very nice to thus use this moment to update
// the text field with given context changes, like font.
// However Apple doesn't provide conversion from 
// e.g. `Font` -> `UIFont` and other SwiftUI properties.
// Therefore to avoid hacks and have an API that is still simple, 
// the configuration of the textField is done via closure, 
// which as downside requires the user to import UIKit

import SwiftUI
import UIKit

CurrencyTextField(
    configuration: .init(
        placeholder: "Play with me...",
        text: $viewModel.data.text,
        unformattedText: $viewModel.data.unformatted,
        inputAmount: $viewModel.data.input,
        clearsWhenValueIsZero: true,
        formatter: .default,
        underlyingTextFieldConfiguration: { uiTextField in
            uiTextField.borderStyle = .roundedRect
            uiTextField.font = .systemFont(ofSize: 20)
            uiTextField.textColor = .blue
            uiTextField.layer.borderColor = UIColor.red.cgColor
            uiTextField.layer.borderWidth = 1
            uiTextField.layer.cornerRadius = 4
            uiTextField.layer.masksToBounds = true
        },
        onEditingChanged: { isEditing in
            bool = isEditing
            if isEditing == false {
                // How to programmatically clear the text of CurrencyTextField:
                // The Binding<String>.text that is passed into CurrencyTextField.configuration can
                // manually cleared / updated with an empty String
                clearTextFieldText()
            }
        },
        onCommit: {
            print("onCommit")
        }
    )
)

Additions

• Declare new libraries via SPM and CocoaPods:
  • new library CurrencyTextSwiftUI defined on SPM
  • new CocoaPods sub-spec named CurrencyTextField
• Update libraries to be built using Swift 5.3 toolchain - previously using Swift 5.0
• Update to support from iOS 11.0 instead of 9.0
  • Since very few users are still on iOS 9 and 10 and the SnapshotTesting framework requires a min iOS 11 (Unfortunately SPM doesn't support defining a platform version on conditional target dependencies, yet?)

Updates

• Improves the ExampleApp with both UIKit and SwiftUI examples. The app was made Storyboardless.
• Fix CurrencyFormatter.unformatted(string:) to correctly return the unformatted value when hasDecimals is true
• Change CurrencyUITextFieldDelegate.textField(_:shouldChangeCharactersIn:replacementString:) -> Bool to call passthroughDelegate after updating text and selectedTextRange, when it was doing that before instead - This might be a breaking change for user relying on passthroughDelegate.

WIP

• [x] SwiftUI library documentation for public types
• [x] Further manual validations of using the library via CocoaPods

Post merge TODO

• [x] Update on README and project documentation
• [ ] Bump version and release

Tests

• Covered most parts with unit and snapshot tests

#76

What problems I want to solve?

There are mutliple warnings on iOS >16.X while using your code: Publishing changes from within view updates is not allowed, this will cause undefined behavior.

File: CurrencyText/tree/main/Sources Lines: 73, 122 and 124

What value it delivers?

There will be no more warnings while running the app. Improve stability.

Tasks

TBD

Dependecies / References

No dependencies and/or references by now.

Whenever Apple provides us with API for fully controlling TextFields selected text range, it will open the door for a plain vanilla SwiftUI version of CurrencyTextField and its libraries.

As additional benefits all TextField modifiers will work nicely with CurrencyTextField, and support for all platforms will be possible given that importing UIKit won't be needed anymore.

Let's see what WWDC and the next iteration of SwiftUI will give us 🤞 !

Dependecies / References

Apple 😜🙏

Description

Improve clarity on the Example app. The idea is to showcase users how a different currency formatter setup affect the text field input formatting.

e.g. adding pickers to change both currency and locale

Dependecies / References

Idea from @CGKarnlund on #59

What problems I want to solve?

The repo does not have a contribution guideline file

Tasks

• [ ] Define and create contributing.md
• [ ] Define and create pull_request.md