added entry field colors
Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
This commit is contained in:
parent
61493d382d
commit
e2573492fa
@ -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 {
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user