// // ButtonIconViewController.swift // VDSSample // // Created by Matt Bruce on 5/12/23. // import Foundation import UIKit import VDS import Combine import VDSTokens 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 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 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() var variantOneSwitch = Toggle() lazy var badgeIndicatorExpandDirectionPickerSelectorView = { PickerSelectorView(title: "right", picker: self.picker, items: ButtonIcon.BadgeIndicatorModel.ExpandDirection.allCases) }() override func viewDidLoad() { super.viewDidLoad() addContentTopView(view: .makeWrapper(for: component, edgeSpacing: 16.0), edgeSpacing: 0.0) setupPicker() setupModel() } var badgeIndicatorFormStackView = FormSection().with { $0.isHidden = true } ///ColorPicker var colorPickerType: ColorPickerType = .light enum ColorPickerType { case light, dark } lazy var colorPicker: UIColorPickerViewController = { let picker = UIColorPickerViewController() picker.delegate = self return picker }() lazy var lightColorPicker: ColorPickerView = { return .init(with: ColorPickerType.light) {[weak self] picker in self?.colorPickerType = picker.pickerType self?.selectedColorTapped(picker) } }() lazy var darkColorPicker: ColorPickerView = { return .init(with: ColorPickerType.dark) {[weak self] picker in self?.colorPickerType = picker.pickerType self?.selectedColorTapped(picker) } }() override func setupForm(){ super.setupForm() 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: "Selected Light", view: lightColorPicker) addFormRow(label: "Selected Dark", view: darkColorPicker) addFormRow(label: "Floating", view: floating) addFormRow(label: "Hide Border", view: hideBorder) addFormRow(label: "Fit To Icon", view: fitToIcon) addFormRow(label: "Name", view: namePickerSelectorView) addFormRow(label: "Selected Icon Name", view: selectedIconNamePickerSelectorView) addFormRow(label: "Selectable", view: selectableSwitch) addFormRow(label: "X Offset", view: centerX) addFormRow(label: "Y Offset", view: centerY) //badgeIndicator section addFormRow(label: "Show Badge Indicator", view: badgeIndicatorSwitch) badgeIndicatorFormStackView.addFormRow(label: "Expand Direction", view: badgeIndicatorExpandDirectionPickerSelectorView) badgeIndicatorFormStackView.addFormRow(label: "Badge Variants", view: variantOneSwitch) append(section: badgeIndicatorFormStackView) 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 } 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 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) } 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) } } } 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) } } extension ButtonIconViewController: UIColorPickerViewControllerDelegate { func selectedColorTapped(_ picker: ColorPickerView) { 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) { let color = viewController.selectedColor let selectedColorPickerView = colorPickerType == .dark ? darkColorPicker : lightColorPicker selectedColorPickerView.selectedColor = color if let selectedDarkColor = darkColorPicker.selectedColor, let selectedLightColor = lightColorPicker.selectedColor { component.selectedIconColorConfiguration = .init(selectedLightColor, selectedDarkColor) } } }