migrated to fixed toggle
Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
This commit is contained in:
parent
900dfd21fc
commit
8d080a9e38
@ -12,7 +12,7 @@
|
||||
44604AD729CE196600E62B51 /* Line.swift in Sources */ = {isa = PBXBuildFile; fileRef = 44604AD629CE196600E62B51 /* Line.swift */; };
|
||||
5F21D7BF28DCEB3D003E7CD6 /* Useable.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5F21D7BE28DCEB3D003E7CD6 /* Useable.swift */; };
|
||||
5FC35BE328D51405004EBEAC /* Button.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5FC35BE228D51405004EBEAC /* Button.swift */; };
|
||||
EA0D1C372A681CCE00E5C127 /* Toggle.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA0D1C362A681CCE00E5C127 /* Toggle.swift */; };
|
||||
EA0D1C372A681CCE00E5C127 /* ToggleView.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA0D1C362A681CCE00E5C127 /* ToggleView.swift */; };
|
||||
EA0FC2C62914222900DF80B4 /* ButtonGroup.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA0FC2C52914222900DF80B4 /* ButtonGroup.swift */; };
|
||||
EA1DA1CB2A2E36DC001C51D2 /* SelectorBase.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA1DA1CA2A2E36DC001C51D2 /* SelectorBase.swift */; };
|
||||
EA1F266528B945070033E859 /* RadioSwatch.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA1F266128B945070033E859 /* RadioSwatch.swift */; };
|
||||
@ -30,7 +30,7 @@
|
||||
EA3361B8288B2AAA0071C351 /* ViewProtocol.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA3361B7288B2AAA0071C351 /* ViewProtocol.swift */; };
|
||||
EA3361BD288B2C760071C351 /* TypeAlias.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA3361BC288B2C760071C351 /* TypeAlias.swift */; };
|
||||
EA3361BF288B2EA60071C351 /* Handlerable.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA3361BE288B2EA60071C351 /* Handlerable.swift */; };
|
||||
EA3361C328902D960071C351 /* ToggleItem.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA3361C228902D960071C351 /* ToggleItem.swift */; };
|
||||
EA3361C328902D960071C351 /* Toggle.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA3361C228902D960071C351 /* Toggle.swift */; };
|
||||
EA3361C9289054C50071C351 /* Surfaceable.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA3361C8289054C50071C351 /* Surfaceable.swift */; };
|
||||
EA3362042891E14D0071C351 /* VerizonNHGeTX-Bold.otf in Resources */ = {isa = PBXBuildFile; fileRef = EA3362002891E14C0071C351 /* VerizonNHGeTX-Bold.otf */; };
|
||||
EA3362052891E14D0071C351 /* VerizonNHGeDS-Bold.otf in Resources */ = {isa = PBXBuildFile; fileRef = EA3362012891E14D0071C351 /* VerizonNHGeDS-Bold.otf */; };
|
||||
@ -149,7 +149,7 @@
|
||||
44604AD629CE196600E62B51 /* Line.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Line.swift; sourceTree = "<group>"; };
|
||||
5F21D7BE28DCEB3D003E7CD6 /* Useable.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Useable.swift; sourceTree = "<group>"; };
|
||||
5FC35BE228D51405004EBEAC /* Button.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Button.swift; sourceTree = "<group>"; };
|
||||
EA0D1C362A681CCE00E5C127 /* Toggle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Toggle.swift; sourceTree = "<group>"; };
|
||||
EA0D1C362A681CCE00E5C127 /* ToggleView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ToggleView.swift; sourceTree = "<group>"; };
|
||||
EA0FC2C52914222900DF80B4 /* ButtonGroup.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ButtonGroup.swift; sourceTree = "<group>"; };
|
||||
EA1DA1CA2A2E36DC001C51D2 /* SelectorBase.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SelectorBase.swift; sourceTree = "<group>"; };
|
||||
EA1F266128B945070033E859 /* RadioSwatch.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = RadioSwatch.swift; sourceTree = "<group>"; };
|
||||
@ -168,7 +168,7 @@
|
||||
EA3361B7288B2AAA0071C351 /* ViewProtocol.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ViewProtocol.swift; sourceTree = "<group>"; };
|
||||
EA3361BC288B2C760071C351 /* TypeAlias.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TypeAlias.swift; sourceTree = "<group>"; };
|
||||
EA3361BE288B2EA60071C351 /* Handlerable.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Handlerable.swift; sourceTree = "<group>"; };
|
||||
EA3361C228902D960071C351 /* ToggleItem.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ToggleItem.swift; sourceTree = "<group>"; };
|
||||
EA3361C228902D960071C351 /* Toggle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Toggle.swift; sourceTree = "<group>"; };
|
||||
EA3361C8289054C50071C351 /* Surfaceable.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Surfaceable.swift; sourceTree = "<group>"; };
|
||||
EA3362002891E14C0071C351 /* VerizonNHGeTX-Bold.otf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "VerizonNHGeTX-Bold.otf"; sourceTree = "<group>"; };
|
||||
EA3362012891E14D0071C351 /* VerizonNHGeDS-Bold.otf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "VerizonNHGeDS-Bold.otf"; sourceTree = "<group>"; };
|
||||
@ -434,8 +434,8 @@
|
||||
EA3361A0288B1E6F0071C351 /* Toggle */ = {
|
||||
isa = PBXGroup;
|
||||
children = (
|
||||
EA0D1C362A681CCE00E5C127 /* Toggle.swift */,
|
||||
EA3361C228902D960071C351 /* ToggleItem.swift */,
|
||||
EA0D1C362A681CCE00E5C127 /* ToggleView.swift */,
|
||||
EA3361C228902D960071C351 /* Toggle.swift */,
|
||||
);
|
||||
path = Toggle;
|
||||
sourceTree = "<group>";
|
||||
@ -883,7 +883,7 @@
|
||||
EA89200428AECF4B006B9984 /* UITextField+Publisher.swift in Sources */,
|
||||
EA5F86C82A1BD99100BC83E4 /* TabModel.swift in Sources */,
|
||||
EA297A5729FB0A360031ED56 /* AppleGuidlinesTouchable.swift in Sources */,
|
||||
EA3361C328902D960071C351 /* ToggleItem.swift in Sources */,
|
||||
EA3361C328902D960071C351 /* Toggle.swift in Sources */,
|
||||
EAF7F0A0289AB7EC00B287F5 /* View.swift in Sources */,
|
||||
EA89201328B568D8006B9984 /* RadioBoxItem.swift in Sources */,
|
||||
EAC9258C2911C9DE00091998 /* InputField.swift in Sources */,
|
||||
@ -931,7 +931,7 @@
|
||||
EA89200628B526D6006B9984 /* CheckboxGroup.swift in Sources */,
|
||||
44604AD429CE186A00E62B51 /* NotificationButtonModel.swift in Sources */,
|
||||
EAD8D2C128BFDE8B006EB6A6 /* UIGestureRecognizer+Publisher.swift in Sources */,
|
||||
EA0D1C372A681CCE00E5C127 /* Toggle.swift in Sources */,
|
||||
EA0D1C372A681CCE00E5C127 /* ToggleView.swift in Sources */,
|
||||
EAF7F0B9289C139800B287F5 /* ColorConfiguration.swift in Sources */,
|
||||
EA3361BD288B2C760071C351 /* TypeAlias.swift in Sources */,
|
||||
EAB1D2CF28ABEF2B00DAE764 /* Typography.swift in Sources */,
|
||||
|
||||
@ -1,25 +1,32 @@
|
||||
//
|
||||
// ToggleView.swift
|
||||
// Toggle.swift
|
||||
// VDS
|
||||
//
|
||||
// Created by Matt Bruce on 7/19/23.
|
||||
// Created by Matt Bruce on 7/22/22.
|
||||
//
|
||||
|
||||
import Foundation
|
||||
import UIKit
|
||||
import VDSColorTokens
|
||||
import Combine
|
||||
/**
|
||||
A custom implementation of Apple's UISwitch.
|
||||
|
||||
By default this class begins in the off state.
|
||||
|
||||
Container: The background of the toggle control.
|
||||
Knob: The circular indicator that slides on the container.
|
||||
*/
|
||||
|
||||
@objc(VDSToggle)
|
||||
open class Toggle: Control, Changeable {
|
||||
|
||||
//--------------------------------------------------
|
||||
// MARK: - Enums
|
||||
//--------------------------------------------------
|
||||
public enum TextSize: String, CaseIterable {
|
||||
case small, large
|
||||
}
|
||||
|
||||
public enum TextWeight: String, CaseIterable {
|
||||
case regular, bold
|
||||
}
|
||||
|
||||
public enum TextPosition: String, CaseIterable {
|
||||
case left, right
|
||||
}
|
||||
|
||||
//--------------------------------------------------
|
||||
// MARK: - Initializers
|
||||
//--------------------------------------------------
|
||||
@ -34,66 +41,93 @@ open class Toggle: Control, Changeable {
|
||||
public required init?(coder: NSCoder) {
|
||||
super.init(coder: coder)
|
||||
}
|
||||
|
||||
private var toggleView = UIView().with {
|
||||
$0.translatesAutoresizingMaskIntoConstraints = false
|
||||
$0.isUserInteractionEnabled = false
|
||||
}
|
||||
|
||||
private var knobView = UIView().with {
|
||||
$0.translatesAutoresizingMaskIntoConstraints = false
|
||||
$0.backgroundColor = .white
|
||||
$0.isUserInteractionEnabled = false
|
||||
}
|
||||
|
||||
//--------------------------------------------------
|
||||
// MARK: - Constraints
|
||||
//--------------------------------------------------
|
||||
private var leftConstraints: [NSLayoutConstraint] = []
|
||||
private var rightConstraints: [NSLayoutConstraint] = []
|
||||
private var labelConstraints: [NSLayoutConstraint] = []
|
||||
|
||||
//--------------------------------------------------
|
||||
// MARK: - Configuration Properties
|
||||
//--------------------------------------------------
|
||||
// Sizes are from InVision design specs.
|
||||
public let toggleSize = CGSize(width: 52, height: 28)
|
||||
public let knobSize = CGSize(width: 24, height: 24)
|
||||
|
||||
private var toggleColorConfiguration = ControlColorConfiguration().with {
|
||||
$0.setSurfaceColors(VDSColor.elementsSecondaryOnlight, VDSColor.paletteGray44, forState: .normal)
|
||||
$0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: .disabled)
|
||||
$0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: [.selected, .disabled])
|
||||
$0.setSurfaceColors(VDSColor.paletteGreen26, VDSColor.paletteGreen36, forState: .selected)
|
||||
private let toggleContainerSize = CGSize(width: 52, height: 44)
|
||||
private let spacingBetween = VDSLayout.Spacing.space3X.value
|
||||
private let labelMaxWidth = 40.0
|
||||
|
||||
private var textStyle: TextStyle {
|
||||
if textSize == .small {
|
||||
if textWeight == .bold {
|
||||
return .boldBodySmall
|
||||
} else {
|
||||
return .bodySmall
|
||||
}
|
||||
} else {
|
||||
if textWeight == .bold {
|
||||
return .boldBodyLarge
|
||||
} else {
|
||||
return .bodyLarge
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private var knobColorConfiguration = ControlColorConfiguration().with {
|
||||
$0.setSurfaceColors(VDSColor.elementsPrimaryOndark, VDSColor.elementsPrimaryOndark, forState: .normal)
|
||||
$0.setSurfaceColors(VDSColor.paletteGray95, VDSColor.paletteGray44, forState: .disabled)
|
||||
$0.setSurfaceColors(VDSColor.paletteGray95, VDSColor.paletteGray44, forState: [.selected, .disabled])
|
||||
$0.setSurfaceColors(VDSColor.elementsPrimaryOndark, VDSColor.elementsPrimaryOndark, forState: .selected)
|
||||
}
|
||||
|
||||
//--------------------------------------------------
|
||||
// MARK: - Public Properties
|
||||
//--------------------------------------------------
|
||||
public var onChangeSubscriber: AnyCancellable?
|
||||
open var onChangeSubscriber: AnyCancellable? {
|
||||
willSet {
|
||||
if let onChangeSubscriber {
|
||||
onChangeSubscriber.cancel()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
open var toggleView = ToggleView().with {
|
||||
$0.setContentCompressionResistancePriority(.defaultHigh, for: .horizontal)
|
||||
$0.isUserInteractionEnabled = false
|
||||
}
|
||||
|
||||
open var label = Label().with {
|
||||
$0.setContentCompressionResistancePriority(.defaultHigh, for: .horizontal)
|
||||
$0.setContentHuggingPriority(.defaultHigh, for: .horizontal)
|
||||
|
||||
$0.textColorConfiguration = ViewColorConfiguration().with {
|
||||
$0.setSurfaceColors(VDSColor.elementsSecondaryOnlight, VDSColor.elementsSecondaryOndark, forDisabled: true)
|
||||
$0.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark, forDisabled: false)
|
||||
}.eraseToAnyColorable()
|
||||
}
|
||||
|
||||
open var isOn: Bool {
|
||||
get { isSelected }
|
||||
set {
|
||||
if isSelected != newValue {
|
||||
toggleView.isOn = newValue
|
||||
isSelected = newValue
|
||||
}
|
||||
setNeedsUpdate()
|
||||
}
|
||||
}
|
||||
|
||||
open var isAnimated: Bool = true { didSet { setNeedsUpdate() }}
|
||||
|
||||
open var showText: Bool = false { didSet { setNeedsUpdate() }}
|
||||
|
||||
open var onText: String = "On" { didSet { setNeedsUpdate() }}
|
||||
|
||||
open var offText: String = "Off" { didSet { setNeedsUpdate() }}
|
||||
|
||||
open var statusText: String { isOn ? onText : offText }
|
||||
|
||||
open var textSize: TextSize = .small { didSet { setNeedsUpdate() }}
|
||||
|
||||
open var textWeight: TextWeight = .regular { didSet { setNeedsUpdate() }}
|
||||
|
||||
open var textPosition: TextPosition = .left { didSet { setNeedsUpdate() }}
|
||||
|
||||
open var inputId: String? { didSet { setNeedsUpdate() }}
|
||||
|
||||
open var value: AnyHashable? { didSet { setNeedsUpdate() }}
|
||||
|
||||
//--------------------------------------------------
|
||||
// MARK: - Constraints
|
||||
//--------------------------------------------------
|
||||
private var knobLeadingConstraint: NSLayoutConstraint?
|
||||
private var knobTrailingConstraint: NSLayoutConstraint?
|
||||
|
||||
|
||||
//--------------------------------------------------
|
||||
// MARK: - Lifecycle
|
||||
//--------------------------------------------------
|
||||
@ -106,103 +140,106 @@ open class Toggle: Control, Changeable {
|
||||
|
||||
open override func setup() {
|
||||
super.setup()
|
||||
|
||||
|
||||
isAccessibilityElement = true
|
||||
accessibilityTraits = .button
|
||||
|
||||
addSubview(label)
|
||||
addSubview(toggleView)
|
||||
toggleView.addSubview(knobView)
|
||||
|
||||
let heightEqual = heightAnchor.constraint(equalToConstant: toggleContainerSize.height)
|
||||
heightEqual.priority = .defaultLow
|
||||
|
||||
NSLayoutConstraint.activate([
|
||||
toggleView.widthAnchor.constraint(equalToConstant: toggleSize.width),
|
||||
toggleView.heightAnchor.constraint(equalToConstant: toggleSize.height),
|
||||
toggleView.centerYAnchor.constraint(equalTo: centerYAnchor),
|
||||
knobView.heightAnchor.constraint(equalToConstant: knobSize.height),
|
||||
knobView.widthAnchor.constraint(equalToConstant: knobSize.width),
|
||||
knobView.centerYAnchor.constraint(equalTo: toggleView.centerYAnchor),
|
||||
knobView.topAnchor.constraint(greaterThanOrEqualTo: toggleView.topAnchor)
|
||||
])
|
||||
let heightGreater = heightAnchor.constraint(greaterThanOrEqualToConstant: toggleContainerSize.height)
|
||||
heightGreater.priority = .defaultHigh
|
||||
|
||||
// Set up initial constraints for label and switch
|
||||
toggleView.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
|
||||
|
||||
// Set cornerRadius
|
||||
knobView.layer.cornerRadius = knobSize.height / 2.0
|
||||
toggleView.layer.cornerRadius = toggleSize.height / 2.0
|
||||
labelConstraints = [
|
||||
heightEqual, heightGreater,
|
||||
label.widthAnchor.constraint(lessThanOrEqualToConstant: labelMaxWidth),
|
||||
label.topAnchor.constraint(equalTo: topAnchor),
|
||||
label.bottomAnchor.constraint(equalTo: bottomAnchor),
|
||||
]
|
||||
|
||||
leftConstraints = [
|
||||
toggleView.leadingAnchor.constraint(equalTo: label.trailingAnchor, constant: spacingBetween)
|
||||
]
|
||||
|
||||
rightConstraints = [
|
||||
label.leadingAnchor.constraint(equalTo: toggleView.trailingAnchor, constant: spacingBetween)
|
||||
]
|
||||
|
||||
// Set content hugging priority
|
||||
toggleView.setContentHuggingPriority(.required, for: .horizontal)
|
||||
toggleView.setContentHuggingPriority(.required, for: .vertical)
|
||||
setContentHuggingPriority(.required, for: .horizontal)
|
||||
setContentHuggingPriority(.required, for: .vertical)
|
||||
}
|
||||
|
||||
open override var intrinsicContentSize: CGSize { toggleSize }
|
||||
|
||||
open override func reset() {
|
||||
super.reset()
|
||||
shouldUpdateView = false
|
||||
label.reset()
|
||||
isOn = false
|
||||
isAnimated = true
|
||||
showText = false
|
||||
onText = "On"
|
||||
offText = "Off"
|
||||
textSize = .small
|
||||
textWeight = .regular
|
||||
textPosition = .left
|
||||
inputId = nil
|
||||
value = nil
|
||||
toggleView.backgroundColor = toggleColorConfiguration.getColor(self)
|
||||
knobView.backgroundColor = knobColorConfiguration.getColor(self)
|
||||
shouldUpdateView = true
|
||||
setNeedsUpdate()
|
||||
}
|
||||
|
||||
/// This will toggle the state of the Toggle and execute the actionBlock if provided.
|
||||
/// This will toggle the state of the Toggle
|
||||
open func toggle() {
|
||||
isOn.toggle()
|
||||
sendActions(for: .valueChanged)
|
||||
}
|
||||
|
||||
|
||||
//--------------------------------------------------
|
||||
// MARK: - Toggle
|
||||
// MARK: - Labels
|
||||
//--------------------------------------------------
|
||||
private func constrainKnob(){
|
||||
self.knobLeadingConstraint?.isActive = false
|
||||
self.knobTrailingConstraint?.isActive = false
|
||||
if isOn {
|
||||
knobTrailingConstraint = toggleView.trailingAnchor.constraint(equalTo: knobView.trailingAnchor, constant: 2)
|
||||
knobLeadingConstraint = knobView.leadingAnchor.constraint(greaterThanOrEqualTo: toggleView.leadingAnchor)
|
||||
} else {
|
||||
knobTrailingConstraint = toggleView.trailingAnchor.constraint(greaterThanOrEqualTo: knobView.trailingAnchor)
|
||||
knobLeadingConstraint = knobView.leadingAnchor.constraint(equalTo: toggleView.leadingAnchor, constant: 2)
|
||||
}
|
||||
knobTrailingConstraint?.isActive = true
|
||||
knobLeadingConstraint?.isActive = true
|
||||
self.layoutIfNeeded()
|
||||
private var showLabel: Bool {
|
||||
showText && !statusText.isEmpty
|
||||
}
|
||||
|
||||
private func updateToggle() {
|
||||
let toggleColor = toggleColorConfiguration.getColor(self)
|
||||
let knobColor = knobColorConfiguration.getColor(self)
|
||||
private func updateLabel() {
|
||||
label.isHidden = !showLabel
|
||||
|
||||
if disabled || !isAnimated {
|
||||
toggleView.backgroundColor = toggleColor
|
||||
knobView.backgroundColor = knobColor
|
||||
constrainKnob()
|
||||
if showLabel {
|
||||
label.textPosition = textPosition == .left ? .right : .left
|
||||
label.textStyle = textStyle
|
||||
label.text = statusText
|
||||
label.surface = surface
|
||||
label.disabled = disabled
|
||||
switch textPosition {
|
||||
case .left:
|
||||
NSLayoutConstraint.deactivate(rightConstraints)
|
||||
NSLayoutConstraint.activate(leftConstraints)
|
||||
case .right:
|
||||
NSLayoutConstraint.deactivate(leftConstraints)
|
||||
NSLayoutConstraint.activate(rightConstraints)
|
||||
}
|
||||
NSLayoutConstraint.activate(labelConstraints)
|
||||
} else {
|
||||
UIView.animate(withDuration: 0.2, delay: 0.0, options: .curveEaseIn, animations: {
|
||||
self.toggleView.backgroundColor = toggleColor
|
||||
self.knobView.backgroundColor = knobColor
|
||||
}, completion: nil)
|
||||
|
||||
UIView.animate(withDuration: 0.33, delay: 0, usingSpringWithDamping: 0.7, initialSpringVelocity: 0.5, options: [], animations: { [weak self] in
|
||||
self?.constrainKnob()
|
||||
}, completion: nil)
|
||||
NSLayoutConstraint.deactivate(leftConstraints)
|
||||
NSLayoutConstraint.deactivate(rightConstraints)
|
||||
NSLayoutConstraint.deactivate(labelConstraints)
|
||||
}
|
||||
invalidateIntrinsicContentSize()
|
||||
}
|
||||
|
||||
|
||||
//--------------------------------------------------
|
||||
// MARK: - Overrides
|
||||
//--------------------------------------------------
|
||||
//--------------------------------------------------
|
||||
open override func updateView() {
|
||||
updateToggle()
|
||||
updateLabel()
|
||||
toggleView.surface = surface
|
||||
toggleView.disabled = disabled
|
||||
toggleView.isOn = isOn
|
||||
updateAccessibilityLabel()
|
||||
}
|
||||
|
||||
open override func updateAccessibilityLabel() {
|
||||
accessibilityLabel = "Toggle"
|
||||
accessibilityValue = isSelected ? "1" : "0"
|
||||
if !accessibilityTraits.contains(.selected) && isSelected {
|
||||
accessibilityTraits.insert(.selected)
|
||||
@ -215,14 +252,17 @@ open class Toggle: Control, Changeable {
|
||||
} else if accessibilityTraits.contains(.notEnabled) && !isEnabled{
|
||||
accessibilityTraits.remove(.notEnabled)
|
||||
}
|
||||
setAccessibilityLabel(for: [label])
|
||||
}
|
||||
|
||||
open override var intrinsicContentSize: CGSize {
|
||||
if showLabel {
|
||||
label.sizeToFit()
|
||||
let size = CGSize(width: label.frame.width + spacingBetween + toggleContainerSize.width,
|
||||
height: max(toggleContainerSize.height, label.frame.height))
|
||||
return size
|
||||
} else {
|
||||
return toggleContainerSize
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: AppleGuidlinesTouchable
|
||||
extension Toggle: AppleGuidlinesTouchable {
|
||||
|
||||
override open func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
|
||||
Self.acceptablyOutsideBounds(point: point, bounds: bounds)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
//
|
||||
// Toggle.swift
|
||||
// ToggleView.swift
|
||||
// VDS
|
||||
//
|
||||
// Created by Matt Bruce on 7/22/22.
|
||||
// Created by Matt Bruce on 7/19/23.
|
||||
//
|
||||
|
||||
import Foundation
|
||||
@ -17,23 +17,9 @@ import Combine
|
||||
Container: The background of the toggle control.
|
||||
Knob: The circular indicator that slides on the container.
|
||||
*/
|
||||
@objc(VDSToggleItem)
|
||||
open class ToggleItem: Control, Changeable {
|
||||
//--------------------------------------------------
|
||||
// MARK: - Enums
|
||||
//--------------------------------------------------
|
||||
public enum TextSize: String, CaseIterable {
|
||||
case small, large
|
||||
}
|
||||
|
||||
public enum TextWeight: String, CaseIterable {
|
||||
case regular, bold
|
||||
}
|
||||
|
||||
public enum TextPosition: String, CaseIterable {
|
||||
case left, right
|
||||
}
|
||||
|
||||
@objc(VDSToggleView)
|
||||
open class ToggleView: Control, Changeable {
|
||||
|
||||
//--------------------------------------------------
|
||||
// MARK: - Initializers
|
||||
//--------------------------------------------------
|
||||
@ -48,32 +34,23 @@ open class ToggleItem: Control, Changeable {
|
||||
public required init?(coder: NSCoder) {
|
||||
super.init(coder: coder)
|
||||
}
|
||||
|
||||
//--------------------------------------------------
|
||||
// MARK: - Private Properties
|
||||
//--------------------------------------------------
|
||||
private var stackView = UIStackView().with {
|
||||
$0.isUserInteractionEnabled = false
|
||||
$0.translatesAutoresizingMaskIntoConstraints = false
|
||||
$0.axis = .horizontal
|
||||
$0.distribution = .fill
|
||||
}
|
||||
|
||||
|
||||
private var toggleView = UIView().with {
|
||||
$0.translatesAutoresizingMaskIntoConstraints = false
|
||||
$0.isUserInteractionEnabled = false
|
||||
}
|
||||
|
||||
private var knobView = UIView().with {
|
||||
$0.translatesAutoresizingMaskIntoConstraints = false
|
||||
$0.backgroundColor = .white
|
||||
$0.isUserInteractionEnabled = false
|
||||
}
|
||||
|
||||
//--------------------------------------------------
|
||||
// MARK: - Configuration Properties
|
||||
//--------------------------------------------------
|
||||
//--------------------------------------------------
|
||||
// Sizes are from InVision design specs.
|
||||
public let toggleSize = CGSize(width: 52, height: 28)
|
||||
public let toggleContainerSize = CGSize(width: 52, height: 44)
|
||||
public let knobSize = CGSize(width: 24, height: 24)
|
||||
|
||||
private var toggleColorConfiguration = ControlColorConfiguration().with {
|
||||
@ -89,41 +66,11 @@ open class ToggleItem: Control, Changeable {
|
||||
$0.setSurfaceColors(VDSColor.paletteGray95, VDSColor.paletteGray44, forState: [.selected, .disabled])
|
||||
$0.setSurfaceColors(VDSColor.elementsPrimaryOndark, VDSColor.elementsPrimaryOndark, forState: .selected)
|
||||
}
|
||||
|
||||
private var textStyle: TextStyle {
|
||||
if textSize == .small {
|
||||
if textWeight == .bold {
|
||||
return .boldBodySmall
|
||||
} else {
|
||||
return .bodySmall
|
||||
}
|
||||
} else {
|
||||
if textWeight == .bold {
|
||||
return .boldBodyLarge
|
||||
} else {
|
||||
return .bodyLarge
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//--------------------------------------------------
|
||||
// MARK: - Public Properties
|
||||
//--------------------------------------------------
|
||||
public var onChangeSubscriber: AnyCancellable? {
|
||||
willSet {
|
||||
if let onChangeSubscriber {
|
||||
onChangeSubscriber.cancel()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
open var label = Label().with {
|
||||
$0.setContentCompressionResistancePriority(.required, for: .vertical)
|
||||
$0.textColorConfiguration = ViewColorConfiguration().with {
|
||||
$0.setSurfaceColors(VDSColor.elementsSecondaryOnlight, VDSColor.elementsSecondaryOndark, forDisabled: true)
|
||||
$0.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark, forDisabled: false)
|
||||
}.eraseToAnyColorable()
|
||||
}
|
||||
public var onChangeSubscriber: AnyCancellable?
|
||||
|
||||
open var isOn: Bool {
|
||||
get { isSelected }
|
||||
@ -137,18 +84,6 @@ open class ToggleItem: Control, Changeable {
|
||||
|
||||
open var isAnimated: Bool = true { didSet { setNeedsUpdate() }}
|
||||
|
||||
open var showText: Bool = false { didSet { setNeedsUpdate() }}
|
||||
|
||||
open var onText: String = "On" { didSet { setNeedsUpdate() }}
|
||||
|
||||
open var offText: String = "Off" { didSet { setNeedsUpdate() }}
|
||||
|
||||
open var textSize: TextSize = .small { didSet { setNeedsUpdate() }}
|
||||
|
||||
open var textWeight: TextWeight = .regular { didSet { setNeedsUpdate() }}
|
||||
|
||||
open var textPosition: TextPosition = .left { didSet { setNeedsUpdate() }}
|
||||
|
||||
open var inputId: String? { didSet { setNeedsUpdate() }}
|
||||
|
||||
open var value: AnyHashable? { didSet { setNeedsUpdate() }}
|
||||
@ -158,8 +93,68 @@ open class ToggleItem: Control, Changeable {
|
||||
//--------------------------------------------------
|
||||
private var knobLeadingConstraint: NSLayoutConstraint?
|
||||
private var knobTrailingConstraint: NSLayoutConstraint?
|
||||
|
||||
//--------------------------------------------------
|
||||
// MARK: - Lifecycle
|
||||
//--------------------------------------------------
|
||||
open override func initialSetup() {
|
||||
super.initialSetup()
|
||||
onClick = { control in
|
||||
control.toggle()
|
||||
}
|
||||
}
|
||||
|
||||
//functions
|
||||
open override func setup() {
|
||||
super.setup()
|
||||
|
||||
isAccessibilityElement = true
|
||||
accessibilityTraits = .button
|
||||
|
||||
addSubview(toggleView)
|
||||
toggleView.addSubview(knobView)
|
||||
|
||||
NSLayoutConstraint.activate([
|
||||
toggleView.widthAnchor.constraint(equalToConstant: toggleSize.width),
|
||||
toggleView.heightAnchor.constraint(equalToConstant: toggleSize.height),
|
||||
toggleView.centerYAnchor.constraint(equalTo: centerYAnchor),
|
||||
knobView.heightAnchor.constraint(equalToConstant: knobSize.height),
|
||||
knobView.widthAnchor.constraint(equalToConstant: knobSize.width),
|
||||
knobView.centerYAnchor.constraint(equalTo: toggleView.centerYAnchor),
|
||||
knobView.topAnchor.constraint(greaterThanOrEqualTo: toggleView.topAnchor)
|
||||
])
|
||||
|
||||
// Set cornerRadius
|
||||
knobView.layer.cornerRadius = knobSize.height / 2.0
|
||||
toggleView.layer.cornerRadius = toggleSize.height / 2.0
|
||||
|
||||
// Set content hugging priority
|
||||
toggleView.setContentHuggingPriority(.required, for: .horizontal)
|
||||
toggleView.setContentHuggingPriority(.required, for: .vertical)
|
||||
setContentHuggingPriority(.required, for: .horizontal)
|
||||
setContentHuggingPriority(.required, for: .vertical)
|
||||
}
|
||||
|
||||
open override var intrinsicContentSize: CGSize { toggleSize }
|
||||
|
||||
open override func reset() {
|
||||
super.reset()
|
||||
shouldUpdateView = false
|
||||
isOn = false
|
||||
isAnimated = true
|
||||
inputId = nil
|
||||
value = nil
|
||||
toggleView.backgroundColor = toggleColorConfiguration.getColor(self)
|
||||
knobView.backgroundColor = knobColorConfiguration.getColor(self)
|
||||
shouldUpdateView = true
|
||||
setNeedsUpdate()
|
||||
}
|
||||
|
||||
/// This will toggle the state of the Toggle and execute the actionBlock if provided.
|
||||
open func toggle() {
|
||||
isOn.toggle()
|
||||
sendActions(for: .valueChanged)
|
||||
}
|
||||
|
||||
//--------------------------------------------------
|
||||
// MARK: - Toggle
|
||||
//--------------------------------------------------
|
||||
@ -197,121 +192,17 @@ open class ToggleItem: Control, Changeable {
|
||||
}, completion: nil)
|
||||
}
|
||||
}
|
||||
|
||||
//--------------------------------------------------
|
||||
// MARK: - Labels
|
||||
//--------------------------------------------------
|
||||
private func updateLabel() {
|
||||
|
||||
stackView.spacing = showText ? VDSLayout.Spacing.space3X.value : 0
|
||||
|
||||
if stackView.subviews.contains(label) {
|
||||
label.removeFromSuperview()
|
||||
}
|
||||
|
||||
if showText {
|
||||
label.textPosition = textPosition == .left ? .left : .right
|
||||
label.textStyle = textStyle
|
||||
label.text = isOn ? onText : offText
|
||||
label.surface = surface
|
||||
label.disabled = disabled
|
||||
|
||||
if textPosition == .left {
|
||||
stackView.insertArrangedSubview(label, at: 0)
|
||||
} else {
|
||||
stackView.addArrangedSubview(label)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//--------------------------------------------------
|
||||
// MARK: - Lifecycle
|
||||
// MARK: - Overrides
|
||||
//--------------------------------------------------
|
||||
open override func initialSetup() {
|
||||
super.initialSetup()
|
||||
onClick = { control in
|
||||
control.toggle()
|
||||
}
|
||||
}
|
||||
|
||||
open override func setup() {
|
||||
super.setup()
|
||||
|
||||
isAccessibilityElement = true
|
||||
accessibilityTraits = .button
|
||||
addSubview(stackView)
|
||||
|
||||
//set the h/w to container size, since the width "can" grow if text is there
|
||||
//allow this to be greaterThanEqualTo
|
||||
heightAnchor.constraint(equalToConstant: toggleContainerSize.height).isActive = true
|
||||
widthAnchor.constraint(greaterThanOrEqualToConstant: toggleContainerSize.width).isActive = true
|
||||
|
||||
//create the container for the toggle/knob
|
||||
let toggleContainerView = UIView()
|
||||
toggleContainerView.translatesAutoresizingMaskIntoConstraints = false
|
||||
toggleContainerView.backgroundColor = .clear
|
||||
toggleContainerView.widthAnchor.constraint(equalToConstant: toggleContainerSize.width).isActive = true
|
||||
toggleContainerView.heightAnchor.constraint(equalToConstant: toggleContainerSize.height).isActive = true
|
||||
|
||||
//adding views
|
||||
toggleContainerView.addSubview(toggleView)
|
||||
toggleView.addSubview(knobView)
|
||||
stackView.addArrangedSubview(toggleContainerView)
|
||||
|
||||
//adding constraints
|
||||
toggleView.heightAnchor.constraint(equalToConstant: toggleSize.height).isActive = true
|
||||
toggleView.widthAnchor.constraint(equalToConstant: toggleSize.width).isActive = true
|
||||
toggleView.layer.cornerRadius = toggleSize.height / 2.0
|
||||
toggleView.bottomAnchor.constraint(greaterThanOrEqualTo: knobView.bottomAnchor).isActive = true
|
||||
toggleView.centerXAnchor.constraint(equalTo: toggleContainerView.centerXAnchor).isActive = true
|
||||
toggleView.centerYAnchor.constraint(equalTo: toggleContainerView.centerYAnchor).isActive = true
|
||||
|
||||
knobView.layer.cornerRadius = knobSize.height / 2.0
|
||||
knobView.heightAnchor.constraint(equalToConstant: knobSize.height).isActive = true
|
||||
knobView.widthAnchor.constraint(equalToConstant: knobSize.width).isActive = true
|
||||
knobView.centerYAnchor.constraint(equalTo: toggleView.centerYAnchor).isActive = true
|
||||
knobView.topAnchor.constraint(greaterThanOrEqualTo: toggleView.topAnchor).isActive = true
|
||||
|
||||
//pin stackview to edges
|
||||
stackView.pinToSuperView()
|
||||
}
|
||||
|
||||
open override func reset() {
|
||||
super.reset()
|
||||
shouldUpdateView = false
|
||||
label.reset()
|
||||
isOn = false
|
||||
isAnimated = true
|
||||
showText = false
|
||||
onText = "On"
|
||||
offText = "Off"
|
||||
textSize = .small
|
||||
textWeight = .regular
|
||||
textPosition = .left
|
||||
inputId = nil
|
||||
value = nil
|
||||
toggleView.backgroundColor = toggleColorConfiguration.getColor(self)
|
||||
knobView.backgroundColor = knobColorConfiguration.getColor(self)
|
||||
shouldUpdateView = true
|
||||
setNeedsUpdate()
|
||||
}
|
||||
|
||||
/// This will toggle the state of the Toggle and execute the actionBlock if provided.
|
||||
open func toggle() {
|
||||
isOn.toggle()
|
||||
sendActions(for: .valueChanged)
|
||||
}
|
||||
|
||||
//--------------------------------------------------
|
||||
// MARK: - State
|
||||
//--------------------------------------------------
|
||||
open override func updateView() {
|
||||
updateLabel()
|
||||
updateToggle()
|
||||
updateAccessibilityLabel()
|
||||
}
|
||||
|
||||
open override func updateAccessibilityLabel() {
|
||||
accessibilityLabel = "Toggle"
|
||||
accessibilityValue = isSelected ? "1" : "0"
|
||||
if !accessibilityTraits.contains(.selected) && isSelected {
|
||||
accessibilityTraits.insert(.selected)
|
||||
@ -324,6 +215,14 @@ open class ToggleItem: Control, Changeable {
|
||||
} else if accessibilityTraits.contains(.notEnabled) && !isEnabled{
|
||||
accessibilityTraits.remove(.notEnabled)
|
||||
}
|
||||
setAccessibilityLabel(for: [label])
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: AppleGuidlinesTouchable
|
||||
extension ToggleView: AppleGuidlinesTouchable {
|
||||
|
||||
override open func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
|
||||
Self.acceptablyOutsideBounds(point: point, bounds: bounds)
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user