refactored to similar naming conventions for existing components
Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
This commit is contained in:
Matt Bruce
parent
52eaed7be6
commit
fc6c398b3f
@ -35,22 +35,19 @@ open class DropdownSelect: Control {
|
||||
//--------------------------------------------------
|
||||
|
||||
/// Boolean value that determines if component should show the error state/error message.
|
||||
open var error: Bool = false { didSet { setNeedsUpdate() }}
|
||||
open var showError: Bool = false { didSet { setNeedsUpdate() }}
|
||||
|
||||
/// Message displayed when there is an error.
|
||||
open var errorText: String? { didSet { setNeedsUpdate() }}
|
||||
|
||||
/// If provided, will be used as text for the helper label.
|
||||
open var helperText: String? { didSet { setNeedsUpdate() }}
|
||||
|
||||
/// Used if the component is enabled or not.
|
||||
open override var isEnabled: Bool { didSet { setNeedsUpdate() }}
|
||||
|
||||
/// If true, the label will be displayed inside the dropdown container. Otherwise, the label will be above the dropdown container like a normal text input.
|
||||
open var inlineLabel: Bool = false { didSet { setNeedsUpdate() }}
|
||||
|
||||
/// If true, the label will be displayed inside the dropdown containerView. Otherwise, the label will be above the dropdown containerView like a normal text input.
|
||||
open var showInlineLabel: Bool = false { didSet { setNeedsUpdate() }}
|
||||
|
||||
/// If provided, will be used as context for the label on the input field.
|
||||
open var label: String? { didSet { setNeedsUpdate() }}
|
||||
open var labelText: String? { didSet { setNeedsUpdate() }}
|
||||
|
||||
/// Not allowed the user interaction to select/change input if it is true.
|
||||
open var readOnly: Bool = false { didSet { setNeedsUpdate() }}
|
||||
@ -79,7 +76,7 @@ open class DropdownSelect: Control {
|
||||
open override var state: UIControl.State {
|
||||
get {
|
||||
var state = super.state
|
||||
if error {
|
||||
if showError {
|
||||
state.insert(.error)
|
||||
}
|
||||
return state
|
||||
@ -97,13 +94,13 @@ open class DropdownSelect: Control {
|
||||
$0.axis = .vertical
|
||||
}
|
||||
|
||||
private var eyebrowLabel = TrailingTooltipLabel().with {
|
||||
private var titleLabel = Label().with {
|
||||
$0.setContentCompressionResistancePriority(.required, for: .vertical)
|
||||
$0.labelTextAlignment = .left
|
||||
$0.labelTextStyle = .bodySmall
|
||||
$0.textAlignment = .left
|
||||
$0.textStyle = .bodySmall
|
||||
}
|
||||
|
||||
var container: UIView = UIView().with {
|
||||
var containerView: UIView = UIView().with {
|
||||
$0.translatesAutoresizingMaskIntoConstraints = false
|
||||
}
|
||||
|
||||
@ -160,7 +157,7 @@ open class DropdownSelect: Control {
|
||||
//--------------------------------------------------
|
||||
// MARK: - Configuration Properties
|
||||
//--------------------------------------------------
|
||||
internal var containerSize: CGSize { CGSize(width: inlineLabel ? minWidthDefault : minWidthInlineLabel, height: 44) }
|
||||
internal var containerSize: CGSize { CGSize(width: showInlineLabel ? minWidthInlineLabel : width ?? minWidthDefault, height: 44) }
|
||||
|
||||
internal let primaryColorConfig = ViewColorConfiguration().with {
|
||||
$0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forDisabled: true)
|
||||
@ -215,8 +212,8 @@ open class DropdownSelect: Control {
|
||||
stackView.pinToSuperView()
|
||||
stackView.heightAnchor.constraint(greaterThanOrEqualToConstant: containerSize.height).isActive = true
|
||||
|
||||
// container stack
|
||||
container.addSubview(containerStack)
|
||||
// containerView stack
|
||||
containerView.addSubview(containerStack)
|
||||
let spacing = VDSFormControls.spaceInset
|
||||
containerStack.pinToSuperView(.init(top: spacing, left: spacing, bottom: spacing, right: spacing))
|
||||
|
||||
@ -233,17 +230,17 @@ open class DropdownSelect: Control {
|
||||
inlineWidthConstraint?.isActive = true
|
||||
|
||||
// component stackview subviews
|
||||
stackView.addArrangedSubview(eyebrowLabel)
|
||||
stackView.addArrangedSubview(container)
|
||||
stackView.addArrangedSubview(titleLabel)
|
||||
stackView.addArrangedSubview(containerView)
|
||||
stackView.addArrangedSubview(errorLabel)
|
||||
stackView.addArrangedSubview(helperLabel)
|
||||
|
||||
stackView.setCustomSpacing(4, after: eyebrowLabel)
|
||||
stackView.setCustomSpacing(8, after: container)
|
||||
stackView.setCustomSpacing(4, after: titleLabel)
|
||||
stackView.setCustomSpacing(8, after: containerView)
|
||||
stackView.setCustomSpacing(8, after: errorLabel)
|
||||
|
||||
// setting color config
|
||||
eyebrowLabel.textColorConfiguration = primaryColorConfig.eraseToAnyColorable()
|
||||
titleLabel.textColorConfiguration = primaryColorConfig.eraseToAnyColorable()
|
||||
errorLabel.textColorConfiguration = primaryColorConfig.eraseToAnyColorable()
|
||||
helperLabel.textColorConfiguration = secondaryColorConfig.eraseToAnyColorable()
|
||||
inlineDisplayLabel.textColorConfiguration = primaryColorConfig.eraseToAnyColorable()
|
||||
@ -264,10 +261,10 @@ open class DropdownSelect: Control {
|
||||
/// Used to make changes to the View based off a change events or from local properties.
|
||||
open override func updateView() {
|
||||
|
||||
container.backgroundColor = backgroundColorConfiguration.getColor(self)
|
||||
container.layer.borderWidth = VDSFormControls.widthBorder
|
||||
container.layer.cornerRadius = VDSFormControls.borderradius
|
||||
container.layer.borderColor = readOnly ? readOnlyBorderColorConfiguration.getColor(self).cgColor : (error ? errorBorderColorConfiguration.getColor(self).cgColor : containerBorderColorConfiguration.getColor(self).cgColor)
|
||||
containerView.backgroundColor = backgroundColorConfiguration.getColor(self)
|
||||
containerView.layer.borderWidth = VDSFormControls.widthBorder
|
||||
containerView.layer.cornerRadius = VDSFormControls.borderradius
|
||||
containerView.layer.borderColor = readOnly ? readOnlyBorderColorConfiguration.getColor(self).cgColor : (showError ? errorBorderColorConfiguration.getColor(self).cgColor : containerBorderColorConfiguration.getColor(self).cgColor)
|
||||
dropdownField.isUserInteractionEnabled = readOnly ? false : true
|
||||
stackView.backgroundColor = transparentBackground ? .clear : surface.color
|
||||
|
||||
@ -286,24 +283,24 @@ open class DropdownSelect: Control {
|
||||
open override func reset() {
|
||||
super.reset()
|
||||
|
||||
eyebrowLabel.reset()
|
||||
titleLabel.reset()
|
||||
inlineDisplayLabel.reset()
|
||||
selectedOptionLabel.reset()
|
||||
errorLabel.reset()
|
||||
helperLabel.reset()
|
||||
|
||||
eyebrowLabel.labelTextStyle = .bodySmall
|
||||
titleLabel.textStyle = .bodySmall
|
||||
inlineDisplayLabel.textStyle = .boldBodyLarge
|
||||
selectedOptionLabel.textStyle = .bodyLarge
|
||||
errorLabel.textStyle = .bodySmall
|
||||
helperLabel.textStyle = .bodySmall
|
||||
tooltipModel = nil
|
||||
label = nil
|
||||
labelText = nil
|
||||
errorText = nil
|
||||
error = false
|
||||
showError = false
|
||||
isEnabled = false
|
||||
readOnly = false
|
||||
inlineLabel = false
|
||||
showInlineLabel = false
|
||||
helperText = nil
|
||||
transparentBackground = false
|
||||
required = false
|
||||
@ -319,16 +316,16 @@ open class DropdownSelect: Control {
|
||||
|
||||
//update the local vars for the label since we no long have a model
|
||||
var attributes: [any LabelAttributeModel] = []
|
||||
var updatedLabelText = label
|
||||
var updatedLabelText = labelText
|
||||
|
||||
updatedLabelText = inlineLabel ? "" : updatedLabelText
|
||||
updatedLabelText = showInlineLabel ? "" : updatedLabelText
|
||||
|
||||
if let oldText = updatedLabelText, !required, !oldText.hasSuffix("Optional") {
|
||||
let optionColorAttr = ColorLabelAttribute(location: oldText.count + 2,
|
||||
length: 8,
|
||||
color: secondaryColorConfig.getColor(self))
|
||||
|
||||
updatedLabelText = "\(oldText) Optional"
|
||||
updatedLabelText = showInlineLabel ? "Optional" : "\(oldText) Optional"
|
||||
attributes.append(optionColorAttr)
|
||||
}
|
||||
|
||||
@ -336,11 +333,10 @@ open class DropdownSelect: Control {
|
||||
attributes.append(TooltipLabelAttribute(surface: surface, model: tooltipModel, presenter: self))
|
||||
}
|
||||
|
||||
eyebrowLabel.labelText = updatedLabelText
|
||||
eyebrowLabel.labelAttributes = attributes
|
||||
eyebrowLabel.tooltipModel = tooltipModel
|
||||
eyebrowLabel.surface = surface
|
||||
eyebrowLabel.isEnabled = isEnabled
|
||||
titleLabel.text = updatedLabelText
|
||||
titleLabel.attributes = attributes
|
||||
titleLabel.surface = surface
|
||||
titleLabel.isEnabled = isEnabled
|
||||
}
|
||||
|
||||
open func updateInlineLabel() {
|
||||
@ -348,10 +344,10 @@ open class DropdownSelect: Control {
|
||||
inlineWidthConstraint?.isActive = false
|
||||
|
||||
/// inline label text and selected option text separated by ':'
|
||||
if let label, !label.isEmpty {
|
||||
inlineDisplayLabel.text = inlineLabel ? (label + ":") : ""
|
||||
if let labelText, !labelText.isEmpty {
|
||||
inlineDisplayLabel.text = showInlineLabel ? (labelText + ":") : ""
|
||||
} else {
|
||||
inlineDisplayLabel.text = inlineLabel ? label : ""
|
||||
inlineDisplayLabel.text = showInlineLabel ? labelText : ""
|
||||
}
|
||||
inlineDisplayLabel.surface = surface
|
||||
|
||||
@ -369,7 +365,7 @@ open class DropdownSelect: Control {
|
||||
}
|
||||
|
||||
open func updateErrorLabel() {
|
||||
if error, let errorText {
|
||||
if showError, let errorText {
|
||||
errorLabel.text = errorText
|
||||
errorLabel.surface = surface
|
||||
errorLabel.isEnabled = isEnabled
|
||||
@ -379,7 +375,7 @@ open class DropdownSelect: Control {
|
||||
icon.color = .black
|
||||
icon.surface = surface
|
||||
} else {
|
||||
icon.name = Icon.Name(name: "down-caret")
|
||||
icon.name = .downCaret
|
||||
icon.surface = surface
|
||||
errorLabel.isHidden = true
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user