355 lines
13 KiB
Swift
355 lines
13 KiB
Swift
//
|
|
// RadioButton.swift
|
|
// VDS
|
|
//
|
|
// Created by Matt Bruce on 7/22/22.
|
|
//
|
|
|
|
import Foundation
|
|
import UIKit
|
|
import VDSColorTokens
|
|
import VDSFormControlsTokens
|
|
|
|
public class RadioButton: RadioButtonBase {
|
|
//for groups allows "toggle"
|
|
open override func toggle() {
|
|
//removed error
|
|
if showError && isSelected == false {
|
|
showError.toggle()
|
|
}
|
|
isSelected.toggle()
|
|
}
|
|
}
|
|
|
|
public class SoloRadioButton: RadioButtonBase {
|
|
public override func initialSetup() {
|
|
super.initialSetup()
|
|
publisher(for: .touchUpInside)
|
|
.sink { control in
|
|
control.toggle()
|
|
}.store(in: &subscribers)
|
|
}
|
|
}
|
|
|
|
open class RadioButtonBase: Control, Accessable, BinaryColorable, Errorable {
|
|
//--------------------------------------------------
|
|
// MARK: - Initializers
|
|
//--------------------------------------------------
|
|
required public init() {
|
|
super.init(frame: .zero)
|
|
initialSetup()
|
|
}
|
|
|
|
public override init(frame: CGRect) {
|
|
super.init(frame: .zero)
|
|
initialSetup()
|
|
}
|
|
|
|
public required init?(coder: NSCoder) {
|
|
super.init(coder: coder)
|
|
initialSetup()
|
|
}
|
|
|
|
//--------------------------------------------------
|
|
// MARK: - Private Properties
|
|
//--------------------------------------------------
|
|
private var shouldShowError: Bool {
|
|
guard showError && !disabled && errorText?.isEmpty == false else { return false }
|
|
return true
|
|
}
|
|
|
|
private var shouldShowLabels: Bool {
|
|
guard labelText?.isEmpty == false || childText?.isEmpty == false else { return false }
|
|
return true
|
|
}
|
|
|
|
private var mainStackView: UIStackView = {
|
|
return UIStackView().with {
|
|
$0.translatesAutoresizingMaskIntoConstraints = false
|
|
$0.alignment = .top
|
|
$0.axis = .vertical
|
|
}
|
|
}()
|
|
|
|
private var selectorStackView: UIStackView = {
|
|
return UIStackView().with {
|
|
$0.translatesAutoresizingMaskIntoConstraints = false
|
|
$0.alignment = .top
|
|
$0.axis = .horizontal
|
|
}
|
|
}()
|
|
|
|
private var selectorLabelStackView: UIStackView = {
|
|
return UIStackView().with {
|
|
$0.translatesAutoresizingMaskIntoConstraints = false
|
|
$0.axis = .vertical
|
|
}
|
|
}()
|
|
|
|
private var primaryLabel = Label()
|
|
|
|
private var secondaryLabel = Label()
|
|
|
|
private var errorLabel = Label()
|
|
|
|
//--------------------------------------------------
|
|
// MARK: - Public Properties
|
|
//--------------------------------------------------
|
|
public var selectorView: UIView = {
|
|
return UIView().with {
|
|
$0.translatesAutoresizingMaskIntoConstraints = false
|
|
}
|
|
}()
|
|
|
|
open var labelText: String? { didSet { subject.send() }}
|
|
|
|
open var labelTextAttributes: [any LabelAttributeModel]? { didSet { subject.send() }}
|
|
|
|
open var childText: String? { didSet { subject.send() }}
|
|
|
|
open var childTextAttributes: [any LabelAttributeModel]? { didSet { subject.send() }}
|
|
|
|
open var showError: Bool = false { didSet { subject.send() }}
|
|
|
|
open var errorText: String? { didSet { subject.send() }}
|
|
|
|
open var inputId: String? { didSet { subject.send() }}
|
|
|
|
open var value: AnyHashable? { didSet { subject.send() }}
|
|
|
|
open var dataAnalyticsTrack: String? { didSet { subject.send() }}
|
|
|
|
open var dataClickStream: String? { didSet { subject.send() }}
|
|
|
|
open var dataTrack: String? { didSet { subject.send() }}
|
|
|
|
open var accessibilityHintEnabled: String? { didSet { subject.send() }}
|
|
|
|
open var accessibilityHintDisabled: String? { didSet { subject.send() }}
|
|
|
|
open var accessibilityValueEnabled: String? { didSet { subject.send() }}
|
|
|
|
open var accessibilityValueDisabled: String? { didSet { subject.send() }}
|
|
|
|
open var accessibilityLabelEnabled: String? { didSet { subject.send() }}
|
|
|
|
open var accessibilityLabelDisabled: String? { didSet { subject.send() }}
|
|
|
|
//--------------------------------------------------
|
|
// MARK: - Constraints
|
|
//--------------------------------------------------
|
|
|
|
private var selectorHeightConstraint: NSLayoutConstraint?
|
|
private var selectorWidthConstraint: NSLayoutConstraint?
|
|
|
|
//functions
|
|
//--------------------------------------------------
|
|
// MARK: - Lifecycle
|
|
//--------------------------------------------------
|
|
|
|
open override func setup() {
|
|
super.setup()
|
|
|
|
//add tapGesture to self
|
|
publisher(for: UITapGestureRecognizer()).sink { [weak self] _ in
|
|
self?.sendActions(for: .touchUpInside)
|
|
}.store(in: &subscribers)
|
|
|
|
isAccessibilityElement = true
|
|
accessibilityTraits = .button
|
|
addSubview(mainStackView)
|
|
|
|
mainStackView.addArrangedSubview(selectorStackView)
|
|
mainStackView.addArrangedSubview(errorLabel)
|
|
selectorStackView.addArrangedSubview(selectorView)
|
|
selectorStackView.addArrangedSubview(selectorLabelStackView)
|
|
selectorLabelStackView.addArrangedSubview(primaryLabel)
|
|
selectorLabelStackView.addArrangedSubview(secondaryLabel)
|
|
|
|
let selectorSize = getSelectorSize()
|
|
selectorHeightConstraint = selectorView.heightAnchor.constraint(equalToConstant: selectorSize.height)
|
|
selectorHeightConstraint?.isActive = true
|
|
|
|
selectorWidthConstraint = selectorView.widthAnchor.constraint(equalToConstant: selectorSize.width)
|
|
selectorWidthConstraint?.isActive = true
|
|
|
|
updateSelector()
|
|
|
|
mainStackView.topAnchor.constraint(equalTo: topAnchor).isActive = true
|
|
mainStackView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
|
|
mainStackView.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
|
|
mainStackView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
|
|
|
|
}
|
|
|
|
func updateLabels() {
|
|
|
|
//deal with labels
|
|
if shouldShowLabels {
|
|
//add the stackview to hold the 2 labels
|
|
//top label
|
|
if let labelText {
|
|
primaryLabel.textPosition = .left
|
|
primaryLabel.typograpicalStyle = .BoldBodyLarge
|
|
primaryLabel.text = labelText
|
|
primaryLabel.surface = surface
|
|
primaryLabel.disabled = disabled
|
|
primaryLabel.attributes = labelTextAttributes
|
|
primaryLabel.isHidden = false
|
|
} else {
|
|
primaryLabel.isHidden = true
|
|
}
|
|
|
|
//bottom label
|
|
if let childText {
|
|
secondaryLabel.textPosition = .left
|
|
secondaryLabel.typograpicalStyle = .BodyLarge
|
|
secondaryLabel.text = childText
|
|
secondaryLabel.surface = surface
|
|
secondaryLabel.disabled = disabled
|
|
secondaryLabel.attributes = childTextAttributes
|
|
secondaryLabel.isHidden = false
|
|
} else {
|
|
secondaryLabel.isHidden = true
|
|
}
|
|
selectorStackView.spacing = 12
|
|
selectorLabelStackView.spacing = 4
|
|
selectorLabelStackView.isHidden = false
|
|
|
|
} else {
|
|
selectorStackView.spacing = 0
|
|
selectorLabelStackView.spacing = 0
|
|
selectorLabelStackView.isHidden = true
|
|
}
|
|
|
|
//either add/remove the error from the main stack
|
|
if let errorText, shouldShowError {
|
|
errorLabel.textPosition = .left
|
|
errorLabel.typograpicalStyle = .BodyMedium
|
|
errorLabel.text = errorText
|
|
errorLabel.surface = surface
|
|
errorLabel.disabled = disabled
|
|
mainStackView.spacing = 8
|
|
errorLabel.isHidden = false
|
|
} else {
|
|
mainStackView.spacing = 0
|
|
errorLabel.isHidden = true
|
|
}
|
|
|
|
}
|
|
|
|
public override func reset() {
|
|
super.reset()
|
|
updateSelector()
|
|
setAccessibilityLabel()
|
|
}
|
|
|
|
/// This will checkbox the state of the Selector and execute the actionBlock if provided.
|
|
open func toggle() {
|
|
guard !isSelected else { return }
|
|
|
|
//removed error
|
|
if showError && isSelected == false {
|
|
showError.toggle()
|
|
}
|
|
isSelected.toggle()
|
|
sendActions(for: .valueChanged)
|
|
}
|
|
|
|
//--------------------------------------------------
|
|
// MARK: - State
|
|
//--------------------------------------------------
|
|
open override func updateView() {
|
|
updateLabels()
|
|
updateSelector()
|
|
setAccessibilityHint()
|
|
setAccessibilityValue(isSelected)
|
|
setAccessibilityLabel(isSelected)
|
|
setNeedsLayout()
|
|
layoutIfNeeded()
|
|
}
|
|
|
|
//--------------------------------------------------
|
|
// MARK: - Configuration Properties
|
|
//--------------------------------------------------
|
|
public let radioButtonSize = CGSize(width: 20, height: 20)
|
|
public let radioButtonSelectedSize = CGSize(width: 10, height: 10)
|
|
|
|
private var radioButtonBackgroundColorConfiguration = ErrorBinaryDisabledSurfaceColorConfiguration().with {
|
|
//error doesn't care enabled/disable
|
|
$0.error.forTrue.lightColor = VDSColor.elementsPrimaryOnlight
|
|
$0.error.forTrue.darkColor = VDSColor.elementsPrimaryOndark
|
|
$0.error.forFalse.lightColor = VDSColor.feedbackErrorBackgroundOnlight
|
|
$0.error.forFalse.darkColor = VDSColor.feedbackErrorBackgroundOndark
|
|
}
|
|
|
|
private var radioButtonBorderColorConfiguration = ErrorBinaryDisabledSurfaceColorConfiguration().with {
|
|
$0.forTrue.enabled.lightColor = VDSColor.elementsPrimaryOnlight
|
|
$0.forTrue.enabled.darkColor = VDSColor.elementsPrimaryOndark
|
|
$0.forFalse.enabled.lightColor = VDSFormControlsColor.borderOnlight
|
|
$0.forFalse.enabled.darkColor = VDSFormControlsColor.borderOndark
|
|
$0.forTrue.disabled.lightColor = VDSColor.interactiveDisabledOnlight
|
|
$0.forTrue.disabled.darkColor = VDSColor.interactiveDisabledOndark
|
|
$0.forFalse.disabled.lightColor = VDSColor.interactiveDisabledOnlight
|
|
$0.forFalse.disabled.darkColor = VDSColor.interactiveDisabledOndark
|
|
//error doesn't care enabled/disable
|
|
$0.error.forTrue.lightColor = VDSColor.elementsPrimaryOnlight
|
|
$0.error.forTrue.darkColor = VDSColor.elementsPrimaryOndark
|
|
$0.error.forFalse.lightColor = VDSColor.feedbackErrorOnlight
|
|
$0.error.forFalse.darkColor = VDSColor.feedbackErrorOndark
|
|
}
|
|
|
|
private var radioButtonCheckColorConfiguration = BinaryDisabledSurfaceColorConfiguration().with {
|
|
$0.forTrue.enabled.lightColor = VDSColor.elementsPrimaryOnlight
|
|
$0.forTrue.enabled.darkColor = VDSColor.elementsPrimaryOndark
|
|
$0.forTrue.disabled.lightColor = VDSColor.interactiveDisabledOnlight
|
|
$0.forTrue.disabled.darkColor = VDSColor.interactiveDisabledOndark
|
|
}
|
|
|
|
//--------------------------------------------------
|
|
// MARK: - RadioButton View
|
|
//--------------------------------------------------
|
|
/// Manages the appearance of the radioButton.
|
|
private var shapeLayer: CAShapeLayer?
|
|
open func getSelectorSize() -> CGSize {
|
|
radioButtonSize
|
|
}
|
|
|
|
open func updateSelector() {
|
|
|
|
if let shapeLayer = shapeLayer, let sublayers = layer.sublayers, sublayers.contains(shapeLayer) {
|
|
shapeLayer.removeFromSuperlayer()
|
|
self.shapeLayer = nil
|
|
}
|
|
|
|
let bounds = selectorView.bounds
|
|
let length = max(bounds.size.height, bounds.size.width)
|
|
guard length > 0.0, shapeLayer == nil else { return }
|
|
|
|
//get the colors
|
|
let backgroundColor = radioButtonBackgroundColorConfiguration.getColor(self)
|
|
let borderColor = radioButtonBorderColorConfiguration.getColor(self)
|
|
let radioSelectedColor = radioButtonCheckColorConfiguration.getColor(self)
|
|
|
|
selectorView.backgroundColor = backgroundColor
|
|
selectorView.layer.borderColor = borderColor.cgColor
|
|
selectorView.layer.cornerRadius = selectorView.bounds.width * 0.5
|
|
selectorView.layer.borderWidth = 1.0
|
|
|
|
if shapeLayer == nil {
|
|
let selectedBounds = radioButtonSelectedSize
|
|
let bezierPath = UIBezierPath(ovalIn: CGRect(x: (bounds.width - selectedBounds.width) / 2,
|
|
y: (bounds.height - selectedBounds.height) / 2,
|
|
width: radioButtonSelectedSize.width,
|
|
height: radioButtonSelectedSize.height))
|
|
let shapeLayer = CAShapeLayer()
|
|
self.shapeLayer = shapeLayer
|
|
shapeLayer.frame = bounds
|
|
layer.addSublayer(shapeLayer)
|
|
shapeLayer.fillColor = radioSelectedColor.cgColor
|
|
shapeLayer.path = bezierPath.cgPath
|
|
}
|
|
}
|
|
}
|
|
|