refactored to similar naming conventions for existing components
Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
This commit is contained in:
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.
|
/// 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
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user