added entry field colors

Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
This commit is contained in:
Matt Bruce 2022-10-04 12:44:42 -05:00
parent 61493d382d
commit e2573492fa
2 changed files with 88 additions and 29 deletions

View File

@ -8,10 +8,11 @@
import Foundation
import UIKit
import VDSColorTokens
import VDSFormControlsTokens
import Combine
open class EntryField<ModelType: EntryFieldModel>: Control<ModelType> {
//--------------------------------------------------
// MARK: - Private Properties
//--------------------------------------------------
@ -42,7 +43,7 @@ open class EntryField<ModelType: EntryFieldModel>: Control<ModelType> {
$0.translatesAutoresizingMaskIntoConstraints = false
}
}()
//--------------------------------------------------
// MARK: - Configuration Properties
//--------------------------------------------------
@ -62,25 +63,57 @@ open class EntryField<ModelType: EntryFieldModel>: Control<ModelType> {
$0.enabled.lightColor = VDSColor.elementsSecondaryOnlight
$0.enabled.darkColor = VDSColor.elementsSecondaryOndark
}
internal var backgroundColorConfiguration: EntryFieldColorConfiguration = {
return EntryFieldColorConfiguration().with {
$0.enabled.lightColor = VDSFormControlsColor.backgroundOnlight
$0.enabled.darkColor = VDSFormControlsColor.backgroundOndark
$0.disabled.lightColor = VDSFormControlsColor.backgroundOnlight
$0.disabled.darkColor = VDSFormControlsColor.backgroundOndark
//error/success doesn't care enabled/disable
$0.error.lightColor = VDSColor.feedbackErrorBackgroundOnlight
$0.error.darkColor = VDSColor.feedbackErrorBackgroundOndark
$0.success.lightColor = VDSColor.feedbackSuccessBackgroundOnlight
$0.success.darkColor = VDSColor.feedbackSuccessBackgroundOndark
}
}()
internal var borderColorConfiguration: EntryFieldColorConfiguration = {
return EntryFieldColorConfiguration().with {
$0.enabled.lightColor = VDSFormControlsColor.borderOnlight
$0.enabled.darkColor = VDSFormControlsColor.borderOnlight
$0.disabled.lightColor = VDSColor.interactiveDisabledOnlight
$0.disabled.darkColor = VDSColor.interactiveDisabledOndark
//error/success doesn't care enabled/disable
$0.error.lightColor = VDSColor.feedbackErrorOnlight
$0.error.darkColor = VDSColor.feedbackErrorOndark
$0.success.lightColor = VDSColor.feedbackSuccessOnlight
$0.success.darkColor = VDSColor.feedbackSuccessOndark
}
}()
//--------------------------------------------------
// MARK: - Public Properties
//--------------------------------------------------
//--------------------------------------------------
@Proxy(\.model.labelText)
open var labelText: String?
@Proxy(\.model.helperText)
open var helperText: String?
@Proxy(\.model.showError)
open var showError: Bool
@Proxy(\.model.errorText)
open var errorText: String?
@Proxy(\.model.showSuccess)
open var showSuccess: Bool
@Proxy(\.model.successText)
open var successText: String?
@ -92,39 +125,39 @@ open class EntryField<ModelType: EntryFieldModel>: Control<ModelType> {
@Proxy(\.model.tooltipContent)
open var tooltipContent: String?
@Proxy(\.model.transparentBackground)
open var transparentBackground: Bool
@Proxy(\.model.width)
open var width: CGFloat?
@Proxy(\.model.maxLength)
open var maxLength: Int?
@Proxy(\.model.inputId)
open var inputId: String?
@Proxy(\.model.value)
open var value: AnyHashable?
@Proxy(\.model.defaultVaue)
open var defaultValue: AnyHashable?
@Proxy(\.model.required)
open var required: Bool
@Proxy(\.model.readOnly)
open var readOnly: Bool
//--------------------------------------------------
// MARK: - Constraints
//--------------------------------------------------
internal var heightConstraint: NSLayoutConstraint?
internal var widthConstraint: NSLayoutConstraint?
internal var minWidthConstraint: NSLayoutConstraint?
//--------------------------------------------------
// MARK: - Lifecycle
//--------------------------------------------------
@ -139,7 +172,7 @@ open class EntryField<ModelType: EntryFieldModel>: Control<ModelType> {
isAccessibilityElement = true
accessibilityTraits = .button
addSubview(stackView)
//create the wrapping view
heightConstraint = containerView.heightAnchor.constraint(greaterThanOrEqualToConstant: containerSize.height)
heightConstraint?.isActive = true
@ -148,7 +181,7 @@ open class EntryField<ModelType: EntryFieldModel>: Control<ModelType> {
minWidthConstraint = containerView.widthAnchor.constraint(greaterThanOrEqualToConstant: 0)
minWidthConstraint?.isActive = true
containerStackView.addArrangedSubview(containerView)
stackView.addArrangedSubview(titleLabel)
stackView.addArrangedSubview(containerStackView)
@ -164,7 +197,7 @@ open class EntryField<ModelType: EntryFieldModel>: Control<ModelType> {
stackView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
stackView.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
stackView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
titleLabel.textColorConfiguration = primaryColorConfig
successLabel.textColorConfiguration = primaryColorConfig
errorLabel.textColorConfiguration = primaryColorConfig
@ -180,11 +213,11 @@ open class EntryField<ModelType: EntryFieldModel>: Control<ModelType> {
// MARK: - State
//--------------------------------------------------
open override func updateView(viewModel: ModelType) {
//update the title model if the required flag is false
var titleLabelModel = viewModel.labelModel
.addOptional(required: viewModel.required, colorConfiguration: secondaryColorConfig)
.addOptional(required: viewModel.required, colorConfiguration: secondaryColorConfig)
//tooltip action
if let toolTipTitle = viewModel.tooltipTitle, let toolTipContent = viewModel.tooltipContent {
let toolTipAction = PassthroughSubject<Void, Never>()
@ -195,7 +228,7 @@ open class EntryField<ModelType: EntryFieldModel>: Control<ModelType> {
}
titleLabel.set(with: titleLabelModel)
//show error or success
if viewModel.showError, let errorLabelModel = viewModel.errorLabelModel {
errorLabel.set(with: errorLabelModel)
@ -225,12 +258,36 @@ open class EntryField<ModelType: EntryFieldModel>: Control<ModelType> {
} else {
helperLabel.isHidden = true
}
setAccessibilityHint(!viewModel.disabled)
backgroundColor = viewModel.surface.color
setNeedsLayout()
layoutIfNeeded()
}
//--------------------------------------------------
// MARK: - Color Class Configurations
//--------------------------------------------------
internal class EntryFieldColorConfiguration: DisabledSurfaceColorConfiguration<ModelType> {
public let error = SurfaceColorConfiguration<ModelType>()
public let success = SurfaceColorConfiguration<ModelType>()
override func getColor(_ viewModel: ModelType) -> UIColor {
//only show error is enabled and showError == true
let showErrorColor = !viewModel.disabled && viewModel.showError
let showSuccessColor = !viewModel.disabled && viewModel.showSuccess
if showErrorColor {
return error.getColor(viewModel)
} else if showSuccessColor {
return success.getColor(viewModel)
} else {
return super.getColor(viewModel)
}
}
}
}
extension DefaultLabelModel {

View File

@ -27,8 +27,10 @@ open class TextEntryFieldBase<ModelType:TextEntryFieldModel>: EntryField<ModelTy
//--------------------------------------------------
open override func updateView(viewModel: ModelType) {
super.updateView(viewModel: viewModel)
containerView.backgroundColor = .red
containerView.backgroundColor = backgroundColorConfiguration.getColor(viewModel)
containerView.layer.borderColor = borderColorConfiguration.getColor(viewModel).cgColor
containerView.layer.borderWidth = 1
containerView.layer.cornerRadius = 4
//set the width constraints
if let width = viewModel.width, width > viewModel.type.width {
widthConstraint?.constant = width