refactored table content sample

Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
This commit is contained in:
Matt Bruce 2023-08-18 09:00:25 -05:00
parent ea9e5dd55b
commit 02315048fd
28 changed files with 181 additions and 109 deletions

View File

@ -219,6 +219,6 @@ extension BadgeIndicatorViewController: ComponentSampleable {
component.number = 23
component.kind = .simple
component.size = .medium
return ComponentSample(component: component, canPinTrailing: false)
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
}
}

View File

@ -115,6 +115,6 @@ extension BadgeViewController: ComponentSampleable {
component.text = "Terms and conditions"
component.maxWidth = 70
component.numberOfLines = 3
return ComponentSample(component: component, canPinTrailing: false)
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
}
}

View File

@ -210,6 +210,6 @@ extension ButtonGroupViewController: ComponentSampleable {
TextLinkCaret().with { $0.text = "Text Link Caret" }
]
return ComponentSample(component: component, canPinTrailing: true)
return ComponentSample(component: component)
}
}

View File

@ -175,6 +175,6 @@ extension ButtonIconViewController: ComponentSampleable {
let component = Self.makeComponent()
component.iconName = .addToFavorite
component.size = .large
return ComponentSample(component: component, canPinTrailing: false)
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
}
}

View File

@ -106,6 +106,6 @@ extension ButtonViewController: ComponentSampleable {
component.onClick = { c in print("\(c.text!) Click")}
component.use = .primary
component.size = .large
return ComponentSample(component: component, canPinTrailing: false)
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
}
}

View File

@ -138,6 +138,6 @@ extension CheckboxGroupViewController: ComponentSampleable {
component.selectorModels = [checkbox1, checkbox2]
return ComponentSample(component: component, canPinTrailing: false)
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
}
}

View File

@ -101,6 +101,6 @@ extension CheckboxItemViewController: ComponentSampleable {
component.childText = "I agree to Verizon's terms and conditions click here"
component.errorText = "Error Text"
return ComponentSample(component: component, canPinTrailing: false)
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
}
}

View File

@ -65,6 +65,6 @@ class CheckboxViewController: BaseViewController<Checkbox> {
extension CheckboxViewController: ComponentSampleable {
static func makeSample() -> ComponentSample {
let component = Self.makeComponent()
return ComponentSample(component: component, canPinTrailing: false)
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
}
}

View File

@ -96,6 +96,6 @@ extension IconViewController: ComponentSampleable {
component.color = color.uiColor
component.name = name
component.customSize = 50
return ComponentSample(component: component, canPinTrailing: false, canPinBottom: false)
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual, bottomPinningType: .lessThanOrEqual)
}
}

View File

@ -179,6 +179,6 @@ extension InputFieldViewController: ComponentSampleable {
component.successText = "Good job entering a valid address!"
component.tooltipTitle = "Check the formatting of your address"
component.tooltipContent = "House/Building number then street name"
return ComponentSample(component: component, canPinTrailing: false)
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
}
}

View File

@ -346,6 +346,6 @@ extension LabelViewController: ComponentSampleable {
static func makeSample() -> ComponentSample {
let component = Self.makeComponent()
component.text = "Helg¹ worldg Hell¹ worldg"
return ComponentSample(component: component, canPinTrailing: true)
return ComponentSample(component: component)
}
}

View File

@ -160,6 +160,6 @@ extension NotificationViewController: ComponentSampleable {
component.primaryButtonModel = .init(text: firstButtonDefaultText, onClick: {b in print("\(b.text!) click")})
component.secondaryButtonModel = .init(text: secondButtonDefaultText, onClick: {b in print("\(b.text!) click")})
component.onCloseClick = {_ in print("notification on close click")}
return ComponentSample(component: component, canPinTrailing: true)
return ComponentSample(component: component)
}
}

View File

@ -131,6 +131,6 @@ extension RadioBoxGroupViewController: ComponentSampleable {
component.selectorModels = [radioBox1, radioBox2]
return ComponentSample(component: component, canPinTrailing: false)
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
}
}

View File

@ -133,6 +133,6 @@ extension RadioButtonGroupViewController: ComponentSampleable {
component.selectorModels = [radioButton1, radioButton2, radioButton3]
return ComponentSample(component: component, canPinTrailing: false)
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
}
}

View File

@ -105,6 +105,6 @@ extension RadioButtonItemViewController: ComponentSampleable {
component.childText = "I agree to Verizon's terms and conditions click here"
component.errorText = "Error Text"
return ComponentSample(component: component, canPinTrailing: false)
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
}
}

