// // 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. */ @objcMembers public class VDSCheckbox: VDSCheckboxBase{} @objcMembers open class VDSCheckboxBase: VDSControl, 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: VDSLabel = { let label = VDSLabel() label.translatesAutoresizingMaskIntoConstraints = false return label }() private var secondaryLabel: VDSLabel = { let label = VDSLabel() label.translatesAutoresizingMaskIntoConstraints = false return label }() private var errorLabel: VDSLabel = { let label = VDSLabel() 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 //-------------------------------------------------- public override func updateView(_ size: CGFloat) { super.updateView(size) checkboxHeightConstraint?.constant = checkboxSize.height checkboxWidthConstraint?.constant = checkboxSize.width updateCheckbox(viewModel: model) } public override func setupView() { super.setupView() self.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(VDSCheckbox.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(viewModel: 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 ensureLabel(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(viewModel: model) setAccessibilityLabel() onChange = nil } //-------------------------------------------------- // MARK: - Checkbox View //-------------------------------------------------- /// 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) let borderColor = getCheckboxBorderColor(viewModel: viewModel) let checkColor = getCheckboxCheckColor(viewModel: 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. 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 ensureLabel(viewModel: viewModel) updateCheckbox(viewModel: viewModel) setAccessibilityHint(enabled) setAccessibilityValue(viewModel.on) setAccessibilityLabel(viewModel.on) isUserInteractionEnabled = !viewModel.disabled setNeedsLayout() layoutIfNeeded() } }