From e51b4dfe371d798dca45d6b8582224b896fc033b Mon Sep 17 00:00:00 2001 From: Sumanth Nadigadda Date: Fri, 24 May 2024 20:48:48 +0530 Subject: [PATCH 1/3] Adding fillContainer and column width elements to controller. --- .../ViewControllers/TableViewController.swift | 69 +++++++++++++++++++ 1 file changed, 69 insertions(+) diff --git a/VDSSample/ViewControllers/TableViewController.swift b/VDSSample/ViewControllers/TableViewController.swift index ffbb9c3..ceb696a 100644 --- a/VDSSample/ViewControllers/TableViewController.swift +++ b/VDSSample/ViewControllers/TableViewController.swift @@ -13,6 +13,10 @@ class TableViewController: BaseViewController { var striped = Toggle() + var fillContainer = Toggle() + + var customColumnWidthSize = NumericField() + lazy var headerLineStylePicker = { PickerSelectorView(title: "primary", picker: self.picker, items: Line.Style.allCases) }() @@ -38,12 +42,28 @@ class TableViewController: BaseViewController
{ addFormRow(label: "Striped", view: striped) addFormRow(label: "Header line style", view: headerLineStylePicker) addFormRow(label: "Row line style", view: rowLineStylePicker) + addFormRow(label: "Fill container", view: fillContainer) + addFormRow(label: "Custom column size", view: customColumnWidthSize) + + fillContainer.isOn = component.fillContainer addContentTopView(view: component) striped.onChange = { [weak self] sender in self?.component.striped = sender.isOn } + + fillContainer.onChange = { [weak self] sender in + self?.component.fillContainer = sender.isOn + self?.customColumnWidthSize.isEnabled = !sender.isOn + } + + customColumnWidthSize.textPublisher.sink { [weak self] text in + if let width = NumberFormatter().number(from: text), let count = self?.component.tableHeader.first?.count { + self?.component.columnWidths = Array(repeating: CGFloat(truncating: width), count: count) + } + + }.store(in: &subscribers) } func setupPicker() { @@ -104,6 +124,55 @@ class TableViewController: BaseViewController
{ 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([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 image = UIImage(named: "clean-surface") + let imageView = UIImageView(image: image) + + rows.append([TableItemModel(bottomLine: .secondary, component:textArea), + TableItemModel(bottomLine: .secondary, component:imageView), + TableItemModel(bottomLine: .secondary, component:trailingToolTip)]) + } + + + component.fillContainer = true + component.columnWidths = [400.0, 400.0, 400.0] + self.component.tableRows = rows } } From 7a47221d626d6a3948a46bdd5a5a2582eeba37f7 Mon Sep 17 00:00:00 2001 From: Sumanth Nadigadda Date: Mon, 27 May 2024 10:56:09 +0530 Subject: [PATCH 2/3] Minor refactoring changes. --- .../ViewControllers/TableViewController.swift | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/VDSSample/ViewControllers/TableViewController.swift b/VDSSample/ViewControllers/TableViewController.swift index ceb696a..c4d4466 100644 --- a/VDSSample/ViewControllers/TableViewController.swift +++ b/VDSSample/ViewControllers/TableViewController.swift @@ -8,6 +8,7 @@ import Foundation import VDS import UIKit +import VDSTokens class TableViewController: BaseViewController
{ @@ -15,7 +16,9 @@ class TableViewController: BaseViewController
{ var fillContainer = Toggle() - var customColumnWidthSize = NumericField() + var customColumnWidthSize = NumericField().with { + $0.placeholder = "Minimum 50px" + } lazy var headerLineStylePicker = { PickerSelectorView(title: "primary", picker: self.picker, items: Line.Style.allCases) @@ -46,6 +49,7 @@ class TableViewController: BaseViewController
{ addFormRow(label: "Custom column size", view: customColumnWidthSize) fillContainer.isOn = component.fillContainer + updateTextFieldStatus(enable: !fillContainer.isOn) addContentTopView(view: component) @@ -55,14 +59,13 @@ class TableViewController: BaseViewController
{ fillContainer.onChange = { [weak self] sender in self?.component.fillContainer = sender.isOn - self?.customColumnWidthSize.isEnabled = !sender.isOn + self?.updateTextFieldStatus(enable:!sender.isOn) } - - customColumnWidthSize.textPublisher.sink { [weak self] text in - if let width = NumberFormatter().number(from: text), let count = self?.component.tableHeader.first?.count { - self?.component.columnWidths = Array(repeating: CGFloat(truncating: width), count: count) + + customColumnWidthSize.numberPublisher.sink { [weak self] text in + if let count = self?.component.tableHeader.first?.count, let text, text.intValue > 50 { + self?.component.columnWidths = Array(repeating: CGFloat(truncating: text), count: count) } - }.store(in: &subscribers) } @@ -104,6 +107,11 @@ class TableViewController: BaseViewController
{ } } + func updateTextFieldStatus(enable: Bool) { + customColumnWidthSize.isEnabled = enable + customColumnWidthSize.backgroundColor = enable ? UIColor.white : VDSColor.paletteGray85 + } + func setupModel() { ///Header row self.component.tableHeader = [[TableItemModel(bottomLine: .primary, component: Label().with { $0.text = ""}), From 0590309726ec93fde9accd0bf9f7ba944b0bc620 Mon Sep 17 00:00:00 2001 From: Sumanth Nadigadda Date: Mon, 27 May 2024 15:00:38 +0530 Subject: [PATCH 3/3] using TableRowModel to populate data for Table component. --- .../ViewControllers/TableViewController.swift | 46 +++++++++++-------- 1 file changed, 26 insertions(+), 20 deletions(-) diff --git a/VDSSample/ViewControllers/TableViewController.swift b/VDSSample/ViewControllers/TableViewController.swift index c4d4466..80110b0 100644 --- a/VDSSample/ViewControllers/TableViewController.swift +++ b/VDSSample/ViewControllers/TableViewController.swift @@ -60,10 +60,15 @@ class TableViewController: BaseViewController
{ 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?.count, let text, text.intValue > 50 { + 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) @@ -76,11 +81,11 @@ class TableViewController: BaseViewController
{ } headerLineStylePicker.onPickerDidSelect = { [weak self] item in - var headers = self?.component.tableHeader ?? [[]] + var headers = self?.component.tableHeader ?? [TableRowModel]() for currentHeaderIndex in 0.. { rowLineStylePicker.onPickerDidSelect = { [weak self] item in - var rows = self?.component.tableRows ?? [[]] + var rows = self?.component.tableRows ?? [TableRowModel]() for currentRowIndex in 0.. { func setupModel() { ///Header row - self.component.tableHeader = [[TableItemModel(bottomLine: .primary, component: Label().with { $0.text = ""}), - 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 })]] + + 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 })])] ///First row - var rows = [[TableItemModel(bottomLine: .secondary, component: Label().with { $0.text = "Cost"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping}), + 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})]] + 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([TableItemModel(bottomLine: .secondary, component: Label().with { $0.text = "Block web domains"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping}), + 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 })]) + TableItemModel(bottomLine: .secondary, component: Icon().with { $0.name = Icon.Name.checkmark })])) ///Third row - rows.append([TableItemModel(bottomLine: .secondary, component: Label().with { $0.text = "Block calls and messages from specific numbers"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping}), + 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})]) + TableItemModel(bottomLine: .secondary, component: Label().with { $0.text = "Permanently"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping})])) if UIDevice.isIPad { @@ -147,9 +153,9 @@ class TableViewController: BaseViewController
{ let button = Button() button.text = "Testing" - rows.append([TableItemModel(bottomLine: .secondary, component:Toggle()), + rows.append(TableRowModel(columns: [TableItemModel(bottomLine: .secondary, component:Toggle()), TableItemModel(bottomLine: .secondary, component:titleLockUp), - TableItemModel(bottomLine: .secondary, component: button)]) + TableItemModel(bottomLine: .secondary, component: button)])) ///Fifth row @@ -172,9 +178,9 @@ class TableViewController: BaseViewController
{ let image = UIImage(named: "clean-surface") let imageView = UIImageView(image: image) - rows.append([TableItemModel(bottomLine: .secondary, component:textArea), + rows.append(TableRowModel(columns: [TableItemModel(bottomLine: .secondary, component:textArea), TableItemModel(bottomLine: .secondary, component:imageView), - TableItemModel(bottomLine: .secondary, component:trailingToolTip)]) + TableItemModel(bottomLine: .secondary, component:trailingToolTip)])) }