mbrucedogs/vds_ios_sample
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added tabs sample

Browse Source 
Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
This commit is contained in:
Matt Bruce 2023-05-22 16:20:02 -05:00
parent 75e856cbea
commit 013da49ac1
2 changed files with 158 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
VDSSample.xcodeproj/project.pbxproj
View File

@ -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 */,

170
VDSSample/ViewControllers/TabsViewController.swift
View File

@ -14,7 +14,59 @@ import VDSColorTokens
class TabsViewController: BaseViewController<Tabs> {
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<Tabs> {
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<Tabs> {
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("")
}
}
}