// // TextEntryFieldViewController.swift // VDSSample // // Created by Matt Bruce on 10/3/22. // import Foundation import UIKit import VDS import VDSTokens import Combine class InputFieldViewController: BaseViewController { lazy var helperTextPlacementPickerSelectorView = { PickerSelectorView(title: "", picker: self.picker, items: InputField.HelperTextPlacement.allCases) }() lazy var inputTypePickerSelectorView = { PickerSelectorView(title: "", picker: self.picker, items: InputField.FieldType.allCases) }() var disabledSwitch = Toggle() var requiredSwitch = Toggle() var labelTextField = TextField() var errorTextField = TextField() var successTextField = TextField() var helperTextField = TextField() var widthTextField = NumericField() var showErrorSwitch = Toggle() var showSuccessSwitch = Toggle() var tooltipTitleTextField = TextField() var tooltipContentTextField = TextField() //FieldType sections //password var hidePasswordButtonTextField = TextField() var showPasswordButtonTextField = TextField() lazy var passwordSection = FormSection().with { $0.title = "Password Settings" $0.addFormRow(label: "Hide Button", view: hidePasswordButtonTextField) $0.addFormRow(label: "Show Button", view: showPasswordButtonTextField) $0.isHidden = true } override func viewDidLoad() { super.viewDidLoad() addContentTopView(view: component) setupPicker() setupModel() } override func setupForm(){ super.setupForm() addFormRow(label: "Disabled", view: disabledSwitch) addFormRow(label: "Required", view: requiredSwitch) addFormRow(label: "Surface", view: surfacePickerSelectorView) addFormRow(label: "Label Text", view: labelTextField) addFormRow(label: "Helper Text Placement", view: helperTextPlacementPickerSelectorView) addFormRow(label: "Helper Text", view: helperTextField) addFormRow(label: "Error", view: showErrorSwitch) addFormRow(label: "Error Text", view: errorTextField) addFormRow(label: "Success", view: showSuccessSwitch) addFormRow(label: "Success Text", view: successTextField) addFormRow(label: "Width", view: widthTextField) addFormRow(label: "ToolTip Title", view: tooltipTitleTextField) addFormRow(label: "ToolTip Content", view: tooltipContentTextField) addFormRow(label: "Field Type", view: inputTypePickerSelectorView) append(section: passwordSection) requiredSwitch.onChange = { [weak self] sender in self?.component.isRequired = sender.isOn } showErrorSwitch.onChange = { [weak self] sender in guard let self else { return } self.component.showError = sender.isOn if self.component.showError != sender.isOn { self.showErrorSwitch.isOn = self.component.showError } } showSuccessSwitch.onChange = { [weak self] sender in guard let self else { return } self.component.showSuccess = sender.isOn if self.component.showSuccess != sender.isOn { self.showSuccessSwitch.isOn = self.component.showSuccess } } disabledSwitch.onChange = { [weak self] sender in self?.component.isEnabled = !sender.isOn } labelTextField .textPublisher .sink { [weak self] text in self?.component.labelText = text }.store(in: &subscribers) helperTextField .textPublisher .sink { [weak self] text in self?.component.helperText = text }.store(in: &subscribers) errorTextField .textPublisher .sink { [weak self] text in self?.component.errorText = text }.store(in: &subscribers) widthTextField .numberPublisher .sink { [weak self] number in self?.component.width = number?.cgFloatValue }.store(in: &subscribers) tooltipTitleTextField .textPublisher .sink { [weak self] text in self?.updateTooltip() }.store(in: &subscribers) tooltipContentTextField .textPublisher .sink { [weak self] text in self?.updateTooltip() }.store(in: &subscribers) //field types //password hidePasswordButtonTextField .textPublisher .sink { [weak self] text in self?.component.hidePasswordButtonText = text }.store(in: &subscribers) showPasswordButtonTextField .textPublisher .sink { [weak self] text in self?.component.showPasswordButtonText = text }.store(in: &subscribers) } func setupModel() { component.fieldType = .text component.width = 328 component.labelText = "Street Address" component.helperText = "For example: 123 Verizon St" component.errorText = "Enter a valid address." component.successText = "Good job entering a valid address!" component.tooltipModel = .init(title: "Check the formatting of your address", content:"House/Building number then street name") component.onChange = { component in if let text = component.value { print("text entry: \(text)") } else { print("text entry: null") } } //setup UI surfacePickerSelectorView.text = component.surface.rawValue helperTextPlacementPickerSelectorView.text = component.helperTextPlacement.rawValue inputTypePickerSelectorView.text = component.fieldType.rawValue disabledSwitch.isOn = !component.isEnabled requiredSwitch.isOn = component.isRequired labelTextField.text = component.labelText helperTextField.text = component.helperText showErrorSwitch.isOn = component.showError errorTextField.text = component.errorText showSuccessSwitch.isOn = component.showSuccess successTextField.text = component.successText tooltipTitleTextField.text = component.tooltipModel?.title tooltipContentTextField.text = component.tooltipModel?.content if let width = component.width { widthTextField.text = String(describing: width) } } //Picker func setupPicker(){ surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in self?.component.surface = item self?.contentTopView.backgroundColor = item.color } helperTextPlacementPickerSelectorView.onPickerDidSelect = { [weak self] item in self?.component.helperTextPlacement = item } inputTypePickerSelectorView.onPickerDidSelect = { [weak self] item in self?.component.fieldType = item self?.updateFormSections() } } func updateTooltip() { let title = tooltipTitleTextField.text ?? "" let content = tooltipContentTextField.text ?? "" component.tooltipModel = !title.isEmpty || !content.isEmpty ? .init(title: title, content: content) : nil } func updateFormSections() { passwordSection.isHidden = true switch component.fieldType { case .text: break case .number: break case .inlineAction: break case .password: passwordSection.isHidden = false case .creditCard: break case .tel: break case .date: break case .securityCode: break @unknown default: break } } } extension InputFieldViewController: ComponentSampleable { static func makeSample() -> ComponentSample { let component = Self.makeComponent() component.fieldType = .text component.width = 328 component.labelText = "Street Address" component.helperText = "For example: 123 Verizon St" component.errorText = "Enter a valid address." component.successText = "Good job entering a valid address!" component.tooltipModel = .init(title: "Check the formatting of your address", content: "House/Building number then street name") return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual) } }