View File

@ -69,6 +69,6 @@ class RadioButtonViewController: BaseViewController<RadioButton> {
extension RadioButtonViewController: ComponentSampleable {
static func makeSample() -> ComponentSample {
let component = Self.makeComponent()
return ComponentSample(component: component, canPinTrailing: false)
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
}
}

View File

@ -152,7 +152,7 @@ extension RadioSwatchGroupViewController: ComponentSampleable {
component.selectorModels = [radioSwatch1, radioSwatch2, radioSwatch3, radioSwatch4, radioSwatch5, radioSwatch6, radioSwatch7, radioSwatch8]
return ComponentSample(component: component, canPinTrailing: true)
return ComponentSample(component: component)
}
}

View File

@ -1,4 +1,3 @@
//
// TableViewTestController.swift
// VDSSample
//
@ -14,17 +13,76 @@ public typealias ComponentSampleView = UIView & Surfaceable
public struct ComponentSample {
public var component: ComponentSampleView
public var canPinLeading: Bool
public var canPinTrailing: Bool
public var canPinTop: Bool
public var canPinBottom: Bool
public enum GreaterThanPinningType: String {
case none, equalTo, greaterThanOrEqual
}
public init(component: ComponentSampleView, canPinLeading: Bool = true, canPinTrailing: Bool = true, canPinTop: Bool = true, canPinBottom: Bool = true) {
public enum LessThanPinningType: String {
case none, equalTo, lessThanOrEqual
}
public var top: GreaterThanPinningType = .equalTo
public var leading: GreaterThanPinningType = .equalTo
public var trailing: LessThanPinningType = .equalTo
public var bottom: LessThanPinningType = .equalTo
public init(component: ComponentSampleView,
topPinningType: GreaterThanPinningType = .equalTo,
leadingPinningType: GreaterThanPinningType = .equalTo,
trailingPinningType: LessThanPinningType = .equalTo,
bottomPinningType: LessThanPinningType = .equalTo) {
self.component = component
self.canPinLeading = canPinLeading
self.canPinTrailing = canPinTrailing
self.canPinTop = canPinTop
self.canPinBottom = canPinBottom
self.top = topPinningType
self.leading = leadingPinningType
self.trailing = trailingPinningType
self.bottom = bottomPinningType
}
public func pin(edgeInset: UIEdgeInsets = .zero) {
guard let superview = component.superview else { return }
switch top {
case .equalTo:
component.pinTop(anchor: superview.topAnchor, constant: edgeInset.top)
case .greaterThanOrEqual:
component.pinTopGreaterThanOrEqualTo(anchor: superview.topAnchor, constant: edgeInset.top)
case .none: break
}
switch leading {
case .equalTo:
component.pinLeading(anchor: superview.leadingAnchor, constant: edgeInset.left)
case .greaterThanOrEqual:
component.pinLeadingGreaterThanOrEqualTo(anchor: superview.leadingAnchor, constant: edgeInset.left)
case .none: break
}
switch trailing {
case .equalTo:
component.pinTrailing(anchor: superview.trailingAnchor, constant: edgeInset.right)
case .lessThanOrEqual:
component.pinTrailingLessThanOrEqualTo(anchor: superview.trailingAnchor, constant: edgeInset.right)
case .none: break
}
switch bottom {
case .equalTo:
component.pinBottom(anchor: superview.bottomAnchor, constant: edgeInset.bottom)
case .lessThanOrEqual:
component.pinBottomLessThanOrEqualTo(anchor: superview.bottomAnchor, constant: edgeInset.bottom)
case .none: break
}
}
}
@ -32,9 +90,15 @@ protocol ComponentSampleable {
static func makeSample() -> ComponentSample
}
public class TableViewTestController: UITableViewController, Initable, Surfaceable {
public class TableViewTestController: UIViewController, Initable, Surfaceable {
var components:[ComponentSample] = []
lazy var tableView = UITableView().with {
$0.translatesAutoresizingMaskIntoConstraints = false
$0.delegate = self
$0.dataSource = self
}
public var surface: Surface = .light {
didSet {
tableView.reloadData()
@ -46,113 +110,121 @@ public class TableViewTestController: UITableViewController, Initable, Surfaceab
required public init() {
super.init(nibName: nil, bundle: nil)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
public override func viewDidLoad() {
super.viewDidLoad()
MenuViewController.items.forEach { menuItem in
if let componentable = menuItem.viewController as? ComponentSampleable.Type {
components.append(componentable.makeSample())
}
}
tableView.register(VDSCell.self, forCellReuseIdentifier: "cell")
tableView.allowsSelection = false
tableView.estimatedRowHeight = 45
tableView.separatorStyle = .none
tableView.rowHeight = UITableView.automaticDimension
tableView.reloadData()
let view = View(frame: .init(origin: .zero, size: .init(width: tableView.bounds.width, height: 100)))
let toggle = Toggle().with {
$0.showText = true
$0.textPosition = .right
//$0.textPosition = .right
$0.offText = "Light"
$0.onText = "Dark"
$0.onChange = { [weak self] toggle in
self?.surface = toggle.isOn ? .dark : .light
}
}
view.addSubview(toggle)
toggle.pinToSuperView(.init(top: 5, left: 16, bottom: 5, right: 16))
tableView.tableHeaderView = view
tableView.tableHeaderView?.frame.size.height = 40
let toggleSample = ComponentSample(component: toggle, leadingPinningType: .none)
let wrapper = UIView().with { $0.translatesAutoresizingMaskIntoConstraints = false }
wrapper.addSubview(toggle)
toggleSample.pin(edgeInset: .init(top: 5, left: 5, bottom: 5, right: 5))
let stackView = UIStackView(arrangedSubviews: [wrapper, tableView]).with {
$0.translatesAutoresizingMaskIntoConstraints = false
$0.axis = .vertical
$0.spacing = 4
$0.distribution = .fill
}
view.backgroundColor = Surface.light.color
view.addSubview(stackView)
NSLayoutConstraint.activate([
stackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
stackView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
stackView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
stackView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
])
//var items = MenuViewController.items
let items = [
MenuComponent(title: "Badge", completed: true, viewController: BadgeViewController.self),
MenuComponent(title: "Button", completed: true, viewController: ButtonViewController.self),
MenuComponent(title: "ButtonGroup", completed: true, viewController: ButtonGroupViewController.self),
MenuComponent(title: "Icon", completed: true, viewController: IconViewController.self),
MenuComponent(title: "Line", completed: true, viewController: LineViewController.self),
MenuComponent(title: "Loader", completed: true, viewController: LoaderViewController.self),
MenuComponent(title: "Tabs", completed: true, viewController: TabsViewController.self),
MenuComponent(title: "TextLink", completed: true, viewController: TextLinkViewController.self),
MenuComponent(title: "TextLinkCaret", completed: true, viewController: TextLinkCaretViewController.self),
MenuComponent(title: "TitleLockup", completed: true, viewController: TitleLockupViewController.self),
MenuComponent(title: "Tooltip", completed: true, viewController: TooltipViewController.self)
]
items.forEach { menuItem in
if let componentable = menuItem.viewController as? ComponentSampleable.Type {
components.append(componentable.makeSample())
}
}
tableView.register(VDSCell.self, forCellReuseIdentifier: "cell")
tableView.allowsSelection = false
tableView.estimatedRowHeight = 45
tableView.separatorStyle = .singleLine
}
public override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
tableView.reloadData()
}
public override func numberOfSections(in tableView: UITableView) -> Int {
components.count
public func refresh() {
DispatchQueue.main.async { [self] in
tableView.beginUpdates()
tableView.endUpdates()
}
}
}
extension TableViewTestController : UITableViewDelegate, UITableViewDataSource {
public override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
"\(type(of: components[section].component))"
}
public override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
40
}
public override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
public func numberOfSections(in tableView: UITableView) -> Int {
1
}
public func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
components.count
}
public override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
guard let cell = tableView.dequeueReusableCell(withIdentifier: "cell") as? VDSCell else { return UITableViewCell() }
cell.prepareForReuse()
cell.surface = surface
cell.sample = components[indexPath.section]
cell.sample = components[indexPath.row]
return cell
}
}
public class VDSCell: UITableViewCell, AppleGuidlinesTouchable, Surfaceable {
public class VDSCell: UITableViewCell, Surfaceable {
public var surface: Surface = .light
public var sample: ComponentSample? {
didSet {
contentView.subviews.forEach { $0.removeFromSuperview() }
let edges: UIEdgeInsets = .init(top: 16, left: 16, bottom: 16, right: 16)
guard let sample else { return }
var component = sample.component
component.surface = surface
let wrapper = View()
wrapper.addSubview(component)
if sample.canPinTop {
component.pinTop(anchor: wrapper.topAnchor, constant: edges.top)
} else {
component.pinTopGreaterThanOrEqualTo(anchor: wrapper.topAnchor, constant: edges.top)
}
if sample.canPinLeading {
component.pinLeading(anchor: wrapper.leadingAnchor, constant: edges.left)
} else {
component.pinLeadingGreaterThanOrEqualTo(anchor: wrapper.leadingAnchor, constant: edges.left)
}
if sample.canPinTrailing {
component.pinTrailing(anchor: wrapper.trailingAnchor, constant: edges.right)
} else {
component.pinTrailingLessThanOrEqualTo(anchor: wrapper.trailingAnchor, constant: edges.right)
}
contentView.addSubview(component)
sample.pin(edgeInset: .init(top: 16, left: 16, bottom: 16, right: 16))
if sample.canPinBottom {
component.pinBottom(anchor: wrapper.bottomAnchor, constant: edges.bottom)
} else {
component.pinBottomLessThanOrEqualTo(anchor: wrapper.bottomAnchor, constant: edges.bottom)
}
contentView.addSubview(wrapper)
wrapper.pinToSuperView(edges)
backgroundColor = .systemYellow //surface.color
backgroundColor = surface.color
}
}
override open func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
Self.acceptablyOutsideBounds(point: point, bounds: bounds)
}
}

View File

@ -153,6 +153,6 @@ extension TabsViewController: ComponentSampleable {
.init(text: "Contact Us")
]
return ComponentSample(component: component, canPinTrailing: true)
return ComponentSample(component: component)
}
}

