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

added tabs container

Browse Source 
Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
This commit is contained in:
Matt Bruce 2023-05-25 08:03:31 -05:00
parent fb8ccd6d10
commit 62ffdebbfc
2 changed files with 227 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
VDS.xcodeproj/project.pbxproj
View File

@ -51,6 +51,7 @@
EA5E305A29510F8B0082B959 /* EnumSubset.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA5E305929510F8B0082B959 /* EnumSubset.swift */; };
EA5F86C82A1BD99100BC83E4 /* TabModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA5F86C72A1BD99100BC83E4 /* TabModel.swift */; };
EA5F86CC2A1D28B500BC83E4 /* ReleaseNotes.txt in Resources */ = {isa = PBXBuildFile; fileRef = EA5F86CB2A1D28B500BC83E4 /* ReleaseNotes.txt */; };
EA5F86D02A1F936100BC83E4 /* TabsContainer.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA5F86CF2A1F936100BC83E4 /* TabsContainer.swift */; };
EA81410B2A0E8E3C004F60D2 /* ButtonIcon.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA81410A2A0E8E3C004F60D2 /* ButtonIcon.swift */; };
EA8141102A127066004F60D2 /* UIColor+VDSColor.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA81410F2A127066004F60D2 /* UIColor+VDSColor.swift */; };
EA89200428AECF4B006B9984 /* UITextField+Publisher.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA89200328AECF4B006B9984 /* UITextField+Publisher.swift */; };
@ -176,6 +177,7 @@
EA5E305929510F8B0082B959 /* EnumSubset.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = EnumSubset.swift; sourceTree = "<group>"; };
EA5F86C72A1BD99100BC83E4 /* TabModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TabModel.swift; sourceTree = "<group>"; };
EA5F86CB2A1D28B500BC83E4 /* ReleaseNotes.txt */ = {isa = PBXFileReference; lastKnownFileType = text; path = ReleaseNotes.txt; sourceTree = "<group>"; };
EA5F86CF2A1F936100BC83E4 /* TabsContainer.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TabsContainer.swift; sourceTree = "<group>"; };
EA81410A2A0E8E3C004F60D2 /* ButtonIcon.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ButtonIcon.swift; sourceTree = "<group>"; };
EA81410F2A127066004F60D2 /* UIColor+VDSColor.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "UIColor+VDSColor.swift"; sourceTree = "<group>"; };
EA89200328AECF4B006B9984 /* UITextField+Publisher.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "UITextField+Publisher.swift"; sourceTree = "<group>"; };
@ -527,6 +529,7 @@
EA596ABC2A16B4EC00300C4B /* Tab.swift */,
EA5F86C72A1BD99100BC83E4 /* TabModel.swift */,
EA596ABE2A16B4F500300C4B /* Tabs.swift */,
EA5F86CF2A1F936100BC83E4 /* TabsContainer.swift */,
);
path = Tabs;
sourceTree = "<group>";
@ -864,6 +867,7 @@
EA4DB30228DCBCA500103EE3 /* Badge.swift in Sources */,
EA33624728931B050071C351 /* Initable.swift in Sources */,
EAF7F0A4289B017C00B287F5 /* LabelAttributeModel.swift in Sources */,
EA5F86D02A1F936100BC83E4 /* TabsContainer.swift in Sources */,
EAF7F0B1289B177F00B287F5 /* ColorLabelAttribute.swift in Sources */,
EAC9258F2911C9DE00091998 /* EntryField.swift in Sources */,
EAB1D2EA28AE84AA00DAE764 /* UIControlPublisher.swift in Sources */,

223
VDS/Components/Tabs/TabsContainer.swift Normal file
View File

