diff --git a/VDS/Components/DropdownSelect/DropdownSelect.swift b/VDS/Components/DropdownSelect/DropdownSelect.swift index 3b1549df..69f6d92a 100644 --- a/VDS/Components/DropdownSelect/DropdownSelect.swift +++ b/VDS/Components/DropdownSelect/DropdownSelect.swift @@ -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 }