JNPhoneNumberView

Requirements

• iOS 9.0+ / macOS 10.10+
• Xcode 9.0+
• Swift 4+

Installation

JNPhoneNumberView is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'JNPhoneNumberView'

Example

To run the example project, clone the repo, and run pod install from the Example directory first.

JNPhoneNumberView

used to to show the country dial code and the phone number, you can click on the dial code and select another country from the countries picker, this view has a delegate methods to pass the international number and validity of it.

Screenshots

Usage

• To add JNPhoneNumberView in interface builder:

  1. Drag an UIView and change the class to "JNPhoneNumberView"

  2. Add refrence for it in the view controller.

• Implement JNPhoneNumberViewDelegate:

  Set the 'delegate' in your view controller and implement the following methods:

  • Presenter View Controller to be used for presenting the Country list picker:

    func phoneNumberView(getPresenterViewControllerFor phoneNumberView: JNPhoneNumberView) -> UIViewController

  • Get Country picker configuration:

    func phoneNumberView(getCountryPickerAttributesFor phoneNumberView: JNPhoneNumberView) -> JNCountryPickerConfiguration

  • Did change text with new national phone number and selected country:

    func phoneNumberView(didChangeText nationalNumber: String, country: JNCountry, forPhoneNumberView phoneNumberView: JNPhoneNumberView)

  • Did end editing with bool value indicate if the phone number is valid, new national phone number and selected country:

    func phoneNumberView(didEndEditing nationalNumber: String, country: JNCountry, isValidPhoneNumber: Bool, forPhoneNumberView phoneNumberView: JNPhoneNumberView)

  • Selected Country did changed with bool value indicate if the phone number is valid:

    func phoneNumberView(countryDidChanged country: JNCountry, isValidPhoneNumber: Bool, forPhoneNumberView phoneNumberView: JNPhoneNumberView)

• Implement JNPhoneNumberViewDataSourceDelegate:

  Set dataSourceDelegate in your view controller if you want to provide a source with custom countries instead of using the our like the following:

  func countryPickerViewControllerLoadCountryList(_ phoneNumberView: JNPhoneNumberView, completion: @escaping ([JNCountry]) -> Void, errorCompletion: @escaping (NSError) -> Void)

• View Customization:

  We provide appearance customization using JNPhoneNumberViewConfiguration that has the following attributtes:

  • countryDialCodeTitleColor Color for country dial code.
  • countryDialCodeTitleFont: Font for country dial code.
  • phoneNumberTitleColor: Color for phone number textfield.
  • phoneNumberTitleFont: Font for phone number textfield.
  • phoneNumberPlaceHolder: Place hodler for phone number textfield.
  • leftToolBarBarButtonItemTitle: Title for Tool BarBar ButtonItem that appear of Keyboard.
  • maximumNumbrOfDigits: Maximum number of digits allowed to add. the defualt value is 30 digit

Public Methods:

1. Set a default country using this method, you just have to pass a country code such as "US", "PS":

   func setDefaultCountryCode(defaultCountryCode: String) 

2. Set View configuration to customization view appearance:

   func setViewConfiguration(_ configuration: JNPhoneNumberViewConfiguration) 

3. Set phone number in JNPhoneNumberView:

   func setPhoneNumber(phoneNumber: String)

4. Set phone number from national number and country:

   func setPhoneNumber(nationalNumber: String, preferredRegionCode: String)

5. Get phone number from JNPhoneNumberView:

   func getPhoneNumber() -> String 

6. Is phone number valid:

   func isValidPhoneNumber() -> Bool

7. Get National Phone Number:

   func getNationalPhoneNumber() -> String

8. Get dial code:

   func getDialCode() -> String

Public Properties:

1. delegate : Picker Delegate
2. dataSourceDelegate: Data Source Delegate

JNCountryPickerViewController

used to to show the countries list and select one of the countries, this view controller has a delegate methods to pass the selected country as JNCountry, also we provide the developer the flexiability to pass a custom country list insead of use the cached one.

Screenshots

Usage

To present JNCountryPickerViewController programmatically:

1. Initiate JNCountryPickerViewController.

     let countryPickerViewController = JNCountryPickerViewController()

2. Emped the view controller in navigation controller.

     let nevigationController = UINavigationController(rootViewController: countryPickerViewController)

3. Present the navigation controller modally.

     self.present(nevigationController, animated: true, completion: nil)

• Implement JNCountryPickerViewControllerDelegate:

  Set the 'delegate' in your view controller and implement the following methods:

  • Did select Country

  func countryPickerViewController(_ controller: JNCountryPickerViewController, didSelectCountry country: JNCountry)

• Implement JNPhoneNumberViewDataSourceDelegate:

  Set the 'dataSourceDelegate' in your view controller and implement the following methods:

  • Load country list from custom source

  func countryPickerViewControllerLoadCountryList(_ controller: JNCountryPickerViewController, completion: @escaping ([JNCountry]) -> Void, errorCompletion: @escaping (NSError) -> Void)

• View Customization:

  We provide appearance customization using JNCountryPickerConfiguration that has the following attributtes:

  • selectedTitleFont Selected item title font.
  • titleFont Not selected item title font.
  • selectedTitleColor Selected item title color.
  • titleColor Not selected item title color.
  • emptySearchMessageFont Message for empty search result.
  • emptySearchMessageColor Color for empty search result message.
  • searchBarTintColor Search bar tint color.
  • navigationBarColor Navigation bar color.
  • naigationBarTintColor Navigation bar tint color.
  • navigationBarTitle Navigation bar Title.
  • navigationBarTitleTextAttributes Navigation bar title text attributtes.
  • selectBarButtonTitle Select bar button title.
  • loadingAcivityIndicatorColor Loading acivity indicator color.
  • emptySearchMessage Message for empty search result.
  • emptySearchImage Image for empty search result.
  • viewBackgroundColor View controller background color.
  • pickerLanguage Picker language.
  • tableCellInsets Cell margins.
  • tableCellCornerRaduis Cell corner raduis.
  • tableCellBackgroundColor Cell background color.
  • showDialCode Show country dial code to appear after country name.

Public Properties:

1. pickerConfiguration: you can set a custom configuration instead of the default configuration as described in view customization section.
2. selectedCountry: you can set country to be selected when picker opened.
3. delegate : Picker Delegate
4. dataSourceDelegate: Data Source Delegate

Notes

1. Custom country entitiy must conform to JNCountry protocol that has the following:

   • code Country code.
   • name Country name.
   • dialCode Country dial code.

   The Country Data should Follow ISO 3166-1

Author

Hamzeh Khanfar & Jayel Zaghmoutt

License

JNPhoneNumberView is available under the MIT license. See the LICENSE file for more info.