// // ButtonIconViewController.swift // VDSSample // // Created by Matt Bruce on 5/12/23. // import Foundation import UIKit import VDS import Combine import VDSColorTokens class ButtonIconViewController: BaseViewController { 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) } }