// // 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 disabledSwitch = Toggle() var widthTextField = NumericField() var percentageTextField = NumericField() 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 viewDidLoad() { super.viewDidLoad() let stackView = UIStackView(arrangedSubviews: [largeLabel, component, smallLabel, smallButtonGroup]) stackView.setCustomSpacing(50, after: component) stackView.axis = .vertical stackView.spacing = 30 let label = actionLabel component.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" setupPicker() setupModel() debugViewSwitch.onChange = { [weak self] sender in self?.component.debugBorder(show: sender.isOn, color: .blue) self?.smallButtonGroup.debugBorder(show: sender.isOn, color: .blue) } } override func setupForm(){ super.setupForm() addActionRow() addFormRow(label: "Surface", view: surfacePickerSelectorView) addFormRow(label: "Disabled", view: 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.onChange = { [weak self] sender in self?.largeLabel.disabled = sender.isOn self?.smallLabel.disabled = sender.isOn self?.component.disabled = sender.isOn self?.smallButtonGroup.disabled = sender.isOn } widthTextField .numberPublisher .sink { [weak self] number in if let number { self?.component.buttonWidth = number.cgFloatValue self?.smallButtonGroup.buttonWidth = number.cgFloatValue self?.percentageTextField.text = "" } else { self?.component.buttonWidth = nil } }.store(in: &subscribers) percentageTextField .numberPublisher .sink { [weak self] number in let rowQty = self?.component.rowQuantity ?? 0 if let number, number.intValue <= 100, rowQty > 0 { self?.component.buttonPercentage = number.cgFloatValue self?.smallButtonGroup.buttonPercentage = number.cgFloatValue self?.widthTextField.text = "" } else { self?.component.buttonPercentage = nil self?.smallButtonGroup.buttonPercentage = nil } }.store(in: &subscribers) } func setupModel() { //setup UI surfacePickerSelectorView.text = component.surface.rawValue buttonPositionSelectorView.text = component.buttonPosition.rawValue disabledSwitch.isOn = component.disabled rowQuantitySelectorView.text = RowQuantity(quantity: component.rowQuantity).rawValue widthTextField.text = "" } func setupPicker(){ surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in self?.largeLabel.surface = item self?.smallLabel.surface = item self?.component.surface = item self?.smallButtonGroup.surface = item self?.contentTopView.backgroundColor = item.color } buttonPositionSelectorView.onPickerDidSelect = { [weak self] item in self?.component.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?.component.buttonWidth = nil self?.smallButtonGroup.buttonWidth = nil } if UIDevice.isIPad { self?.component.rowQuantityTablet = item.intValue self?.smallButtonGroup.rowQuantityTablet = item.intValue } else { self?.component.rowQuantityPhone = item.intValue self?.smallButtonGroup.rowQuantityPhone = item.intValue } } } } extension ButtonGroupViewController: ComponentSampleable { static func makeSample() -> ComponentSample { let component = Self.makeComponent() component.buttons = [ Button().with{ $0.use = .secondary; $0.text = "Secondary" }, Button().with{ $0.use = .primary; $0.text = "Primary" }, TextLink().with { $0.size = .large; $0.text = "Large Text Link" }, TextLink().with { $0.text = "Widge Label Button" }, TextLinkCaret().with { $0.text = "Text Link Caret" } ] return ComponentSample(component: component, canPinTrailing: true) } }