From 3b2d52dcd3778b6ad039320e25aca7764b4af4fa Mon Sep 17 00:00:00 2001 From: Matt Bruce Date: Wed, 3 Aug 2022 10:19:07 -0500 Subject: [PATCH] refactored controls properties to match model cleaned up code Signed-off-by: Matt Bruce --- VDS/Components/Checkbox/VDSCheckbox.swift | 208 ++++++++++++--------- VDS/Components/Toggle/VDSToggle.swift | 184 +++++++++++------- VDS/Components/Toggle/VDSToggleModel.swift | 18 +- 3 files changed, 243 insertions(+), 167 deletions(-) diff --git a/VDS/Components/Checkbox/VDSCheckbox.swift b/VDS/Components/Checkbox/VDSCheckbox.swift index f8a16ac8..7ccb9ef5 100644 --- a/VDS/Components/Checkbox/VDSCheckbox.swift +++ b/VDS/Components/Checkbox/VDSCheckbox.swift @@ -26,60 +26,6 @@ import Combine //-------------------------------------------------- // MARK: - Private Properties //-------------------------------------------------- - private func getCheckboxBackgroundColor(viewModel: ModelType) -> UIColor { - var colors: (on: UIColor, off: UIColor) - if viewModel.disabled { - if viewModel.surface == .light { - colors = (on: VDSColor.interactiveDisabledOnlight, off: .clear) - } else { - colors = (on: VDSColor.interactiveDisabledOndark, off: .clear) - } - } else { - if viewModel.surface == .light { - colors = (on: VDSColor.elementsPrimaryOnlight, off: .clear) - } else { - colors = (on: VDSColor.elementsPrimaryOndark, off: .clear) - } - } - return viewModel.on ? colors.on : colors.off - } - - private func getCheckboxBorderColor(viewModel: ModelType) -> UIColor { - var colors: (on: UIColor, off: UIColor) - if viewModel.disabled { - if viewModel.surface == .light { - colors = (on: VDSColor.interactiveDisabledOnlight, off: VDSColor.interactiveDisabledOnlight) - } else { - colors = (on: VDSColor.interactiveDisabledOndark, off: VDSColor.interactiveDisabledOnlight) - } - } else { - if viewModel.surface == .light { - colors = (on: VDSColor.elementsPrimaryOnlight, off: VDSFormControlsColor.borderOnlight) - } else { - colors = (on: VDSColor.elementsPrimaryOndark, off: VDSFormControlsColor.borderOndark) - } - } - return viewModel.on ? colors.on : colors.off - } - - private func getCheckboxCheckColor(viewModel: ModelType) -> UIColor { - var color: UIColor - if disabled { - if surface == .light { - color = VDSColor.interactiveDisabledOndark - } else { - color = VDSColor.interactiveDisabledOnlight - } - } else { - if surface == .light { - color = VDSColor.elementsPrimaryOndark - } else { - color = VDSColor.elementsPrimaryOnlight - } - } - return viewModel.on ? color : .clear - } - private var mainStackView: UIStackView = { let stackView = UIStackView() stackView.translatesAutoresizingMaskIntoConstraints = false @@ -127,50 +73,77 @@ import Combine return view }() - //-------------------------------------------------- - // MARK: - Public Properties - //-------------------------------------------------- - public var onChange: Blocks.ActionBlock? - //-------------------------------------------------- // MARK: - Static Properties //-------------------------------------------------- // Sizes are from InVision design specs. public let checkboxSize = CGSize(width: 20, height: 20) + + //-------------------------------------------------- + // 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.surface) + open var surface: Surface + + @Proxy(\.model.disabled) + open var disabled: Bool + + @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 //-------------------------------------------------- - @Proxy(\.model.id) - public var id: String? - - @Proxy(\.model.inputId) - public var inputId: String? - - @Proxy(\.model.value) - public var value: AnyHashable? - - @Proxy(\.model.showError) - public var showError: Bool - - @Proxy(\.model.errorText) - public var errorText: String? - - @Proxy(\.model.labelText) - public var labelText: String? - - @Proxy(\.model.childText) - public var childText: String? - - @Proxy(\.model.surface) - public var surface: Surface - - @Proxy(\.model.on) - open var isOn: Bool - - @Proxy(\.model.disabled) - open var disabled: Bool - open override var isEnabled: Bool { get { !model.disabled } set { @@ -306,6 +279,60 @@ import Combine /// Manages the appearance of the checkbox. private var shapeLayer: CAShapeLayer? + private func getCheckboxBackgroundColor(viewModel: ModelType) -> UIColor { + var colors: (on: UIColor, off: UIColor) + if viewModel.disabled { + if viewModel.surface == .light { + colors = (on: VDSColor.interactiveDisabledOnlight, off: .clear) + } else { + colors = (on: VDSColor.interactiveDisabledOndark, off: .clear) + } + } else { + if viewModel.surface == .light { + colors = (on: VDSColor.elementsPrimaryOnlight, off: .clear) + } else { + colors = (on: VDSColor.elementsPrimaryOndark, off: .clear) + } + } + return viewModel.on ? colors.on : colors.off + } + + private func getCheckboxBorderColor(viewModel: ModelType) -> UIColor { + var colors: (on: UIColor, off: UIColor) + if viewModel.disabled { + if viewModel.surface == .light { + colors = (on: VDSColor.interactiveDisabledOnlight, off: VDSColor.interactiveDisabledOnlight) + } else { + colors = (on: VDSColor.interactiveDisabledOndark, off: VDSColor.interactiveDisabledOnlight) + } + } else { + if viewModel.surface == .light { + colors = (on: VDSColor.elementsPrimaryOnlight, off: VDSFormControlsColor.borderOnlight) + } else { + colors = (on: VDSColor.elementsPrimaryOndark, off: VDSFormControlsColor.borderOndark) + } + } + return viewModel.on ? colors.on : colors.off + } + + private func getCheckboxCheckColor(viewModel: ModelType) -> UIColor { + var color: UIColor + if disabled { + if surface == .light { + color = VDSColor.interactiveDisabledOndark + } else { + color = VDSColor.interactiveDisabledOnlight + } + } else { + if surface == .light { + color = VDSColor.elementsPrimaryOndark + } else { + color = VDSColor.elementsPrimaryOnlight + } + } + return viewModel.on ? color : .clear + } + private func updateCheckbox(viewModel: ModelType) { //get the colors let backgroundColor = getCheckboxBackgroundColor(viewModel: viewModel) @@ -388,13 +415,14 @@ import Combine //-------------------------------------------------- // MARK: - UIResponder //-------------------------------------------------- + open override func touchesEnded(_ touches: Set, with event: UIEvent?) { sendActions(for: .touchUpInside) } //-------------------------------------------------- - // MARK: - Animations + // MARK: - State //-------------------------------------------------- /// Follow the SwiftUI View paradigm diff --git a/VDS/Components/Toggle/VDSToggle.swift b/VDS/Components/Toggle/VDSToggle.swift index 066c41fa..7d31c7e2 100644 --- a/VDS/Components/Toggle/VDSToggle.swift +++ b/VDS/Components/Toggle/VDSToggle.swift @@ -25,41 +25,6 @@ import Combine //-------------------------------------------------- // MARK: - Private Properties //-------------------------------------------------- - private func getToggleColor(viewModel: ModelType) -> UIColor { - var colors: (on: UIColor, off: UIColor) - if viewModel.disabled { - if viewModel.surface == .light { - colors = (on: VDSColor.interactiveDisabledOnlight, off: VDSColor.interactiveDisabledOnlight) - } else { - colors = (on: VDSColor.interactiveDisabledOndark, off: VDSColor.interactiveDisabledOndark) - } - } else { - if viewModel.surface == .light { - colors = (on: VDSColor.paletteGreen26, off: VDSColor.elementsSecondaryOnlight) - } else { - colors = (on: VDSColor.paletteGreen34, off: VDSColor.paletteGray44) - } - } - return viewModel.on ? colors.on : colors.off - } - - private func getKnobColor(viewModel: ModelType) -> UIColor { - var colors: (on: UIColor, off: UIColor) - if viewModel.disabled { - if viewModel.surface == .light { - colors = (on: VDSColor.paletteGray95, off: VDSColor.paletteGray95) - } else { - colors = (on: VDSColor.paletteGray44, off: VDSColor.paletteGray44) - } - } else { - if viewModel.surface == .light { - colors = (on: VDSColor.elementsPrimaryOndark, off: VDSColor.elementsPrimaryOndark) - } else { - colors = (on: VDSColor.elementsPrimaryOndark, off: VDSColor.elementsPrimaryOndark) - } - } - return viewModel.on ? colors.on : colors.off - } private var showTextSpacing: CGFloat { showText ? 12 : 0 @@ -92,22 +57,23 @@ import Combine return view }() - - //-------------------------------------------------- - // MARK: - Public Properties - //-------------------------------------------------- - public var onChange: Blocks.ActionBlock? - //-------------------------------------------------- // MARK: - Static Properties //-------------------------------------------------- + // Sizes are from InVision design specs. public let toggleSize = CGSize(width: 52, height: 24) public let knobSize = CGSize(width: 20, height: 20) + + //-------------------------------------------------- + // MARK: - Public Properties + //-------------------------------------------------- - //-------------------------------------------------- - // MARK: - Computed Properties - //-------------------------------------------------- + public var onChange: Blocks.ActionBlock? + + @Proxy(\.model.on) + open var isOn: Bool + @Proxy(\.model.showText) public var showText: Bool { didSet { @@ -116,13 +82,19 @@ import Combine } } } - + @Proxy(\.model.onText) public var onText: String @Proxy(\.model.offText) public var offText: String - + + @Proxy(\.model.fontSize) + public var fontSize: VDSFontSize + + @Proxy(\.model.fontWeight) + public var fontWeight: VDSFontWeight + @Proxy(\.model.textPosition) public var textPosition: VDSTextPosition { didSet { @@ -131,22 +103,50 @@ import Combine } } } - - @Proxy(\.model.fontSize) - public var fontSize: VDSFontSize - - @Proxy(\.model.fontWeight) - public var fontWeight: VDSFontWeight - + + @Proxy(\.model.inputId) + open var inputId: String? + + @Proxy(\.model.value) + open var value: AnyHashable? + @Proxy(\.model.surface) public var surface: Surface - - @Proxy(\.model.on) - open var isOn: Bool @Proxy(\.model.disabled) open var disabled: Bool + @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 { @@ -185,6 +185,61 @@ import Combine private var toggleWidthConstraint: NSLayoutConstraint? //functions + //-------------------------------------------------- + // MARK: - Color + //-------------------------------------------------- + private func getToggleColor(viewModel: ModelType) -> UIColor { + var colors: (on: UIColor, off: UIColor) + if viewModel.disabled { + if viewModel.surface == .light { + colors = (on: VDSColor.interactiveDisabledOnlight, off: VDSColor.interactiveDisabledOnlight) + } else { + colors = (on: VDSColor.interactiveDisabledOndark, off: VDSColor.interactiveDisabledOndark) + } + } else { + if viewModel.surface == .light { + colors = (on: VDSColor.paletteGreen26, off: VDSColor.elementsSecondaryOnlight) + } else { + colors = (on: VDSColor.paletteGreen34, off: VDSColor.paletteGray44) + } + } + return viewModel.on ? colors.on : colors.off + } + + private func getKnobColor(viewModel: ModelType) -> UIColor { + var colors: (on: UIColor, off: UIColor) + if viewModel.disabled { + if viewModel.surface == .light { + colors = (on: VDSColor.paletteGray95, off: VDSColor.paletteGray95) + } else { + colors = (on: VDSColor.paletteGray44, off: VDSColor.paletteGray44) + } + } else { + if viewModel.surface == .light { + colors = (on: VDSColor.elementsPrimaryOndark, off: VDSColor.elementsPrimaryOndark) + } else { + colors = (on: VDSColor.elementsPrimaryOndark, off: VDSColor.elementsPrimaryOndark) + } + } + return viewModel.on ? colors.on : colors.off + } + + //-------------------------------------------------- + // MARK: - Label Helper + //-------------------------------------------------- + func ensureLabel() { + stackView.spacing = showTextSpacing + if showText { + if textPosition == .left { + stackView.insertArrangedSubview(label, at: 0) + } else { + stackView.addArrangedSubview(label) + } + } else if stackView.subviews.contains(label) { + label.removeFromSuperview() + } + } + //-------------------------------------------------- // MARK: - Lifecycle //-------------------------------------------------- @@ -242,19 +297,6 @@ import Combine } - func ensureLabel() { - stackView.spacing = showTextSpacing - if showText { - if textPosition == .left { - stackView.insertArrangedSubview(label, at: 0) - } else { - stackView.addArrangedSubview(label) - } - } else if stackView.subviews.contains(label) { - label.removeFromSuperview() - } - } - public override func reset() { super.reset() toggleView.backgroundColor = getToggleColor(viewModel: model) @@ -328,6 +370,10 @@ import Combine }, completion: nil) } + //-------------------------------------------------- + // MARK: - State + //-------------------------------------------------- + /// Follow the SwiftUI View paradigm /// - Parameter viewModel: state open override func onStateChange(viewModel: ModelType) { diff --git a/VDS/Components/Toggle/VDSToggleModel.swift b/VDS/Components/Toggle/VDSToggleModel.swift index f6da7380..cbed8cf7 100644 --- a/VDS/Components/Toggle/VDSToggleModel.swift +++ b/VDS/Components/Toggle/VDSToggleModel.swift @@ -43,14 +43,22 @@ extension VDSToggleModel { public struct DefaultToggleModel: VDSToggleModel { public var id: String? - public var inputId: String? - public var showText: Bool = false public var on: Bool = false + public var showText: Bool = false public var offText: String = "Off" public var onText: String = "On" + + public var fontCategory: VDSFontCategory = .body + public var fontSize: VDSFontSize = .small + public var fontWeight: VDSFontWeight = .regular + public var textPosition: VDSTextPosition = .left + + public var inputId: String? public var value: AnyHashable? = true + public var surface: Surface = .light public var disabled: Bool = false + public var dataAnalyticsTrack: String? public var dataClickStream: String? public var dataTrack: String? @@ -60,12 +68,6 @@ public struct DefaultToggleModel: VDSToggleModel { public var accessibilityValueDisabled: String? public var accessibilityLabelEnabled: String? public var accessibilityLabelDisabled: String? - - //labelmodel - public var fontCategory: VDSFontCategory = .body - public var fontSize: VDSFontSize = .small - public var fontWeight: VDSFontWeight = .regular - public var textPosition: VDSTextPosition = .left public init() { } }