View File

@ -148,6 +148,6 @@ extension TextAreaViewController: ComponentSampleable {
component.errorText = "Enter a valid address."
component.tooltipTitle = "Check the formatting of your address"
component.tooltipContent = "House/Building number then street name"
return ComponentSample(component: component, canPinTrailing: false)
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
}
}

View File

@ -78,6 +78,6 @@ extension TextLinkCaretViewController: ComponentSampleable {
let component = Self.makeComponent()
component.text = "Text Link Caret"
component.onClick = { c in print("\(c.text!) Click")}
return ComponentSample(component: component, canPinTrailing: false)
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
}
}

View File

@ -80,6 +80,6 @@ extension TextLinkViewController: ComponentSampleable {
let component = Self.makeComponent()
component.text = "Text Link"
component.onClick = { c in print("\(c.text!) Click")}
return ComponentSample(component: component, canPinTrailing: false)
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
}
}

View File

@ -153,6 +153,6 @@ extension TileContainerViewController: ComponentSampleable {
let component = Self.makeComponent()
component.width = 150
component.color = .black
return ComponentSample(component: component, canPinTrailing: false)
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
}
}

View File

@ -240,6 +240,6 @@ extension TileletViewController: ComponentSampleable {
component.titleModel = titleModel
component.subTitleModel = subTitleModel
component.width = 250
return ComponentSample(component: component, canPinTrailing: false)
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
}
}

