// // RadioButton.swift // VDS // // Created by Matt Bruce on 7/22/22. // import Foundation import UIKit import VDSColorTokens import VDSFormControlsTokens public class RadioButton: RadioButtonBase{} open class RadioButtonBase: Control, Changable { //-------------------------------------------------- // MARK: - Private Properties //-------------------------------------------------- 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 } }() public var onChange: Blocks.ActionBlock? //can't bind to @Proxy open override var isSelected: Bool { get { model.selected } set { if model.selected != newValue { model.selected = newValue } } } @Proxy(\.model.labelText) open var labelText: String? @Proxy(\.model.childText) open var childText: String? @Proxy(\.model.hasError) open var hasError: Bool @Proxy(\.model.errorText) open var errorText: String? @Proxy(\.model.inputId) open var inputId: String? @Proxy(\.model.value) open var value: AnyHashable? @Proxy(\.model.dataAnalyticsTrack) open var dataAnalyticsTrack: String? @Proxy(\.model.dataClickStream) open var dataClickStream: String? @Proxy(\.model.dataTrack) open var dataTrack: String? @Proxy(\.model.accessibilityHintEnabled) open var accessibilityHintEnabled: String? @Proxy(\.model.accessibilityHintDisabled) open var accessibilityHintDisabled: String? @Proxy(\.model.accessibilityValueEnabled) open var accessibilityValueEnabled: String? @Proxy(\.model.accessibilityValueDisabled) open var accessibilityValueDisabled: String? @Proxy(\.model.accessibilityLabelEnabled) open var accessibilityLabelEnabled: String? @Proxy(\.model.accessibilityLabelDisabled) open var accessibilityLabelDisabled: String? //-------------------------------------------------- // MARK: - Constraints //-------------------------------------------------- private var selectorHeightConstraint: NSLayoutConstraint? private var selectorWidthConstraint: NSLayoutConstraint? //functions //-------------------------------------------------- // MARK: - Lifecycle //-------------------------------------------------- open override func setup() { super.setup() addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(Self.tap))) 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(model) 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(_ viewModel: ModelType) { //deal with labels if viewModel.shouldShowLabels { //add the stackview to hold the 2 labels //top label if let labelModel = viewModel.labelModel { primaryLabel.set(with: labelModel) primaryLabel.isHidden = false } else { primaryLabel.isHidden = true } //bottom label if let childModel = viewModel.childModel { secondaryLabel.set(with: childModel) 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 errorModel = model.errorModel, model.shouldShowError { errorLabel.set(with: errorModel) mainStackView.spacing = 8 errorLabel.isHidden = false } else { mainStackView.spacing = 0 errorLabel.isHidden = true } } public override func reset() { super.reset() updateSelector(model) setAccessibilityLabel() onChange = nil } //-------------------------------------------------- // MARK: - Actions //-------------------------------------------------- open override func sendActions(for controlEvents: UIControl.Event) { super.sendActions(for: controlEvents) if controlEvents.contains(.touchUpInside) { toggle() } } @objc func tap() { sendActions(for: .touchUpInside) } /// This will checkbox the state of the Selector and execute the actionBlock if provided. open func toggle() { guard !isSelected else { return } //removed error if hasError && isSelected == false { hasError.toggle() } isSelected.toggle() sendActions(for: .valueChanged) onChange?() } //-------------------------------------------------- // MARK: - State //-------------------------------------------------- /// Follow the SwiftUI View paradigm /// - Parameter viewModel: state open override func shouldUpdateView(viewModel: ModelType) -> Bool { let update = viewModel.selected != model.selected || viewModel.labelText != model.labelText || viewModel.childText != model.childText || viewModel.hasError != model.hasError || viewModel.surface != model.surface || viewModel.disabled != model.disabled return update } open override func updateView(viewModel: ModelType) { let enabled = !viewModel.disabled updateLabels(viewModel) updateSelector(viewModel) setAccessibilityHint(enabled) setAccessibilityValue(viewModel.selected) setAccessibilityLabel(viewModel.selected) setNeedsLayout() layoutIfNeeded() } //-------------------------------------------------- // MARK: - Configuration Properties //-------------------------------------------------- public let radioButtonSize = CGSize(width: 20, height: 20) public let radioButtonSelectedSize = CGSize(width: 10, height: 10) private var radioButtonBackgroundColorConfiguration: RadioButtonErrorColorConfiguration = { return RadioButtonErrorColorConfiguration().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: RadioButtonErrorColorConfiguration = { return RadioButtonErrorColorConfiguration().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 = { return 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(_ viewModel: ModelType) { 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(viewModel) let borderColor = radioButtonBorderColorConfiguration.getColor(viewModel) let radioSelectedColor = radioButtonCheckColorConfiguration.getColor(viewModel) 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 } } //-------------------------------------------------- // MARK: - Color Class Configurations //-------------------------------------------------- private class RadioButtonErrorColorConfiguration: BinaryDisabledSurfaceColorConfiguration { public let error = BinarySurfaceColorConfiguration() override func getColor(_ viewModel: ModelType) -> UIColor { //only show error is enabled and showError == true let showErrorColor = !viewModel.disabled && viewModel.hasError if showErrorColor { return error.getColor(viewModel) } else { return super.getColor(viewModel) } } } }