Merge pull request #8 from TrianglZ/feature/add-focused-color

Add focused color to style
TrianglZ · Jul 4, 2024 · c6c89cf · c6c89cf
2 parents de68092 + 17186a9
commit c6c89cf
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -86,7 +86,8 @@ You can customize the appearance of the OTP view by adjusting the Style struct p
                                   shadowRadius: CGFloat,
                                   shadowXOffset: CGFloat,
                                   shadowYOffset: CGFloat,
-                                  isCursorHidden: Bool)
+                                  isCursorHidden: Bool,
+								  focusedStateColor: Color? = nil)
 ```
 #### Callbacks
 TrianglzOTPView provides two callbacks:

diff --git a/Sources/TrianglzOTPView/Helpers/Extensions/View+TFModifier.swift b/Sources/TrianglzOTPView/Helpers/Extensions/View+TFModifier.swift
@@ -7,17 +7,29 @@ import Foundation
 import SwiftUI
 
 extension View {
+
     func customTextFieldModifier(customStyle: TrianglzOTPView.Style,
                                  index: Int,
                                  focusedTextField: FocusState<Int?>.Binding) -> some View {
-        self
+
+		var borderColor: Color {
+			guard let focusedStateColor = customStyle.focusedStateColor else {
+				return customStyle.borderColor
+			}
+			guard focusedTextField.wrappedValue == index else {
+				return customStyle.borderColor
+			}
+			return focusedStateColor
+		}
+
+        return self
             .frame(width: customStyle.width, height: customStyle.height)
             .background(
                 RoundedRectangle(cornerRadius: customStyle.cornerRadius)
                     .foregroundColor(customStyle.backgroundColor)
                     .overlay(
                         RoundedRectangle(cornerRadius: customStyle.cornerRadius)
-                            .stroke(customStyle.borderColor, lineWidth: customStyle.borderWidth)
+                            .stroke(borderColor, lineWidth: customStyle.borderWidth)
                     )
             )
             .foregroundColor(customStyle.foregroundColor)

diff --git a/Sources/TrianglzOTPView/Helpers/Style/EnhancedTextFieldView/EnhancedTextField.swift b/Sources/TrianglzOTPView/Helpers/Style/EnhancedTextFieldView/EnhancedTextField.swift
@@ -14,6 +14,8 @@ struct EnhancedTextField: UIViewRepresentable {
     let font: UIFont
     let fontColor: UIColor
 	let keyboardType: UIKeyboardType
+	var focusedStateFontColor: UIColor? = nil
+
     let onBackspace: (Bool) -> Void
     let onChange: (String) -> Void
 
@@ -33,6 +35,8 @@ struct EnhancedTextField: UIViewRepresentable {
         view.keyboardType = keyboardType
         view.font = font
         view.textColor = fontColor
+		view.fontColor = fontColor
+		view.focusedStateFontColor = focusedStateFontColor
         return view
     }
 
@@ -42,6 +46,8 @@ struct EnhancedTextField: UIViewRepresentable {
     }
 
     class EnhancedUITextField: UITextField {
+		var fontColor: UIColor?
+		var focusedStateFontColor: UIColor? = nil
         var onBackspace: ((Bool) -> Void)?
 
         override init(frame: CGRect) {
@@ -57,5 +63,19 @@ struct EnhancedTextField: UIViewRepresentable {
             onBackspace?(text?.isEmpty == true)
             super.deleteBackward()
         }
+
+		override func becomeFirstResponder() -> Bool {
+			let didBecomeFirstResponder = super.becomeFirstResponder()
+			textColor = focusedStateFontColor
+			tintColor = focusedStateFontColor
+			return didBecomeFirstResponder
+		}
+
+		override func resignFirstResponder() -> Bool {
+			let didResignFirstResponder = super.resignFirstResponder()
+			textColor = fontColor
+			tintColor = fontColor
+			return didResignFirstResponder
+		}
     }
 }
diff --git a/Sources/TrianglzOTPView/Helpers/Style/TrianglzOTPView+Style.swift b/Sources/TrianglzOTPView/Helpers/Style/TrianglzOTPView+Style.swift
@@ -23,6 +23,7 @@ extension TrianglzOTPView {
         var shadowXOffset: CGFloat = 0
         var shadowYOffset: CGFloat = 0
         var isCursorHidden: Bool = false
+		var focusedStateColor: Color? = nil
 
         public init() {
             foregroundColor = .black
@@ -46,7 +47,8 @@ extension TrianglzOTPView {
                     shadowRadius: CGFloat = 0,
                     shadowXOffset: CGFloat = 0,
                     shadowYOffset: CGFloat = 0,
-                    isCursorHidden: Bool = false) {
+                    isCursorHidden: Bool = false,
+					focusedStateColor: Color? = nil) {
             self.foregroundColor = foregroundColor
             self.fontStyle = fontStyle
             self.hstackSpacing = hstackSpacing
@@ -62,6 +64,7 @@ extension TrianglzOTPView {
             self.shadowXOffset = shadowXOffset
             self.shadowYOffset = shadowYOffset
             self.isCursorHidden = isCursorHidden
+			self.focusedStateColor = focusedStateColor
         }
     }
 }
diff --git a/Sources/TrianglzOTPView/TrianglzOTPView/TrianglzOTPView.swift b/Sources/TrianglzOTPView/TrianglzOTPView/TrianglzOTPView.swift
@@ -50,6 +50,14 @@ public struct TrianglzOTPView: View {
 			return .alphabet
 		}
 	}
+
+	private var focusedStateFontColor: UIColor? {
+		guard let focusedStateColor = customStyle.focusedStateColor else {
+			return nil
+		}
+		return UIColor(focusedStateColor)
+	}
+
 	public var body: some View {
 		HStack(alignment: customStyle.hstackAlignment,
 			   spacing: customStyle.hstackSpacing) {
@@ -62,6 +70,7 @@ public struct TrianglzOTPView: View {
 								  font: customStyle.fontStyle,
 								  fontColor: UIColor(customStyle.foregroundColor),
 								  keyboardType: keyboardType,
+								  focusedStateFontColor: focusedStateFontColor,
 								  onBackspace: { isEmpty in
 					handleOnBackAction(isEmpty: isEmpty, index: index)
 				},onChange: { newValue in