319 lines
12 KiB
Swift
319 lines
12 KiB
Swift
//
|
|
// ButtonIconViewController.swift
|
|
// VDSSample
|
|
//
|
|
// Created by Matt Bruce on 5/12/23.
|
|
//
|
|
|
|
import Foundation
|
|
import UIKit
|
|
import VDS
|
|
import Combine
|
|
import VDSCoreTokens
|
|
|
|
class ButtonIconViewController: BaseViewController<ButtonIcon> {
|
|
|
|
lazy var kindPickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: ButtonIcon.Kind.allCases)
|
|
}()
|
|
|
|
lazy var surfaceTypePickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: ButtonIcon.SurfaceType.allCases)
|
|
}()
|
|
|
|
lazy var colorPickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: UIColor.VDSColor.allCases)
|
|
}()
|
|
|
|
lazy var namePickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: Icon.Name.all.sorted{ $0.rawValue < $1.rawValue })
|
|
}()
|
|
|
|
lazy var selectedIconNamePickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: Icon.Name.all.sorted{ $0.rawValue < $1.rawValue })
|
|
}()
|
|
|
|
lazy var sizePickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: ButtonIcon.Size.allCases)
|
|
}()
|
|
|
|
var customContainerSizeField = NumericField()
|
|
var customIconSizeField = NumericField()
|
|
var customBadgeIndicatorXField = NumericField()
|
|
var customBadgeIndicatorYField = NumericField()
|
|
var centerX = NumericField()
|
|
var centerY = NumericField()
|
|
var fitToIcon = Toggle()
|
|
var floating = Toggle()
|
|
var hideBorder = Toggle()
|
|
var disabledSwitch = Toggle()
|
|
var selectableSwitch = Toggle()
|
|
var badgeIndicatorSwitch = Toggle()
|
|
var variantOneSwitch = Toggle()
|
|
|
|
lazy var badgeIndicatorExpandDirectionPickerSelectorView = {
|
|
PickerSelectorView(title: "right",
|
|
picker: self.picker,
|
|
items: ButtonIcon.BadgeIndicatorModel.ExpandDirection.allCases)
|
|
}()
|
|
|
|
override func viewDidLoad() {
|
|
super.viewDidLoad()
|
|
addContentTopView(view: component, pinTrailing: false)
|
|
setupPicker()
|
|
setupModel()
|
|
}
|
|
|
|
var badgeIndicatorFormStackView = FormSection().with { $0.isHidden = true; $0.title = "Badge Indicator" }
|
|
|
|
///ColorPicker
|
|
lazy var lightColorPicker: ColorPickerView = {
|
|
return .init().with {
|
|
$0.onColorSelected = { [weak self] _ in
|
|
guard let self else { return }
|
|
updateColors()
|
|
}
|
|
}
|
|
}()
|
|
|
|
lazy var darkColorPicker: ColorPickerView = {
|
|
return .init().with {
|
|
$0.onColorSelected = { [weak self] _ in
|
|
guard let self else { return }
|
|
updateColors()
|
|
}
|
|
}
|
|
}()
|
|
|
|
func updateColors() {
|
|
if let selectedLightColor = lightColorPicker.selectedColor {
|
|
component.selectedIconColorConfiguration = .init(selectedLightColor, selectedLightColor)
|
|
} else if let selectedDarkColor = darkColorPicker.selectedColor,
|
|
let selectedLightColor = lightColorPicker.selectedColor {
|
|
component.selectedIconColorConfiguration = .init(selectedLightColor, selectedDarkColor)
|
|
}
|
|
}
|
|
|
|
override func setupForm(){
|
|
super.setupForm()
|
|
addFormRow(label: "Disabled", view: disabledSwitch, pinTrailing: false)
|
|
addFormRow(label: "Surface", view: surfacePickerSelectorView)
|
|
addFormRow(label: "Surface Type", view: surfaceTypePickerSelectorView)
|
|
addFormRow(label: "Size", view: sizePickerSelectorView)
|
|
addFormRow(label: "Kind", view: kindPickerSelectorView)
|
|
addFormRow(label: "Floating", view: floating, pinTrailing: false)
|
|
addFormRow(label: "Hide Border", view: hideBorder, pinTrailing: false)
|
|
addFormRow(label: "Fit To Icon", view: fitToIcon, pinTrailing: false)
|
|
addFormRow(label: "Name", view: namePickerSelectorView)
|
|
addFormRow(label: "X Offset", view: centerX)
|
|
addFormRow(label: "Y Offset", view: centerY)
|
|
|
|
append(section: .init().with {
|
|
$0.title = "Select State"
|
|
$0.addFormRow(label: "Selectable", view: selectableSwitch, pinTrailing: false)
|
|
$0.addFormRow(label: "Selected Icon Name", view: selectedIconNamePickerSelectorView)
|
|
$0.addFormRow(label: "Selected Light", view: lightColorPicker)
|
|
$0.addFormRow(label: "Selected Dark", view: darkColorPicker)
|
|
})
|
|
|
|
addFormRow(label: "Show Badge Indicator", view: badgeIndicatorSwitch, pinTrailing: false)
|
|
//badgeIndicator section
|
|
badgeIndicatorFormStackView.addFormRow(label: "Expand Direction", view: badgeIndicatorExpandDirectionPickerSelectorView)
|
|
badgeIndicatorFormStackView.addFormRow(label: "Badge Variants", view: variantOneSwitch, pinTrailing: false)
|
|
badgeIndicatorFormStackView.addFormRow(label: "Custom X offset", view: customBadgeIndicatorXField)
|
|
badgeIndicatorFormStackView.addFormRow(label: "Custom Y offset", view: customBadgeIndicatorYField)
|
|
|
|
append(section: badgeIndicatorFormStackView)
|
|
|
|
//custom section
|
|
let custom = FormSection().with { $0.title = "Custom Settings"}
|
|
custom.addFormRow(label: "Container Size", view: customContainerSizeField)
|
|
custom.addFormRow(label: "Icon Size", view: customIconSizeField)
|
|
append(section: custom)
|
|
|
|
variantOneSwitch.onChange = { [weak self] sender in
|
|
self?.setBadgeIndicatorModel()
|
|
}
|
|
|
|
badgeIndicatorSwitch.onChange = { [weak self] sender in
|
|
guard let self else { return }
|
|
self.component.showBadgeIndicator = sender.isOn
|
|
self.badgeIndicatorFormStackView.isHidden = !sender.isOn
|
|
self.setBadgeIndicatorModel()
|
|
variantOneSwitch.isOn = false
|
|
}
|
|
|
|
disabledSwitch.onChange = { [weak self] sender in
|
|
self?.component.isEnabled = !sender.isOn
|
|
}
|
|
|
|
selectableSwitch.onChange = { [weak self] sender in
|
|
guard let self else { return }
|
|
self.component.selectable = !self.component.selectable
|
|
}
|
|
|
|
floating.onChange = { [weak self] sender in
|
|
self?.component.floating = sender.isOn
|
|
}
|
|
|
|
hideBorder.onChange = { [weak self] sender in
|
|
self?.component.hideBorder = !sender.isOn
|
|
}
|
|
|
|
fitToIcon.onChange = { [weak self] sender in
|
|
self?.component.fitToIcon = sender.isOn
|
|
}
|
|
|
|
customContainerSizeField
|
|
.numberPublisher
|
|
.sink { [weak self] number in
|
|
self?.component.customContainerSize = number?.intValue
|
|
}.store(in: &subscribers)
|
|
|
|
customIconSizeField
|
|
.numberPublisher
|
|
.sink { [weak self] number in
|
|
self?.component.customIconSize = number?.intValue
|
|
}.store(in: &subscribers)
|
|
|
|
customBadgeIndicatorXField
|
|
.numberPublisher
|
|
.sink { [weak self] number in
|
|
self?.updateCustomBadgeIndicator()
|
|
}.store(in: &subscribers)
|
|
|
|
customBadgeIndicatorYField
|
|
.numberPublisher
|
|
.sink { [weak self] number in
|
|
self?.updateCustomBadgeIndicator()
|
|
}.store(in: &subscribers)
|
|
|
|
centerX
|
|
.numberPublisher
|
|
.sink { [weak self] _ in
|
|
self?.updateOffset()
|
|
}.store(in: &subscribers)
|
|
|
|
centerY
|
|
.numberPublisher
|
|
.sink { [weak self] _ in
|
|
self?.updateOffset()
|
|
}.store(in: &subscribers)
|
|
}
|
|
|
|
func updateCustomBadgeIndicator() {
|
|
if let x = customBadgeIndicatorXField.floatValue, let y = customBadgeIndicatorYField.floatValue {
|
|
component.customBadgeIndicatorOffset = .init(x: x, y: y)
|
|
} else {
|
|
component.customBadgeIndicatorOffset = nil
|
|
}
|
|
}
|
|
|
|
|
|
func setupModel() {
|
|
let name = Icon.Name.addToFavorite
|
|
let selectedName = Icon.Name.addedToFavorite
|
|
component.selectedIconName = selectedName
|
|
component.iconName = name
|
|
component.onChange = { c in print("changed: \(c.isSelected)") }
|
|
//setup UI
|
|
surfacePickerSelectorView.text = component.surface.rawValue
|
|
surfaceTypePickerSelectorView.text = component.surfaceType.rawValue
|
|
kindPickerSelectorView.text = component.kind.rawValue
|
|
sizePickerSelectorView.text = component.size.rawValue
|
|
namePickerSelectorView.text = name.rawValue
|
|
selectedIconNamePickerSelectorView.text = selectedName.rawValue
|
|
disabledSwitch.isOn = !component.isEnabled
|
|
badgeIndicatorExpandDirectionPickerSelectorView.text = ButtonIcon.BadgeIndicatorModel.ExpandDirection.right.rawValue
|
|
}
|
|
|
|
func updateOffset() {
|
|
if let x = centerX.floatValue, let y = centerY.floatValue {
|
|
component.iconOffset = .init(x: x, y: y)
|
|
} else if let x = centerX.floatValue {
|
|
component.iconOffset = .init(x: x, y: 0)
|
|
} else if let y = centerY.floatValue {
|
|
component.iconOffset = .init(x: 0, y: y)
|
|
} else {
|
|
component.iconOffset = .init(x: 0, y: 0)
|
|
}
|
|
}
|
|
|
|
|
|
func setupPicker(){
|
|
|
|
surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.component.surface = item
|
|
self?.contentTopView.backgroundColor = item.color
|
|
}
|
|
|
|
surfaceTypePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.component.surfaceType = item
|
|
}
|
|
|
|
|
|
kindPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.component.kind = item
|
|
}
|
|
|
|
sizePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.component.size = item
|
|
}
|
|
|
|
namePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.component.iconName = item
|
|
}
|
|
|
|
selectedIconNamePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.component.selectedIconName = item
|
|
}
|
|
|
|
badgeIndicatorExpandDirectionPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.setBadgeIndicatorModel()
|
|
}
|
|
}
|
|
|
|
func setBadgeIndicatorModel() {
|
|
if variantOneSwitch.isOn {
|
|
if badgeIndicatorSwitch.isOn {
|
|
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, accessibilityText: "Custom Text would go here by the developer for the 999")
|
|
}
|
|
}
|
|
}
|
|
|
|
extension UITextField {
|
|
public var floatValue: CGFloat? {
|
|
guard let text, let double = Double(text) else { return nil }
|
|
return CGFloat(double)
|
|
}
|
|
}
|
|
|
|
extension ButtonIconViewController: ComponentSampleable {
|
|
static func makeSample() -> ComponentSample {
|
|
let component = Self.makeComponent()
|
|
component.iconName = .addToFavorite
|
|
component.selectedIconName = .addedToFavorite
|
|
component.selectable = true
|
|
component.onChange = { c in print("changed: \(c.isSelected)") }
|
|
component.size = .large
|
|
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
|
|
}
|
|
}
|