382 lines
14 KiB
Swift
382 lines
14 KiB
Swift
//
|
|
// ButtonIconViewController.swift
|
|
// VDSSample
|
|
//
|
|
// Created by Matt Bruce on 5/12/23.
|
|
//
|
|
|
|
import Foundation
|
|
import UIKit
|
|
import VDS
|
|
import Combine
|
|
import VDSColorTokens
|
|
|
|
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 sizePickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: ButtonIcon.Size.allCases)
|
|
}()
|
|
|
|
var customSizeField = 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()
|
|
|
|
lazy var badgeIndicatorKindPickerSelectorView = {
|
|
PickerSelectorView(title: "simple",
|
|
picker: self.picker,
|
|
items: BadgeIndicator.Kind.allCases)
|
|
}()
|
|
|
|
lazy var badgeIndicatorFillColorPickerSelectorView = {
|
|
PickerSelectorView(title: "red",
|
|
picker: self.picker,
|
|
items: BadgeIndicator.FillColor.allCases)
|
|
}()
|
|
|
|
lazy var badgeIndicatorBorderColorPickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: UIColor.VDSColor.allCases)
|
|
}()
|
|
|
|
lazy var textSizePickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: BadgeIndicator.Size.allCases)
|
|
}()
|
|
|
|
lazy var maxDigitsPickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: BadgeIndicator.MaximumDigits.allCases)
|
|
}()
|
|
|
|
lazy var borderColorLightPickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: UIColor.VDSColor.allCases)
|
|
}()
|
|
|
|
lazy var borderColorDarkPickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: UIColor.VDSColor.allCases)
|
|
}()
|
|
|
|
lazy var badgeIndicatorDirectionPickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: ButtonIcon.ExpandDirection.allCases)
|
|
}()
|
|
|
|
var numberedForm = FormSection().with { $0.title = "Numbered Kind"}
|
|
var dotForm = FormSection().with { $0.title = "Simple Kind"}
|
|
var badgeIndicatorForm = FormSection().with { $0.title = "Badge Indicator Configurations"}
|
|
|
|
var badgeIndicatorHideBorderSwitch = Toggle()
|
|
var textField = NumericField()
|
|
var leadingCharacterTextField = TextField()
|
|
var trailingTextField = TextField()
|
|
var hideDotSwitch = Toggle()
|
|
var hideBorderSwitch = Toggle()
|
|
|
|
var heightTextField = NumericField()
|
|
var widthTextField = NumericField()
|
|
var horizontalPaddingTextField = NumericField()
|
|
var verticalPaddingTextField = NumericField()
|
|
var dotSizeTextField = NumericField()
|
|
|
|
|
|
override func viewDidLoad() {
|
|
super.viewDidLoad()
|
|
addContentTopView(view: .makeWrapper(for: component, edgeSpacing: 16.0), edgeSpacing: 0.0)
|
|
setupPicker()
|
|
setupModel()
|
|
}
|
|
|
|
override func setupForm(){
|
|
super.setupForm()
|
|
addActionRow()
|
|
addFormRow(label: "Disabled", view: disabledSwitch)
|
|
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)
|
|
addFormRow(label: "Hide Border", view: hideBorder)
|
|
addFormRow(label: "Fit To Icon", view: fitToIcon)
|
|
addFormRow(label: "Custom Size", view: customSizeField)
|
|
addFormRow(label: "Name", view: namePickerSelectorView)
|
|
addFormRow(label: "Selectable", view: selectableSwitch)
|
|
// addFormRow(label: "Selected Name", view: namePickerSelectorView) // TO DO
|
|
addFormRow(label: "X Offset", view: centerX)
|
|
addFormRow(label: "Y Offset", view: centerY)
|
|
|
|
addFormRow(label: "Show Badge Indicator", view: badgeIndicatorSwitch)
|
|
badgeIndicatorForm.addFormRow(label: "Kind", view: badgeIndicatorKindPickerSelectorView)
|
|
badgeIndicatorForm.addFormRow(label: "Height", view: heightTextField)
|
|
badgeIndicatorForm.addFormRow(label: "Width", view: widthTextField)
|
|
badgeIndicatorForm.addFormRow(label: "Horiztonal Padding", view: horizontalPaddingTextField)
|
|
badgeIndicatorForm.addFormRow(label: "Vertical Padding", view: verticalPaddingTextField)
|
|
badgeIndicatorForm.addFormRow(label: "Fill Color", view: badgeIndicatorFillColorPickerSelectorView)
|
|
badgeIndicatorForm.addFormRow(label: "Hide Border", view: badgeIndicatorHideBorderSwitch)
|
|
badgeIndicatorForm.addFormRow(label: "Border Light", view: borderColorLightPickerSelectorView)
|
|
badgeIndicatorForm.addFormRow(label: "Border Dark", view: borderColorDarkPickerSelectorView)
|
|
badgeIndicatorForm.addFormRow(label: "Size", view: textSizePickerSelectorView)
|
|
badgeIndicatorForm.addFormRow(label: "Expand Direction", view: badgeIndicatorDirectionPickerSelectorView)
|
|
|
|
dotForm.addFormRow(label: "Hide Dot", view: hideDotSwitch)
|
|
dotForm.addFormRow(label: "Dot Size", view: dotSizeTextField)
|
|
numberedForm.addFormRow(label: "Leading Character", view: leadingCharacterTextField)
|
|
numberedForm.addFormRow(label: "Trailing Text", view: trailingTextField)
|
|
numberedForm.addFormRow(label: "Number", view: textField)
|
|
numberedForm.addFormRow(label: "Max Digits", view: maxDigitsPickerSelectorView)
|
|
|
|
append(section: badgeIndicatorForm)
|
|
append(section: numberedForm)
|
|
append(section: dotForm)
|
|
|
|
badgeIndicatorForm.isHidden = !self.badgeIndicatorSwitch.isOn
|
|
numberedForm.isHidden = !self.badgeIndicatorSwitch.isOn
|
|
dotForm.isHidden = !self.badgeIndicatorSwitch.isOn
|
|
|
|
hideDotSwitch.publisher(for: .valueChanged).sink { [weak self] control in
|
|
self?.component.badgeIndicator.hideDot = control.isOn
|
|
}.store(in: &subscribers)
|
|
|
|
hideBorderSwitch.publisher(for: .valueChanged).sink { [weak self] control in
|
|
self?.component.hideBorder = control.isOn
|
|
}.store(in: &subscribers)
|
|
|
|
textField
|
|
.numberPublisher
|
|
.sink { [weak self] number in
|
|
guard let number else { return }
|
|
self?.component.badgeIndicator.number = number.intValue
|
|
}.store(in: &subscribers)
|
|
|
|
leadingCharacterTextField
|
|
.textPublisher
|
|
.sink { [weak self] text in
|
|
self?.component.badgeIndicator.leadingCharacter = text
|
|
}.store(in: &subscribers)
|
|
|
|
trailingTextField
|
|
.textPublisher
|
|
.sink { [weak self] text in
|
|
self?.component.badgeIndicator.trailingText = text
|
|
}.store(in: &subscribers)
|
|
|
|
heightTextField
|
|
.numberPublisher
|
|
.sink { [weak self] number in
|
|
self?.component.badgeIndicator.height = number?.cgFloatValue
|
|
}.store(in: &subscribers)
|
|
|
|
widthTextField
|
|
.numberPublisher
|
|
.sink { [weak self] number in
|
|
self?.component.badgeIndicator.width = number?.cgFloatValue
|
|
}.store(in: &subscribers)
|
|
|
|
horizontalPaddingTextField
|
|
.numberPublisher
|
|
.sink { [weak self] number in
|
|
self?.component.badgeIndicator.horizontalPadding = number?.cgFloatValue
|
|
}.store(in: &subscribers)
|
|
|
|
verticalPaddingTextField
|
|
.numberPublisher
|
|
.sink { [weak self] number in
|
|
self?.component.badgeIndicator.verticalPadding = number?.cgFloatValue
|
|
}.store(in: &subscribers)
|
|
|
|
dotSizeTextField
|
|
.numberPublisher
|
|
.sink { [weak self] number in
|
|
self?.component.badgeIndicator.dotSize = number?.cgFloatValue
|
|
}.store(in: &subscribers)
|
|
|
|
badgeIndicatorSwitch.onChange = { [weak self] sender in
|
|
self?.component.showBadge = sender.isOn
|
|
self?.component.badgeIndicator.isHidden = !sender.isOn
|
|
self?.badgeIndicatorForm.isHidden = !sender.isOn
|
|
if !sender.isOn {
|
|
self?.numberedForm.isHidden = !sender.isOn
|
|
self?.dotForm.isHidden = !sender.isOn
|
|
} else {
|
|
self?.visibleForms()
|
|
}
|
|
}
|
|
|
|
disabledSwitch.onChange = { [weak self] sender in
|
|
self?.component.isEnabled = !sender.isOn
|
|
}
|
|
|
|
component.onClickActionPublisher("ButtonIcon", label: actionLabel)
|
|
|
|
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
|
|
}
|
|
|
|
customSizeField
|
|
.numberPublisher
|
|
.sink { [weak self] number in
|
|
self?.component.customSize = number?.intValue
|
|
}.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 setupModel() {
|
|
let name = Icon.Name.addToFavorite
|
|
|
|
component.iconName = name
|
|
//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
|
|
disabledSwitch.isOn = !component.isEnabled
|
|
}
|
|
|
|
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
|
|
}
|
|
|
|
badgeIndicatorKindPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.component.badgeIndicator.kind = item
|
|
self?.visibleForms()
|
|
}
|
|
|
|
badgeIndicatorFillColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.component.badgeIndicator.fillColor = item
|
|
}
|
|
|
|
textSizePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.component.badgeIndicator.size = item
|
|
}
|
|
|
|
maxDigitsPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.component.badgeIndicator.maximumDigits = item
|
|
}
|
|
|
|
borderColorDarkPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.component.badgeIndicator.borderColorDark = item.uiColor
|
|
}
|
|
|
|
borderColorLightPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.component.badgeIndicator.borderColorLight = item.uiColor
|
|
}
|
|
|
|
// badgeIndicatorDirectionPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
// TO DO self?.component.badgeIndicator.directionalLayoutMargins = item
|
|
// }
|
|
}
|
|
|
|
func visibleForms() {
|
|
numberedForm.isHidden = badgeIndicatorKindPickerSelectorView.selectedItem != .numbered
|
|
dotForm.isHidden = badgeIndicatorKindPickerSelectorView.selectedItem == .numbered
|
|
}
|
|
}
|
|
|
|
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.size = .large
|
|
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
|
|
}
|
|
}
|