// // Checkbox.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. Container: The background of the checkbox control. Knob: The circular indicator that slides on the container. */ public class Checkbox: CheckboxBase{} open class CheckboxBase: Control, Changable { //-------------------------------------------------- // MARK: - Private Properties //-------------------------------------------------- private var mainStackView: UIStackView = { let stackView = UIStackView() stackView.translatesAutoresizingMaskIntoConstraints = false stackView.alignment = .top stackView.axis = .vertical return stackView }() private var checkboxStackView: UIStackView = { let stackView = UIStackView() stackView.translatesAutoresizingMaskIntoConstraints = false stackView.alignment = .top stackView.axis = .horizontal return stackView }() private var checkboxLabelStackView: 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 checkboxView: UIView = { let view = UIView() view.translatesAutoresizingMaskIntoConstraints = false return view }() //-------------------------------------------------- // 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 //-------------------------------------------------- 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 checkboxHeightConstraint: NSLayoutConstraint? private var checkboxWidthConstraint: NSLayoutConstraint? //functions //-------------------------------------------------- // MARK: - Lifecycle //-------------------------------------------------- open override func setup() { super.setup() self.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(Checkbox.toggleAndAction))) isAccessibilityElement = true accessibilityTraits = .button addSubview(mainStackView) mainStackView.addArrangedSubview(checkboxStackView) mainStackView.addArrangedSubview(errorLabel) checkboxStackView.addArrangedSubview(checkboxView) checkboxStackView.addArrangedSubview(checkboxLabelStackView) checkboxLabelStackView.addArrangedSubview(primaryLabel) checkboxLabelStackView.addArrangedSubview(secondaryLabel) checkboxHeightConstraint = checkboxView.heightAnchor.constraint(equalToConstant: checkboxSize.height) checkboxHeightConstraint?.isActive = true checkboxWidthConstraint = checkboxView.widthAnchor.constraint(equalToConstant: checkboxSize.width) checkboxWidthConstraint?.isActive = true updateCheckbox(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 } checkboxStackView.spacing = 12 checkboxLabelStackView.spacing = 4 checkboxLabelStackView.isHidden = false } else { checkboxStackView.spacing = 0 checkboxLabelStackView.spacing = 0 checkboxLabelStackView.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() updateCheckbox(model) setAccessibilityLabel() onChange = nil } //-------------------------------------------------- // MARK: - Checkbox View //-------------------------------------------------- /// Manages the appearance of the checkbox. private var shapeLayer: CAShapeLayer? private var checkboxBackgroundColor: CheckboxErrorColorHelper = { let helper = CheckboxErrorColorHelper() helper.disabled.light.trueColor = VDSColor.interactiveDisabledOnlight helper.disabled.dark.trueColor = VDSColor.interactiveDisabledOndark helper.error.light.trueColor = VDSColor.elementsPrimaryOnlight helper.error.light.falseColor = VDSColor.feedbackErrorBackgroundOnlight helper.error.dark.trueColor = VDSColor.elementsPrimaryOndark helper.error.dark.falseColor = VDSColor.feedbackErrorBackgroundOndark helper.enabled.light.trueColor = VDSColor.elementsPrimaryOnlight helper.enabled.dark.trueColor = VDSColor.elementsPrimaryOndark return helper }() private var checkboxBorderColor: CheckboxErrorColorHelper = { let helper = CheckboxErrorColorHelper() helper.disabled.light.trueColor = VDSColor.interactiveDisabledOnlight helper.disabled.light.falseColor = VDSColor.interactiveDisabledOnlight helper.disabled.dark.trueColor = VDSColor.interactiveDisabledOndark helper.disabled.dark.falseColor = VDSColor.interactiveDisabledOndark helper.error.light.trueColor = VDSColor.elementsPrimaryOnlight helper.error.light.falseColor = VDSColor.feedbackErrorOnlight helper.error.dark.trueColor = VDSColor.elementsPrimaryOndark helper.error.dark.falseColor = VDSColor.feedbackErrorOndark helper.enabled.light.trueColor = VDSColor.elementsPrimaryOnlight helper.enabled.light.falseColor = VDSFormControlsColor.borderOnlight helper.enabled.dark.trueColor = VDSColor.elementsPrimaryOndark helper.enabled.dark.falseColor = VDSFormControlsColor.borderOndark return helper }() private var checkboxCheckColor: BinarySurfaceColorHelper = { let helper = BinarySurfaceColorHelper() helper.light.trueColor = VDSColor.elementsPrimaryOndark helper.dark.trueColor = VDSColor.elementsPrimaryOnlight return helper }() private func updateCheckbox(_ viewModel: ModelType) { //get the colors let backgroundColor = checkboxBackgroundColor.getColor(viewModel) let borderColor = checkboxBorderColor.getColor(viewModel) let checkColor = checkboxCheckColor.getColor(viewModel) if let shapeLayer = shapeLayer, let sublayers = layer.sublayers, sublayers.contains(shapeLayer) { shapeLayer.removeFromSuperlayer() self.shapeLayer = nil } checkboxView.backgroundColor = backgroundColor checkboxView.layer.borderColor = borderColor.cgColor checkboxView.layer.cornerRadius = 2.0 checkboxView.layer.borderWidth = 1.0 if shapeLayer == nil { let bounds = checkboxView.bounds let length = max(bounds.size.height, bounds.size.width) guard length > 0.0, shapeLayer == nil else { return } //draw the checkmark layer let xInsetLeft = length * 0.25 let yInsetTop = length * 0.3 let innerWidth = length - (xInsetLeft + length * 0.25) // + Right X Inset let innerHeight = length - (yInsetTop + length * 0.35) // + Bottom Y Inset let startPoint = CGPoint(x: xInsetLeft, y: yInsetTop + (innerHeight / 2)) let pivotOffSet = CGPoint(x: xInsetLeft + (innerWidth * 0.33), y: yInsetTop + innerHeight) let endOffset = CGPoint(x: xInsetLeft + innerWidth, y: yInsetTop) let bezierPath = UIBezierPath() bezierPath.move(to: startPoint) bezierPath.addLine(to: pivotOffSet) bezierPath.addLine(to: endOffset) let shapeLayer = CAShapeLayer() self.shapeLayer = shapeLayer shapeLayer.frame = bounds layer.addSublayer(shapeLayer) shapeLayer.strokeColor = checkColor.cgColor shapeLayer.fillColor = UIColor.clear.cgColor shapeLayer.path = bezierPath.cgPath shapeLayer.lineJoin = .miter shapeLayer.lineWidth = 2 CATransaction.withDisabledAnimations { shapeLayer.strokeEnd = model.on ? 1 : 0 } } } //-------------------------------------------------- // 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 checkbox the state of the Checkbox 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, 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) updateCheckbox(viewModel) setAccessibilityHint(enabled) setAccessibilityValue(viewModel.on) setAccessibilityLabel(viewModel.on) isUserInteractionEnabled = !viewModel.disabled setNeedsLayout() layoutIfNeeded() } //-------------------------------------------------- // MARK: - Color Class Helpers //-------------------------------------------------- private class CheckboxErrorColorHelper: BinaryModelColorHelper { public let error = BinarySurfaceColorHelper() 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) } } } }