Merge branch 'develop' of https://gitlab.verizon.com/BPHV_MIPS/vds_ios_sample into feature/Table
# Conflicts: # VDSSample.xcodeproj/project.pbxproj
This commit is contained in:
Sumanth Nadigadda
commit
b62a2d5f2e
@ -35,6 +35,7 @@
|
||||
1808BEBE2BA4479500129230 /* CarouselScrollbarViewConttroller.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1808BEBD2BA4479500129230 /* CarouselScrollbarViewConttroller.swift */; };
|
||||
1832AC5B2BA1347B008AE476 /* BreadcrumbsViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1832AC5A2BA1347B008AE476 /* BreadcrumbsViewController.swift */; };
|
||||
186D13CD2BBA990800986B53 /* DropdownSelectViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 186D13CC2BBA990800986B53 /* DropdownSelectViewController.swift */; };
|
||||
18A3F1302BD9332500498E4A /* CalendarViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18A3F12F2BD9332500498E4A /* CalendarViewController.swift */; };
|
||||
440B84CC2BD8E98B004A732A /* TableViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 440B84CB2BD8E98B004A732A /* TableViewController.swift */; };
|
||||
445BA07A29C088470036A7C5 /* NotificationViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 445BA07929C088470036A7C5 /* NotificationViewController.swift */; };
|
||||
44604AD929CE1CF900E62B51 /* LineViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 44604AD829CE1CF900E62B51 /* LineViewController.swift */; };
|
||||
@ -44,6 +45,7 @@
|
||||
EA0D1C312A673F3500E5C127 /* RadioButtonViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA0D1C302A673F3500E5C127 /* RadioButtonViewController.swift */; };
|
||||
EA0D1C332A673FD400E5C127 /* RadioButtonItemViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA0D1C322A673FD400E5C127 /* RadioButtonItemViewController.swift */; };
|
||||
EA0FC2C12912DC5500DF80B4 /* TextLinkCaretViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA0FC2C02912DC5500DF80B4 /* TextLinkCaretViewController.swift */; };
|
||||
EA1758462BC8893700A5C0D9 /* DatePickerViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA1758452BC8893700A5C0D9 /* DatePickerViewController.swift */; };
|
||||
EA21C5D82B600E4200CFC139 /* VDSTokens.xcframework in Frameworks */ = {isa = PBXBuildFile; fileRef = EA21C5D72B600E4200CFC139 /* VDSTokens.xcframework */; };
|
||||
EA21C5D92B600E4200CFC139 /* VDSTokens.xcframework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = EA21C5D72B600E4200CFC139 /* VDSTokens.xcframework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; };
|
||||
EA297A682A02F5320031ED56 /* TableViewTestController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA297A672A02F5320031ED56 /* TableViewTestController.swift */; };
|
||||
@ -130,6 +132,7 @@
|
||||
1808BEBD2BA4479500129230 /* CarouselScrollbarViewConttroller.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CarouselScrollbarViewConttroller.swift; sourceTree = "<group>"; };
|
||||
1832AC5A2BA1347B008AE476 /* BreadcrumbsViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BreadcrumbsViewController.swift; sourceTree = "<group>"; };
|
||||
186D13CC2BBA990800986B53 /* DropdownSelectViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DropdownSelectViewController.swift; sourceTree = "<group>"; };
|
||||
18A3F12F2BD9332500498E4A /* CalendarViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CalendarViewController.swift; sourceTree = "<group>"; };
|
||||
440B84CB2BD8E98B004A732A /* TableViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TableViewController.swift; sourceTree = "<group>"; };
|
||||
445BA07929C088470036A7C5 /* NotificationViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NotificationViewController.swift; sourceTree = "<group>"; };
|
||||
44604AD829CE1CF900E62B51 /* LineViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LineViewController.swift; sourceTree = "<group>"; };
|
||||
@ -139,6 +142,7 @@
|
||||
EA0D1C302A673F3500E5C127 /* RadioButtonViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RadioButtonViewController.swift; sourceTree = "<group>"; };
|
||||
EA0D1C322A673FD400E5C127 /* RadioButtonItemViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RadioButtonItemViewController.swift; sourceTree = "<group>"; };
|
||||
EA0FC2C02912DC5500DF80B4 /* TextLinkCaretViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TextLinkCaretViewController.swift; sourceTree = "<group>"; };
|
||||
EA1758452BC8893700A5C0D9 /* DatePickerViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DatePickerViewController.swift; sourceTree = "<group>"; };
|
||||
EA21C5D72B600E4200CFC139 /* VDSTokens.xcframework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.xcframework; name = VDSTokens.xcframework; path = SharedFrameworks/VDSTokens.xcframework; sourceTree = "<group>"; };
|
||||
EA297A672A02F5320031ED56 /* TableViewTestController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TableViewTestController.swift; sourceTree = "<group>"; };
|
||||
EA3C3B99289966EF000CA526 /* VDSSample.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = VDSSample.app; sourceTree = BUILT_PRODUCTS_DIR; };
|
||||
@ -319,10 +323,12 @@
|
||||
EAB5FEEE2927E28400998C17 /* ButtonGroupViewController.swift */,
|
||||
EA81410D2A0ED8DC004F60D2 /* ButtonIconViewController.swift */,
|
||||
5FC35BE828D5235A004EBEAC /* ButtonViewController.swift */,
|
||||
18A3F12F2BD9332500498E4A /* CalendarViewController.swift */,
|
||||
1808BEBD2BA4479500129230 /* CarouselScrollbarViewConttroller.swift */,
|
||||
EA89204D28B67332006B9984 /* CheckBoxGroupViewController.swift */,
|
||||
EAF7F09B2899B92400B287F5 /* CheckboxItemViewController.swift */,
|
||||
EA0D1C2E2A66CFE900E5C127 /* CheckboxViewController.swift */,
|
||||
EA1758452BC8893700A5C0D9 /* DatePickerViewController.swift */,
|
||||
186D13CC2BBA990800986B53 /* DropdownSelectViewController.swift */,
|
||||
EA985C00296CC21C00F2FF2E /* IconViewController.swift */,
|
||||
EAA5EEAC28EB6924003B3210 /* InputFieldViewController.swift */,
|
||||
@ -518,6 +524,7 @@
|
||||
EA3C3BB428996775000CA526 /* PickerBase.swift in Sources */,
|
||||
EAB2376C29E9E74900AABE9A /* TrailingTooltipLabelViewController.swift in Sources */,
|
||||
EAB1D2C928AAAA1D00DAE764 /* BaseViewController.swift in Sources */,
|
||||
EA1758462BC8893700A5C0D9 /* DatePickerViewController.swift in Sources */,
|
||||
EAD062AD2A3B86950015965D /* BadgeIndicatorViewController.swift in Sources */,
|
||||
EA5E305C295111050082B959 /* TileletViewController.swift in Sources */,
|
||||
EAD062A32A3913920015965D /* DropShawdowViewController.swift in Sources */,
|
||||
@ -532,6 +539,7 @@
|
||||
71B23C312B921D740027F7D9 /* PaginationViewController.swift in Sources */,
|
||||
EAF7F09C2899B92400B287F5 /* CheckboxItemViewController.swift in Sources */,
|
||||
EA0D1C2F2A66CFE900E5C127 /* CheckboxViewController.swift in Sources */,
|
||||
18A3F1302BD9332500498E4A /* CalendarViewController.swift in Sources */,
|
||||
EA596ABA2A16B2ED00300C4B /* TabsViewController.swift in Sources */,
|
||||
EA89204E28B67332006B9984 /* CheckBoxGroupViewController.swift in Sources */,
|
||||
EAA5EEAD28EB6924003B3210 /* InputFieldViewController.swift in Sources */,
|
||||
@ -696,7 +704,7 @@
|
||||
CODE_SIGN_IDENTITY = "Apple Development";
|
||||
"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
|
||||
CODE_SIGN_STYLE = Manual;
|
||||
CURRENT_PROJECT_VERSION = 60;
|
||||
CURRENT_PROJECT_VERSION = 64;
|
||||
DEVELOPMENT_TEAM = "";
|
||||
"DEVELOPMENT_TEAM[sdk=iphoneos*]" = FCMA4QKS77;
|
||||
GENERATE_INFOPLIST_FILE = YES;
|
||||
@ -731,7 +739,7 @@
|
||||
CODE_SIGN_IDENTITY = "Apple Development";
|
||||
"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
|
||||
CODE_SIGN_STYLE = Manual;
|
||||
CURRENT_PROJECT_VERSION = 60;
|
||||
CURRENT_PROJECT_VERSION = 64;
|
||||
DEVELOPMENT_TEAM = "";
|
||||
"DEVELOPMENT_TEAM[sdk=iphoneos*]" = FCMA4QKS77;
|
||||
GENERATE_INFOPLIST_FILE = YES;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -134,8 +134,15 @@ public class PickerSelectorView<EnumType: RawRepresentable>: UIStackView, Picker
|
||||
}
|
||||
|
||||
private func title(for row: Int) -> String {
|
||||
guard let item = items[row].rawValue as? String else { return "" }
|
||||
return item
|
||||
let item = items[row]
|
||||
|
||||
if let item = item as? CustomStringConvertible {
|
||||
return item.description
|
||||
} else if let raw = item.rawValue as? String {
|
||||
return raw
|
||||
} else {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,15 +0,0 @@
|
||||
{
|
||||
"images" : [
|
||||
{
|
||||
"filename" : "external-link.svg",
|
||||
"idiom" : "universal"
|
||||
}
|
||||
],
|
||||
"info" : {
|
||||
"author" : "xcode",
|
||||
"version" : 1
|
||||
},
|
||||
"properties" : {
|
||||
"preserves-vector-representation" : true
|
||||
}
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
<svg id="f5a11f6b-f49f-40e8-9fef-b62ba7c1147d" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.6 21.6"><path d="M19.8,1.8V8.2H18.68V3.72L12.56,9.84l-.8-.8,6.12-6.11H13.4V1.8ZM15.3,18.68H2.93V6.3H12.8l1-1.12H1.8V19.8H16.43V7.8l-1.13,1Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 266 B |
@ -52,6 +52,7 @@ class BadgeIndicatorViewController: BaseViewController<BadgeIndicator> {
|
||||
|
||||
var textField = NumericField()
|
||||
var leadingCharacterTextField = TextField()
|
||||
var accessibilityTextField = TextField()
|
||||
var trailingTextField = TextField()
|
||||
var hideDotSwitch = Toggle()
|
||||
var hideBorderSwitch = Toggle()
|
||||
@ -85,6 +86,7 @@ class BadgeIndicatorViewController: BaseViewController<BadgeIndicator> {
|
||||
addFormRow(label: "Border Light", view: borderColorLightPickerSelectorView)
|
||||
addFormRow(label: "Border Dark", view: borderColorDarkPickerSelectorView)
|
||||
addFormRow(label: "Size", view: textSizePickerSelectorView)
|
||||
addFormRow(label: "Accessiblity Text", view: accessibilityTextField)
|
||||
|
||||
dotForm.addFormRow(label: "Hide Dot", view: hideDotSwitch)
|
||||
dotForm.addFormRow(label: "Dot Size", view: dotSizeTextField)
|
||||
@ -122,6 +124,11 @@ class BadgeIndicatorViewController: BaseViewController<BadgeIndicator> {
|
||||
self?.component.trailingText = text
|
||||
}.store(in: &subscribers)
|
||||
|
||||
accessibilityTextField.textPublisher
|
||||
.sink { [weak self] text in
|
||||
self?.component.accessibilityText = text
|
||||
}.store(in: &subscribers)
|
||||
|
||||
heightTextField
|
||||
.numberPublisher
|
||||
.sink { [weak self] number in
|
||||
|
||||
@ -43,7 +43,7 @@ public class FormSection: UIStackView {
|
||||
}
|
||||
|
||||
@discardableResult
|
||||
open func addFormRow(label: String, view: UIView) -> UIView {
|
||||
open func addFormRow(label: String, tooltip: Tooltip.TooltipModel? = nil, view: UIView) -> UIView {
|
||||
let formRow = UIStackView().with {
|
||||
$0.translatesAutoresizingMaskIntoConstraints = false
|
||||
$0.alignment = .fill
|
||||
@ -56,6 +56,10 @@ public class FormSection: UIStackView {
|
||||
$0.tag = 1
|
||||
$0.text = label
|
||||
$0.textStyle = .bodyLarge
|
||||
$0.numberOfLines = 0
|
||||
if let tooltip {
|
||||
$0.addTooltip(tooltip)
|
||||
}
|
||||
}
|
||||
|
||||
formRow.addArrangedSubview(label)
|
||||
@ -333,8 +337,8 @@ public class BaseViewController<Component: UIView>: UIViewController, Initable ,
|
||||
}
|
||||
|
||||
@discardableResult
|
||||
open func addFormRow(label: String, view: UIView) -> UIView {
|
||||
return formStackView.addFormRow(label: label, view: view)
|
||||
open func addFormRow(label: String, tooltip: Tooltip.TooltipModel? = nil, view: UIView) -> UIView {
|
||||
return formStackView.addFormRow(label: label,tooltip: tooltip, view: view)
|
||||
}
|
||||
|
||||
var activeTextField: UITextField?
|
||||
|
||||
@ -241,12 +241,12 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
|
||||
func setBadgeIndicatorModel() {
|
||||
if variantOneSwitch.isOn {
|
||||
if badgeIndicatorSwitch.isOn {
|
||||
component.badgeIndicatorModel = ButtonIcon.BadgeIndicatorModel(kind: BadgeIndicator.Kind.simple, size: BadgeIndicator.Size.small)
|
||||
component.badgeIndicatorModel = ButtonIcon.BadgeIndicatorModel(kind: BadgeIndicator.Kind.simple, size: BadgeIndicator.Size.small, accessibilityText: "Custom Text would go here by the developer")
|
||||
} else {
|
||||
component.badgeIndicatorModel = nil
|
||||
}
|
||||
} else {
|
||||
component.badgeIndicatorModel = ButtonIcon.BadgeIndicatorModel(kind: BadgeIndicator.Kind.numbered, expandDirection: badgeIndicatorExpandDirectionPickerSelectorView.selectedItem, size: BadgeIndicator.Size.small, maximumDigits: BadgeIndicator.MaximumDigits.two, number: 999)
|
||||
component.badgeIndicatorModel = ButtonIcon.BadgeIndicatorModel(kind: BadgeIndicator.Kind.numbered, expandDirection: badgeIndicatorExpandDirectionPickerSelectorView.selectedItem, size: BadgeIndicator.Size.small, maximumDigits: BadgeIndicator.MaximumDigits.two, number: 999, accessibilityText: "Custom Text would go here by the developer for the 999")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
305
VDSSample/ViewControllers/CalendarViewController.swift
Normal file
305
VDSSample/ViewControllers/CalendarViewController.swift
Normal file
@ -0,0 +1,305 @@
|
||||
//
|
||||
// CalendarViewController.swift
|
||||
// VDSSample
|
||||
//
|
||||
// Created by Kanamarlapudi, Vasavi on 19/04/24.
|
||||
//
|
||||
|
||||
import Foundation
|
||||
import UIKit
|
||||
import VDS
|
||||
import Combine
|
||||
import VDSTokens
|
||||
|
||||
class CalendarViewController: BaseViewController<CalendarBase> {
|
||||
let label = Label()
|
||||
var containerBorderSwitch = Toggle()
|
||||
var hideCurrentDateIndicatorSwitch = Toggle()
|
||||
var transparentBgSwitch = Toggle()
|
||||
var indicatorOneSwitch = Toggle()
|
||||
var indicatorTwoSwitch = Toggle()
|
||||
var indicatorThreeSwitch = Toggle()
|
||||
var clearActiveDatesSwitch = Toggle()
|
||||
var clearInactiveDatesSwitch = Toggle()
|
||||
var activeDatesField = TextField()
|
||||
var inactiveDatesField = TextField()
|
||||
var legendOneField = TextField()
|
||||
var legendTwoField = TextField()
|
||||
var legendThreeField = TextField()
|
||||
|
||||
private var minDatePicker: UIDatePicker = UIDatePicker()
|
||||
private var maxDatePicker: UIDatePicker = UIDatePicker()
|
||||
private var indicatorOnePicker: UIDatePicker = UIDatePicker()
|
||||
private var indicatorTwoPicker: UIDatePicker = UIDatePicker()
|
||||
private var indicatorThreePicker: UIDatePicker = UIDatePicker()
|
||||
private var activeDatePicker: UIDatePicker = UIDatePicker().with { $0.datePickerMode = .date }
|
||||
private var inactiveDatePicker: UIDatePicker = UIDatePicker().with { $0.datePickerMode = .date }
|
||||
|
||||
var indicators: [CalendarBase.CalendarIndicatorModel] = []
|
||||
let indicatorOnePickerTag = 1
|
||||
let indicatorTwoPickerTag = 2
|
||||
let indicatorThreePickerTag = 3
|
||||
let minDatePickerTag = 4
|
||||
let maxDatePickerTag = 5
|
||||
let activeDatePickerTag = 6
|
||||
let inactiveDatePickerTag = 7
|
||||
|
||||
override func viewDidLoad() {
|
||||
super.viewDidLoad()
|
||||
addContentTopView(view: component)
|
||||
component.minDate = Date().startOfMonth
|
||||
component.maxDate = Date().endOfMonth
|
||||
component.onChange = { [weak self] control in
|
||||
self?.label.text = DateFormatter.localizedString(from: control.selectedDate, dateStyle: .short, timeStyle: .none)
|
||||
}
|
||||
minDatePicker.date = component.minDate
|
||||
maxDatePicker.date = component.maxDate
|
||||
setupPicker()
|
||||
setupModel()
|
||||
}
|
||||
|
||||
override func setupForm() {
|
||||
super.setupForm()
|
||||
configurePicker(indicatorOnePicker)
|
||||
indicatorOnePicker.tag = indicatorOnePickerTag
|
||||
configurePicker(indicatorTwoPicker)
|
||||
indicatorTwoPicker.tag = indicatorTwoPickerTag
|
||||
configurePicker(indicatorThreePicker)
|
||||
indicatorThreePicker.tag = indicatorThreePickerTag
|
||||
configurePicker(minDatePicker)
|
||||
minDatePicker.tag = minDatePickerTag
|
||||
configurePicker(maxDatePicker)
|
||||
maxDatePicker.tag = maxDatePickerTag
|
||||
configurePicker(activeDatePicker)
|
||||
activeDatePicker.tag = activeDatePickerTag
|
||||
configurePicker(inactiveDatePicker)
|
||||
inactiveDatePicker.tag = inactiveDatePickerTag
|
||||
indicators = [
|
||||
.init(label: "Due Date", date: indicatorOnePicker.date),
|
||||
.init(label: "Auto Pay", date: indicatorTwoPicker.date),
|
||||
.init(label: "Scheduled", date: indicatorThreePicker.date)
|
||||
]
|
||||
|
||||
//add form rows
|
||||
addFormRow(label: "onChange", view: label)
|
||||
addFormRow(label: "Surface", view: surfacePickerSelectorView)
|
||||
addFormRow(label: "Hide Container Border", view: containerBorderSwitch)
|
||||
addFormRow(label: "Hide Current Date Indicator", view: hideCurrentDateIndicatorSwitch)
|
||||
addFormRow(label: "Min Date", view: minDatePicker)
|
||||
addFormRow(label: "Max Date", view: maxDatePicker)
|
||||
addFormRow(label: "Transparent Background", view: transparentBgSwitch)
|
||||
addFormRow(label: "Active Dates", view: activeDatesField)
|
||||
addFormRow(label: "Select ActiveDate", view: activeDatePicker)
|
||||
addFormRow(label: "Clear Active Dates", view: clearActiveDatesSwitch)
|
||||
addFormRow(label: "Inactive Dates", view: inactiveDatesField)
|
||||
addFormRow(label: "Select InActiveDate", view: inactiveDatePicker)
|
||||
addFormRow(label: "Clear Inactive Dates", view: clearInactiveDatesSwitch)
|
||||
addFormRow(label: "Indicator One", view: indicatorOneSwitch)
|
||||
addFormRow(label: "Indicator Two", view: indicatorTwoSwitch)
|
||||
addFormRow(label: "Indicator Three", view: indicatorThreeSwitch)
|
||||
addFormRow(label: "Legend One", view: legendOneField)
|
||||
addFormRow(label: "Legend Two", view: legendTwoField)
|
||||
addFormRow(label: "Legend Three", view: legendThreeField)
|
||||
addFormRow(label: "Indicator One Date", view: indicatorOnePicker)
|
||||
addFormRow(label: "Indicator Two Date", view: indicatorTwoPicker)
|
||||
addFormRow(label: "Indicator Three Date", view: indicatorThreePicker)
|
||||
activeDatesField.isUserInteractionEnabled = false
|
||||
inactiveDatesField.isUserInteractionEnabled = false
|
||||
activeDatesField.isEnabled = false
|
||||
inactiveDatesField.isEnabled = false
|
||||
|
||||
containerBorderSwitch.onChange = { [weak self] sender in
|
||||
guard let self else { return }
|
||||
component.hideContainerBorder = sender.isOn
|
||||
}
|
||||
|
||||
hideCurrentDateIndicatorSwitch.onChange = { [weak self] sender in
|
||||
guard let self else { return }
|
||||
component.hideCurrentDateIndicator = sender.isOn
|
||||
}
|
||||
|
||||
transparentBgSwitch.onChange = { [weak self] sender in
|
||||
guard let self else { return }
|
||||
component.transparentBackground = sender.isOn
|
||||
}
|
||||
|
||||
clearActiveDatesSwitch.onChange = { [weak self] sender in
|
||||
guard let self else { return }
|
||||
if sender.isOn {
|
||||
activeDatesField.text = ""
|
||||
component.activeDates = []
|
||||
}
|
||||
}
|
||||
|
||||
clearInactiveDatesSwitch.onChange = { [weak self] sender in
|
||||
guard let self else { return }
|
||||
if sender.isOn {
|
||||
inactiveDatesField.text = ""
|
||||
component.inactiveDates = []
|
||||
}
|
||||
}
|
||||
|
||||
legendOneField
|
||||
.textPublisher
|
||||
.sink {
|
||||
[weak self] text in
|
||||
self?.updateIndicatorData(label: text, date: self?.indicatorOnePicker.date, index: 0)
|
||||
}.store(in: &subscribers)
|
||||
|
||||
legendTwoField
|
||||
.textPublisher
|
||||
.sink {
|
||||
[weak self] text in
|
||||
self?.updateIndicatorData(label: text, date: self?.indicatorTwoPicker.date, index: 1)
|
||||
}.store(in: &subscribers)
|
||||
|
||||
legendThreeField
|
||||
.textPublisher
|
||||
.sink {
|
||||
[weak self] text in
|
||||
self?.updateIndicatorData(label: text, date: self?.indicatorThreePicker.date, index: 2)
|
||||
}.store(in: &subscribers)
|
||||
|
||||
indicatorOneSwitch.onChange = { [weak self] sender in
|
||||
guard let self else { return }
|
||||
if !sender.isOn {
|
||||
component.indicators.removeAll()
|
||||
} else {
|
||||
self.setIndicatorsData()
|
||||
}
|
||||
}
|
||||
|
||||
indicatorTwoSwitch.onChange = { [weak self] sender in
|
||||
guard let self else { return }
|
||||
if !sender.isOn {
|
||||
if component.indicators.count > 2 {
|
||||
component.indicators.removeLast()
|
||||
component.indicators.removeLast()
|
||||
} else if component.indicators.count == 2 {
|
||||
component.indicators.removeLast()
|
||||
}
|
||||
} else {
|
||||
self.setIndicatorsData()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
indicatorThreeSwitch.onChange = { [weak self] sender in
|
||||
guard let self else { return }
|
||||
if !sender.isOn {
|
||||
if component.indicators.count > 2 {
|
||||
component.indicators.removeLast()
|
||||
}
|
||||
} else {
|
||||
self.setIndicatorsData()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
func setupPicker(){
|
||||
surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.component.surface = item
|
||||
self?.contentTopView.backgroundColor = item.color
|
||||
}
|
||||
}
|
||||
|
||||
func setupModel() {
|
||||
let calendar = Calendar.current
|
||||
let indicatorDate = calendar.startOfDay(for: calendar.date(byAdding: .day, value: 1, to: Date())!)
|
||||
component.indicators = indicators
|
||||
legendOneField.text = "Due Date"
|
||||
legendTwoField.text = "Auto Pay"
|
||||
legendThreeField.text = "Scheduled"
|
||||
indicatorOneSwitch.isOn = true
|
||||
indicatorTwoSwitch.isOn = true
|
||||
indicatorThreeSwitch.isOn = true
|
||||
hideCurrentDateIndicatorSwitch.isOn = false
|
||||
indicatorOnePicker.date = indicatorDate
|
||||
indicatorTwoPicker.date = indicatorDate
|
||||
indicatorThreePicker.date = indicatorDate
|
||||
updateIndicatorData(label: legendOneField.text ?? "", date: indicatorOnePicker.date, index: 0)
|
||||
updateIndicatorData(label: legendTwoField.text ?? "", date: indicatorTwoPicker.date, index: 1)
|
||||
updateIndicatorData(label: legendThreeField.text ?? "", date: indicatorThreePicker.date, index: 2)
|
||||
}
|
||||
|
||||
func updateIndicatorData(label: String = "", date: Date?, index:Int) {
|
||||
indicators[index].label = label
|
||||
indicators[index].date = date ?? Date()
|
||||
setIndicatorsData()
|
||||
}
|
||||
|
||||
func setIndicatorsData() {
|
||||
if indicatorOneSwitch.isOn && indicatorTwoSwitch.isOn && indicatorThreeSwitch.isOn {
|
||||
component.indicators = [
|
||||
.init(label: self.legendOneField.text ?? "", date: indicatorOnePicker.date),
|
||||
.init(label: self.legendTwoField.text ?? "", date: indicatorTwoPicker.date),
|
||||
.init(label: self.legendThreeField.text ?? "", date: indicatorThreePicker.date)
|
||||
]
|
||||
} else if indicatorOneSwitch.isOn && indicatorTwoSwitch.isOn && !indicatorThreeSwitch.isOn {
|
||||
component.indicators = [
|
||||
.init(label: self.legendOneField.text ?? "", date: indicatorOnePicker.date),
|
||||
.init(label: self.legendTwoField.text ?? "", date: indicatorTwoPicker.date),
|
||||
]
|
||||
|
||||
} else if indicatorOneSwitch.isOn && !indicatorTwoSwitch.isOn {
|
||||
component.indicators = [
|
||||
.init(label: self.legendOneField.text ?? "", date: indicatorOnePicker.date),
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
func configurePicker(_ sender:UIDatePicker) {
|
||||
// Set some of UIDatePicker properties
|
||||
sender.timeZone = NSTimeZone.local
|
||||
sender.backgroundColor = UIColor.white
|
||||
|
||||
// Add an event to call onDidChangeDate function when value is changed.
|
||||
sender.addTarget(self, action: #selector(self.datePickerValueChanged(_:)), for: .valueChanged)
|
||||
}
|
||||
|
||||
@objc func datePickerValueChanged(_ sender: UIDatePicker){
|
||||
|
||||
switch sender.tag {
|
||||
case indicatorOnePickerTag:
|
||||
updateIndicatorData(label: legendOneField.text ?? "", date: sender.date, index: 0)
|
||||
case indicatorTwoPickerTag:
|
||||
updateIndicatorData(label: legendTwoField.text ?? "", date: sender.date, index: 1)
|
||||
case indicatorThreePickerTag:
|
||||
updateIndicatorData(label: legendThreeField.text ?? "", date: sender.date, index: 2)
|
||||
case minDatePickerTag:
|
||||
component.minDate = sender.date
|
||||
case maxDatePickerTag:
|
||||
component.maxDate = sender.date
|
||||
case activeDatePickerTag:
|
||||
component.activeDates.append(sender.date)
|
||||
var text = activeDatesField.text
|
||||
if let textEmpty = text?.isEmpty, textEmpty == true {
|
||||
text?.append("")
|
||||
} else {
|
||||
text?.append(", ")
|
||||
}
|
||||
text?.append("\(self.getSelectedDate(with: sender.date))")
|
||||
clearActiveDatesSwitch.isOn = false
|
||||
activeDatesField.text = text
|
||||
case inactiveDatePickerTag:
|
||||
component.inactiveDates.append(sender.date)
|
||||
var text = inactiveDatesField.text
|
||||
if let textEmpty = text?.isEmpty, textEmpty == true {
|
||||
text?.append("")
|
||||
} else {
|
||||
text?.append(", ")
|
||||
}
|
||||
text?.append("\(self.getSelectedDate(with: sender.date))")
|
||||
clearInactiveDatesSwitch.isOn = false
|
||||
inactiveDatesField.text = text
|
||||
default: break
|
||||
}
|
||||
}
|
||||
|
||||
func getSelectedDate(with date:Date) -> String {
|
||||
let dateFormatter: DateFormatter = DateFormatter()
|
||||
dateFormatter.dateFormat = "MM/dd/yyyy"
|
||||
let day: String = dateFormatter.string(from: date)
|
||||
return day
|
||||
}
|
||||
}
|
||||
449
VDSSample/ViewControllers/DatePickerViewController.swift
Normal file
449
VDSSample/ViewControllers/DatePickerViewController.swift
Normal file
@ -0,0 +1,449 @@
|
||||
//
|
||||
// DatePickerViewController.swift
|
||||
// VDSSample
|
||||
//
|
||||
// Created by Matt Bruce on 4/11/24.
|
||||
//
|
||||
|
||||
import Foundation
|
||||
import VDS
|
||||
import UIKit
|
||||
|
||||
class DatePickerViewController: BaseViewController<DatePicker> {
|
||||
|
||||
// Datepicker
|
||||
var label = Label()
|
||||
var disabledSwitch = Toggle()
|
||||
var requiredSwitch = Toggle()
|
||||
var labelTextField = TextField()
|
||||
var errorTextField = TextField()
|
||||
var helperTextField = TextField()
|
||||
var inlineLabelSwitch = Toggle()
|
||||
var readonlySwitch = Toggle()
|
||||
var transparentBgSwitch = Toggle()
|
||||
var errorSwitch = Toggle()
|
||||
var widthTextField = NumericField()
|
||||
var tooltipTitleTextField = TextField()
|
||||
var tooltipContentTextField = TextField()
|
||||
lazy var dateFormatPickerSelectorView = {
|
||||
PickerSelectorView(title: "shortNumeric",
|
||||
picker: self.picker,
|
||||
items: DatePicker.DateFormat.allCases )
|
||||
}()
|
||||
|
||||
// Calendar
|
||||
//props
|
||||
var indicators: [CalendarBase.CalendarIndicatorModel] = []
|
||||
var activeDates: [Date] = []
|
||||
var inactiveDates: [Date] = []
|
||||
var minDate: Date = Date().startOfMonth
|
||||
var maxDate: Date = Date().endOfMonth
|
||||
|
||||
//form
|
||||
var containerBorderSwitch = Toggle()
|
||||
var hideCurrentDateIndicatorSwitch = Toggle()
|
||||
var indicatorOneSwitch = Toggle()
|
||||
var indicatorTwoSwitch = Toggle()
|
||||
var indicatorThreeSwitch = Toggle()
|
||||
var clearActiveDatesSwitch = Toggle()
|
||||
var clearInactiveDatesSwitch = Toggle()
|
||||
var activeDatesField = TextField()
|
||||
var inactiveDatesField = TextField()
|
||||
var legendOneField = TextField()
|
||||
var legendTwoField = TextField()
|
||||
var legendThreeField = TextField()
|
||||
|
||||
private var minDatePicker: UIDatePicker = UIDatePicker()
|
||||
private var maxDatePicker: UIDatePicker = UIDatePicker()
|
||||
private var indicatorOnePicker: UIDatePicker = UIDatePicker()
|
||||
private var indicatorTwoPicker: UIDatePicker = UIDatePicker()
|
||||
private var indicatorThreePicker: UIDatePicker = UIDatePicker()
|
||||
private var activeDatePicker: UIDatePicker = UIDatePicker().with { $0.datePickerMode = .date }
|
||||
private var inactiveDatePicker: UIDatePicker = UIDatePicker().with { $0.datePickerMode = .date }
|
||||
|
||||
let indicatorOnePickerTag = 1
|
||||
let indicatorTwoPickerTag = 2
|
||||
let indicatorThreePickerTag = 3
|
||||
let minDatePickerTag = 4
|
||||
let maxDatePickerTag = 5
|
||||
let activeDatePickerTag = 6
|
||||
let inactiveDatePickerTag = 7
|
||||
|
||||
override func viewDidLoad() {
|
||||
super.viewDidLoad()
|
||||
addContentTopView(view: component)
|
||||
setupModel()
|
||||
setupPicker()
|
||||
setupCalendar()
|
||||
}
|
||||
|
||||
override func setupForm(){
|
||||
addFormRow(label: "onChange", view: label)
|
||||
addFormRow(label: "Surface", view: surfacePickerSelectorView)
|
||||
addFormRow(label: "Disabled", view: disabledSwitch)
|
||||
addFormRow(label: "Required", view: requiredSwitch)
|
||||
addFormRow(label: "Date Format", view: dateFormatPickerSelectorView)
|
||||
addFormRow(label: "Label Text", view: labelTextField)
|
||||
addFormRow(label: "Helper Text", view: helperTextField)
|
||||
addFormRow(label: "Readonly", view: readonlySwitch)
|
||||
addFormRow(label: "Transparent Background", view: transparentBgSwitch)
|
||||
addFormRow(label: "Error", view: .makeWrapper(for: errorSwitch))
|
||||
addFormRow(label: "Error Text", view: errorTextField)
|
||||
addFormRow(label: "Width", view: widthTextField)
|
||||
addFormRow(label: "ToolTip Title", view: tooltipTitleTextField)
|
||||
addFormRow(label: "ToolTip Content", view: tooltipContentTextField)
|
||||
append(section: getCalendarSection())
|
||||
disabledSwitch.onChange = { [weak self] sender in
|
||||
self?.component.isEnabled = !sender.isOn
|
||||
}
|
||||
|
||||
requiredSwitch.onChange = { [weak self] sender in
|
||||
self?.component.isRequired = sender.isOn
|
||||
}
|
||||
|
||||
readonlySwitch.onChange = { [weak self] sender in
|
||||
self?.component.isReadOnly = sender.isOn
|
||||
}
|
||||
|
||||
transparentBgSwitch.onChange = { [weak self] sender in
|
||||
self?.component.transparentBackground = sender.isOn
|
||||
}
|
||||
|
||||
errorSwitch
|
||||
.publisher(for: .valueChanged)
|
||||
.sink { [weak self] sender in
|
||||
guard let self else { return }
|
||||
component.showError = sender.isOn
|
||||
if component.showError != sender.isOn {
|
||||
self.errorSwitch.isOn = self.component.showError
|
||||
}
|
||||
}.store(in: &subscribers)
|
||||
|
||||
labelTextField
|
||||
.textPublisher
|
||||
.sink { [weak self] text in
|
||||
self?.component.labelText = text
|
||||
}.store(in: &subscribers)
|
||||
|
||||
helperTextField
|
||||
.textPublisher
|
||||
.sink { [weak self] text in
|
||||
self?.component.helperText = text
|
||||
}.store(in: &subscribers)
|
||||
|
||||
errorTextField
|
||||
.textPublisher
|
||||
.sink { [weak self] text in
|
||||
self?.component.errorText = text
|
||||
}.store(in: &subscribers)
|
||||
|
||||
widthTextField
|
||||
.numberPublisher
|
||||
.sink { [weak self] number in
|
||||
self?.component.width = number?.cgFloatValue
|
||||
}.store(in: &subscribers)
|
||||
|
||||
tooltipTitleTextField
|
||||
.textPublisher
|
||||
.sink { [weak self] text in
|
||||
self?.updateTooltip()
|
||||
}.store(in: &subscribers)
|
||||
|
||||
tooltipContentTextField
|
||||
.textPublisher
|
||||
.sink { [weak self] text in
|
||||
self?.updateTooltip()
|
||||
}.store(in: &subscribers)
|
||||
|
||||
}
|
||||
|
||||
func setupModel() {
|
||||
component.selectedDate = Calendar.current.date(byAdding: .day, value: -5, to: Date())
|
||||
component.labelText = "Date"
|
||||
component.helperText = "Pick a date for your needs."
|
||||
component.errorText = "Enter a date."
|
||||
component.tooltipModel = .init(title: "Check your date.", content:"Here is the content for your date component")
|
||||
|
||||
component.onChange = { [weak self] control in
|
||||
self?.label.text = DateFormatter.localizedString(from: control.selectedDate!, dateStyle: .short, timeStyle: .none)
|
||||
}
|
||||
|
||||
//setup UI
|
||||
disabledSwitch.isOn = !component.isEnabled
|
||||
requiredSwitch.isOn = component.isRequired
|
||||
surfacePickerSelectorView.text = component.surface.rawValue
|
||||
labelTextField.text = component.labelText
|
||||
helperTextField.text = component.helperText
|
||||
readonlySwitch.isOn = false
|
||||
transparentBgSwitch.isOn = false
|
||||
errorSwitch.isOn = component.showError
|
||||
errorTextField.text = component.errorText
|
||||
tooltipTitleTextField.text = component.tooltipModel?.title
|
||||
tooltipContentTextField.text = component.tooltipModel?.content
|
||||
}
|
||||
|
||||
func setupPicker() {
|
||||
surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.component.surface = item
|
||||
self?.contentTopView.backgroundColor = item.color
|
||||
}
|
||||
|
||||
dateFormatPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.component.dateFormat = item
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
func updateTooltip() {
|
||||
let title = tooltipTitleTextField.text ?? ""
|
||||
let content = tooltipContentTextField.text ?? ""
|
||||
|
||||
component.tooltipModel = !title.isEmpty || !content.isEmpty ? .init(title: title,
|
||||
content: content) : nil
|
||||
}
|
||||
}
|
||||
|
||||
extension DatePickerViewController {
|
||||
|
||||
func getCalendarSection() -> FormSection {
|
||||
let section = FormSection()
|
||||
section.title = "Calendar Options"
|
||||
section.addFormRow(label: "Hide Container Border", view: containerBorderSwitch)
|
||||
section.addFormRow(label: "Hide Current Date Indicator", view: hideCurrentDateIndicatorSwitch)
|
||||
section.addFormRow(label: "Min Date", view: minDatePicker)
|
||||
section.addFormRow(label: "Max Date", view: maxDatePicker)
|
||||
section.addFormRow(label: "Active Dates", view: activeDatesField)
|
||||
section.addFormRow(label: "Select ActiveDate", view: activeDatePicker)
|
||||
section.addFormRow(label: "Clear Active Dates", view: clearActiveDatesSwitch)
|
||||
section.addFormRow(label: "Inactive Dates", view: inactiveDatesField)
|
||||
section.addFormRow(label: "Select InActiveDate", view: inactiveDatePicker)
|
||||
section.addFormRow(label: "Clear Inactive Dates", view: clearInactiveDatesSwitch)
|
||||
section.addFormRow(label: "Indicator One", view: indicatorOneSwitch)
|
||||
section.addFormRow(label: "Indicator Two", view: indicatorTwoSwitch)
|
||||
section.addFormRow(label: "Indicator Three", view: indicatorThreeSwitch)
|
||||
section.addFormRow(label: "Legend One", view: legendOneField)
|
||||
section.addFormRow(label: "Legend Two", view: legendTwoField)
|
||||
section.addFormRow(label: "Legend Three", view: legendThreeField)
|
||||
section.addFormRow(label: "Indicator One Date", view: indicatorOnePicker)
|
||||
section.addFormRow(label: "Indicator Two Date", view: indicatorTwoPicker)
|
||||
section.addFormRow(label: "Indicator Three Date", view: indicatorThreePicker)
|
||||
|
||||
|
||||
containerBorderSwitch.onChange = { [weak self] sender in
|
||||
self?.updateCalendarModel()
|
||||
}
|
||||
|
||||
hideCurrentDateIndicatorSwitch.onChange = { [weak self] sender in
|
||||
self?.updateCalendarModel()
|
||||
}
|
||||
|
||||
clearActiveDatesSwitch.onChange = { [weak self] sender in
|
||||
self?.updateCalendarModel()
|
||||
}
|
||||
|
||||
clearInactiveDatesSwitch.onChange = { [weak self] sender in
|
||||
self?.updateCalendarModel()
|
||||
}
|
||||
|
||||
legendOneField
|
||||
.textPublisher
|
||||
.sink {
|
||||
[weak self] text in
|
||||
self?.updateIndicatorData(label: text, date: self?.indicatorOnePicker.date, index: 0)
|
||||
}.store(in: &subscribers)
|
||||
|
||||
legendTwoField
|
||||
.textPublisher
|
||||
.sink {
|
||||
[weak self] text in
|
||||
self?.updateIndicatorData(label: text, date: self?.indicatorTwoPicker.date, index: 1)
|
||||
}.store(in: &subscribers)
|
||||
|
||||
legendThreeField
|
||||
.textPublisher
|
||||
.sink {
|
||||
[weak self] text in
|
||||
self?.updateIndicatorData(label: text, date: self?.indicatorThreePicker.date, index: 2)
|
||||
}.store(in: &subscribers)
|
||||
|
||||
indicatorOneSwitch.onChange = { [weak self] sender in
|
||||
guard let self else { return }
|
||||
if !sender.isOn {
|
||||
self.indicators.removeAll()
|
||||
} else {
|
||||
self.setIndicatorsData()
|
||||
}
|
||||
self.updateCalendarModel()
|
||||
}
|
||||
|
||||
indicatorTwoSwitch.onChange = { [weak self] sender in
|
||||
guard let self else { return }
|
||||
if !sender.isOn {
|
||||
if self.indicators.count > 2 {
|
||||
self.indicators.removeLast()
|
||||
self.indicators.removeLast()
|
||||
} else if self.indicators.count == 2 {
|
||||
self.indicators.removeLast()
|
||||
}
|
||||
} else {
|
||||
self.setIndicatorsData()
|
||||
}
|
||||
self.updateCalendarModel()
|
||||
}
|
||||
|
||||
indicatorThreeSwitch.onChange = { [weak self] sender in
|
||||
guard let self else { return }
|
||||
if !sender.isOn {
|
||||
if self.indicators.count > 2 {
|
||||
self.indicators.removeLast()
|
||||
}
|
||||
} else {
|
||||
self.setIndicatorsData()
|
||||
}
|
||||
self.updateCalendarModel()
|
||||
}
|
||||
|
||||
return section
|
||||
}
|
||||
|
||||
func updateCalendarModel() {
|
||||
component.calendarModel = .init(surface: component.surface,
|
||||
hideContainerBorder: containerBorderSwitch.isOn,
|
||||
hideCurrentDateIndicator: hideCurrentDateIndicatorSwitch.isOn,
|
||||
activeDates: activeDates,
|
||||
inactiveDates: inactiveDates,
|
||||
minDate: minDate,
|
||||
maxDate: maxDate,
|
||||
indicators: indicators)
|
||||
}
|
||||
|
||||
func setupCalendar() {
|
||||
configurePicker(indicatorOnePicker)
|
||||
indicatorOnePicker.tag = indicatorOnePickerTag
|
||||
configurePicker(indicatorTwoPicker)
|
||||
indicatorTwoPicker.tag = indicatorTwoPickerTag
|
||||
configurePicker(indicatorThreePicker)
|
||||
indicatorThreePicker.tag = indicatorThreePickerTag
|
||||
configurePicker(minDatePicker)
|
||||
minDatePicker.tag = minDatePickerTag
|
||||
configurePicker(maxDatePicker)
|
||||
maxDatePicker.tag = maxDatePickerTag
|
||||
configurePicker(activeDatePicker)
|
||||
activeDatePicker.tag = activeDatePickerTag
|
||||
configurePicker(inactiveDatePicker)
|
||||
inactiveDatePicker.tag = inactiveDatePickerTag
|
||||
indicators = [
|
||||
.init(label: "Due Date", date: indicatorOnePicker.date),
|
||||
.init(label: "Auto Pay", date: indicatorTwoPicker.date),
|
||||
.init(label: "Scheduled", date: indicatorThreePicker.date)
|
||||
]
|
||||
|
||||
let calendar = Calendar.current
|
||||
let indicatorDate = calendar.startOfDay(for: calendar.date(byAdding: .day, value: 1, to: Date())!)
|
||||
legendOneField.text = "Due Date"
|
||||
legendTwoField.text = "Auto Pay"
|
||||
legendThreeField.text = "Scheduled"
|
||||
indicatorOneSwitch.isOn = true
|
||||
indicatorTwoSwitch.isOn = true
|
||||
indicatorThreeSwitch.isOn = true
|
||||
hideCurrentDateIndicatorSwitch.isOn = false
|
||||
indicatorOnePicker.date = indicatorDate
|
||||
indicatorTwoPicker.date = indicatorDate
|
||||
indicatorThreePicker.date = indicatorDate
|
||||
updateIndicatorData(label: legendOneField.text ?? "", date: indicatorOnePicker.date, index: 0)
|
||||
updateIndicatorData(label: legendTwoField.text ?? "", date: indicatorTwoPicker.date, index: 1)
|
||||
updateIndicatorData(label: legendThreeField.text ?? "", date: indicatorThreePicker.date, index: 2)
|
||||
|
||||
activeDatesField.isUserInteractionEnabled = false
|
||||
inactiveDatesField.isUserInteractionEnabled = false
|
||||
activeDatesField.isEnabled = false
|
||||
inactiveDatesField.isEnabled = false
|
||||
|
||||
minDatePicker.date = minDate
|
||||
maxDatePicker.date = maxDate
|
||||
|
||||
updateCalendarModel()
|
||||
}
|
||||
|
||||
func updateIndicatorData(label: String = "", date: Date?, index:Int) {
|
||||
indicators[index].label = label
|
||||
indicators[index].date = date ?? Date()
|
||||
updateCalendarModel()
|
||||
}
|
||||
|
||||
func setIndicatorsData() {
|
||||
if indicatorOneSwitch.isOn && indicatorTwoSwitch.isOn && indicatorThreeSwitch.isOn {
|
||||
indicators = [
|
||||
.init(label: self.legendOneField.text ?? "", date: indicatorOnePicker.date),
|
||||
.init(label: self.legendTwoField.text ?? "", date: indicatorTwoPicker.date),
|
||||
.init(label: self.legendThreeField.text ?? "", date: indicatorThreePicker.date)
|
||||
]
|
||||
} else if indicatorOneSwitch.isOn && indicatorTwoSwitch.isOn && !indicatorThreeSwitch.isOn {
|
||||
indicators = [
|
||||
.init(label: self.legendOneField.text ?? "", date: indicatorOnePicker.date),
|
||||
.init(label: self.legendTwoField.text ?? "", date: indicatorTwoPicker.date),
|
||||
]
|
||||
|
||||
} else if indicatorOneSwitch.isOn && !indicatorTwoSwitch.isOn {
|
||||
indicators = [
|
||||
.init(label: self.legendOneField.text ?? "", date: indicatorOnePicker.date),
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
func configurePicker(_ sender:UIDatePicker) {
|
||||
// Set some of UIDatePicker properties
|
||||
sender.timeZone = NSTimeZone.local
|
||||
sender.backgroundColor = UIColor.white
|
||||
|
||||
// Add an event to call onDidChangeDate function when value is changed.
|
||||
sender.addTarget(self, action: #selector(self.datePickerValueChanged(_:)), for: .valueChanged)
|
||||
}
|
||||
|
||||
@objc func datePickerValueChanged(_ sender: UIDatePicker){
|
||||
|
||||
switch sender.tag {
|
||||
case indicatorOnePickerTag:
|
||||
updateIndicatorData(label: legendOneField.text ?? "", date: sender.date, index: 0)
|
||||
case indicatorTwoPickerTag:
|
||||
updateIndicatorData(label: legendTwoField.text ?? "", date: sender.date, index: 1)
|
||||
case indicatorThreePickerTag:
|
||||
updateIndicatorData(label: legendThreeField.text ?? "", date: sender.date, index: 2)
|
||||
case minDatePickerTag:
|
||||
minDate = sender.date
|
||||
case maxDatePickerTag:
|
||||
maxDate = sender.date
|
||||
case activeDatePickerTag:
|
||||
activeDates.append(sender.date)
|
||||
var text = activeDatesField.text
|
||||
if let textEmpty = text?.isEmpty, textEmpty == true {
|
||||
text?.append("")
|
||||
} else {
|
||||
text?.append(", ")
|
||||
}
|
||||
text?.append("\(self.getSelectedDate(with: sender.date))")
|
||||
clearActiveDatesSwitch.isOn = false
|
||||
activeDatesField.text = text
|
||||
case inactiveDatePickerTag:
|
||||
inactiveDates.append(sender.date)
|
||||
var text = inactiveDatesField.text
|
||||
if let textEmpty = text?.isEmpty, textEmpty == true {
|
||||
text?.append("")
|
||||
} else {
|
||||
text?.append(", ")
|
||||
}
|
||||
text?.append("\(self.getSelectedDate(with: sender.date))")
|
||||
clearInactiveDatesSwitch.isOn = false
|
||||
inactiveDatesField.text = text
|
||||
default: break
|
||||
}
|
||||
}
|
||||
|
||||
func getSelectedDate(with date:Date) -> String {
|
||||
let dateFormatter: DateFormatter = DateFormatter()
|
||||
dateFormatter.dateFormat = "MM/dd/yyyy"
|
||||
let day: String = dateFormatter.string(from: date)
|
||||
return day
|
||||
}
|
||||
|
||||
}
|
||||
@ -34,8 +34,12 @@ class DropShadowViewController: BaseViewController<ShadowView> {
|
||||
var componentWrapper: UIView!
|
||||
var componentConstraints: NSLayoutConstraint.Container!
|
||||
|
||||
var secondView = View()
|
||||
var thirdView = View()
|
||||
var secondView = ShadowView()
|
||||
var thirdView = ShadowView()
|
||||
|
||||
var shadowViews: [ShadowView] {
|
||||
[component, secondView, thirdView]
|
||||
}
|
||||
|
||||
lazy var backgroundColorPickerSelectorView = {
|
||||
PickerSelectorView(title: "paletteWhite",
|
||||
@ -125,8 +129,8 @@ class DropShadowViewController: BaseViewController<ShadowView> {
|
||||
thirdView.width(viewSize).height(viewSize)
|
||||
|
||||
componentWrapper.pinTop().pinLeading()
|
||||
secondView.pinTop()
|
||||
thirdView.pinLeading().pinBottom()
|
||||
secondView.pinTop(VDSLayout.space2X)
|
||||
thirdView.pinLeading(VDSLayout.space2X).pinBottom(VDSLayout.space2X)
|
||||
|
||||
secondView.pinTrailingLessThanOrEqualTo(contentTopView.trailingAnchor)
|
||||
secondView.pinBottomLessThanOrEqualTo(contentTopView.bottomAnchor)
|
||||
@ -194,7 +198,7 @@ class DropShadowViewController: BaseViewController<ShadowView> {
|
||||
|
||||
//shadow1
|
||||
showShadow.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
|
||||
self?.component.showShadow = slider.isOn
|
||||
self?.shadowViews.forEach { $0.showShadow = slider.isOn }
|
||||
self?.updateView()
|
||||
}).store(in: &subscribers)
|
||||
|
||||
@ -202,7 +206,7 @@ class DropShadowViewController: BaseViewController<ShadowView> {
|
||||
opacityRange.minimumValue = 0.0
|
||||
opacityRange.value = 1.0
|
||||
opacityRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
|
||||
self?.component.opacityRange = CGFloat(slider.value)
|
||||
self?.shadowViews.forEach { $0.opacityRange = CGFloat(slider.value) }
|
||||
self?.updateView()
|
||||
}).store(in: &subscribers)
|
||||
|
||||
@ -210,7 +214,7 @@ class DropShadowViewController: BaseViewController<ShadowView> {
|
||||
radiusRange.minimumValue = 0.0
|
||||
radiusRange.value = 2.0
|
||||
radiusRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
|
||||
self?.component.radiusRange = CGFloat(slider.value)
|
||||
self?.shadowViews.forEach { $0.radiusRange = CGFloat(slider.value) }
|
||||
self?.updateView()
|
||||
}).store(in: &subscribers)
|
||||
|
||||
@ -218,7 +222,7 @@ class DropShadowViewController: BaseViewController<ShadowView> {
|
||||
offsetXRange.minimumValue = -20
|
||||
offsetXRange.value = 2.0
|
||||
offsetXRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
|
||||
self?.component.offsetXRange = CGFloat(slider.value)
|
||||
self?.shadowViews.forEach { $0.offsetXRange = CGFloat(slider.value) }
|
||||
self?.updateView()
|
||||
}).store(in: &subscribers)
|
||||
|
||||
@ -226,13 +230,13 @@ class DropShadowViewController: BaseViewController<ShadowView> {
|
||||
offsetYRange.minimumValue = -20
|
||||
offsetYRange.value = 2.0
|
||||
offsetYRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
|
||||
self?.component.offsetYRange = CGFloat(slider.value)
|
||||
self?.shadowViews.forEach { $0.offsetYRange = CGFloat(slider.value) }
|
||||
self?.updateView()
|
||||
}).store(in: &subscribers)
|
||||
|
||||
//shadow2
|
||||
showShadow2.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
|
||||
self?.component.showShadow2 = slider.isOn
|
||||
self?.shadowViews.forEach { $0.showShadow2 = slider.isOn }
|
||||
self?.updateView()
|
||||
}).store(in: &subscribers)
|
||||
|
||||
@ -240,7 +244,7 @@ class DropShadowViewController: BaseViewController<ShadowView> {
|
||||
opacityRange2.minimumValue = 0.0
|
||||
opacityRange2.value = 1.0
|
||||
opacityRange2.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
|
||||
self?.component.opacityRange2 = CGFloat(slider.value)
|
||||
self?.shadowViews.forEach { $0.opacityRange2 = CGFloat(slider.value) }
|
||||
self?.updateView()
|
||||
}).store(in: &subscribers)
|
||||
|
||||
@ -248,7 +252,7 @@ class DropShadowViewController: BaseViewController<ShadowView> {
|
||||
radiusRange2.minimumValue = 0.0
|
||||
radiusRange2.value = 2.0
|
||||
radiusRange2.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
|
||||
self?.component.radiusRange2 = CGFloat(slider.value)
|
||||
self?.shadowViews.forEach { $0.radiusRange2 = CGFloat(slider.value) }
|
||||
self?.updateView()
|
||||
}).store(in: &subscribers)
|
||||
|
||||
@ -256,7 +260,7 @@ class DropShadowViewController: BaseViewController<ShadowView> {
|
||||
offsetXRange2.minimumValue = -20
|
||||
offsetXRange2.value = 2.0
|
||||
offsetXRange2.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
|
||||
self?.component.offsetXRange2 = CGFloat(slider.value)
|
||||
self?.shadowViews.forEach { $0.offsetXRange2 = CGFloat(slider.value) }
|
||||
self?.updateView()
|
||||
}).store(in: &subscribers)
|
||||
|
||||
@ -264,7 +268,7 @@ class DropShadowViewController: BaseViewController<ShadowView> {
|
||||
offsetYRange2.minimumValue = -20
|
||||
offsetYRange2.value = 2.0
|
||||
offsetYRange2.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
|
||||
self?.component.offsetYRange2 = CGFloat(slider.value)
|
||||
self?.shadowViews.forEach { $0.offsetYRange2 = CGFloat(slider.value) }
|
||||
self?.updateView()
|
||||
}).store(in: &subscribers)
|
||||
|
||||
@ -281,7 +285,7 @@ class DropShadowViewController: BaseViewController<ShadowView> {
|
||||
viewRadiusRange.minimumValue = 0
|
||||
viewRadiusRange.value = 8.0
|
||||
viewRadiusRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
|
||||
self?.component.viewRadiusRange = CGFloat(slider.value)
|
||||
self?.shadowViews.forEach { $0.viewRadiusRange = CGFloat(slider.value) }
|
||||
self?.updateView()
|
||||
}).store(in: &subscribers)
|
||||
|
||||
@ -310,8 +314,8 @@ class DropShadowViewController: BaseViewController<ShadowView> {
|
||||
}
|
||||
|
||||
override func updateView() {
|
||||
secondView.backgroundColor = .red
|
||||
thirdView.backgroundColor = .purple
|
||||
secondView.viewLightColor = .paletteYellow53
|
||||
thirdView.viewLightColor = .paletteBlue46
|
||||
}
|
||||
|
||||
func setupPicker(){
|
||||
@ -322,20 +326,21 @@ class DropShadowViewController: BaseViewController<ShadowView> {
|
||||
}
|
||||
|
||||
dropShadowDarkColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.component.shadowDarkColor = item
|
||||
self?.shadowViews.forEach { $0.shadowDarkColor = item }
|
||||
}
|
||||
|
||||
dropShadowLightColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.component.shadowLightColor = item
|
||||
self?.shadowViews.forEach { $0.shadowLightColor = item }
|
||||
}
|
||||
|
||||
dropShadow2DarkColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.component.shadowDarkColor2 = item
|
||||
self?.shadowViews.forEach { $0.shadowDarkColor2 = item }
|
||||
}
|
||||
|
||||
dropShadow2LightColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.component.shadowLightColor2 = item
|
||||
self?.shadowViews.forEach { $0.shadowLightColor2 = item }
|
||||
}
|
||||
|
||||
viewLightColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.component.viewLightColor = item
|
||||
}
|
||||
|
||||
@ -10,6 +10,12 @@ import VDS
|
||||
|
||||
class DropdownSelectViewController: BaseViewController<DropdownSelect> {
|
||||
|
||||
lazy var helperTextPlacementPickerSelectorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: InputField.HelperTextPlacement.allCases)
|
||||
}()
|
||||
|
||||
var disabledSwitch = Toggle()
|
||||
var requiredSwitch = Toggle()
|
||||
var labelTextField = TextField()
|
||||
@ -21,6 +27,7 @@ class DropdownSelectViewController: BaseViewController<DropdownSelect> {
|
||||
var errorSwitch = Toggle()
|
||||
var tooltipTitleTextField = TextField()
|
||||
var tooltipContentTextField = TextField()
|
||||
var widthTextField = NumericField()
|
||||
var optionsSwitch = Toggle()
|
||||
var moreOptions: [DropdownSelect.DropdownOptionModel] = [
|
||||
.init(text: "Alabama"),
|
||||
@ -60,12 +67,14 @@ class DropdownSelectViewController: BaseViewController<DropdownSelect> {
|
||||
addFormRow(label: "Disabled", view: disabledSwitch)
|
||||
addFormRow(label: "Required", view: requiredSwitch)
|
||||
addFormRow(label: "Label Text", view: labelTextField)
|
||||
addFormRow(label: "Helper Text Placement", view: helperTextPlacementPickerSelectorView)
|
||||
addFormRow(label: "Helper Text", view: helperTextField)
|
||||
addFormRow(label: "Inline Label", view: .makeWrapper(for: inlineLabelSwitch))
|
||||
addFormRow(label: "Readonly", view: readonlySwitch)
|
||||
addFormRow(label: "Transparent Background", view: transparentBgSwitch)
|
||||
addFormRow(label: "Error", view: .makeWrapper(for: errorSwitch))
|
||||
addFormRow(label: "Error Text", view: errorTextField)
|
||||
addFormRow(label: "Width", view: widthTextField)
|
||||
addFormRow(label: "ToolTip Title", view: tooltipTitleTextField)
|
||||
addFormRow(label: "ToolTip Content", view: tooltipContentTextField)
|
||||
addFormRow(label: "More Options", view: optionsSwitch)
|
||||
@ -75,7 +84,7 @@ class DropdownSelectViewController: BaseViewController<DropdownSelect> {
|
||||
}
|
||||
|
||||
requiredSwitch.onChange = { [weak self] sender in
|
||||
self?.component.required = sender.isOn
|
||||
self?.component.isRequired = sender.isOn
|
||||
}
|
||||
|
||||
optionsSwitch.onChange = { [weak self] sender in
|
||||
@ -84,7 +93,7 @@ class DropdownSelectViewController: BaseViewController<DropdownSelect> {
|
||||
}
|
||||
|
||||
readonlySwitch.onChange = { [weak self] sender in
|
||||
self?.component.readOnly = sender.isOn
|
||||
self?.component.isReadOnly = sender.isOn
|
||||
}
|
||||
|
||||
transparentBgSwitch.onChange = { [weak self] sender in
|
||||
@ -119,6 +128,12 @@ class DropdownSelectViewController: BaseViewController<DropdownSelect> {
|
||||
self?.component.errorText = text
|
||||
}.store(in: &subscribers)
|
||||
|
||||
widthTextField
|
||||
.numberPublisher
|
||||
.sink { [weak self] number in
|
||||
self?.component.width = number?.cgFloatValue
|
||||
}.store(in: &subscribers)
|
||||
|
||||
tooltipTitleTextField
|
||||
.textPublisher
|
||||
.sink { [weak self] text in
|
||||
@ -147,10 +162,6 @@ class DropdownSelectViewController: BaseViewController<DropdownSelect> {
|
||||
component.options = moreOptions
|
||||
|
||||
/// callback to know which option chose
|
||||
component.onItemSelected = { index, option in
|
||||
print("selected index: \(index) text: \(option.text) value: \(option.value)")
|
||||
}
|
||||
|
||||
component.onChange = { dropdown in
|
||||
guard let option = dropdown.selectedItem, let index = dropdown.selectId else { print("nothing selected"); return }
|
||||
print("selected index: \(index) text: \(option.text) value: \(option.value)")
|
||||
@ -158,9 +169,10 @@ class DropdownSelectViewController: BaseViewController<DropdownSelect> {
|
||||
|
||||
//setup UI
|
||||
disabledSwitch.isOn = !component.isEnabled
|
||||
requiredSwitch.isOn = component.required
|
||||
requiredSwitch.isOn = component.isRequired
|
||||
surfacePickerSelectorView.text = component.surface.rawValue
|
||||
labelTextField.text = component.labelText
|
||||
helperTextPlacementPickerSelectorView.text = component.helperTextPlacement.rawValue
|
||||
helperTextField.text = component.helperText
|
||||
readonlySwitch.isOn = false
|
||||
transparentBgSwitch.isOn = false
|
||||
@ -176,6 +188,11 @@ class DropdownSelectViewController: BaseViewController<DropdownSelect> {
|
||||
self?.component.surface = item
|
||||
self?.contentTopView.backgroundColor = item.color
|
||||
}
|
||||
|
||||
helperTextPlacementPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.component.helperTextPlacement = item
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
func updateTooltip() {
|
||||
|
||||
@ -13,7 +13,13 @@ import Combine
|
||||
|
||||
class IconViewController: BaseViewController<Icon> {
|
||||
|
||||
lazy var colorPickerSelectorView = {
|
||||
lazy var lightColorPickerSelectorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: UIColor.VDSColor.allCases)
|
||||
}()
|
||||
|
||||
lazy var darkColorPickerSelectorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: UIColor.VDSColor.allCases)
|
||||
@ -45,7 +51,8 @@ class IconViewController: BaseViewController<Icon> {
|
||||
addFormRow(label: "Surface", view: surfacePickerSelectorView)
|
||||
addFormRow(label: "Size", view: sizePickerSelectorView)
|
||||
addFormRow(label: "Custom Size", view: customSizeField)
|
||||
addFormRow(label: "Color", view: colorPickerSelectorView)
|
||||
addFormRow(label: "Light Color", view: lightColorPickerSelectorView)
|
||||
addFormRow(label: "Dark Color", view: darkColorPickerSelectorView)
|
||||
addFormRow(label: "Name", view: namePickerSelectorView)
|
||||
|
||||
customSizeField
|
||||
@ -57,14 +64,13 @@ class IconViewController: BaseViewController<Icon> {
|
||||
|
||||
func setupModel() {
|
||||
let name = Icon.Name.accessibility
|
||||
let color = UIColor.VDSColor.paletteBlack
|
||||
component.color = color.uiColor
|
||||
component.name = name
|
||||
|
||||
//setup UI
|
||||
surfacePickerSelectorView.text = component.surface.rawValue
|
||||
sizePickerSelectorView.text = component.size.rawValue
|
||||
colorPickerSelectorView.text = color.rawValue
|
||||
lightColorPickerSelectorView.text = UIColor.VDSColor.elementsPrimaryOnlight.rawValue
|
||||
darkColorPickerSelectorView.text = UIColor.VDSColor.elementsPrimaryOndark.rawValue
|
||||
namePickerSelectorView.text = name.rawValue
|
||||
}
|
||||
func setupPicker(){
|
||||
@ -78,14 +84,25 @@ class IconViewController: BaseViewController<Icon> {
|
||||
self?.component.size = item
|
||||
}
|
||||
|
||||
colorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.component.color = item.uiColor
|
||||
lightColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.setColorConfiguration()
|
||||
}
|
||||
|
||||
darkColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.setColorConfiguration()
|
||||
}
|
||||
|
||||
namePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.component.name = item
|
||||
}
|
||||
}
|
||||
|
||||
func setColorConfiguration() {
|
||||
let light = lightColorPickerSelectorView.selectedItem.uiColor
|
||||
let dark = darkColorPickerSelectorView.selectedItem.uiColor
|
||||
component.colorConfiguration = .init(light, dark)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
extension IconViewController: ComponentSampleable {
|
||||
|
||||
@ -19,6 +19,12 @@ class InputFieldViewController: BaseViewController<InputField> {
|
||||
items: InputField.HelperTextPlacement.allCases)
|
||||
}()
|
||||
|
||||
lazy var inputTypePickerSelectorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: InputField.FieldType.allCases)
|
||||
}()
|
||||
|
||||
var disabledSwitch = Toggle()
|
||||
var requiredSwitch = Toggle()
|
||||
var labelTextField = TextField()
|
||||
@ -31,6 +37,52 @@ class InputFieldViewController: BaseViewController<InputField> {
|
||||
var tooltipTitleTextField = TextField()
|
||||
var tooltipContentTextField = TextField()
|
||||
|
||||
//FieldType sections
|
||||
|
||||
//password
|
||||
var hidePasswordButtonTextField = TextField()
|
||||
var showPasswordButtonTextField = TextField()
|
||||
lazy var passwordSection = FormSection().with {
|
||||
$0.title = "Password Settings"
|
||||
$0.addFormRow(label: "Hide Button", view: hidePasswordButtonTextField)
|
||||
$0.addFormRow(label: "Show Button", view: showPasswordButtonTextField)
|
||||
$0.isHidden = true
|
||||
}
|
||||
|
||||
//date
|
||||
lazy var dateFormatPickerSelectorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: InputField.DateFormat.allCases)
|
||||
}()
|
||||
|
||||
lazy var dateSection = FormSection().with {
|
||||
$0.title = "Date Settings"
|
||||
$0.addFormRow(label: "Date Format", view: dateFormatPickerSelectorView)
|
||||
$0.isHidden = true
|
||||
}
|
||||
|
||||
//inlineAction
|
||||
var inlineActionTextField = TextField()
|
||||
lazy var inlineActionSection = FormSection().with {
|
||||
$0.title = "inlineAction Settings"
|
||||
$0.addFormRow(label: "Action Text", view: inlineActionTextField)
|
||||
$0.isHidden = true
|
||||
}
|
||||
|
||||
//securityCode
|
||||
lazy var cardTypePickerSelectorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: InputField.CreditCardType.allCases)
|
||||
}()
|
||||
|
||||
lazy var securityCodeSection = FormSection().with {
|
||||
$0.title = "Security Code Settings"
|
||||
$0.addFormRow(label: "Card Type", view: cardTypePickerSelectorView)
|
||||
$0.isHidden = true
|
||||
}
|
||||
|
||||
override func viewDidLoad() {
|
||||
super.viewDidLoad()
|
||||
addContentTopView(view: component)
|
||||
@ -40,22 +92,40 @@ class InputFieldViewController: BaseViewController<InputField> {
|
||||
|
||||
override func setupForm(){
|
||||
super.setupForm()
|
||||
addFormRow(label: "Disabled", view: disabledSwitch)
|
||||
addFormRow(label: "Required", view: requiredSwitch)
|
||||
addFormRow(label: "Surface", view: surfacePickerSelectorView)
|
||||
addFormRow(label: "Label Text", view: labelTextField)
|
||||
addFormRow(label: "Helper Text Placement", view: helperTextPlacementPickerSelectorView)
|
||||
addFormRow(label: "Helper Text", view: helperTextField)
|
||||
addFormRow(label: "Error", view: showErrorSwitch)
|
||||
addFormRow(label: "Error Text", view: errorTextField)
|
||||
addFormRow(label: "Success", view: showSuccessSwitch)
|
||||
addFormRow(label: "Success Text", view: successTextField)
|
||||
addFormRow(label: "Width", view: widthTextField)
|
||||
addFormRow(label: "ToolTip Title", view: tooltipTitleTextField)
|
||||
addFormRow(label: "ToolTip Content", view: tooltipContentTextField)
|
||||
|
||||
|
||||
let fieldType = FormSection().with {
|
||||
$0.title = "Field Type Settings"
|
||||
$0.addFormRow(label: "Field Type", view: inputTypePickerSelectorView)
|
||||
}
|
||||
|
||||
let general = FormSection().with {
|
||||
$0.title = "\n\nGeneral Settings"
|
||||
}
|
||||
|
||||
general.addFormRow(label: "Disabled", view: disabledSwitch)
|
||||
general.addFormRow(label: "Required", view: requiredSwitch)
|
||||
general.addFormRow(label: "Surface", view: surfacePickerSelectorView)
|
||||
general.addFormRow(label: "Label Text", view: labelTextField)
|
||||
general.addFormRow(label: "Helper Text Placement", view: helperTextPlacementPickerSelectorView)
|
||||
general.addFormRow(label: "Helper Text", view: helperTextField)
|
||||
general.addFormRow(label: "Error", view: showErrorSwitch)
|
||||
general.addFormRow(label: "Error Text", view: errorTextField)
|
||||
general.addFormRow(label: "Success", view: showSuccessSwitch)
|
||||
general.addFormRow(label: "Success Text", view: successTextField)
|
||||
general.addFormRow(label: "Width", view: widthTextField)
|
||||
general.addFormRow(label: "ToolTip Title", view: tooltipTitleTextField)
|
||||
general.addFormRow(label: "ToolTip Content", view: tooltipContentTextField)
|
||||
|
||||
append(section: fieldType)
|
||||
append(section: passwordSection)
|
||||
append(section: dateSection)
|
||||
append(section: inlineActionSection)
|
||||
append(section: securityCodeSection)
|
||||
append(section: general)
|
||||
|
||||
requiredSwitch.onChange = { [weak self] sender in
|
||||
self?.component.required = sender.isOn
|
||||
self?.component.isRequired = sender.isOn
|
||||
}
|
||||
|
||||
showErrorSwitch.onChange = { [weak self] sender in
|
||||
@ -114,17 +184,42 @@ class InputFieldViewController: BaseViewController<InputField> {
|
||||
self?.updateTooltip()
|
||||
}.store(in: &subscribers)
|
||||
|
||||
//field types
|
||||
//password
|
||||
hidePasswordButtonTextField
|
||||
.textPublisher
|
||||
.sink { [weak self] text in
|
||||
self?.component.hidePasswordButtonText = text
|
||||
}.store(in: &subscribers)
|
||||
|
||||
showPasswordButtonTextField
|
||||
.textPublisher
|
||||
.sink { [weak self] text in
|
||||
self?.component.showPasswordButtonText = text
|
||||
}.store(in: &subscribers)
|
||||
|
||||
//inlineAction
|
||||
inlineActionTextField
|
||||
.textPublisher
|
||||
.sink { [weak self] text in
|
||||
if !text.isEmpty {
|
||||
self?.component.actionTextLinkModel = .init(text: text, onClick: { inputField in
|
||||
var value = inputField.value ?? ""
|
||||
value = !value.isEmpty ? value : "nil"
|
||||
self?.present(UIAlertController(title: "inlineAction", message: "Clicked and you get the value: \(value)", preferredStyle: .alert).with{ $0.addAction(.init(title: "OK", style: .default)) }, animated: true)
|
||||
})
|
||||
} else {
|
||||
self?.component.actionTextLinkModel = nil
|
||||
}
|
||||
}.store(in: &subscribers)
|
||||
}
|
||||
|
||||
func setupModel() {
|
||||
component.fieldType = .text
|
||||
component.width = 328
|
||||
component.text = "Starting Text"
|
||||
component.labelText = "Street Address"
|
||||
component.helperText = "For example: 123 Verizon St"
|
||||
component.errorText = "Enter a valid address."
|
||||
component.successText = "Good job entering a valid address!"
|
||||
component.tooltipModel = .init(title: "Check the formatting of your address", content:"House/Building number then street name")
|
||||
|
||||
component.onChange = { component in
|
||||
if let text = component.value {
|
||||
@ -137,8 +232,10 @@ class InputFieldViewController: BaseViewController<InputField> {
|
||||
//setup UI
|
||||
surfacePickerSelectorView.text = component.surface.rawValue
|
||||
helperTextPlacementPickerSelectorView.text = component.helperTextPlacement.rawValue
|
||||
dateFormatPickerSelectorView.text = component.dateFormat.rawValue
|
||||
inputTypePickerSelectorView.text = component.fieldType.rawValue
|
||||
disabledSwitch.isOn = !component.isEnabled
|
||||
requiredSwitch.isOn = component.required
|
||||
requiredSwitch.isOn = component.isRequired
|
||||
labelTextField.text = component.labelText
|
||||
helperTextField.text = component.helperText
|
||||
showErrorSwitch.isOn = component.showError
|
||||
@ -162,6 +259,21 @@ class InputFieldViewController: BaseViewController<InputField> {
|
||||
helperTextPlacementPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.component.helperTextPlacement = item
|
||||
}
|
||||
|
||||
inputTypePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.component.fieldType = item
|
||||
self?.component.text = ""
|
||||
self?.updateFormSections()
|
||||
}
|
||||
|
||||
dateFormatPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.component.dateFormat = item
|
||||
self?.updateFormSections()
|
||||
}
|
||||
|
||||
cardTypePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.component.cardType = item
|
||||
}
|
||||
}
|
||||
|
||||
func updateTooltip() {
|
||||
@ -171,6 +283,35 @@ class InputFieldViewController: BaseViewController<InputField> {
|
||||
component.tooltipModel = !title.isEmpty || !content.isEmpty ? .init(title: title,
|
||||
content: content) : nil
|
||||
}
|
||||
|
||||
func updateFormSections() {
|
||||
[passwordSection, dateSection, inlineActionSection, securityCodeSection].forEach { $0.isHidden = true }
|
||||
//reset other fields
|
||||
component.actionTextLinkModel = nil
|
||||
component.tooltipModel = nil
|
||||
component.cardType = .generic
|
||||
tooltipTitleTextField.text = nil
|
||||
tooltipContentTextField.text = nil
|
||||
dateFormatPickerSelectorView.text = component.dateFormat.rawValue
|
||||
cardTypePickerSelectorView.text = component.cardType.rawValue
|
||||
switch component.fieldType {
|
||||
case .inlineAction:
|
||||
inlineActionTextField.text = nil
|
||||
inlineActionSection.isHidden = false
|
||||
|
||||
case .password:
|
||||
passwordSection.isHidden = false
|
||||
|
||||
case .date:
|
||||
dateSection.isHidden = false
|
||||
|
||||
case .securityCode:
|
||||
securityCodeSection.isHidden = false
|
||||
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -74,13 +74,15 @@ class MenuViewController: UITableViewController, TooltipLaunchable {
|
||||
MenuComponent(title: "Button", completed: true, viewController: ButtonViewController.self),
|
||||
MenuComponent(title: "ButtonGroup", completed: true, viewController: ButtonGroupViewController.self),
|
||||
MenuComponent(title: "ButtonIcon", completed: true, viewController: ButtonIconViewController.self),
|
||||
MenuComponent(title: "Calendar", completed: true, viewController: CalendarViewController.self),
|
||||
MenuComponent(title: "Carousel Scrollbar", completed: true, viewController: CarouselScrollbarViewConttroller.self),
|
||||
MenuComponent(title: "Checkbox", completed: true, viewController: CheckboxViewController.self),
|
||||
MenuComponent(title: "CheckboxItem", completed: true, viewController: CheckboxItemViewController.self),
|
||||
MenuComponent(title: "CheckboxGroup", completed: true, viewController: CheckboxGroupViewController.self),
|
||||
MenuComponent(title: "DatePicker", completed: true, viewController: DatePickerViewController.self),
|
||||
MenuComponent(title: "DropdownSelect", completed: true, viewController: DropdownSelectViewController.self),
|
||||
MenuComponent(title: "Icon", completed: true, viewController: IconViewController.self),
|
||||
MenuComponent(title: "InputField", completed: false, viewController: InputFieldViewController.self),
|
||||
MenuComponent(title: "InputField", completed: true, viewController: InputFieldViewController.self),
|
||||
MenuComponent(title: "Label", completed: true, viewController: LabelViewController.self),
|
||||
MenuComponent(title: "Line", completed: true, viewController: LineViewController.self),
|
||||
MenuComponent(title: "Loader", completed: true, viewController: LoaderViewController.self),
|
||||
|
||||
@ -172,30 +172,8 @@ public class TableViewTestController: UIViewController, Initable, Surfaceable {
|
||||
}
|
||||
|
||||
var items: [MenuComponent] {
|
||||
all
|
||||
}
|
||||
|
||||
var all: [MenuComponent] {
|
||||
MenuViewController.items
|
||||
}
|
||||
|
||||
var batch1: [MenuComponent] {
|
||||
[
|
||||
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: "Label", completed: true, viewController: LabelViewController.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),
|
||||
MenuComponent(title: "TrailingTooltip", completed: true, viewController: TrailingTooltipLabelViewController.self),
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
extension TableViewTestController : UITableViewDelegate, UITableViewDataSource {
|
||||
|
||||
@ -34,7 +34,6 @@ class TextAreaViewController: BaseViewController<TextArea> {
|
||||
override func viewDidLoad() {
|
||||
super.viewDidLoad()
|
||||
addContentTopView(view: component)
|
||||
component.text = "Starting Text"
|
||||
setupPicker()
|
||||
setupModel()
|
||||
}
|
||||
@ -49,13 +48,14 @@ class TextAreaViewController: BaseViewController<TextArea> {
|
||||
addFormRow(label: "Read Only", view: readOnlySwitch)
|
||||
addFormRow(label: "Error", view: showErrorSwitch)
|
||||
addFormRow(label: "Error Text", view: errorTextField)
|
||||
addFormRow(label: "Width", view: widthTextField)
|
||||
addFormRow(label: "ToolTip Title", view: tooltipTitleTextField)
|
||||
addFormRow(label: "ToolTip Content", view: tooltipContentTextField)
|
||||
addFormRow(label: "Character Count", view: maxLengthTextField)
|
||||
addFormRow(label: "Min Height", view: heightPickerSelectorView)
|
||||
|
||||
requiredSwitch.onChange = { [weak self] sender in
|
||||
self?.component.required = sender.isOn
|
||||
self?.component.isRequired = sender.isOn
|
||||
}
|
||||
|
||||
showErrorSwitch.onChange = { [weak self] sender in
|
||||
@ -71,7 +71,7 @@ class TextAreaViewController: BaseViewController<TextArea> {
|
||||
}
|
||||
|
||||
readOnlySwitch.onChange = { [weak self] sender in
|
||||
self?.component.readOnly = sender.isOn
|
||||
self?.component.isReadOnly = sender.isOn
|
||||
}
|
||||
|
||||
labelTextField
|
||||
@ -126,7 +126,6 @@ class TextAreaViewController: BaseViewController<TextArea> {
|
||||
}
|
||||
|
||||
func setupModel() {
|
||||
component.width = 328
|
||||
component.labelText = "Street Address"
|
||||
component.helperText = "For example: 123 Verizon St"
|
||||
component.errorText = "Enter a valid address."
|
||||
@ -143,7 +142,7 @@ class TextAreaViewController: BaseViewController<TextArea> {
|
||||
//setup UI
|
||||
surfacePickerSelectorView.text = component.surface.rawValue
|
||||
disabledSwitch.isOn = !component.isEnabled
|
||||
requiredSwitch.isOn = component.required
|
||||
requiredSwitch.isOn = component.isRequired
|
||||
labelTextField.text = component.labelText
|
||||
helperTextField.text = component.helperText
|
||||
showErrorSwitch.isOn = component.showError
|
||||
|
||||
@ -50,6 +50,7 @@ class TileContainerViewController: BaseViewController<TileContainer> {
|
||||
var gradientColorsFormStackView = FormSection().with { $0.isHidden = true }
|
||||
var backgroundColor: BackgroundColor = .secondary
|
||||
var padding: Padding = .padding4X
|
||||
var isLinkSwitch = Toggle()
|
||||
var clickableSwitch = Toggle()
|
||||
var showBackgroundImageSwitch = Toggle()
|
||||
var showBorderSwitch = Toggle()
|
||||
@ -115,6 +116,7 @@ class TileContainerViewController: BaseViewController<TileContainer> {
|
||||
$0.text = "For testing max width is limited to 85% of view's width & 65% view's height."
|
||||
})
|
||||
addFormRow(label: "Surface", view: surfacePickerSelectorView)
|
||||
addFormRow(label: "Is Link", view: isLinkSwitch)
|
||||
addFormRow(label: "Clickable", view: clickableSwitch)
|
||||
addFormRow(label: "Width", view: widthTextField)
|
||||
addFormRow(label: "Height", view: heightTextField)
|
||||
@ -143,6 +145,11 @@ class TileContainerViewController: BaseViewController<TileContainer> {
|
||||
}
|
||||
}
|
||||
|
||||
isLinkSwitch.onChange = { [weak self] sender in
|
||||
guard let self else { return }
|
||||
self.component.accessibilityTraits = sender.isOn ? .link : .button
|
||||
}
|
||||
|
||||
clickableSwitch.onChange = { [weak self] sender in
|
||||
guard let self else { return }
|
||||
if sender.isOn {
|
||||
@ -254,7 +261,7 @@ class TileContainerViewController: BaseViewController<TileContainer> {
|
||||
contentAreaBackgroundColorButton.onClick = { [weak self] _ in
|
||||
guard let self else { return }
|
||||
self.colorPickerType = .contentViewBackgroundColor
|
||||
self.colorPicker.selectedColor = self.component.containerView.backgroundColor ?? .white
|
||||
self.colorPicker.selectedColor = self.component.contentView.backgroundColor ?? .white
|
||||
self.present(self.colorPicker, animated: true)
|
||||
}
|
||||
}
|
||||
@ -285,12 +292,12 @@ extension TileContainerViewController: UIColorPickerViewControllerDelegate {
|
||||
}
|
||||
|
||||
func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
|
||||
guard let hexString = viewController.selectedColor.hexString else { return }
|
||||
let color = viewController.selectedColor
|
||||
switch colorPickerType {
|
||||
case .contentViewBackgroundColor:
|
||||
component.containerView.backgroundColor = UIColor(hexString: hexString)
|
||||
component.contentView.backgroundColor = color
|
||||
case .backgroundColor:
|
||||
component.color = .custom(hexString)
|
||||
component.color = .custom(color)
|
||||
case .gradientColor1:
|
||||
gradientColorView1.selectedColor = viewController.selectedColor
|
||||
updateGradientColors()
|
||||
@ -301,8 +308,8 @@ extension TileContainerViewController: UIColorPickerViewControllerDelegate {
|
||||
}
|
||||
|
||||
func updateGradientColors(){
|
||||
if let selectedGradient1Color = gradientColorView1.selectedColor?.hexString,
|
||||
let selectedGradient2Color = gradientColorView2.selectedColor?.hexString{
|
||||
if let selectedGradient1Color = gradientColorView1.selectedColor,
|
||||
let selectedGradient2Color = gradientColorView2.selectedColor{
|
||||
component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,12 +25,6 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
items: Tilelet.SubTitleModel.OtherStandardStyle.allCases.sorted{ $0.rawValue < $1.rawValue })
|
||||
}()
|
||||
|
||||
lazy var subtitleColorPickerSelectorView = {
|
||||
PickerSelectorView<Use>(title: "",
|
||||
picker: self.picker,
|
||||
items: [.primary, .secondary])
|
||||
}()
|
||||
|
||||
lazy var textPositionPickerSelectorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
@ -75,7 +69,9 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
|
||||
var colorPickerType: ColorPickerType = .backgroundColor
|
||||
enum ColorPickerType {
|
||||
case backgroundColor, gradientColor1, gradientColor2, contentViewBackgroundColor
|
||||
case backgroundColor
|
||||
case gradientColor1, gradientColor2
|
||||
case contentViewBackgroundColor, light, dark
|
||||
}
|
||||
|
||||
lazy var gradientColorView1: ColorPickerView<ColorPickerType> = {
|
||||
@ -104,6 +100,142 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
items: TitleLockup.TextAlignment.allCases)
|
||||
}()
|
||||
|
||||
/// titleLockup
|
||||
var currentSurfaceColorType: SurfaceColorType = .title
|
||||
enum SurfaceColorType {
|
||||
case eyebrow, title, subtitle, directionalIcon, descriptionIcon
|
||||
}
|
||||
|
||||
enum TitleTextColor: String, CaseIterable {
|
||||
case primary, custom
|
||||
}
|
||||
|
||||
enum TextColor: String, CaseIterable {
|
||||
case primary, secondary, custom
|
||||
}
|
||||
|
||||
/// eyebrow
|
||||
var eyebrowColorsFormStackView = FormSection().with { $0.isHidden = true }
|
||||
lazy var eyebrowColorPickerSelectorView = {
|
||||
PickerSelectorView(title: "primary",
|
||||
picker: self.picker,
|
||||
items: TextColor.allCases)
|
||||
}()
|
||||
|
||||
lazy var eyebrowLightColorView: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.light) { [weak self] picker in
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
}
|
||||
}()
|
||||
|
||||
lazy var eyebrowDarkColorView: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.dark) { [weak self] picker in
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
}
|
||||
}()
|
||||
|
||||
/// title
|
||||
var titleColorsFormStackView = FormSection().with { $0.isHidden = true }
|
||||
lazy var titleColorPickerSelectorView = {
|
||||
PickerSelectorView(title: "primary",
|
||||
picker: self.picker,
|
||||
items: TitleTextColor.allCases)
|
||||
}()
|
||||
lazy var titleLightColorView: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.light) { [weak self] picker in
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
}
|
||||
}()
|
||||
|
||||
lazy var titleDarkColorView: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.dark) { [weak self] picker in
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
}
|
||||
}()
|
||||
|
||||
/// subtitle
|
||||
var subtitleColorsFormStackView = FormSection().with { $0.isHidden = true }
|
||||
lazy var subtitleColorPickerSelectorView = {
|
||||
PickerSelectorView(title: "primary",
|
||||
picker: self.picker,
|
||||
items: TextColor.allCases)
|
||||
}()
|
||||
lazy var subtitleLightColorView: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.light) { [weak self] picker in
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
}
|
||||
}()
|
||||
|
||||
lazy var subtitleDarkColorView: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.dark) { [weak self] picker in
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
}
|
||||
}()
|
||||
|
||||
lazy var descriptionNamePickerSelectorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: Icon.Name.all.sorted{ $0.rawValue < $1.rawValue })
|
||||
}()
|
||||
|
||||
lazy var descriptionIconSizePickerSelectorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: Icon.Size.allCases)
|
||||
}()
|
||||
|
||||
lazy var descriptionIconLightColorView: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.light) { [weak self] picker in
|
||||
self?.currentSurfaceColorType = .descriptionIcon
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
}
|
||||
}()
|
||||
|
||||
var descriptionIconFormStackView = FormSection().with { $0.isHidden = true }
|
||||
lazy var descriptionIconDarkColorView: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.dark) { [weak self] picker in
|
||||
self?.currentSurfaceColorType = .descriptionIcon
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
}
|
||||
}()
|
||||
|
||||
var directionalIconFormStackView = FormSection().with { $0.isHidden = true }
|
||||
lazy var directionalIconLightColorView: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.light) { [weak self] picker in
|
||||
self?.currentSurfaceColorType = .directionalIcon
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
}
|
||||
}()
|
||||
|
||||
lazy var directionalIconDarkColorView: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.dark) { [weak self] picker in
|
||||
self?.currentSurfaceColorType = .directionalIcon
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
}
|
||||
}()
|
||||
|
||||
lazy var directionIconPickerSelectorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: Tilelet.DirectionalIcon.IconType.allCases.sorted{ $0.rawValue < $1.rawValue })
|
||||
}()
|
||||
|
||||
lazy var directionIconSizePickerSelectorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: Tilelet.DirectionalIcon.IconSize.allCases.sorted{ $0.rawValue < $1.rawValue })
|
||||
}()
|
||||
|
||||
let backgroundImage = UIImage(named: "backgroundTest")!
|
||||
var clickableSwitch = Toggle()
|
||||
var eyebrowTextField = TextField()
|
||||
@ -125,6 +257,7 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
var showDropShadowSwitch = Toggle()
|
||||
var backgroundColor: BackgroundColor = .black
|
||||
var maxWidthTextField = NumericField()
|
||||
var isLinkSwitch = Toggle()
|
||||
|
||||
var gradientColorsFormStackView = FormSection().with { $0.isHidden = true }
|
||||
|
||||
@ -139,6 +272,7 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
super.setupForm()
|
||||
addFormRow(label: "Surface", view: surfacePickerSelectorView)
|
||||
addActionRow()
|
||||
addFormRow(label: "Is Link", view: isLinkSwitch)
|
||||
addFormRow(label: "Clickable", view: clickableSwitch)
|
||||
|
||||
addFormRow(label: "Aspect Ratio", view: scalingTypePickerSelectorView)
|
||||
@ -148,27 +282,8 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
addFormRow(label: "Text Alignment", view: textAlignmentPickerSelectorView)
|
||||
addFormRow(label: "Text Width", view: textWidthTextField)
|
||||
addFormRow(label: "Text Percentage", view: textPercentageTextField)
|
||||
addFormRow(label: "Text Position(Minimum height is configurable.)", view: textPositionPickerSelectorView)
|
||||
addFormRow(label: "Description Icon", view: showDescriptionIconSwitch)
|
||||
addFormRow(label: "Directional Icon", view: showDirectionalIconSwitch)
|
||||
|
||||
addFormRow(label: "Badge Text", view: badgeTextField)
|
||||
addFormRow(label: "Badge Fill Color", view: badgeFillColorPickerSelectorView)
|
||||
addFormRow(label: "Badge Number of Lines", view: badgeNumberOfLinesPickerSelectorView)
|
||||
addFormRow(label: "Badge Max Width", view: maxWidthTextField)
|
||||
|
||||
addFormRow(label: "Eyebrow/Subtitle Style", view: otherStandardStylePickerSelectorView)
|
||||
addFormRow(label: "Eyebrow Text", view: eyebrowTextField)
|
||||
addFormRow(label: "Eyebrow is Bold", view: eyebrowIsBold)
|
||||
|
||||
addFormRow(label: "Title Style", view: titleStandardStylePickerSelectorView)
|
||||
addFormRow(label: "Title Text", view: titleTextField)
|
||||
addFormRow(label: "Title is Bold", view: titleIsBold)
|
||||
|
||||
addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView)
|
||||
addFormRow(label: "Subtitle Text", view: subTitleTextField)
|
||||
|
||||
addFormRow(label: "Background Color", view: backgroundColorPickerSelectorView)
|
||||
addFormRow(label: "Text Position", tooltip: .init(title:"Text Position", content: "Minimum height is configurable"), view: textPositionPickerSelectorView)
|
||||
addFormRow(label: "Background Color", tooltip: .init(title:"Background Color", content: "This color takes precedence over surface and will set all children's surface property to this value."), view: backgroundColorPickerSelectorView)
|
||||
addFormRow(label: "Background Image", view: showBackgroundImageSwitch)
|
||||
addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch)
|
||||
addFormRow(label: "Image Fallback Color", view: imageFallbackColorPickerSelectorView)
|
||||
@ -178,6 +293,66 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
gradientColorsFormStackView.addFormRow(label: "Gradient Color2", view: gradientColorView2)
|
||||
append(section: gradientColorsFormStackView)
|
||||
|
||||
append(section: .init().with({
|
||||
$0.title = "Badge"
|
||||
$0.addFormRow(label: "Text", view: badgeTextField)
|
||||
$0.addFormRow(label: "Fill Color", view: badgeFillColorPickerSelectorView)
|
||||
$0.addFormRow(label: "Number of Lines", view: badgeNumberOfLinesPickerSelectorView)
|
||||
$0.addFormRow(label: "Max Width", view: maxWidthTextField)
|
||||
}))
|
||||
|
||||
append(section: .init().with({
|
||||
$0.title = "Eyebrow"
|
||||
$0.addFormRow(label: "Text Style", tooltip: .init(title: "Text Style", content: "Eyebrow and Subtitle will share the same textStyle."), view: otherStandardStylePickerSelectorView)
|
||||
$0.addFormRow(label: "is Bold", view: eyebrowIsBold)
|
||||
$0.addFormRow(label: "Text", view: eyebrowTextField)
|
||||
$0.addFormRow(label: "Color", view: eyebrowColorPickerSelectorView)
|
||||
}))
|
||||
|
||||
eyebrowColorsFormStackView.addFormRow(label: "Light", view: eyebrowLightColorView)
|
||||
eyebrowColorsFormStackView.addFormRow(label: "Dark", view: eyebrowDarkColorView)
|
||||
append(section: eyebrowColorsFormStackView)
|
||||
|
||||
append(section: .init().with({
|
||||
$0.title = "Title"
|
||||
$0.addFormRow(label: "Text Style", view: titleStandardStylePickerSelectorView)
|
||||
$0.addFormRow(label: "is Bold", view: titleIsBold)
|
||||
$0.addFormRow(label: "Text", view: titleTextField)
|
||||
$0.addFormRow(label: "Color", view: titleColorPickerSelectorView)
|
||||
}))
|
||||
titleColorsFormStackView.addFormRow(label: "Light", view: titleLightColorView)
|
||||
titleColorsFormStackView.addFormRow(label: "Dark", view: titleDarkColorView)
|
||||
append(section: titleColorsFormStackView)
|
||||
|
||||
append(section: .init().with({
|
||||
$0.title = "Subtitle"
|
||||
$0.addFormRow(label: "Text", view: subTitleTextField)
|
||||
$0.addFormRow(label: "Color", view: subtitleColorPickerSelectorView)
|
||||
}))
|
||||
subtitleColorsFormStackView.addFormRow(label: "Light", view: subtitleLightColorView)
|
||||
subtitleColorsFormStackView.addFormRow(label: "Dark", view: subtitleDarkColorView)
|
||||
append(section: subtitleColorsFormStackView)
|
||||
|
||||
append(section: .init().with({
|
||||
$0.title = "Description Icon "
|
||||
$0.addFormRow(label: "Show", view: showDescriptionIconSwitch)
|
||||
}))
|
||||
append(section: descriptionIconFormStackView)
|
||||
descriptionIconFormStackView.addFormRow(label: "Icon", view: descriptionNamePickerSelectorView)
|
||||
descriptionIconFormStackView.addFormRow(label: "Size", view: descriptionIconSizePickerSelectorView)
|
||||
descriptionIconFormStackView.addFormRow(label: "Light", view: descriptionIconLightColorView)
|
||||
descriptionIconFormStackView.addFormRow(label: "Dark", view: descriptionIconDarkColorView)
|
||||
|
||||
append(section: .init().with({
|
||||
$0.title = "Directional Icon"
|
||||
$0.addFormRow(label: "Show", view: showDirectionalIconSwitch)
|
||||
}))
|
||||
append(section: directionalIconFormStackView)
|
||||
directionalIconFormStackView.addFormRow(label: "Icon", view: directionIconPickerSelectorView)
|
||||
directionalIconFormStackView.addFormRow(label: "Size", view: directionIconSizePickerSelectorView)
|
||||
directionalIconFormStackView.addFormRow(label: "Light", view: directionalIconLightColorView)
|
||||
directionalIconFormStackView.addFormRow(label: "Dark", view: directionalIconDarkColorView)
|
||||
|
||||
clickableSwitch.onChange = { [weak self] sender in
|
||||
guard let self else { return }
|
||||
if sender.isOn {
|
||||
@ -187,6 +362,11 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
}
|
||||
}
|
||||
|
||||
isLinkSwitch.onChange = { [weak self] sender in
|
||||
guard let self else { return }
|
||||
self.component.accessibilityTraits = sender.isOn ? .link : .button
|
||||
}
|
||||
|
||||
heightTextField
|
||||
.numberPublisher
|
||||
.sink { [weak self] number in
|
||||
@ -248,18 +428,22 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
}.store(in: &subscribers)
|
||||
|
||||
showDescriptionIconSwitch.onChange = { [weak self] sender in
|
||||
self?.descriptionIconFormStackView.isHidden = !sender.isOn
|
||||
self?.directionalIconFormStackView.isHidden = sender.isOn
|
||||
if sender.isOn {
|
||||
self?.showDirectionalIconSwitch.isOn = false
|
||||
self?.component.descriptiveIconModel = .init(size: .medium, surface: .dark)
|
||||
self?.setDescriptiveIconModel()
|
||||
} else {
|
||||
self?.component.descriptiveIconModel = nil
|
||||
}
|
||||
}
|
||||
|
||||
showDirectionalIconSwitch.onChange = { [weak self] sender in
|
||||
self?.descriptionIconFormStackView.isHidden = sender.isOn
|
||||
self?.directionalIconFormStackView.isHidden = !sender.isOn
|
||||
if sender.isOn {
|
||||
self?.showDescriptionIconSwitch.isOn = false
|
||||
self?.component.directionalIconModel = .init(size: .medium, surface: .dark)
|
||||
self?.setDirectionalIconModel()
|
||||
} else {
|
||||
self?.component.directionalIconModel = nil
|
||||
}
|
||||
@ -320,13 +504,22 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
surfacePickerSelectorView.text = component.surface.rawValue
|
||||
otherStandardStylePickerSelectorView.text = subTitleModel.otherStandardStyle.rawValue
|
||||
titleStandardStylePickerSelectorView.text = titleModel.standardStyle.rawValue
|
||||
subtitleColorPickerSelectorView.text = subTitleModel.textColor.rawValue
|
||||
titleTextField.text = titleModel.text
|
||||
subTitleTextField.text = subTitleModel.text
|
||||
widthTextField.text = component.width != nil ? "\(component.width!)" : ""
|
||||
textPositionPickerSelectorView.text = component.textPostion.rawValue
|
||||
scalingTypePickerSelectorView.text = component.aspectRatio.rawValue
|
||||
updateOtherTextStyles()
|
||||
|
||||
descriptionIconLightColorView.selectedColor = VDSColor.elementsPrimaryOnlight
|
||||
descriptionIconDarkColorView.selectedColor = VDSColor.elementsPrimaryOndark
|
||||
descriptionNamePickerSelectorView.text = Icon.Name.multipleDocuments.rawValue
|
||||
descriptionIconSizePickerSelectorView.text = Icon.Size.medium.rawValue
|
||||
|
||||
directionalIconLightColorView.selectedColor = VDSColor.elementsPrimaryOnlight
|
||||
directionalIconDarkColorView.selectedColor = VDSColor.elementsPrimaryOndark
|
||||
directionIconPickerSelectorView.text = Tilelet.DirectionalIcon.IconType.rightArrow.rawValue
|
||||
directionIconSizePickerSelectorView.text = Tilelet.DirectionalIcon.IconSize.medium.rawValue
|
||||
}
|
||||
|
||||
//sub models
|
||||
@ -340,7 +533,20 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
|
||||
func setTitleModel() {
|
||||
if let text = titleTextField.text, !text.isEmpty {
|
||||
component.titleModel = Tilelet.TitleModel(text: text, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
|
||||
var textColor: TitleLockup.TitleTextColor
|
||||
switch titleColorPickerSelectorView.selectedItem {
|
||||
case .primary:
|
||||
textColor = .primary
|
||||
case .custom:
|
||||
if let light = titleLightColorView.selectedColor {
|
||||
let dark = titleDarkColorView.selectedColor ?? light
|
||||
textColor = .custom(light, dark)
|
||||
} else {
|
||||
textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
|
||||
}
|
||||
}
|
||||
|
||||
component.titleModel = Tilelet.TitleModel(text: text, textColor: textColor, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
|
||||
} else {
|
||||
component.titleModel = nil
|
||||
}
|
||||
@ -348,7 +554,22 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
|
||||
func setSubTitleModel() {
|
||||
if let text = subTitleTextField.text, !text.isEmpty {
|
||||
component.subTitleModel = Tilelet.SubTitleModel(text: text, otherStandardStyle: otherStandardStylePickerSelectorView.selectedItem)
|
||||
var textColor: TitleLockup.TextColor
|
||||
switch subtitleColorPickerSelectorView.selectedItem {
|
||||
case .primary:
|
||||
textColor = .primary
|
||||
case .secondary:
|
||||
textColor = .secondary
|
||||
case .custom:
|
||||
if let light = subtitleLightColorView.selectedColor {
|
||||
let dark = subtitleDarkColorView.selectedColor ?? light
|
||||
textColor = .custom(light, dark)
|
||||
} else {
|
||||
textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
|
||||
}
|
||||
}
|
||||
|
||||
component.subTitleModel = Tilelet.SubTitleModel(text: text, otherStandardStyle: otherStandardStylePickerSelectorView.selectedItem, textColor: textColor)
|
||||
} else {
|
||||
component.subTitleModel = nil
|
||||
}
|
||||
@ -356,12 +577,55 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
|
||||
func setEyebrowModel() {
|
||||
if let text = eyebrowTextField.text, !text.isEmpty {
|
||||
component.eyebrowModel = Tilelet.EyebrowModel(text: text, isBold: eyebrowIsBold.isOn, standardStyle: otherStandardStylePickerSelectorView.selectedItem)
|
||||
var textColor: TitleLockup.TextColor
|
||||
switch eyebrowColorPickerSelectorView.selectedItem {
|
||||
case .primary:
|
||||
textColor = .primary
|
||||
case .secondary:
|
||||
textColor = .secondary
|
||||
case .custom:
|
||||
if let light = eyebrowLightColorView.selectedColor {
|
||||
let dark = eyebrowDarkColorView.selectedColor ?? light
|
||||
textColor = .custom(light, dark)
|
||||
} else {
|
||||
textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
|
||||
}
|
||||
}
|
||||
|
||||
component.eyebrowModel = Tilelet.EyebrowModel(text: text, textColor: textColor, isBold: eyebrowIsBold.isOn, standardStyle: otherStandardStylePickerSelectorView.selectedItem)
|
||||
} else {
|
||||
component.eyebrowModel = nil
|
||||
}
|
||||
}
|
||||
|
||||
func setDescriptiveIconModel() {
|
||||
let light = descriptionIconLightColorView.selectedColor ?? descriptionIconDarkColorView.selectedColor
|
||||
let dark = descriptionIconDarkColorView.selectedColor ?? descriptionIconLightColorView.selectedColor
|
||||
let iconSize = descriptionIconSizePickerSelectorView.selectedItem
|
||||
let iconName = descriptionNamePickerSelectorView.selectedItem
|
||||
|
||||
if let light, let dark {
|
||||
component.descriptiveIconModel = .init(name: iconName,
|
||||
colorConfiguration: SurfaceColorConfiguration(light, dark), size: iconSize)
|
||||
} else {
|
||||
component.descriptiveIconModel = .init(name: iconName,
|
||||
size: iconSize)
|
||||
}
|
||||
}
|
||||
|
||||
func setDirectionalIconModel() {
|
||||
let light = directionalIconLightColorView.selectedColor ?? directionalIconDarkColorView.selectedColor
|
||||
let dark = directionalIconDarkColorView.selectedColor ?? directionalIconLightColorView.selectedColor
|
||||
let iconType = directionIconPickerSelectorView.selectedItem
|
||||
let iconSize = directionIconSizePickerSelectorView.selectedItem
|
||||
|
||||
if let light, let dark {
|
||||
component.directionalIconModel = .init(iconType: iconType, colorConfiguration: SurfaceColorConfiguration(light, dark), size: iconSize)
|
||||
} else {
|
||||
component.directionalIconModel = .init(iconType: iconType, size: iconSize)
|
||||
}
|
||||
}
|
||||
|
||||
func updateOtherTextStyles() {
|
||||
let items = component.titleLockup.standardStyleConfiguration.configuration(for: titleStandardStylePickerSelectorView.selectedItem.value)!.allOtherStandardStyles
|
||||
let otheritems = items.compactMap { Tilelet.SubTitleModel.OtherStandardStyle(rawValue: $0.rawValue)! }
|
||||
@ -387,10 +651,6 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
self?.setSubTitleModel()
|
||||
}
|
||||
|
||||
subtitleColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.setSubTitleModel()
|
||||
}
|
||||
|
||||
textPositionPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
guard let self else { return }
|
||||
self.component.textPostion = item
|
||||
@ -436,6 +696,46 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
self.present(self.colorPicker, animated: true)
|
||||
}
|
||||
}
|
||||
|
||||
eyebrowColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.currentSurfaceColorType = .eyebrow
|
||||
self?.eyebrowColorsFormStackView.isHidden = item != .custom
|
||||
if item != .custom {
|
||||
self?.setEyebrowModel()
|
||||
}
|
||||
}
|
||||
|
||||
titleColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.currentSurfaceColorType = .title
|
||||
self?.titleColorsFormStackView.isHidden = item != .custom
|
||||
if item != .custom {
|
||||
self?.setTitleModel()
|
||||
}
|
||||
}
|
||||
|
||||
subtitleColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.currentSurfaceColorType = .subtitle
|
||||
self?.subtitleColorsFormStackView.isHidden = item != .custom
|
||||
if item != .custom {
|
||||
self?.setSubTitleModel()
|
||||
}
|
||||
}
|
||||
|
||||
descriptionNamePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.setDescriptiveIconModel()
|
||||
}
|
||||
|
||||
descriptionIconSizePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.setDescriptiveIconModel()
|
||||
}
|
||||
|
||||
directionIconPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.setDirectionalIconModel()
|
||||
}
|
||||
|
||||
directionIconSizePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.setDirectionalIconModel()
|
||||
}
|
||||
}
|
||||
|
||||
func getTilelet(effect: TileContainer.BackgroundEffect) -> Tilelet.BackgroundEffect {
|
||||
@ -494,24 +794,66 @@ extension TileletViewController: UIColorPickerViewControllerDelegate {
|
||||
}
|
||||
|
||||
func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
|
||||
guard let hexString = viewController.selectedColor.hexString else { return }
|
||||
let color = viewController.selectedColor
|
||||
var lightColorView: ColorPickerView<ColorPickerType>
|
||||
var darkColorView: ColorPickerView<ColorPickerType>
|
||||
switch colorPickerType {
|
||||
case .contentViewBackgroundColor:
|
||||
component.containerView.backgroundColor = UIColor(hexString: hexString)
|
||||
component.contentView.backgroundColor = color
|
||||
case .backgroundColor:
|
||||
component.color = .custom(hexString)
|
||||
component.color = .custom(color)
|
||||
case .gradientColor1:
|
||||
gradientColorView1.selectedColor = viewController.selectedColor
|
||||
updateGradientColors()
|
||||
case .gradientColor2:
|
||||
gradientColorView2.selectedColor = viewController.selectedColor
|
||||
updateGradientColors()
|
||||
|
||||
case .light, .dark:
|
||||
var lightColorView: ColorPickerView<ColorPickerType>
|
||||
var darkColorView: ColorPickerView<ColorPickerType>
|
||||
|
||||
switch currentSurfaceColorType {
|
||||
case .eyebrow:
|
||||
lightColorView = eyebrowLightColorView
|
||||
darkColorView = eyebrowDarkColorView
|
||||
case .title:
|
||||
lightColorView = titleLightColorView
|
||||
darkColorView = titleDarkColorView
|
||||
case .subtitle:
|
||||
lightColorView = subtitleLightColorView
|
||||
darkColorView = subtitleDarkColorView
|
||||
case .directionalIcon:
|
||||
lightColorView = directionalIconLightColorView
|
||||
darkColorView = directionalIconDarkColorView
|
||||
case .descriptionIcon:
|
||||
lightColorView = descriptionIconLightColorView
|
||||
darkColorView = descriptionIconDarkColorView
|
||||
}
|
||||
if colorPickerType == .light {
|
||||
lightColorView.selectedColor = viewController.selectedColor
|
||||
} else {
|
||||
darkColorView.selectedColor = viewController.selectedColor
|
||||
}
|
||||
|
||||
switch currentSurfaceColorType {
|
||||
case .eyebrow:
|
||||
setEyebrowModel()
|
||||
case .title:
|
||||
setTitleModel()
|
||||
case .subtitle:
|
||||
setSubTitleModel()
|
||||
case .directionalIcon:
|
||||
setDirectionalIconModel()
|
||||
case .descriptionIcon:
|
||||
setDescriptiveIconModel()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
func updateGradientColors(){
|
||||
if let selectedGradient1Color = gradientColorView1.selectedColor?.hexString,
|
||||
let selectedGradient2Color = gradientColorView2.selectedColor?.hexString{
|
||||
if let selectedGradient1Color = gradientColorView1.selectedColor,
|
||||
let selectedGradient2Color = gradientColorView2.selectedColor{
|
||||
component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,18 +30,104 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
|
||||
items: TitleLockup.OtherStandardStyle.allCases.sorted{ $0.rawValue < $1.rawValue })
|
||||
}()
|
||||
|
||||
lazy var subtitleColorPickerSelectorView = {
|
||||
PickerSelectorView<Use>(title: "",
|
||||
picker: self.picker,
|
||||
items: [.primary, .secondary])
|
||||
}()
|
||||
|
||||
var titleIsBold = Toggle().with { $0.isOn = true }
|
||||
var eyebrowIsBold = Toggle().with { $0.isOn = true }
|
||||
var eyebrowTextField = TextField()
|
||||
var titleTextField = TextField()
|
||||
var subTitleTextField = TextField()
|
||||
|
||||
/// **********************************************
|
||||
/// Text Color
|
||||
lazy var colorPicker: UIColorPickerViewController = {
|
||||
let picker = UIColorPickerViewController()
|
||||
picker.delegate = self
|
||||
return picker
|
||||
}()
|
||||
|
||||
var currentLabelType: LabelType = .title
|
||||
var colorPickerType: ColorPickerType = .light
|
||||
|
||||
enum LabelType {
|
||||
case eyebrow, title, subtitle
|
||||
}
|
||||
|
||||
enum TitleTextColor: String, CaseIterable {
|
||||
case primary, custom
|
||||
}
|
||||
|
||||
enum TextColor: String, CaseIterable {
|
||||
case primary, secondary, custom
|
||||
}
|
||||
|
||||
enum ColorPickerType {
|
||||
case light, dark
|
||||
}
|
||||
|
||||
/// eyebrow
|
||||
var eyebrowColorsFormStackView = FormSection().with { $0.isHidden = true }
|
||||
lazy var eyebrowColorPickerSelectorView = {
|
||||
PickerSelectorView(title: "primary",
|
||||
picker: self.picker,
|
||||
items: TextColor.allCases)
|
||||
}()
|
||||
|
||||
lazy var eyebrowLightColorView: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.light) { [weak self] picker in
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
}
|
||||
}()
|
||||
|
||||
lazy var eyebrowDarkColorView: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.dark) { [weak self] picker in
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
}
|
||||
}()
|
||||
|
||||
/// title
|
||||
var titleColorsFormStackView = FormSection().with { $0.isHidden = true }
|
||||
lazy var titleColorPickerSelectorView = {
|
||||
PickerSelectorView(title: "primary",
|
||||
picker: self.picker,
|
||||
items: TitleTextColor.allCases)
|
||||
}()
|
||||
lazy var titleLightColorView: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.light) { [weak self] picker in
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
}
|
||||
}()
|
||||
|
||||
lazy var titleDarkColorView: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.dark) { [weak self] picker in
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
}
|
||||
}()
|
||||
|
||||
/// subtitle
|
||||
var subtitleColorsFormStackView = FormSection().with { $0.isHidden = true }
|
||||
lazy var subtitleColorPickerSelectorView = {
|
||||
PickerSelectorView(title: "primary",
|
||||
picker: self.picker,
|
||||
items: TextColor.allCases)
|
||||
}()
|
||||
lazy var subtitleLightColorView: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.light) { [weak self] picker in
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
}
|
||||
}()
|
||||
|
||||
lazy var subtitleDarkColorView: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.dark) { [weak self] picker in
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
}
|
||||
}()
|
||||
|
||||
|
||||
override func viewDidLoad() {
|
||||
super.viewDidLoad()
|
||||
addContentTopView(view: component)
|
||||
@ -55,17 +141,28 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
|
||||
addFormRow(label: "Surface", view: surfacePickerSelectorView)
|
||||
addFormRow(label: "Text Alignment", view: textAlignmentPickerSelectorView)
|
||||
|
||||
addFormRow(label: "Title is Bold", view: titleIsBold)
|
||||
addFormRow(label: "Eyebrow/Subtitle Style", view: otherStandardStylePickerSelectorView)
|
||||
addFormRow(label: "Eyebrow is Bold", view: eyebrowIsBold)
|
||||
|
||||
addFormRow(label: "Title Style", view: titleStandardStylePickerSelectorView)
|
||||
addFormRow(label: "Other Style", view: otherStandardStylePickerSelectorView)
|
||||
|
||||
addFormRow(label: "Eyebrow Text", view: eyebrowTextField)
|
||||
addFormRow(label: "Title Text", view: titleTextField)
|
||||
addFormRow(label: "Eyebrow Color", view: eyebrowColorPickerSelectorView)
|
||||
eyebrowColorsFormStackView.addFormRow(label: "Light", view: eyebrowLightColorView)
|
||||
eyebrowColorsFormStackView.addFormRow(label: "Dark", view: eyebrowDarkColorView)
|
||||
append(section: eyebrowColorsFormStackView)
|
||||
|
||||
addFormRow(label: "Title is Bold", view: titleIsBold)
|
||||
addFormRow(label: "Title Style", view: titleStandardStylePickerSelectorView)
|
||||
addFormRow(label: "Title Text", view: titleTextField)
|
||||
addFormRow(label: "Title Color", view: titleColorPickerSelectorView)
|
||||
titleColorsFormStackView.addFormRow(label: "Light", view: titleLightColorView)
|
||||
titleColorsFormStackView.addFormRow(label: "Dark", view: titleDarkColorView)
|
||||
append(section: titleColorsFormStackView)
|
||||
|
||||
addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView)
|
||||
addFormRow(label: "Subtitle Text", view: subTitleTextField)
|
||||
addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView)
|
||||
subtitleColorsFormStackView.addFormRow(label: "Light", view: subtitleLightColorView)
|
||||
subtitleColorsFormStackView.addFormRow(label: "Dark", view: subtitleDarkColorView)
|
||||
append(section: subtitleColorsFormStackView)
|
||||
|
||||
|
||||
eyebrowIsBold.publisher(for: .valueChanged).sink { [weak self] toggle in
|
||||
self?.setOtherModels()
|
||||
@ -108,7 +205,6 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
|
||||
textAlignmentPickerSelectorView.text = TextAlignment.left.rawValue
|
||||
otherStandardStylePickerSelectorView.text = subTitleModel.otherStandardStyle.rawValue
|
||||
titleStandardStylePickerSelectorView.text = titleModel.standardStyle.rawValue
|
||||
subtitleColorPickerSelectorView.text = subTitleModel.textColor.rawValue
|
||||
eyebrowTextField.text = eyebrowModel.text
|
||||
titleTextField.text = titleModel.text
|
||||
subTitleTextField.text = subTitleModel.text
|
||||
@ -120,7 +216,21 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
|
||||
func setTitleModel() {
|
||||
var titleTextStyle: TextStyle?
|
||||
if let text = titleTextField.text, !text.isEmpty {
|
||||
component.titleModel = TitleLockup.TitleModel(text: text, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
|
||||
|
||||
var textColor: TitleLockup.TitleTextColor
|
||||
switch titleColorPickerSelectorView.selectedItem {
|
||||
case .primary:
|
||||
textColor = .primary
|
||||
case .custom:
|
||||
if let light = titleLightColorView.selectedColor {
|
||||
let dark = titleDarkColorView.selectedColor ?? light
|
||||
textColor = .custom(light, dark)
|
||||
} else {
|
||||
textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
|
||||
}
|
||||
}
|
||||
|
||||
component.titleModel = TitleLockup.TitleModel(text: text, textColor: textColor, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
|
||||
titleTextStyle = titleIsBold.isOn ? titleStandardStylePickerSelectorView.selectedItem.value.bold : titleStandardStylePickerSelectorView.selectedItem.value.regular
|
||||
} else {
|
||||
component.titleModel = nil
|
||||
@ -139,14 +249,41 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
|
||||
let style = otherStandardStylePickerSelectorView.selectedItem
|
||||
|
||||
if let text = subTitleTextField.text, !text.isEmpty {
|
||||
component.subTitleModel = TitleLockup.SubTitleModel(text: text, otherStandardStyle: style, textColor: subtitleColorPickerSelectorView.selectedItem)
|
||||
var textColor: TitleLockup.TextColor
|
||||
switch subtitleColorPickerSelectorView.selectedItem {
|
||||
case .primary:
|
||||
textColor = .primary
|
||||
case .secondary:
|
||||
textColor = .secondary
|
||||
case .custom:
|
||||
if let light = subtitleLightColorView.selectedColor {
|
||||
let dark = subtitleDarkColorView.selectedColor ?? light
|
||||
textColor = .custom(light, dark)
|
||||
} else {
|
||||
textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
|
||||
}
|
||||
}
|
||||
component.subTitleModel = TitleLockup.SubTitleModel(text: text, otherStandardStyle: style, textColor: textColor)
|
||||
debug(type: "SubTitle", textStyle: style.value.regular)
|
||||
} else {
|
||||
component.subTitleModel = nil
|
||||
}
|
||||
|
||||
if let text = eyebrowTextField.text, !text.isEmpty {
|
||||
component.eyebrowModel = TitleLockup.EyebrowModel(text: text, isBold: eyebrowIsBold.isOn, standardStyle: style)
|
||||
var textColor: TitleLockup.TextColor
|
||||
switch eyebrowColorPickerSelectorView.selectedItem {
|
||||
case .primary:
|
||||
textColor = .primary
|
||||
case .secondary:
|
||||
textColor = .secondary
|
||||
case .custom:
|
||||
if let light = eyebrowLightColorView.selectedColor {
|
||||
let dark = eyebrowDarkColorView.selectedColor ?? light
|
||||
textColor = .custom(light, dark)
|
||||
} else {
|
||||
textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
|
||||
} }
|
||||
component.eyebrowModel = TitleLockup.EyebrowModel(text: text, textColor: textColor, isBold: eyebrowIsBold.isOn, standardStyle: style)
|
||||
debug(type: "EyeBrow", textStyle: eyebrowIsBold.isOn ? style.value.bold : style.value.regular)
|
||||
|
||||
} else {
|
||||
@ -179,10 +316,31 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
|
||||
self?.setOtherModels()
|
||||
}
|
||||
|
||||
subtitleColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
|
||||
eyebrowColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.currentLabelType = .eyebrow
|
||||
self?.eyebrowColorsFormStackView.isHidden = item != .custom
|
||||
if item != .custom {
|
||||
self?.setOtherModels()
|
||||
}
|
||||
}
|
||||
|
||||
titleColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.currentLabelType = .title
|
||||
self?.titleColorsFormStackView.isHidden = item != .custom
|
||||
if item != .custom {
|
||||
self?.setTitleModel()
|
||||
}
|
||||
}
|
||||
|
||||
subtitleColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.currentLabelType = .subtitle
|
||||
self?.subtitleColorsFormStackView.isHidden = item != .custom
|
||||
if item != .custom {
|
||||
self?.setOtherModels()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
extension TitleLockupViewController: ComponentSampleable {
|
||||
@ -198,3 +356,48 @@ extension TitleLockupViewController: ComponentSampleable {
|
||||
return ComponentSample(component: component)
|
||||
}
|
||||
}
|
||||
|
||||
extension TitleLockupViewController: UIColorPickerViewControllerDelegate {
|
||||
|
||||
func selectedColorTapped(_ picker: ColorPickerView<ColorPickerType>) {
|
||||
let selectedColor = picker.selectedColor
|
||||
if let selectedColor {
|
||||
colorPicker.selectedColor = selectedColor
|
||||
}
|
||||
present(colorPicker, animated: true)
|
||||
}
|
||||
|
||||
func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
|
||||
dismiss(animated: true)
|
||||
}
|
||||
|
||||
func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
|
||||
guard let hexString = viewController.selectedColor.hexString else { return }
|
||||
var lightColorView: ColorPickerView<ColorPickerType>
|
||||
var darkColorView: ColorPickerView<ColorPickerType>
|
||||
|
||||
switch currentLabelType {
|
||||
case .eyebrow:
|
||||
lightColorView = eyebrowLightColorView
|
||||
darkColorView = eyebrowDarkColorView
|
||||
case .title:
|
||||
lightColorView = titleLightColorView
|
||||
darkColorView = titleDarkColorView
|
||||
case .subtitle:
|
||||
lightColorView = subtitleLightColorView
|
||||
darkColorView = subtitleDarkColorView
|
||||
}
|
||||
switch colorPickerType {
|
||||
case .light:
|
||||
lightColorView.selectedColor = viewController.selectedColor
|
||||
case .dark:
|
||||
darkColorView.selectedColor = viewController.selectedColor
|
||||
}
|
||||
|
||||
if currentLabelType == .title {
|
||||
setTitleModel()
|
||||
} else {
|
||||
setOtherModels()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user