// // DropdownSelectViewController.swift // VDSSample // // Created by Kanamarlapudi, Vasavi on 28/03/24. // import Foundation import VDS class DropdownSelectViewController: BaseViewController { lazy var helperTextPlacementPickerSelectorView = { PickerSelectorView(title: "", picker: self.picker, items: InputField.HelperTextPlacement.allCases) }() var disabledSwitch = Toggle() var requiredSwitch = Toggle() var labelTextField = TextField() var errorTextField = TextField() var helperTextField = TextField() var inlineLabelSwitch = Toggle() var readonlySwitch = Toggle() var transparentBgSwitch = Toggle() var errorSwitch = Toggle() var tooltipTitleTextField = TextField() var tooltipContentTextField = TextField() var widthTextField = NumericField() var optionsSwitch = Toggle() var moreOptions: [DropdownSelect.DropdownOptionModel] = [ .init(text: "Alabama"), .init(text: "Alaska"), .init(text: "Arizona"), .init(text: "Arkansas"), .init(text: "California"), .init(text: "Colorado"), .init(text: "Connecticut"), .init(text: "Delaware"), .init(text: "District of Columbia"), .init(text: "Florida"), .init(text: "Georgia"), .init(text: "Hawaii"), .init(text: "Idaho"), .init(text: "Illinois"), .init(text: "Indiana"), .init(text: "Iowa") ] var some: [DropdownSelect.DropdownOptionModel] = [ .init(text: "Alabama"), .init(text: "Alaska"), .init(text: "Arizona"), .init(text: "Arkansas") ] override func viewDidLoad() { super.viewDidLoad() addContentTopView(view: component) setupModel() setupPicker() } override func setupForm(){ addFormRow(label: "Surface", view: surfacePickerSelectorView) addFormRow(label: "Disabled", view: disabledSwitch) addFormRow(label: "Required", view: requiredSwitch) addFormRow(label: "Label Text", view: labelTextField) addFormRow(label: "Helper Text Placement", view: helperTextPlacementPickerSelectorView) addFormRow(label: "Helper Text", view: helperTextField) addFormRow(label: "Inline Label", view: .makeWrapper(for: inlineLabelSwitch)) addFormRow(label: "Readonly", view: readonlySwitch) addFormRow(label: "Transparent Background", view: transparentBgSwitch) addFormRow(label: "Error", view: .makeWrapper(for: errorSwitch)) addFormRow(label: "Error Text", view: errorTextField) addFormRow(label: "Width", view: widthTextField) addFormRow(label: "ToolTip Title", view: tooltipTitleTextField) addFormRow(label: "ToolTip Content", view: tooltipContentTextField) addFormRow(label: "More Options", view: optionsSwitch) disabledSwitch.onChange = { [weak self] sender in self?.component.isEnabled = !sender.isOn } requiredSwitch.onChange = { [weak self] sender in self?.component.isRequired = sender.isOn } optionsSwitch.onChange = { [weak self] sender in guard let self else { return } self.component.options = sender.isOn ? self.moreOptions : self.some } readonlySwitch.onChange = { [weak self] sender in self?.component.isReadOnly = sender.isOn } transparentBgSwitch.onChange = { [weak self] sender in self?.component.transparentBackground = sender.isOn } errorSwitch .publisher(for: .valueChanged) .sink { [weak self] sender in guard let self else { return } component.showError = sender.isOn if component.showError != sender.isOn { self.errorSwitch.isOn = self.component.showError } }.store(in: &subscribers) 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) inlineLabelSwitch .publisher(for: .valueChanged) .sink { [weak self] sender in guard let self else { return } self.component.showInlineLabel = sender.isOn }.store(in: &subscribers) } func setupModel() { component.labelText = "Street Address" component.helperText = "For example: 123 Verizon St" component.errorText = "Enter a valid address." component.tooltipModel = .init(title: "Check the formatting of your address", content:"House/Building number then street name") component.options = moreOptions /// callback to know which option chose component.onChange = { dropdown in guard let option = dropdown.selectedItem, let index = dropdown.selectId else { print("nothing selected"); return } print("selected index: \(index) text: \(option.text) value: \(option.value)") } //setup UI disabledSwitch.isOn = !component.isEnabled requiredSwitch.isOn = component.isRequired surfacePickerSelectorView.text = component.surface.rawValue labelTextField.text = component.labelText helperTextPlacementPickerSelectorView.text = component.helperTextPlacement.rawValue helperTextField.text = component.helperText readonlySwitch.isOn = false transparentBgSwitch.isOn = false errorSwitch.isOn = component.showError errorTextField.text = component.errorText tooltipTitleTextField.text = component.tooltipModel?.title tooltipContentTextField.text = component.tooltipModel?.content optionsSwitch.isOn = true } 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 } } func updateTooltip() { let title = tooltipTitleTextField.text ?? "" let content = tooltipContentTextField.text ?? "" component.tooltipModel = !title.isEmpty || !content.isEmpty ? .init(title: title, content: content) : nil } } extension DropdownSelectViewController: ComponentSampleable { static func makeSample() -> ComponentSample { let component = Self.makeComponent() component.labelText = "Street Address" component.helperText = "For example: 123 Verizon St" component.errorText = "Enter a valid address." component.tooltipModel = .init(title: "Check the formatting of your address", content:"House/Building number then street name") component.options = [ .init(text: "Alabama"), .init(text: "Alaska"), .init(text: "Arizona"), .init(text: "Arkansas") ] return ComponentSample(component: component) } }