// // ButtonViewController.swift // VDSSample // // Created by Jarrod Courtney on 9/16/22. // import Foundation import UIKit import VDS import VDSColorTokens class ButtonGroupViewController: BaseViewController { var collectionView: UICollectionView! public enum RowQuantity: String, CaseIterable { case none, one, two, three, four init(quantity: Int){ if quantity == 1 { self = .one } else if quantity == 2 { self = .two } else if quantity == 3 { self = .three } else if quantity == 4 { self = .four } else { self = .none } } var intValue: Int { switch self { case .none: return 0 case .one: return 1 case .two: return 2 case .three: return 3 case .four: return 4 } } } lazy var buttonPositionSelectorView = { PickerSelectorView(title: "", picker: self.picker, items: ButtonGroup.ButtonPosition.allCases) }() lazy var rowQuantitySelectorView = { PickerSelectorView(title: "", picker: self.picker, items: RowQuantity.allCases) }() var label = Label() var disabledSwitch = Toggle() var widthTextField = NumericField() var percentageTextField = NumericField() let largeButtonGroup = ButtonGroup() let smallButtonGroup = ButtonGroup() let largeLabel = Label().with{ $0.text = "Large Button Group"; $0.textStyle = .BoldTitleSmall } let smallLabel = Label().with{ $0.text = "Small Button Group"; $0.textStyle = .BoldTitleSmall } override func allTextFields() -> [TextField]? { [widthTextField, percentageTextField] } override func viewDidLoad() { super.viewDidLoad() let stackView = UIStackView(arrangedSubviews: [largeLabel, largeButtonGroup, smallLabel, smallButtonGroup]) stackView.setCustomSpacing(50, after: largeButtonGroup) stackView.axis = .vertical stackView.spacing = 30 largeButtonGroup.buttons = [ makeButton("Secondary", label: label).with{ $0.use = .secondary }, makeButton("Primary", label: label), makeTextLink("Large Text Link", label: label), makeButton("Widge Label Button", label: label), makeTextLinkCaret("Text Link Caret", label: label), ] smallButtonGroup.buttons = [ makeTextLink("Small Text Link", label: label).with{ $0.size = .small }, makeButton("Small Button", label: label).with{$0.size = .small; $0.use = .secondary }, makeTextLink("Text Link 1", label: label).with{ $0.size = .small }, makeTextLink("Text Link 2", label: label).with{ $0.size = .small }, makeButton("Small Button 2", label: label).with{$0.size = .small; $0.use = .secondary } ] addContentTopView(view: stackView) percentageTextField.isEnabled = false percentageTextField.placeholder = "Active RowQty != none" widthTextField.placeholder = "Active RowQty == none" setupForm() setupPicker() setupModel() } func setupForm(){ addFormRow(label: "Button Action", view: label) addFormRow(label: "Surface", view: surfacePickerSelectorView) addFormRow(label: "Disabled", view: .makeWrapper(for: disabledSwitch)) addFormRow(label: "Position", view: buttonPositionSelectorView) addFormRow(label: "Width", view: widthTextField) addFormRow(label: "Row Quantity", view: rowQuantitySelectorView) addFormRow(label: "Percentage (1-100)", view: percentageTextField) disabledSwitch .publisher(for: .valueChanged) .sink { [weak self] sender in self?.largeLabel.disabled = sender.isOn self?.smallLabel.disabled = sender.isOn self?.largeButtonGroup.disabled = sender.isOn self?.smallButtonGroup.disabled = sender.isOn }.store(in: &subscribers) widthTextField .textPublisher .sink { [weak self] text in if let n = NumberFormatter().number(from: text) { self?.largeButtonGroup.buttonWidth = CGFloat(truncating: n) self?.smallButtonGroup.buttonWidth = CGFloat(truncating: n) self?.percentageTextField.text = "" } else { self?.largeButtonGroup.buttonWidth = nil } }.store(in: &subscribers) percentageTextField .textPublisher .sink { [weak self] text in let rowQty = self?.largeButtonGroup.rowQuantity ?? 0 if let n = NumberFormatter().number(from: text), n.intValue <= 100, rowQty > 0 { self?.largeButtonGroup.buttonPercentage = CGFloat(truncating: n) self?.smallButtonGroup.buttonPercentage = CGFloat(truncating: n) self?.widthTextField.text = "" } else { self?.largeButtonGroup.buttonPercentage = nil self?.smallButtonGroup.buttonPercentage = nil } }.store(in: &subscribers) } func setupModel() { //setup UI surfacePickerSelectorView.text = largeButtonGroup.surface.rawValue buttonPositionSelectorView.text = largeButtonGroup.buttonPosition.rawValue disabledSwitch.isOn = largeButtonGroup.disabled rowQuantitySelectorView.text = RowQuantity(quantity: largeButtonGroup.rowQuantity).rawValue widthTextField.text = "" } func setupPicker(){ surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in self?.largeLabel.surface = item self?.smallLabel.surface = item self?.largeButtonGroup.surface = item self?.smallButtonGroup.surface = item self?.contentTopView.backgroundColor = item.color } buttonPositionSelectorView.onPickerDidSelect = { [weak self] item in self?.largeButtonGroup.buttonPosition = item self?.smallButtonGroup.buttonPosition = item } rowQuantitySelectorView.onPickerDidSelect = { [weak self] item in self?.percentageTextField.isEnabled = item.intValue > 0 self?.widthTextField.isEnabled = item.intValue == 0 if item == .none { self?.percentageTextField.text = "" } else { self?.widthTextField.text = "" self?.largeButtonGroup.buttonWidth = nil self?.smallButtonGroup.buttonWidth = nil } if UIDevice.isIPad { self?.largeButtonGroup.rowQuantityTablet = item.intValue self?.smallButtonGroup.rowQuantityTablet = item.intValue } else { self?.largeButtonGroup.rowQuantityPhone = item.intValue self?.smallButtonGroup.rowQuantityPhone = item.intValue } } } }