vds_ios/VDS/Components/TextFields/InputField/InputField.swift
Matt Bruce 1d010d69ea fixed bug for priority on layout
Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
2023-09-05 11:47:58 -05:00

258 lines
8.5 KiB
Swift

//
// TextEntryField.swift
// VDS
//
// Created by Matt Bruce on 10/3/22.
//
import Foundation
import UIKit
import VDSColorTokens
import VDSFormControlsTokens
import Combine
/// An input field is an input wherein a customer enters information. They typically appear in forms.
/// Specialized input fields capture credit card numbers, inline actions, passwords, phone numbers,
/// dates and security codes in their correct formats.
@objc(VDSInputField)
open class InputField: EntryFieldBase, UITextFieldDelegate {
//--------------------------------------------------
// MARK: - Initializers
//--------------------------------------------------
required public init() {
super.init(frame: .zero)
}
public override init(frame: CGRect) {
super.init(frame: .zero)
}
public required init?(coder: NSCoder) {
super.init(coder: coder)
}
//--------------------------------------------------
// MARK: - Enums
//--------------------------------------------------
/// Enum used to describe the input type.
public enum FieldType: String, CaseIterable {
case text, number, calendar, inlineAction, password, creditCard, tel, date, securityCode
}
//--------------------------------------------------
// MARK: - Private Properties
//--------------------------------------------------
internal var inputFieldStackView: UIStackView = {
return UIStackView().with {
$0.translatesAutoresizingMaskIntoConstraints = false
$0.axis = .horizontal
$0.distribution = .fill
$0.spacing = 12
}
}()
internal var minWidthConstraint: NSLayoutConstraint?
//--------------------------------------------------
// MARK: - Public Properties
//--------------------------------------------------
/// Label to render the successText.
open var successLabel = Label().with {
$0.setContentCompressionResistancePriority(.required, for: .vertical)
$0.textStyle = .bodySmall
}
/// UITextField shown in the InputField.
open var textField = UITextField().with {
$0.translatesAutoresizingMaskIntoConstraints = false
$0.font = TextStyle.bodyLarge.font
}
/// Color configuration for the textField.
open var textFieldTextColorConfiguration: AnyColorable = ViewColorConfiguration().with {
$0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forDisabled: true)
$0.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark, forDisabled: false)
}.eraseToAnyColorable()
/// Representing the type of input.
open var fieldType: FieldType = .text { didSet { setNeedsUpdate() } }
var _showError: Bool = false
/// Whether not to show the error.
open override var showError: Bool {
get { _showError }
set {
if !showSuccess && _showError != newValue {
_showError = newValue
setNeedsUpdate()
}
}
}
var _showSuccess: Bool = false
/// Whether not to show the success.
open var showSuccess: Bool {
get { _showSuccess }
set {
if !showError && _showSuccess != newValue {
_showSuccess = newValue
setNeedsUpdate()
}
}
}
/// Override UIControl state to add the .error state if showSuccess is true and if showError is true.
open override var state: UIControl.State {
get {
var state = super.state
if showSuccess {
state.insert(.success)
}
return state
}
}
/// If given, this will be shown if showSuccess if true.
open var successText: String? { didSet { setNeedsUpdate() } }
/// Determines the placement of the helper text.
open var helperTextPlacement: HelperTextPlacement = .bottom { didSet { setNeedsUpdate() } }
//--------------------------------------------------
// MARK: - Overrides
//--------------------------------------------------
/// Called once when a view is initialized and is used to Setup additional UI or other constants and configurations.
open override func setup() {
super.setup()
minWidthConstraint = containerView.widthAnchor.constraint(greaterThanOrEqualToConstant: 0)
minWidthConstraint?.isActive = true
controlContainerView.addSubview(textField)
textField
.pinTop()
.pinLeading()
.pinTrailingLessThanOrEqualTo(nil, 0, .defaultHigh)
.pinBottom(0, .defaultHigh)
textField.heightAnchor.constraint(equalToConstant: 20).isActive = true
textField
.textPublisher
.sink { [weak self] text in
self?.value = text
self?.sendActions(for: .valueChanged)
}.store(in: &subscribers)
stackView.addArrangedSubview(successLabel)
stackView.setCustomSpacing(8, after: successLabel)
successLabel.textColorConfiguration = primaryColorConfiguration.eraseToAnyColorable()
backgroundColorConfiguration.setSurfaceColors(VDSColor.feedbackSuccessBackgroundOnlight, VDSColor.feedbackSuccessBackgroundOndark, forState: .success)
borderColorConfiguration.setSurfaceColors(VDSColor.feedbackSuccessOnlight, VDSColor.feedbackSuccessOndark, forState: .success)
}
/// Resets to default settings.
open override func reset() {
super.reset()
textField.text = ""
textField.delegate = self
successLabel.reset()
successLabel.textStyle = .bodySmall
fieldType = .text
showSuccess = false
successText = nil
helperTextPlacement = .bottom
}
/// Container for the area in which the user interacts.
open override func getContainer() -> UIView {
inputFieldStackView.addArrangedSubview(containerView)
return inputFieldStackView
}
/// Used to make changes to the View based off a change events or from local properties.
open override func updateView() {
super.updateView()
textField.isEnabled = isEnabled
textField.textColor = textFieldTextColorConfiguration.getColor(self)
//show error or success
if showError, let _ = errorText {
successLabel.isHidden = true
} else if showSuccess, let successText {
successLabel.text = successText
successLabel.surface = surface
successLabel.isEnabled = isEnabled
successLabel.isHidden = false
errorLabel.isHidden = true
icon.name = .checkmarkAlt
icon.color = VDSColor.paletteBlack
icon.surface = surface
icon.isHidden = !isEnabled
} else {
icon.isHidden = true
successLabel.isHidden = true
}
//set the width constraints
if let width, width > fieldType.width {
widthConstraint?.constant = width
widthConstraint?.isActive = true
minWidthConstraint?.isActive = false
} else {
minWidthConstraint?.constant = fieldType.width
widthConstraint?.isActive = false
minWidthConstraint?.isActive = true
}
}
open override func updateHelperLabel(){
//remove first
helperLabel.removeFromSuperview()
super.updateHelperLabel()
//set the helper label position
if helperText != nil {
if helperTextPlacement == .right {
inputFieldStackView.spacing = 12
inputFieldStackView.distribution = .fillEqually
inputFieldStackView.addArrangedSubview(helperLabel)
} else {
inputFieldStackView.spacing = 0
inputFieldStackView.distribution = .fill
stackView.addArrangedSubview(helperLabel)
}
}
}
}
extension InputField.FieldType {
var width: CGFloat {
switch self {
case .inlineAction:
return 102
case .password:
return 62.0
case .creditCard:
return 288.0
case .tel:
return 176.0
case .date:
return 114.0
case .securityCode:
return 88.0
default:
return 40.0
}
}
}