437 lines
15 KiB
Swift
437 lines
15 KiB
Swift
//
|
|
// TileContainerViewController.swift
|
|
// VDSSample
|
|
//
|
|
// Created by Matt Bruce on 12/16/22.
|
|
//
|
|
|
|
import Foundation
|
|
import UIKit
|
|
import VDS
|
|
import VDSCoreTokens
|
|
import Combine
|
|
|
|
class TileContainerViewController: BaseViewController<TileContainer> {
|
|
|
|
lazy var imageFallbackColorPickerSelectorView = {
|
|
SurfacePickerSelectorView(picker: self.picker)
|
|
}()
|
|
|
|
lazy var paddingPickerSelectorView = {
|
|
PickerSelectorView(title: "16",
|
|
picker: self.picker,
|
|
items: Padding.allCases)
|
|
}()
|
|
|
|
lazy var scalingTypePickerSelectorView = {
|
|
PickerSelectorView(title: "white",
|
|
picker: self.picker,
|
|
items: TileContainer.AspectRatio.allCases)
|
|
}()
|
|
|
|
lazy var backgroundEffectSelectorView = {
|
|
PickerSelectorView(title: "none",
|
|
picker: self.picker,
|
|
items: BackgroundEffect.allCases)
|
|
}()
|
|
|
|
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()
|
|
var showDropShadowSwitch = Toggle()
|
|
var backgroundImage = UIImage(named: "backgroundTest")!
|
|
var customPaddingRowView: UIView?
|
|
var anyCancellable: AnyCancellable?
|
|
|
|
var paddingTextField = NumericField().with {
|
|
$0.placeholder = "Custom Padding"
|
|
}
|
|
|
|
var heightTextField = NumericField().with {
|
|
$0.placeholder = "Minimum 100px else it will occupy full container"
|
|
}
|
|
var widthTextField = NumericField().with {
|
|
$0.placeholder = "Minimum 100px else it will occupy full container"
|
|
}
|
|
|
|
lazy var backgroundColorPickerSelectorView: TokenColorPickerSection = {
|
|
TokenColorPickerSection<BackgroundColor>(rowTitle: "Background Color",
|
|
picker: self.picker).with {
|
|
$0.onSelected = { [weak self] item in
|
|
guard let self else { return }
|
|
switch item {
|
|
case .primary:
|
|
component.color = .primary
|
|
case .secondary:
|
|
component.color = .secondary
|
|
case .white:
|
|
component.color = .white
|
|
case .black:
|
|
component.color = .black
|
|
default: break;
|
|
}
|
|
}
|
|
$0.onTokenSelected = { [weak self] color in
|
|
guard let self else { return }
|
|
component.color = .custom(color.uiColor)
|
|
}
|
|
$0.onColorSelected = { [weak self] color in
|
|
guard let self else { return }
|
|
component.color = .custom(color)
|
|
|
|
}
|
|
}
|
|
}()
|
|
|
|
lazy var gradientColorView1: ColorPickerView = {
|
|
return .init().with {
|
|
$0.onColorSelected = { [weak self] _ in
|
|
guard let self else { return }
|
|
updateGradientColors()
|
|
}
|
|
}
|
|
}()
|
|
|
|
lazy var gradientColorView2: ColorPickerView = {
|
|
return .init().with {
|
|
$0.onColorSelected = { [weak self] _ in
|
|
guard let self else { return }
|
|
updateGradientColors()
|
|
}
|
|
}
|
|
}()
|
|
|
|
override func viewDidLoad() {
|
|
super.viewDidLoad()
|
|
|
|
let mainView = View()
|
|
mainView.backgroundColor = .purple
|
|
|
|
///top
|
|
let topView = View()
|
|
topView.backgroundColor = .yellow
|
|
|
|
let topLabel = Label()
|
|
topLabel.text = "Do you want to Register?"
|
|
|
|
let topButton = Button()
|
|
topButton.text = "Register"
|
|
topButton.onClick = { c in print("clicked \(c.text!)") }
|
|
|
|
///bottom
|
|
let bottomView = View()
|
|
bottomView.backgroundColor = .green
|
|
|
|
let bottomLabel = Label()
|
|
bottomLabel.text = "Forgot your info?"
|
|
|
|
let bottomButton = Button()
|
|
bottomButton.text = "Forgot Password"
|
|
bottomButton.onClick = { c in print("clicked \(c.text!)") }
|
|
|
|
mainView.addSubview(topView)
|
|
mainView.addSubview(bottomView)
|
|
|
|
topView.addSubview(topLabel)
|
|
topView.addSubview(topButton)
|
|
|
|
bottomView.addSubview(bottomLabel)
|
|
bottomView.addSubview(bottomButton)
|
|
let space: CGFloat = 5
|
|
topView
|
|
.pinTop(space*2)
|
|
.pinLeading(space*2)
|
|
.pinTrailing(space*2)
|
|
.pinBottom(anchor: bottomView.topAnchor, constant: space*2)
|
|
|
|
topLabel
|
|
.pinTop(space)
|
|
.pinLeading(space)
|
|
.pinTrailing(space)
|
|
.pinBottom(anchor: topButton.topAnchor, constant: space)
|
|
|
|
topButton
|
|
.pinBottom(space)
|
|
.pinLeading(space)
|
|
.pinTrailingLessThanOrEqualTo(anchor: nil, constant: space)
|
|
|
|
bottomView
|
|
.pinLeading(space*2)
|
|
.pinTrailing(space*2)
|
|
.pinBottom(space*2)
|
|
|
|
bottomLabel
|
|
.pinTop(space)
|
|
.pinLeading(space)
|
|
.pinTrailing(space)
|
|
.pinBottom(anchor: bottomButton.topAnchor, constant: space)
|
|
|
|
bottomButton
|
|
.pinBottom(space)
|
|
.pinLeading(space)
|
|
.pinTrailingLessThanOrEqualTo(anchor: nil, constant: space)
|
|
|
|
component.color = .secondary
|
|
component.accessibilityLabel = "Tile Container"
|
|
|
|
addContentTopView(view: component)
|
|
component.addContentView(mainView)
|
|
setupPicker()
|
|
setupModel()
|
|
}
|
|
|
|
override func setupForm(){
|
|
super.setupForm()
|
|
formStackView.addArrangedSubview(Label().with {
|
|
$0.textStyle = .boldBodyLarge
|
|
$0.text = "This object does NOT reflect normal \"surface\" changes, all properties are maually set"
|
|
})
|
|
formStackView.addArrangedSubview(Label().with {
|
|
$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, pinTrailing: false)
|
|
addFormRow(label: "Clickable", view: clickableSwitch, pinTrailing: false)
|
|
addFormRow(label: "Width", view: widthTextField)
|
|
addFormRow(label: "Height", view: heightTextField)
|
|
addFormRow(label: "Show Border", view: showBorderSwitch, pinTrailing: false)
|
|
addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch, pinTrailing: false)
|
|
append(section: backgroundColorPickerSelectorView)
|
|
addFormRow(label: "Padding", view: paddingPickerSelectorView)
|
|
customPaddingRowView = addFormRow(label: "Custom Padding", view: paddingTextField)
|
|
customPaddingRowView?.isHidden = true
|
|
addFormRow(label: "Aspect Ratio", view: scalingTypePickerSelectorView)
|
|
addFormRow(label: "Background Image", view: showBackgroundImageSwitch, pinTrailing: false)
|
|
addFormRow(label: "Image Fallback Color", view: imageFallbackColorPickerSelectorView)
|
|
addFormRow(label: "Background Effect", view: backgroundEffectSelectorView)
|
|
//Gradient Section
|
|
gradientColorsFormStackView.addFormRow(label: "Gradient Color1", view: gradientColorView1)
|
|
gradientColorsFormStackView.addFormRow(label: "Gradient Color2", view: gradientColorView2)
|
|
append(section: gradientColorsFormStackView)
|
|
|
|
anyCancellable = paddingTextField.textPublisher.receive(on: RunLoop.main).sink { [weak self] value in
|
|
if let value = Float(value) {
|
|
self?.component.padding = .custom(CGFloat(value))
|
|
}
|
|
}
|
|
|
|
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 {
|
|
self.component.onClick = { _ in
|
|
print("you click on me!")
|
|
}
|
|
} else {
|
|
self.component.onClick = nil
|
|
}
|
|
}
|
|
|
|
showBackgroundImageSwitch.onChange = { [weak self] sender in
|
|
if let image = self?.backgroundImage, sender.isOn {
|
|
self?.component.backgroundImage = image
|
|
} else {
|
|
self?.component.backgroundImage = nil
|
|
}
|
|
}
|
|
|
|
showBorderSwitch.onChange = { [weak self] sender in
|
|
self?.component.showBorder = sender.isOn
|
|
}
|
|
|
|
showDropShadowSwitch.onChange = { [weak self] sender in
|
|
self?.component.showDropShadow = sender.isOn
|
|
}
|
|
|
|
heightTextField
|
|
.numberPublisher
|
|
.sink { [weak self] number in
|
|
guard let self, let number = number?.cgFloatValue else {
|
|
self?.heightTextField.text = ""
|
|
return
|
|
}
|
|
if number >= 100 && number < self.view.frame.height * 0.65 {
|
|
self.component.height = number
|
|
} else {
|
|
self.component.height = nil
|
|
}
|
|
if let val = heightTextField.text, val.count > 2, number < 100 {
|
|
heightTextField.text = ""
|
|
}
|
|
}.store(in: &subscribers)
|
|
|
|
widthTextField
|
|
.numberPublisher
|
|
.sink { [weak self] number in
|
|
self?.updateComponentConstraint(pinTrailing: number == nil)
|
|
guard let self, let number = number?.cgFloatValue else {
|
|
self?.widthTextField.text = ""
|
|
return
|
|
}
|
|
if number >= 100 && number < self.view.frame.width * 0.85 {
|
|
self.component.width = number
|
|
} else {
|
|
self.component.width = nil
|
|
}
|
|
if let val = widthTextField.text, val.count > 2, number < 100 {
|
|
widthTextField.text = ""
|
|
}
|
|
}.store(in: &subscribers)
|
|
}
|
|
|
|
func setupModel() {
|
|
//setup UI
|
|
surfacePickerSelectorView.text = component.surface.rawValue
|
|
backgroundColorPickerSelectorView.setDefault(value: backgroundColor)
|
|
paddingPickerSelectorView.text = padding.rawValue
|
|
scalingTypePickerSelectorView.text = component.aspectRatio.rawValue
|
|
widthTextField.text = component.width != nil ? "\(component.width!)" : ""
|
|
heightTextField.text = component.height != nil ? "\(component.height!)" : ""
|
|
}
|
|
|
|
func setupPicker(){
|
|
|
|
surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.component.surface = item
|
|
self?.contentTopView.backgroundColor = item.color
|
|
}
|
|
|
|
backgroundEffectSelectorView.onPickerDidSelect = { [weak self] in
|
|
guard let self else { return }
|
|
if let effect = $0.effect {
|
|
self.component.backgroundEffect = effect
|
|
self.gradientColorsFormStackView.isHidden = true
|
|
self.gradientColorView1.selectedColor = nil
|
|
self.gradientColorView2.selectedColor = nil
|
|
} else {
|
|
self.gradientColorsFormStackView.isHidden = false
|
|
}
|
|
}
|
|
|
|
scalingTypePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.component.aspectRatio = item
|
|
self?.component.layoutIfNeeded()
|
|
self?.showDebug(show: self?.debugViewSwitch.isOn ?? false)
|
|
}
|
|
|
|
paddingPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
if let value = item.value {
|
|
self?.paddingTextField.text = ""
|
|
self?.component.padding = value
|
|
self?.customPaddingRowView?.isHidden = true
|
|
} else {
|
|
self?.customPaddingRowView?.isHidden = false
|
|
}
|
|
}
|
|
|
|
imageFallbackColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.component.imageFallbackColor = item
|
|
}
|
|
}
|
|
|
|
func updateGradientColors(){
|
|
if let selectedGradient1Color = gradientColorView1.selectedColor,
|
|
let selectedGradient2Color = gradientColorView2.selectedColor{
|
|
component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
extension TileContainerViewController: ComponentSampleable {
|
|
static func makeSample() -> ComponentSample {
|
|
let component = Self.makeComponent()
|
|
component.width = 150
|
|
component.color = .primary
|
|
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
|
|
}
|
|
}
|
|
|
|
extension TileContainerViewController {
|
|
|
|
//Created new BackgroundEffect enum for sample app only. Since we defined enum with associated value color defined in TileContainer cannot be RawRepresentable & CaseIterable
|
|
enum BackgroundEffect: String, CaseIterable {
|
|
case transparency
|
|
case gradient
|
|
case none
|
|
|
|
var rawValue: String {
|
|
switch self {
|
|
case .gradient:
|
|
"gradient (select gradient colors to apply)"
|
|
default:
|
|
String(describing: self)
|
|
}
|
|
}
|
|
|
|
var effect: TileContainer.BackgroundEffect? {
|
|
return switch self {
|
|
case .transparency:
|
|
.transparency
|
|
case .gradient:
|
|
nil
|
|
case .none:
|
|
TileContainer.BackgroundEffect.none
|
|
}
|
|
}
|
|
}
|
|
|
|
//Created new BackgroundColor enum for sample app only. Since we defined enum with associated value color defined in TileContainer cannot be RawRepresentable & CaseIterable
|
|
enum BackgroundColor: String, CaseIterable {
|
|
|
|
case primary, secondary, white, black, token, custom
|
|
|
|
var color: TileContainer.BackgroundColor? {
|
|
switch self {
|
|
case .primary:
|
|
.primary
|
|
case .secondary:
|
|
.secondary
|
|
case .white:
|
|
.white
|
|
case .black:
|
|
.black
|
|
case .token:
|
|
nil
|
|
case .custom:
|
|
nil
|
|
}
|
|
}
|
|
}
|
|
|
|
//Internal helper enum to map padding & pass custom padding values
|
|
public enum Padding: String, CaseIterable {
|
|
case padding3X
|
|
case padding4X
|
|
case padding6X
|
|
case padding8X
|
|
case padding12X
|
|
case custom
|
|
|
|
public var value: TileContainer.Padding? {
|
|
return switch self {
|
|
case .padding3X:
|
|
.padding3X
|
|
case .padding4X:
|
|
.padding4X
|
|
case .padding6X:
|
|
.padding6X
|
|
case .padding8X:
|
|
.padding8X
|
|
case .padding12X:
|
|
.padding12X
|
|
case .custom:
|
|
nil
|
|
}
|
|
}
|
|
}
|
|
}
|