From 013da49ac1d70b728cecc42b3b89cede8bc12309 Mon Sep 17 00:00:00 2001 From: Matt Bruce Date: Mon, 22 May 2023 16:20:02 -0500 Subject: [PATCH] added tabs sample Signed-off-by: Matt Bruce --- VDSSample.xcodeproj/project.pbxproj | 2 +- .../ViewControllers/TabsViewController.swift | 170 ++++++++++++++++-- 2 files changed, 158 insertions(+), 14 deletions(-) diff --git a/VDSSample.xcodeproj/project.pbxproj b/VDSSample.xcodeproj/project.pbxproj index 0223583..8d320bd 100644 --- a/VDSSample.xcodeproj/project.pbxproj +++ b/VDSSample.xcodeproj/project.pbxproj @@ -306,9 +306,9 @@ EAF7F11928A14A0E00B287F5 /* RadioButtonViewController.swift */, EA84F76128BE4AE500D67ABC /* RadioSwatchGroupViewController.swift */, EA596AB92A16B2ED00300C4B /* TabsViewController.swift */, + EA0FC2C02912DC5500DF80B4 /* TextLinkCaretViewController.swift */, EA985C24296E06EA00F2FF2E /* TextAreaViewController.swift */, EAC9257F29119FC400091998 /* TextLinkViewController.swift */, - EA0FC2C02912DC5500DF80B4 /* TextLinkCaretViewController.swift */, EA5E304F294D11540082B959 /* TileContainerViewController.swift */, EA5E305B295111050082B959 /* TileletViewController.swift */, EA5E30542950EA6E0082B959 /* TitleLockupViewController.swift */, diff --git a/VDSSample/ViewControllers/TabsViewController.swift b/VDSSample/ViewControllers/TabsViewController.swift index 6e0e25b..3337024 100644 --- a/VDSSample/ViewControllers/TabsViewController.swift +++ b/VDSSample/ViewControllers/TabsViewController.swift @@ -14,7 +14,59 @@ import VDSColorTokens class TabsViewController: BaseViewController { var disabledSwitch = Toggle() + var borderlineSwitch = Toggle() + var fillContainerSwitch = Toggle() + var sampleSwitch = Toggle() + var widthValueTextField = NumericField() + var widthPercentageTextField = NumericField() + + var verticalOrientationFormStackView: UIStackView = { + return UIStackView().with { + $0.translatesAutoresizingMaskIntoConstraints = false + $0.alignment = .fill + $0.distribution = .fillProportionally + $0.axis = .vertical + $0.spacing = 10 + $0.isHidden = true + } + }() + + var horizontalOrientationFormStackView: UIStackView = { + return UIStackView().with { + $0.translatesAutoresizingMaskIntoConstraints = false + $0.alignment = .fill + $0.distribution = .fillProportionally + $0.axis = .vertical + $0.spacing = 10 + } + }() + + override func allTextFields() -> [TextField]? { [widthValueTextField, widthPercentageTextField] } + 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) @@ -24,28 +76,90 @@ class TabsViewController: BaseViewController { override func setupForm(){ super.setupForm() + addFormRow(label: "Large Sample", view: .makeWrapper(for: sampleSwitch)) addFormRow(label: "Disabled", view: .makeWrapper(for: disabledSwitch)) + addFormRow(label: "Show Borderline", view: .makeWrapper(for: borderlineSwitch)) addFormRow(label: "Surface", view: surfacePickerSelectorView) + addFormRow(label: "Size", view: sizePickerSelectorView) + if UIDevice.isIPad { + addFormRow(label: "Orientation", view: orientationPickerSelectorView) + //only in vertical mode + addFormRow(label: "% Width (0.25 -> 1.0)", view: widthPercentageTextField, stackView: verticalOrientationFormStackView) + addFormRow(label: "# Width", view: widthValueTextField, stackView: verticalOrientationFormStackView) + } + + //only in horizontal mode + addFormRow(label: "Indicator Position", view: indicatorPositionPickerSelectorView, stackView: horizontalOrientationFormStackView) + addFormRow(label: "Overflow", view: overflowPickerSelectorView, stackView: horizontalOrientationFormStackView) + + formStackView.addArrangedSubview(verticalOrientationFormStackView) + formStackView.addArrangedSubview(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 + } + + sampleSwitch.onChange = { [weak self] sender in + guard let self else { return } + self.component.selectedIndex = 0 + self.component.tabModels = sender.isOn ? self.allTabs : self.some + } + + 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) + } + var allTabs: [TabModel] = [ + TabModel(text: "All"), + TabModel(text: "Work Devices"), + TabModel(text: "Customer Service"), + TabModel(text: "Help") + ] + + var some: [TabModel] = [ + TabModel(text: "All"), + TabModel(text: "Work Devices") + ] + func setupModel() { - component.overflow = .scroll - component.updateTabItems(with: [ - TabItemModel(text: "All", width: 200), - TabItemModel(text: "Work Devices", width: 250), - TabItemModel(text: "3", width: 100), - TabItemModel(text: "4"), - TabItemModel(text: "5"), - TabItemModel(text: "6 Devices"), - TabItemModel(text: "7 Devices"), - TabItemModel(text: "8 Devices"), - TabItemModel(text: "9 Devices"), - TabItemModel(text: "10 Devices") - ]) + //set to the large sample + component.tabModels = allTabs + component.selectedIndex = 3 + + //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(){ @@ -53,5 +167,35 @@ class TabsViewController: BaseViewController { 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("") + } } }