221 lines
10 KiB
Swift
221 lines
10 KiB
Swift
//
|
|
// TableViewController.swift
|
|
// VDSSample
|
|
//
|
|
// Created by Nadigadda, Sumanth on 24/04/24.
|
|
//
|
|
|
|
import Foundation
|
|
import VDS
|
|
import UIKit
|
|
import VDSCoreTokens
|
|
|
|
enum TableLineStyle: String, CaseIterable {
|
|
case none
|
|
case primary
|
|
case secondary
|
|
|
|
func lineStyle() -> Line.Style? {
|
|
switch self {
|
|
case .primary:
|
|
return Line.Style.primary
|
|
case .secondary:
|
|
return Line.Style.secondary
|
|
case .none:
|
|
return nil
|
|
}
|
|
}
|
|
}
|
|
|
|
class TableViewController: BaseViewController<Table> {
|
|
|
|
var striped = Toggle()
|
|
|
|
var fillContainer = Toggle()
|
|
|
|
var customColumnWidthSize = NumericField().with {
|
|
$0.placeholder = "Minimum 50px"
|
|
}
|
|
|
|
lazy var headerLineStylePicker = {
|
|
PickerSelectorView(title: "primary", picker: self.picker, items: TableLineStyle.allCases)
|
|
}()
|
|
|
|
lazy var rowLineStylePicker = {
|
|
PickerSelectorView(title: "secondary", picker: self.picker, items: TableLineStyle.allCases)
|
|
}()
|
|
|
|
lazy var paddingPicker = {
|
|
PickerSelectorView(title: "standard", picker: self.picker, items: Table.Padding.allCases)
|
|
}()
|
|
|
|
override func viewDidLoad() {
|
|
super.viewDidLoad()
|
|
self.setupPicker()
|
|
self.setupModel()
|
|
}
|
|
|
|
override func setupForm() {
|
|
super.setupForm()
|
|
addFormRow(label: "Surface", view: surfacePickerSelectorView)
|
|
addFormRow(label: "Padding", view: paddingPicker)
|
|
addFormRow(label: "Striped", view: striped, pinTrailing: false)
|
|
addFormRow(label: "Header line style", view: headerLineStylePicker)
|
|
addFormRow(label: "Row line style", view: rowLineStylePicker)
|
|
addFormRow(label: "Fill container", view: fillContainer, pinTrailing: false)
|
|
addFormRow(label: "Custom column size", view: customColumnWidthSize)
|
|
|
|
fillContainer.isOn = component.fillContainer
|
|
updateTextFieldStatus(enable: !fillContainer.isOn)
|
|
|
|
addContentTopView(view: component)
|
|
|
|
striped.onChange = { [weak self] sender in
|
|
self?.component.striped = sender.isOn
|
|
|
|
let headerStyle = sender.isOn ? nil : TableLineStyle(rawValue: self?.headerLineStylePicker.text ?? "")
|
|
let rowStyle = sender.isOn ? nil : TableLineStyle(rawValue: self?.rowLineStylePicker.text ?? "")
|
|
|
|
var headers = self?.component.tableHeader ?? [TableRowModel]()
|
|
self?.updateBottomLineStyle(items:&headers, style: headerStyle?.lineStyle())
|
|
self?.component.tableHeader = headers
|
|
|
|
var rows = self?.component.tableRows ?? [TableRowModel]()
|
|
self?.updateBottomLineStyle(items:&rows, style: rowStyle?.lineStyle())
|
|
self?.component.tableRows = rows
|
|
|
|
self?.component.padding = .compact
|
|
self?.paddingPicker.text = Table.Padding.compact.rawValue
|
|
}
|
|
|
|
fillContainer.onChange = { [weak self] sender in
|
|
self?.component.fillContainer = sender.isOn
|
|
self?.updateTextFieldStatus(enable:!sender.isOn)
|
|
if let count = self?.component.tableHeader.first?.columnsCount,
|
|
let text = self?.customColumnWidthSize.text,
|
|
let width = NumberFormatter().number(from: text) {
|
|
self?.component.columnWidths = Array(repeating: CGFloat(truncating: width), count: count)
|
|
}
|
|
}
|
|
|
|
customColumnWidthSize.numberPublisher.sink { [weak self] text in
|
|
if let count = self?.component.tableHeader.first?.columnsCount, let text, text.intValue > 50 {
|
|
self?.component.columnWidths = Array(repeating: CGFloat(truncating: text), count: count)
|
|
}
|
|
}.store(in: &subscribers)
|
|
}
|
|
|
|
func setupPicker() {
|
|
surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.component.surface = item
|
|
self?.contentTopView.backgroundColor = item.color
|
|
}
|
|
|
|
headerLineStylePicker.onPickerDidSelect = { [weak self] item in
|
|
var headers = self?.component.tableHeader ?? [TableRowModel]()
|
|
self?.updateBottomLineStyle(items:&headers, style: item.lineStyle())
|
|
self?.component.tableHeader = headers
|
|
}
|
|
|
|
rowLineStylePicker.onPickerDidSelect = { [weak self] item in
|
|
|
|
var rows = self?.component.tableRows ?? [TableRowModel]()
|
|
self?.updateBottomLineStyle(items:&rows, style: item.lineStyle())
|
|
self?.component.tableRows = rows
|
|
}
|
|
|
|
paddingPicker.onPickerDidSelect = { [weak self] item in
|
|
self?.component.padding = item
|
|
}
|
|
}
|
|
|
|
func updateTextFieldStatus(enable: Bool) {
|
|
customColumnWidthSize.isEnabled = enable
|
|
customColumnWidthSize.backgroundColor = enable ? UIColor.white : VDSColor.paletteGray85
|
|
}
|
|
|
|
func updateBottomLineStyle(items:inout [TableRowModel], style: Line.Style?) {
|
|
for currentRowIndex in 0..<items.count {
|
|
var currentRow = items[currentRowIndex]
|
|
for currentRowItem in 0..<currentRow.columnsCount {
|
|
currentRow.columns[currentRowItem].bottomLine = style
|
|
}
|
|
items[currentRowIndex] = currentRow
|
|
}
|
|
}
|
|
|
|
func setupModel() {
|
|
///Header row
|
|
|
|
self.component.tableHeader = [TableRowModel(columns: [TableItemModel(bottomLine: .primary, component: nil),
|
|
TableItemModel(bottomLine: .primary, component: Label().with { $0.text = "Verizon smart family"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping}),
|
|
TableItemModel(bottomLine: .primary, component: Label().with { $0.text = "Call filter"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping })], isHeader: true)]
|
|
|
|
///First row
|
|
var rows = [TableRowModel(columns: [TableItemModel(bottomLine: .secondary, component: Label().with { $0.text = "Cost"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping}),
|
|
TableItemModel(bottomLine: .secondary, component: Label().with { $0.text = "$5/month for up to 10 lines"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping}),
|
|
TableItemModel(bottomLine: .secondary, component: Label().with { $0.text = "$2.99/month per device"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping})])]
|
|
///second row
|
|
rows.append(TableRowModel(columns: [TableItemModel(bottomLine: .secondary, component: Label().with { $0.text = "Block web domains"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping}),
|
|
TableItemModel(bottomLine: .secondary, component: Icon().with { $0.name = Icon.Name.checkmark }),
|
|
TableItemModel(bottomLine: .secondary, component: Icon().with { $0.name = Icon.Name.checkmark })]))
|
|
|
|
///Third row
|
|
rows.append(TableRowModel(columns: [TableItemModel(bottomLine: .secondary, component: Label().with { $0.text = "Block calls and messages from specific numbers"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping}),
|
|
TableItemModel(bottomLine: .secondary, component: Label().with { $0.text = "Permanently"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping}),
|
|
TableItemModel(bottomLine: .secondary, component: Label().with { $0.text = "Permanently"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping})]))
|
|
|
|
if UIDevice.isIPad {
|
|
|
|
///Fourth row
|
|
let titleLockUp = TitleLockup()
|
|
let eyebrowModel = TitleLockup.EyebrowModel(text: "Today only.")
|
|
let titleModel = TitleLockup.TitleModel(text: "Get more of our best")
|
|
let subTitleModel = TitleLockup.SubTitleModel(text: "Get both of our best and pay less. Pair 5G Home Internet with Verizon mobile to save every month.")
|
|
|
|
titleLockUp.eyebrowModel = eyebrowModel
|
|
titleLockUp.titleModel = titleModel
|
|
titleLockUp.subTitleModel = subTitleModel
|
|
|
|
let button = Button()
|
|
button.text = "Testing"
|
|
|
|
rows.append(TableRowModel(columns: [TableItemModel(bottomLine: .secondary, component:Toggle()),
|
|
TableItemModel(bottomLine: .secondary, component:titleLockUp),
|
|
TableItemModel(bottomLine: .secondary, component: button)]))
|
|
|
|
|
|
///Fifth row
|
|
let tilelet = Tilelet()
|
|
let ftitleModel = Tilelet.TitleModel(text: "Save $XX on your monthly bill.")
|
|
let fsubTitleModel = Tilelet.SubTitleModel(text: "Enroll in Auto Pay & paper-free billing to save on your monthly bill.")
|
|
tilelet.titleModel = ftitleModel
|
|
tilelet.subTitleModel = fsubTitleModel
|
|
|
|
let textArea = TextArea()
|
|
textArea.labelText = "Street Address"
|
|
textArea.helperText = "For example: 123 Verizon St"
|
|
textArea.errorText = "Enter a valid address."
|
|
textArea.tooltipModel = .init(title: "Check the formatting of your address", content:"House/Building number then street name")
|
|
|
|
let trailingToolTip = TrailingTooltipLabel()
|
|
trailingToolTip.labelText = "5G Ultra Wideband is available in your area"
|
|
trailingToolTip.tooltipModel = .init(title: "Check the formatting of your address",
|
|
content:"House/Building number then street name")
|
|
|
|
let iconView = Icon()
|
|
iconView.name = .cleanSurface
|
|
|
|
rows.append(TableRowModel(columns: [TableItemModel(bottomLine: .secondary, component:textArea),
|
|
TableItemModel(bottomLine: .secondary, component:iconView),
|
|
TableItemModel(bottomLine: .secondary, component:trailingToolTip)]))
|
|
}
|
|
|
|
|
|
component.fillContainer = true
|
|
component.columnWidths = [400.0, 400.0, 400.0]
|
|
|
|
self.component.tableRows = rows
|
|
}
|
|
}
|