View File

@ -184,6 +184,6 @@ extension TitleLockupViewController: ComponentSampleable {
component.titleModel = titleModel
component.subTitleModel = subTitleModel
component.debugBorder(show: true)
return ComponentSample(component: component, canPinTrailing: true)
return ComponentSample(component: component)
}
}

View File

@ -119,6 +119,6 @@ class ToggleViewController: BaseViewController<Toggle> {
extension ToggleViewController: ComponentSampleable {
static func makeSample() -> ComponentSample {
let component = Self.makeComponent()
return ComponentSample(component: component, canPinTrailing: false)
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
}
}

View File

@ -106,7 +106,7 @@ extension TooltipViewController: ComponentSampleable {
let component = Self.makeComponent()
component.title = "5G Ultra Wideband is available in your area."
component.content = "$799.99 (128 GB only) "
return ComponentSample(component: component, canPinTrailing: false, canPinBottom: false)
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual, bottomPinningType: .lessThanOrEqual)
}
}

View File

@ -174,7 +174,7 @@ extension TrailingTooltipLabelViewController: ComponentSampleable {
component.labelText = "5G Ultra Wideband is available in your area"
component.tooltipTitle = "5G Ultra Wideband is available in your area."
component.tooltipContent = "$799.99 (128 GB only)"
return ComponentSample(component: component, canPinTrailing: false)
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
}
}