From f7134b9b8cd0e763b0a79952974e390b0a7fe2f8 Mon Sep 17 00:00:00 2001 From: vasavk Date: Mon, 26 Feb 2024 11:52:06 +0530 Subject: [PATCH] Digital ACT191 story ONEAPP-6682 Character limit, error text, and readonly changes. - show error text when exceeds character limit. - No restriction if character counter does not display. - color changes for character counter label, error text, and readonly. - Showing Character count overflow. --- .../TextFields/EntryFieldBase.swift | 42 +++++++++++---- .../TextFields/TextArea/TextArea.swift | 54 +++++++++++++------ 2 files changed, 72 insertions(+), 24 deletions(-) diff --git a/VDS/Components/TextFields/EntryFieldBase.swift b/VDS/Components/TextFields/EntryFieldBase.swift index 0d6a93e5..dcb16fbf 100644 --- a/VDS/Components/TextFields/EntryFieldBase.swift +++ b/VDS/Components/TextFields/EntryFieldBase.swift @@ -107,11 +107,15 @@ open class EntryFieldBase: Control, Changeable { } internal var borderColorConfiguration = ControlColorConfiguration().with { - $0.setSurfaceColors(VDSFormControlsColor.borderOnlight, VDSFormControlsColor.borderOnlight, forState: .normal) + $0.setSurfaceColors(VDSFormControlsColor.borderOnlight, VDSFormControlsColor.borderOndark, forState: .normal) $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: .disabled) $0.setSurfaceColors(VDSColor.feedbackErrorOnlight, VDSColor.feedbackErrorOndark, forState: .error) } + internal var readOnlyBorderColorConfiguration = ControlColorConfiguration().with { + $0.setSurfaceColors(VDSFormControlsColor.borderReadonlyOnlight, VDSFormControlsColor.borderReadonlyOndark, forState: .normal) + } + //-------------------------------------------------- // MARK: - Public Properties //-------------------------------------------------- @@ -160,8 +164,22 @@ open class EntryFieldBase: Control, Changeable { } } - open var errorText: String? { didSet { setNeedsUpdate() } } - + private var _errorText: String? + + open var errorText: String? { + get { return _errorText } + set { + if let newValue { + _errorText = newValue + } else { + _errorText = nil + } + updateContainerView() + updateErrorLabel() + setNeedsUpdate() + } + } + open var tooltipModel: Tooltip.TooltipModel? { didSet { setNeedsUpdate() } } open var transparentBackground: Bool = false { didSet { setNeedsUpdate() } } @@ -212,7 +230,7 @@ open class EntryFieldBase: Control, Changeable { //this is the horizontal stack that contains //the left, InputContainer, Icons, Buttons container.addSubview(containerStackView) - containerStackView.pinToSuperView(.uniform(VDSFormControls.spaceInset)) + containerStackView.pinToSuperView(.uniform(12)) //add the view to add input fields containerStackView.addArrangedSubview(controlContainerView) @@ -279,11 +297,7 @@ open class EntryFieldBase: Control, Changeable { open override func updateView() { super.updateView() - containerView.backgroundColor = backgroundColorConfiguration.getColor(self) - containerView.layer.borderColor = borderColorConfiguration.getColor(self).cgColor - containerView.layer.borderWidth = VDSFormControls.widthBorder - containerView.layer.cornerRadius = VDSFormControls.borderradius - + updateContainerView() updateTitleLabel() updateErrorLabel() updateHelperLabel() @@ -291,6 +305,16 @@ open class EntryFieldBase: Control, Changeable { backgroundColor = surface.color } + //-------------------------------------------------- + // MARK: - Private Methods + //-------------------------------------------------- + private func updateContainerView() { + containerView.backgroundColor = backgroundColorConfiguration.getColor(self) + containerView.layer.borderColor = borderColorConfiguration.getColor(self).cgColor + containerView.layer.borderWidth = VDSFormControls.widthBorder + containerView.layer.cornerRadius = VDSFormControls.borderradius + } + //-------------------------------------------------- // MARK: - Public Methods //-------------------------------------------------- diff --git a/VDS/Components/TextFields/TextArea/TextArea.swift b/VDS/Components/TextFields/TextArea/TextArea.swift index 105286b5..1a91a099 100644 --- a/VDS/Components/TextFields/TextArea/TextArea.swift +++ b/VDS/Components/TextFields/TextArea/TextArea.swift @@ -61,9 +61,11 @@ open class TextArea: EntryFieldBase { } }() - open var characterCountLabel = Label().with { + open var characterCounterLabel = Label().with { $0.setContentCompressionResistancePriority(.required, for: .vertical) $0.textStyle = .bodySmall + $0.textAlignment = .right + $0.numberOfLines = 1 } //-------------------------------------------------- @@ -112,8 +114,8 @@ open class TextArea: EntryFieldBase { open override func reset() { super.reset() textView.text = "" - characterCountLabel.reset() - characterCountLabel.textStyle = .bodySmall + characterCounterLabel.reset() + characterCounterLabel.textStyle = .bodySmall } /// Container for the area in which the user interacts. @@ -139,11 +141,20 @@ open class TextArea: EntryFieldBase { minWidthConstraint?.isActive = true } - // allow - 20% of character limit - let overflowLimit = Double(maxLength ?? 0) * 0.20 - allowCharCount = Int(overflowLimit) + (maxLength ?? 0) - characterCountLabel.text = getLimitText() - + if ((maxLength ?? 0) > 0) { + // allow - 20% of character limit + let overflowLimit = Double(maxLength ?? 0) * 0.20 + allowCharCount = Int(overflowLimit) + (maxLength ?? 0) + characterCounterLabel.text = getCharacterCounterText() + } else { + characterCounterLabel.text = "" + } + + icon.size = .medium + containerView.layer.borderColor = readOnly ? readOnlyBorderColorConfiguration.getColor(self).cgColor : borderColorConfiguration.getColor(self).cgColor + textView.isEditable = readOnly ? false : true + textView.backgroundColor = backgroundColorConfiguration.getColor(self) + characterCounterLabel.textColorConfiguration = primaryColorConfiguration.eraseToAnyColorable() } /// Container for the area which shows helper text, error text, character count, max length value. @@ -151,18 +162,25 @@ open class TextArea: EntryFieldBase { bottomView.addSubview(bottomStackView) bottomStackView.pinToSuperView() bottomStackView.addArrangedSubview(bottomContainerView) - bottomStackView.addArrangedSubview(characterCountLabel) + bottomStackView.addArrangedSubview(characterCounterLabel) return bottomView } //-------------------------------------------------- // MARK: - Private Methods //-------------------------------------------------- - private func getLimitText() -> String { + private func getCharacterCounterText() -> String { let count = textView.text.count let countStr = (count > maxLength ?? 0) ? ("-" + "\(count-(maxLength ?? 0))") : "\(count)" - let text = "\(countStr)" + "/" + "\(maxLength ?? 0)" - return text + if count > maxLength ?? 0 { + showError = true + errorText = "You have exceeded the character limit." + return countStr + } else { + showError = false + errorText = "" + return ("\(countStr)" + "/" + "\(maxLength ?? 0)") + } } } @@ -187,12 +205,18 @@ extension TextArea: UITextViewDelegate { textViewHeightConstraint.isActive = true } - if textView.text.count <= allowCharCount { + if ((maxLength ?? 0) > 0) { + if textView.text.count <= allowCharCount { + //setting the value and firing control event + value = textView.text + sendActions(for: .valueChanged) + } else { + textView.text.removeLast() + } + } else { //setting the value and firing control event value = textView.text sendActions(for: .valueChanged) - } else { - textView.text.removeLast() } } }