diff --git a/VDS.xcodeproj/project.pbxproj b/VDS.xcodeproj/project.pbxproj index ad298104..db7de433 100644 --- a/VDS.xcodeproj/project.pbxproj +++ b/VDS.xcodeproj/project.pbxproj @@ -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 = ""; }; 5F21D7BE28DCEB3D003E7CD6 /* Useable.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Useable.swift; sourceTree = ""; }; 5FC35BE228D51405004EBEAC /* Button.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Button.swift; sourceTree = ""; }; - EA0D1C362A681CCE00E5C127 /* Toggle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Toggle.swift; sourceTree = ""; }; + EA0D1C362A681CCE00E5C127 /* ToggleView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ToggleView.swift; sourceTree = ""; }; EA0FC2C52914222900DF80B4 /* ButtonGroup.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ButtonGroup.swift; sourceTree = ""; }; EA1DA1CA2A2E36DC001C51D2 /* SelectorBase.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SelectorBase.swift; sourceTree = ""; }; EA1F266128B945070033E859 /* RadioSwatch.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = RadioSwatch.swift; sourceTree = ""; }; @@ -168,7 +168,7 @@ EA3361B7288B2AAA0071C351 /* ViewProtocol.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ViewProtocol.swift; sourceTree = ""; }; EA3361BC288B2C760071C351 /* TypeAlias.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TypeAlias.swift; sourceTree = ""; }; EA3361BE288B2EA60071C351 /* Handlerable.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Handlerable.swift; sourceTree = ""; }; - EA3361C228902D960071C351 /* ToggleItem.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ToggleItem.swift; sourceTree = ""; }; + EA3361C228902D960071C351 /* Toggle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Toggle.swift; sourceTree = ""; }; EA3361C8289054C50071C351 /* Surfaceable.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Surfaceable.swift; sourceTree = ""; }; EA3362002891E14C0071C351 /* VerizonNHGeTX-Bold.otf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "VerizonNHGeTX-Bold.otf"; sourceTree = ""; }; EA3362012891E14D0071C351 /* VerizonNHGeDS-Bold.otf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "VerizonNHGeDS-Bold.otf"; sourceTree = ""; }; @@ -434,8 +434,8 @@ EA3361A0288B1E6F0071C351 /* Toggle */ = { isa = PBXGroup; children = ( - EA0D1C362A681CCE00E5C127 /* Toggle.swift */, - EA3361C228902D960071C351 /* ToggleItem.swift */, + EA0D1C362A681CCE00E5C127 /* ToggleView.swift */, + EA3361C228902D960071C351 /* Toggle.swift */, ); path = Toggle; sourceTree = ""; @@ -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 */, diff --git a/VDS/Components/Toggle/Toggle.swift b/VDS/Components/Toggle/Toggle.swift index fe3167ca..ba718598 100644 --- a/VDS/Components/Toggle/Toggle.swift +++ b/VDS/Components/Toggle/Toggle.swift @@ -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) - } - -} diff --git a/VDS/Components/Toggle/ToggleItem.swift b/VDS/Components/Toggle/ToggleView.swift similarity index 56% rename from VDS/Components/Toggle/ToggleItem.swift rename to VDS/Components/Toggle/ToggleView.swift index 05364ebe..917d4676 100644 --- a/VDS/Components/Toggle/ToggleItem.swift +++ b/VDS/Components/Toggle/ToggleView.swift @@ -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) + } + +}