mbrucedogs/vds_ios
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added radio button

Browse Source 
Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
This commit is contained in:
Matt Bruce 2022-08-08 09:38:16 -05:00
parent 5053b95661
commit bd0981e018
4 changed files with 530 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
VDS.xcodeproj/project.pbxproj
View File

@ -62,6 +62,8 @@
EAF7F0FA289DB1AC00B287F5 /* VDSLayoutTokens.xcframework in Frameworks */ = {isa = PBXBuildFile; fileRef = EAF7F0EB289DB0DA00B287F5 /* VDSLayoutTokens.xcframework */; };
EAF7F0FB289DB1AC00B287F5 /* VDSColorTokens.xcframework in Frameworks */ = {isa = PBXBuildFile; fileRef = EAF7F0E9289DB0DA00B287F5 /* VDSColorTokens.xcframework */; };
EAF7F0FC289DB1AC00B287F5 /* VDSAccessibilityTokens.xcframework in Frameworks */ = {isa = PBXBuildFile; fileRef = EAF7F0EA289DB0DA00B287F5 /* VDSAccessibilityTokens.xcframework */; };
EAF7F11728A1475A00B287F5 /* RadioButton.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAF7F11528A1475A00B287F5 /* RadioButton.swift */; };
EAF7F11828A1475A00B287F5 /* RadioButtonModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAF7F11628A1475A00B287F5 /* RadioButtonModel.swift */; };
/* End PBXBuildFile section */
/* Begin PBXContainerItemProxy section */
@ -133,6 +135,8 @@
EAF7F0E9289DB0DA00B287F5 /* VDSColorTokens.xcframework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.xcframework; name = VDSColorTokens.xcframework; path = ../SharedFrameworks/VDSColorTokens.xcframework; sourceTree = "<group>"; };
EAF7F0EA289DB0DA00B287F5 /* VDSAccessibilityTokens.xcframework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.xcframework; name = VDSAccessibilityTokens.xcframework; path = ../SharedFrameworks/VDSAccessibilityTokens.xcframework; sourceTree = "<group>"; };
EAF7F0EB289DB0DA00B287F5 /* VDSLayoutTokens.xcframework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.xcframework; name = VDSLayoutTokens.xcframework; path = ../SharedFrameworks/VDSLayoutTokens.xcframework; sourceTree = "<group>"; };
EAF7F11528A1475A00B287F5 /* RadioButton.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = RadioButton.swift; sourceTree = "<group>"; };
EAF7F11628A1475A00B287F5 /* RadioButtonModel.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = RadioButtonModel.swift; sourceTree = "<group>"; };
/* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */
@ -219,6 +223,7 @@
EA33619D288B1E330071C351 /* Components */ = {
isa = PBXGroup;
children = (
EAF7F11428A1470D00B287F5 /* RadioButton */,
EAF7F092289985E200B287F5 /* Checkbox */,
EA3361A0288B1E6F0071C351 /* Toggle */,
EA3362412892EF700071C351 /* Label */,
@ -351,6 +356,15 @@
path = Attributes;
sourceTree = "<group>";
};
EAF7F11428A1470D00B287F5 /* RadioButton */ = {
isa = PBXGroup;
children = (
EAF7F11528A1475A00B287F5 /* RadioButton.swift */,
EAF7F11628A1475A00B287F5 /* RadioButtonModel.swift */,
);
path = RadioButton;
sourceTree = "<group>";
};
/* End PBXGroup section */
/* Begin PBXHeadersBuildPhase section */
@ -469,12 +483,14 @@
EAF7F0A6289B0CE000B287F5 /* Resetable.swift in Sources */,
EA3361C328902D960071C351 /* Toggle.swift in Sources */,
EAF7F0A0289AB7EC00B287F5 /* View.swift in Sources */,
EAF7F11828A1475A00B287F5 /* RadioButtonModel.swift in Sources */,
EA3362402892EF6C0071C351 /* Label.swift in Sources */,
EAF7F0B3289B1ADC00B287F5 /* LabelAttributeAction.swift in Sources */,
EA33622E2891EA3C0071C351 /* DispatchQueue+Once.swift in Sources */,
EAF7F0AF289B144C00B287F5 /* LabelAttributeUnderline.swift in Sources */,
EA3361C5289030FC0071C351 /* Accessable.swift in Sources */,
EA33622C2891E73B0071C351 /* FontProtocol.swift in Sources */,
EAF7F11728A1475A00B287F5 /* RadioButton.swift in Sources */,
EAF7F0952899861000B287F5 /* Checkbox.swift in Sources */,
EA3361C9289054C50071C351 /* Surfaceable.swift in Sources */,
EA3361A2288B1E840071C351 /* ToggleModel.swift in Sources */,

2
VDS/Components/Checkbox/Checkbox.swift
View File

@ -15,8 +15,6 @@ import Combine
By default this class begins in the off state.
Container: The background of the checkbox control.
Knob: The circular indicator that slides on the container.
*/
public class Checkbox: CheckboxBase<DefaultCheckboxModel>{}

405
VDS/Components/RadioButton/RadioButton.swift Normal file
View File

@ -0,0 +1,405 @@
//
// RadioButton.swift
// VDS
//
// Created by Matt Bruce on 7/22/22.
//
import Foundation
import UIKit
import VDSColorTokens
import VDSFormControlsTokens
import Combine
/**
A custom implementation of Apple's UISwitch.
By default this class begins in the off state.
*/
public class RadioButton: RadioButtonBase<DefaultRadioButtonModel>{}
open class RadioButtonBase<ModelType: RadioButtonModel>: Control<ModelType>, Changable {
//--------------------------------------------------
// MARK: - Private Properties
//--------------------------------------------------
private var mainStackView: UIStackView = {
let stackView = UIStackView()
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.alignment = .top
stackView.axis = .vertical
return stackView
}()
private var radioButtonStackView: UIStackView = {
let stackView = UIStackView()
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.alignment = .top
stackView.axis = .horizontal
return stackView
}()
private var radioButtonLabelStackView: UIStackView = {
let stackView = UIStackView()
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.axis = .vertical
return stackView
}()
private var primaryLabel: Label = {
let label = Label()
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
private var secondaryLabel: Label = {
let label = Label()
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
private var errorLabel: Label = {
let label = Label()
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
private var radioButtonView: UIView = {
let view = UIView()
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
//--------------------------------------------------
// MARK: - Configuration Properties
//--------------------------------------------------
public let radioButtonSize = CGSize(width: 20, height: 20)
public let radioButtonSelectedSize = CGSize(width: 10, height: 10)
private var radioButtonBackgroundColorConfiguration: RadioButtonErrorColorConfiguration = {
let config = RadioButtonErrorColorConfiguration()
//error doesn't care enabled/disable
config.error.forTrue.lightColor = VDSColor.elementsPrimaryOnlight
config.error.forTrue.darkColor = VDSColor.elementsPrimaryOndark
config.error.forFalse.lightColor = VDSColor.feedbackErrorBackgroundOnlight
config.error.forFalse.darkColor = VDSColor.feedbackErrorBackgroundOndark
return config
}()
private var radioButtonBorderColorConfiguration: RadioButtonErrorColorConfiguration = {
let config = RadioButtonErrorColorConfiguration()
config.forTrue.enabled.lightColor = VDSColor.elementsPrimaryOnlight
config.forTrue.enabled.darkColor = VDSColor.elementsPrimaryOndark
config.forFalse.enabled.lightColor = VDSFormControlsColor.borderOnlight
config.forFalse.enabled.darkColor = VDSFormControlsColor.borderOndark
config.forTrue.disabled.lightColor = VDSColor.interactiveDisabledOnlight
config.forTrue.disabled.darkColor = VDSColor.interactiveDisabledOndark
config.forFalse.disabled.lightColor = VDSColor.interactiveDisabledOnlight
config.forFalse.disabled.darkColor = VDSColor.interactiveDisabledOndark
//error doesn't care enabled/disable
config.error.forTrue.lightColor = VDSColor.elementsPrimaryOnlight
config.error.forTrue.darkColor = VDSColor.elementsPrimaryOndark
config.error.forFalse.lightColor = VDSColor.feedbackErrorOnlight
config.error.forFalse.darkColor = VDSColor.feedbackErrorOndark
return config
}()
private var radioButtonCheckColorConfiguration: BinaryDisabledSurfaceColorConfiguration<ModelType> = {
let config = BinaryDisabledSurfaceColorConfiguration<ModelType>()
config.forTrue.enabled.lightColor = VDSColor.elementsPrimaryOnlight
config.forTrue.enabled.darkColor = VDSColor.elementsPrimaryOndark
config.forTrue.disabled.lightColor = VDSColor.interactiveDisabledOnlight
config.forTrue.disabled.darkColor = VDSColor.interactiveDisabledOndark
return config
}()
//--------------------------------------------------
// MARK: - Public Properties
//--------------------------------------------------
public var onChange: Blocks.ActionBlock?
@Proxy(\.model.id)
open var id: String?
@Proxy(\.model.on)
open var isOn: Bool
@Proxy(\.model.labelText)
open var labelText: String?
@Proxy(\.model.childText)
open var childText: String?
@Proxy(\.model.showError)
open var showError: 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: - Computed Properties
//--------------------------------------------------
open override var isEnabled: Bool {
get { !model.disabled }
set {
//create local vars for clear coding
let disabled = !newValue
if model.disabled != disabled {
model.disabled = disabled
}
}
}
//--------------------------------------------------
// MARK: - Initializers
//--------------------------------------------------
public convenience init() {
self.init(with: ModelType())
}
required public init(with model: ModelType) {
super.init(with: model)
}
required public init?(coder: NSCoder) {
super.init(with: ModelType())
}
//--------------------------------------------------
// MARK: - Constraints
//--------------------------------------------------
private var knobLeadingConstraint: NSLayoutConstraint?
private var knobTrailingConstraint: NSLayoutConstraint?
private var knobHeightConstraint: NSLayoutConstraint?
private var knobWidthConstraint: NSLayoutConstraint?
private var radioButtonHeightConstraint: NSLayoutConstraint?
private var radioButtonWidthConstraint: NSLayoutConstraint?
//functions
//--------------------------------------------------
// MARK: - Lifecycle
//--------------------------------------------------
open override func setup() {
super.setup()
self.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(RadioButton.toggleAndAction)))
isAccessibilityElement = true
accessibilityTraits = .button
addSubview(mainStackView)
mainStackView.addArrangedSubview(radioButtonStackView)
mainStackView.addArrangedSubview(errorLabel)
radioButtonStackView.addArrangedSubview(radioButtonView)
radioButtonStackView.addArrangedSubview(radioButtonLabelStackView)
radioButtonLabelStackView.addArrangedSubview(primaryLabel)
radioButtonLabelStackView.addArrangedSubview(secondaryLabel)
radioButtonHeightConstraint = radioButtonView.heightAnchor.constraint(equalToConstant: radioButtonSize.height)
radioButtonHeightConstraint?.isActive = true
radioButtonWidthConstraint = radioButtonView.widthAnchor.constraint(equalToConstant: radioButtonSize.width)
radioButtonWidthConstraint?.isActive = true
updateRadioButton(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 model.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
}
radioButtonStackView.spacing = 12
radioButtonLabelStackView.spacing = 4
radioButtonLabelStackView.isHidden = false
} else {
radioButtonStackView.spacing = 0
radioButtonLabelStackView.spacing = 0
radioButtonLabelStackView.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()
updateRadioButton(model)
setAccessibilityLabel()
onChange = nil
}
//--------------------------------------------------
// MARK: - RadioButton View
//--------------------------------------------------
/// Manages the appearance of the radioButton.
private var shapeLayer: CAShapeLayer?
private func updateRadioButton(_ viewModel: ModelType) {
//get the colors
let backgroundColor = radioButtonBackgroundColorConfiguration.getColor(viewModel)
let borderColor = radioButtonBorderColorConfiguration.getColor(viewModel)
let radioSelectedColor = radioButtonCheckColorConfiguration.getColor(viewModel)
if let shapeLayer = shapeLayer, let sublayers = layer.sublayers, sublayers.contains(shapeLayer) {
shapeLayer.removeFromSuperlayer()
self.shapeLayer = nil
}
radioButtonView.backgroundColor = backgroundColor
radioButtonView.layer.borderColor = borderColor.cgColor
radioButtonView.layer.cornerRadius = radioButtonView.bounds.width * 0.5
radioButtonView.layer.borderWidth = 1.0
if shapeLayer == nil {
let bounds = radioButtonView.bounds
let selectedBounds = radioButtonSelectedSize
let length = max(bounds.size.height, bounds.size.width)
guard length > 0.0, shapeLayer == nil else { return }
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: - Actions
//--------------------------------------------------
open override func sendAction(_ action: Selector, to target: Any?, for event: UIEvent?) {
super.sendAction(action, to: target, for: event)
toggleAndAction()
}
open override func sendActions(for controlEvents: UIControl.Event) {
super.sendActions(for: controlEvents)
toggleAndAction()
}
/// This will radioButton the state of the RadioButton and execute the actionBlock if provided.
@objc public func toggleAndAction() {
isOn.toggle()
onChange?()
}
override open func accessibilityActivate() -> Bool {
// Hold state in case User wanted isAnimated to remain off.
guard isUserInteractionEnabled else { return false }
sendActions(for: .touchUpInside)
return true
}
//--------------------------------------------------
// MARK: - UIResponder
//--------------------------------------------------
open override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
sendActions(for: .touchUpInside)
}
//--------------------------------------------------
// MARK: - State
//--------------------------------------------------
/// Follow the SwiftUI View paradigm
/// - Parameter viewModel: state
open override func onStateChange(viewModel: ModelType) {
let enabled = !viewModel.disabled
updateLabels(viewModel)
updateRadioButton(viewModel)
setAccessibilityHint(enabled)
setAccessibilityValue(viewModel.on)
setAccessibilityLabel(viewModel.on)
isUserInteractionEnabled = !viewModel.disabled
setNeedsLayout()
layoutIfNeeded()
}
//--------------------------------------------------
// MARK: - Color Class Configurations
//--------------------------------------------------
private class RadioButtonErrorColorConfiguration: BinaryDisabledSurfaceColorConfiguration<ModelType> {
public let error = BinarySurfaceColorConfiguration<ModelType>()
override func getColor(_ viewModel: ModelType) -> UIColor {
//only show error is enabled and showError == true
let showErrorColor = !viewModel.disabled && viewModel.showError
if showErrorColor {
return error.getColor(viewModel)
} else {
return super.getColor(viewModel)
}
}
}
}

109
VDS/Components/RadioButton/RadioButtonModel.swift Normal file
View File

@ -0,0 +1,109 @@
//
// ToggleModel.swift
// VDS
//
// Created by Matt Bruce on 7/22/22.
//
import Foundation
import UIKit
public protocol RadioButtonModel: Modelable, FormFieldable, Errorable, DataTrackable, Accessable, BinaryColorable {
var id: String? { get set }
var on: Bool { get set }
var labelText: String? { get set }
var labelTextAttributes: [LabelAttributeModel]? { get set }
var childText: String? { get set }
var childTextAttributes: [LabelAttributeModel]? { get set }
}
extension RadioButtonModel {
public var userTrueColor: Bool { return on }
public var fontCategory: FontCategory {
get { return .body }
set { return }
}
public var shouldShowError: Bool {
guard showError && !disabled && errorText?.isEmpty == false else { return false }
return true
}
public var shouldShowLabels: Bool {
guard labelText?.isEmpty == false || childText?.isEmpty == false else { return false }
return true
}
public var labelModel: DefaultLabelModel? {
guard let labelText = labelText else { return nil }
var model = DefaultLabelModel()
model.fontSize = .large
model.textPosition = .left
model.fontWeight = .bold
model.fontCategory = .body
model.text = labelText
model.surface = surface
model.disabled = disabled
model.attributes = labelTextAttributes
return model
}
public var childModel: DefaultLabelModel? {
guard let childText = childText else { return nil }
var model = DefaultLabelModel()
model.fontSize = .large
model.textPosition = .left
model.fontWeight = .regular
model.fontCategory = .body
model.text = childText
model.surface = surface
model.disabled = disabled
model.attributes = childTextAttributes
return model
}
public var errorModel: DefaultLabelModel? {
guard let errorText = errorText, showError else { return nil }
var model = DefaultLabelModel()
model.fontSize = .medium
model.textPosition = .left
model.fontWeight = .regular
model.fontCategory = .body
model.text = errorText
model.surface = surface
model.disabled = disabled
return model
}
}
public struct DefaultRadioButtonModel: RadioButtonModel {
public var id: String?
public var on: Bool = false
public var labelText: String?
public var labelTextAttributes: [LabelAttributeModel]?
public var childText: String?
public var childTextAttributes: [LabelAttributeModel]?
public var showError: Bool = false
public var errorText: String?
public var inputId: String?
public var value: AnyHashable?
public var surface: Surface = .light
public var disabled: Bool = false
public var dataAnalyticsTrack: String?
public var dataClickStream: String?
public var dataTrack: String?
public var accessibilityHintEnabled: String?
public var accessibilityHintDisabled: String?
public var accessibilityValueEnabled: String?
public var accessibilityValueDisabled: String?
public var accessibilityLabelEnabled: String?
public var accessibilityLabelDisabled: String?
public init() {}
}