diff --git a/VDS/Components/TextFields/EntryField/EntryField.swift b/VDS/Components/TextFields/EntryField/EntryField.swift index ab9c0a98..3cc7fc4a 100644 --- a/VDS/Components/TextFields/EntryField/EntryField.swift +++ b/VDS/Components/TextFields/EntryField/EntryField.swift @@ -42,7 +42,7 @@ open class EntryField: Control, Accessable { $0.distribution = .fill } }() - + internal var titleLabel = Label().with { $0.setContentCompressionResistancePriority(.required, for: .vertical) $0.attributes = [] @@ -68,13 +68,32 @@ open class EntryField: Control, Accessable { } }() + internal var containerStackView: UIStackView = { + return UIStackView().with { + $0.translatesAutoresizingMaskIntoConstraints = false + $0.axis = .horizontal + $0.distribution = .fillProportionally + $0.alignment = .top + } + }() + + internal var controlContainerView: UIView = { + return UIView().with { + $0.translatesAutoresizingMaskIntoConstraints = false + } + }() + + internal var tooltipView: UIView? + internal var icon: Icon = Icon().with { + $0.size = .small + } //-------------------------------------------------- // MARK: - Configuration Properties //-------------------------------------------------- // Sizes are from InVision design specs. - internal let containerSize = CGSize(width: 45, height: 45) + internal let containerSize = CGSize(width: 45, height: 44) internal let primaryColorConfig = ViewColorConfiguration().with { $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forDisabled: true) @@ -173,8 +192,21 @@ open class EntryField: Control, Accessable { heightConstraint?.isActive = true widthConstraint = containerView.widthAnchor.constraint(equalToConstant: 0) - + + //get the container this is what is color + //border, internal, etc... let container = getContainer() + + //add ContainerStackView + //this is the horizontal stack that contains + //the left, InputContainer, Icons, Buttons + container.addSubview(containerStackView) + containerStackView.pinToSuperView(.init(top: 12, left: 12, bottom: 12, right: 12)) + + //add the view to add input fields + containerStackView.addArrangedSubview(controlContainerView) + containerStackView.addArrangedSubview(icon) + stackView.addArrangedSubview(titleLabel) stackView.addArrangedSubview(container) stackView.addArrangedSubview(errorLabel) @@ -345,7 +377,12 @@ open class EntryField: Control, Accessable { errorLabel.surface = surface errorLabel.disabled = disabled errorLabel.isHidden = false + icon.name = .error + icon.color = .black + icon.surface = surface + icon.isHidden = disabled } else { + icon.isHidden = true errorLabel.isHidden = true } } diff --git a/VDS/Components/TextFields/InputField/InputField.swift b/VDS/Components/TextFields/InputField/InputField.swift index 0b82f53b..d3cb99e0 100644 --- a/VDS/Components/TextFields/InputField/InputField.swift +++ b/VDS/Components/TextFields/InputField/InputField.swift @@ -35,7 +35,7 @@ public class InputField: EntryField { //-------------------------------------------------- // MARK: - Private Properties //-------------------------------------------------- - internal var containerStackView: UIStackView = { + internal var inputFieldStackView: UIStackView = { return UIStackView().with { $0.translatesAutoresizingMaskIntoConstraints = false $0.axis = .horizontal @@ -92,6 +92,17 @@ public class InputField: EntryField { $0.typograpicalStyle = .BodySmall } + private var textField = UITextField().with { + $0.translatesAutoresizingMaskIntoConstraints = false + $0.font = TypographicalStyle.BodyLarge.font + } + + public var textFieldTextColorConfiguration: AnyColorable = ViewColorConfiguration().with { + $0.setSurfaceColors(VDSColor.elementsSecondaryOnlight, VDSColor.elementsSecondaryOndark, forDisabled: true) + $0.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark, forDisabled: false) + }.eraseToAnyColorable() + + internal var minWidthConstraint: NSLayoutConstraint? //-------------------------------------------------- @@ -102,7 +113,11 @@ public class InputField: EntryField { minWidthConstraint = containerView.widthAnchor.constraint(greaterThanOrEqualToConstant: 0) minWidthConstraint?.isActive = true - + + controlContainerView.addSubview(textField) + textField.pinToSuperView() + textField.heightAnchor.constraint(equalToConstant: 20).isActive = true + stackView.addArrangedSubview(successLabel) stackView.setCustomSpacing(8, after: successLabel) @@ -126,8 +141,8 @@ public class InputField: EntryField { } open override func getContainer() -> UIView { - containerStackView.addArrangedSubview(containerView) - return containerStackView + inputFieldStackView.addArrangedSubview(containerView) + return inputFieldStackView } //-------------------------------------------------- @@ -136,6 +151,9 @@ public class InputField: EntryField { open override func updateView() { super.updateView() + textField.isEnabled = isEnabled + textField.textColor = textFieldTextColorConfiguration.getColor(self) + //show error or success if showError, let _ = errorText { successLabel.isHidden = true @@ -146,10 +164,13 @@ public class InputField: EntryField { successLabel.disabled = disabled successLabel.isHidden = false errorLabel.isHidden = true - + icon.name = .checkmarkAlt + icon.color = .black + icon.surface = surface + icon.isHidden = disabled } else { + icon.isHidden = true successLabel.isHidden = true - } //set the width constraints @@ -173,12 +194,12 @@ public class InputField: EntryField { //set the helper label position if helperText != nil { if helperTextPlacement == .right { - containerStackView.spacing = 12 - containerStackView.distribution = .fillEqually - containerStackView.addArrangedSubview(helperLabel) + inputFieldStackView.spacing = 12 + inputFieldStackView.distribution = .fillEqually + inputFieldStackView.addArrangedSubview(helperLabel) } else { - containerStackView.spacing = 0 - containerStackView.distribution = .fill + inputFieldStackView.spacing = 0 + inputFieldStackView.distribution = .fill stackView.addArrangedSubview(helperLabel) } }