refactored to similar naming conventions for existing components

Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
This commit is contained in:
Matt Bruce 2024-04-08 10:50:57 -05:00
parent 52eaed7be6
commit fc6c398b3f

View File

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