@ -0,0 +1,223 @@
//
// TabsContainer.swift
// VDS
//
// Created by Matt Bruce on 5/25/23.
//
import Foundation
import UIKit
open class TabsContainer: View {
//--------------------------------------------------
// MARK: - Public Properties
//--------------------------------------------------
open var tabMenu = Tabs()
///An optional callback that is called when the selectedIndex changes. Passes parameters (event, tabIndex).
open var onTabChange: ((Int) -> Void)?
///Determines the layout of the Tabs, defaults to horizontal
open var orientation: Tabs.Orientation = .horizontal { didSet { setNeedsUpdate() } }
///When true, Tabs will have border line. If false is passed then the border line won't be visible.
open var borderLine: Bool = true { didSet { setNeedsUpdate() } }
///It will fill the Tabs to the width of the compoent and all Tabs will be in equal width when orientation is horizontal. This is recommended when there are no more than 2-3 tabs.
open var fillContainer: Bool = false { didSet { setNeedsUpdate() } }
///When true, Tabs will be sticky to top of page, when orientation is vertical.
open var indicatorFillTab: Bool = false { didSet { setNeedsUpdate() } }
///Sets the Position of the Selected/Hover Border Accent for All Tabs, only for Horizontal Orientation
open var indicatorPosition: Tabs.IndicatorPosition = .bottom { didSet { setNeedsUpdate() } }
///Minimum Width for All Tabs, when orientation is horizontal.
open var minWidth: CGFloat = 44.0 { didSet { setNeedsUpdate() } }
///If set to 'scroll', Tabs can be overflow and scrollable. With 'none', tabs will not overflow and labels will be wrapped to multiple lines if the label text is long.
open var overflow: Tabs.Overflow = .scroll { didSet { setNeedsUpdate() } }
///The initial Selected Tab's index and is set once a Tab is clicked
open var selectedIndex: Int = 0 { didSet { setNeedsUpdate() } }
///Determines the size of the Tabs TextStyle
open var size: Tabs.Size = .medium { didSet { setNeedsUpdate() } }
///Space between the Tabs and Contentl.
open var space: CGFloat = 5.0 { didSet { setNeedsUpdate() } }
///When true, Tabs will be sticky to top of page, when orientation is vertical.
open var sticky: Bool = false { didSet { setNeedsUpdate() } }
///rules for width
private var _width: Tabs.Width = .percentage(0.25)
///Width of all Tabs when orientation is vertical, defaults to 25%.
open var width: Tabs.Width {
get {
return _width
}
set {
switch newValue {
case .percentage(let percentage):
if percentage >= 0 && percentage <= 1 {
_width = newValue
setNeedsUpdate()
} else {
print("Invalid percentage value. It should be between 0 and 1.")
}
case .value(let value):
if value >= minWidth {
_width = newValue
setNeedsUpdate()
} else {
print("Invalid value. It should be greater than or equal to \(minWidth).")
}
}
}
}
///Model of the Tabs you are wanting to show.
open var tabModels: [TabModel] = [] {
didSet {
tabMenu.tabModels = tabModels.compactMap{ $0.model }
contentView.arrangedSubviews.forEach{ $0.removeFromSuperview() }
tabModels.forEach {
let view = $0.view
view.isHidden = true
contentView.addArrangedSubview(view)
}
setNeedsUpdate()
}
}
//--------------------------------------------------
// MARK: - Private Properties
//--------------------------------------------------
private var contentViewWidthConstraint: NSLayoutConstraint?
private var stackView = UIStackView().with {
$0.translatesAutoresizingMaskIntoConstraints = false
$0.axis = .vertical
$0.alignment = .fill
$0.distribution = .fill
}
private var contentView = UIStackView().with {
$0.translatesAutoresizingMaskIntoConstraints = false
$0.alignment = .fill
$0.distribution = .fillProportionally
$0.axis = .vertical
$0.spacing = 10
}
private var tabMenuLayoutGuide = UILayoutGuide()
open override func setup() {
super.setup()
tabMenu.addLayoutGuide(tabMenuLayoutGuide)
addSubview(stackView)
stackView.pinToSuperView()
stackView.addArrangedSubview(tabMenu)
stackView.addArrangedSubview(contentView)
NSLayoutConstraint.activate([
tabMenuLayoutGuide.topAnchor.constraint(equalTo: topAnchor),
tabMenuLayoutGuide.bottomAnchor.constraint(equalTo: bottomAnchor),
tabMenuLayoutGuide.leadingAnchor.constraint(equalTo: leadingAnchor),
tabMenuLayoutGuide.trailingAnchor.constraint(equalTo: trailingAnchor)
])
}
open override func updateView() {
super.updateView()
stackView.alignment = orientation == .horizontal ? .fill : .top
stackView.axis = orientation == .horizontal ? .vertical : .horizontal
stackView.spacing = space
tabMenu.onTabChange = { [weak self] index in
guard let self else { return }
self.tabClicked(index: index)
}
contentViewWidthConstraint?.isActive = false
if orientation == .vertical {
switch width {
case .percentage(let amount):
contentViewWidthConstraint = tabMenu.widthAnchor.constraint(equalTo: tabMenuLayoutGuide.widthAnchor, multiplier: amount)
case .value(let amount):
contentViewWidthConstraint = tabMenu.widthAnchor.constraint(equalToConstant: amount)
}
contentViewWidthConstraint?.isActive = true
}
tabMenu.surface = surface
tabMenu.disabled = disabled
tabMenu.orientation = orientation
tabMenu.borderLine = borderLine
tabMenu.fillContainer = fillContainer
tabMenu.indicatorFillTab = indicatorFillTab
tabMenu.indicatorPosition = indicatorPosition
tabMenu.minWidth = minWidth
tabMenu.overflow = overflow
tabMenu.selectedIndex = selectedIndex
tabMenu.size = size
tabMenu.sticky = sticky
tabMenu.tabItems.forEach {
$0.width = tabWidth(for: $0)
}
setSelected(index: selectedIndex)
tabModels.forEach {
var view = $0.view
view.surface = surface
}
}
//--------------------------------------------------
// MARK: - Private Methods
//--------------------------------------------------
private func tabWidth(for item: Tabs.TabItem) -> CGFloat? {
guard orientation == .vertical else { return item.width }
var calculated: CGFloat
switch width {
case .percentage(let percent):
calculated = (bounds.width * percent) - tabMenu.tabSpacing
case .value(let value):
calculated = value - tabMenu.tabSpacing
}
return calculated > minWidth ? calculated : minWidth
}
private func tabClicked(index: Int) {
onTabChange?(index)
setSelected(index: index)
}
private func setSelected(index: Int) {
for (modelIndex, model) in tabModels.enumerated() {
let view = model.view
let shouldShow = index == modelIndex
view.isHidden = !shouldShow
}
}
}
extension TabsContainer {
public struct TabModel {
public typealias AnySurfaceableView = UIView & Surfaceable
public var model: Tabs.TabModel
public var view: AnySurfaceableView
public init(model: Tabs.TabModel, view: AnySurfaceableView) {
self.model = model
self.view = view
}
}
}