// // TabViewContainerViewController.swift // VDSSample // // Created by Matt Bruce on 5/24/23. // import Foundation import UIKit import VDS import Combine import VDSColorTokens class TabsContainerViewController: BaseViewController { var disabledSwitch = Toggle() var borderlineSwitch = Toggle() var fillContainerSwitch = Toggle() var sampleSwitch = Toggle() var widthValueTextField = NumericField() var widthPercentageTextField = NumericField() var verticalOrientationFormStackView = FormSection() var horizontalOrientationFormStackView = FormSection() var overflowRow: UIView? lazy var orientationPickerSelectorView = { PickerSelectorView(title: "", picker: self.picker, items: Tabs.Orientation.allCases) }() lazy var indicatorPositionPickerSelectorView = { PickerSelectorView(title: "", picker: self.picker, items: Tabs.IndicatorPosition.allCases) }() lazy var sizePickerSelectorView = { PickerSelectorView(title: "", picker: self.picker, items: Tabs.Size.allCases) }() lazy var overflowPickerSelectorView = { PickerSelectorView(title: "", picker: self.picker, items: Tabs.Overflow.allCases) }() override func viewDidLoad() { super.viewDidLoad() addContentTopView(view: component) setupPicker() setupModel() } override func setupForm(){ super.setupForm() addFormRow(label: "Large Sample", view: sampleSwitch) addFormRow(label: "Show Borderline", view: borderlineSwitch) addFormRow(label: "Surface", view: surfacePickerSelectorView) addFormRow(label: "Size", view: sizePickerSelectorView) if UIDevice.isIPad { addFormRow(label: "Orientation", view: orientationPickerSelectorView) //only in vertical mode verticalOrientationFormStackView.addFormRow(label: "% Width (0.25 -> 1.0)", view: widthPercentageTextField) verticalOrientationFormStackView.addFormRow(label: "# Width", view: widthValueTextField) } //only in horizontal mode horizontalOrientationFormStackView.addFormRow(label: "Fill Container", view: fillContainerSwitch) horizontalOrientationFormStackView.addFormRow(label: "Indicator Position", view: indicatorPositionPickerSelectorView) overflowRow = horizontalOrientationFormStackView.addFormRow(label: "Overflow", view: overflowPickerSelectorView) append(section: verticalOrientationFormStackView) append(section: horizontalOrientationFormStackView) disabledSwitch.onChange = { [weak self] sender in self?.component.disabled = sender.isOn } borderlineSwitch.onChange = { [weak self] sender in self?.component.borderLine = sender.isOn } fillContainerSwitch.onChange = { [weak self] sender in self?.component.fillContainer = sender.isOn self?.overflowRow?.isHidden = sender.isOn } sampleSwitch.onChange = { [weak self] sender in guard let self else { return } self.component.selectedIndex = 0 self.component.tabModels = sender.isOn ? self.getAllTabs() : self.getSomeTabs() } widthValueTextField.textPublisher.sink { [weak self] text in if let value = Double(text) { self?.component.width = .value(value) self?.widthPercentageTextField.text = "" } }.store(in: &subscribers) widthPercentageTextField.textPublisher.sink { [weak self] text in if let value = Double(text) { self?.component.width = .percentage(value) self?.widthValueTextField.text = "" } }.store(in: &subscribers) } func getTabs(texts:[String]) -> [TabsContainer.TabModel] { texts.compactMap { let label = Label() label.text = "This is an example of the \($0) Tab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." return TabsContainer.TabModel(model: .init(text: $0), view: label) } } func getAllTabs() -> [TabsContainer.TabModel] { getTabs(texts: ["Accessories", "Internet and TV", "Customer Service", "Contact Us"]) } func getSomeTabs() -> [TabsContainer.TabModel] { getTabs(texts: ["Accessories", "Internet and TV"]) } func setupModel() { //set to the large sample component.tabModels = getAllTabs() //setup UI surfacePickerSelectorView.text = component.surface.rawValue sizePickerSelectorView.text = component.size.rawValue orientationPickerSelectorView.text = component.orientation.rawValue indicatorPositionPickerSelectorView.text = component.indicatorPosition.rawValue overflowPickerSelectorView.text = component.overflow.rawValue disabledSwitch.isOn = component.disabled borderlineSwitch.isOn = component.borderLine fillContainerSwitch.isOn = component.fillContainer sampleSwitch.isOn = true updateWidth() } func setupPicker(){ surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in self?.component.surface = item self?.contentTopView.backgroundColor = item.color } sizePickerSelectorView.onPickerDidSelect = { [weak self] item in self?.component.size = item } orientationPickerSelectorView.onPickerDidSelect = { [weak self] item in self?.component.orientation = item self?.verticalOrientationFormStackView.isHidden = item == .horizontal self?.horizontalOrientationFormStackView.isHidden = item == .vertical } indicatorPositionPickerSelectorView.onPickerDidSelect = { [weak self] item in self?.component.indicatorPosition = item } overflowPickerSelectorView.onPickerDidSelect = { [weak self] item in self?.component.overflow = item } } func updateWidth() { switch component.width { case .percentage(let percentage): widthPercentageTextField.text = "\(percentage)" case .value(let value): widthValueTextField.text = "\(value)" widthPercentageTextField.text = "" @unknown default: print("") } } }