Use correct design for textfield + keyboard avoidance

WalletConnect · Jul 14, 2023 · 7d01ca3 · 7d01ca3
1 parent 42bad40
commit 7d01ca3
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 8 deletions.
diff --git a/Sources/WalletConnectModal/Modal/ModalContainerView.swift b/Sources/WalletConnectModal/Modal/ModalContainerView.swift
@@ -36,6 +36,7 @@ struct ModalContainerView: View {
                 }
         )
         .edgesIgnoringSafeArea(.all)
+        .ignoresSafeArea(.keyboard, edges: .bottom)
         .onChangeBackported(of: showModal, perform: { newValue in
             if newValue == false {
                 withAnimation {

diff --git a/Sources/WalletConnectModal/Modal/ModalSheet.swift b/Sources/WalletConnectModal/Modal/ModalSheet.swift
@@ -5,6 +5,8 @@ public struct ModalSheet: View {
 
     @Environment(\.verticalSizeClass) var verticalSizeClass
 
+    @State var searchEditing = false
+
     var isLandscape: Bool {
         verticalSizeClass == .compact
     }
@@ -16,6 +18,7 @@ public struct ModalSheet: View {
             VStack(spacing: 0) {
                 contentHeader()
                 content()
+
             }
             .frame(maxWidth: .infinity)
             .background(Color.background1)
@@ -85,14 +88,31 @@ public struct ModalSheet: View {
         .overlay(
             VStack {
                 if viewModel.destination.hasSearch {
-                    TextField("Search", text: $viewModel.searchTerm)
-                        .transform {
-                            #if os(iOS)
-                            $0.textFieldStyle(.roundedBorder)
-                                .autocapitalization(.none)
-                            #endif
-                        }
-                        .padding(.horizontal, 50)
+
+                    HStack {
+                        Image(systemName: "magnifyingglass")
+                        TextField("Search", text: $viewModel.searchTerm, onEditingChanged: { editing in
+                            self.searchEditing = editing
+                        })
+                    }
+                    .padding(.vertical, 4)
+                    .padding(.horizontal, 10)
+                    .background(Color.background3)
+                    .foregroundColor(searchEditing ? .foreground1 : .foreground3)
+                    .cornerRadius(28)
+                    .overlay(
+                        RoundedRectangle(cornerRadius: 28)
+                            .stroke(searchEditing ? Color.accent : Color.thinOverlay, lineWidth: 1)
+                    )
+                    .onDisappear {
+                        searchEditing = false
+                    }
+                    .transform {
+                        #if os(iOS)
+                            $0.autocapitalization(.none)
+                        #endif
+                    }
+                    .padding(.horizontal, 50)
                 } else {
                     Text(viewModel.destination.contentTitle)
                         .font(.system(size: 20).weight(.semibold))
@@ -209,3 +229,40 @@ extension ModalSheet {
         }
     }
 }
+
+struct KeyboardAdaptive: ViewModifier {
+    @State private var keyboardHeight: CGFloat = 0
+
+    @State var offset: CGFloat
+
+    func body(content: Content) -> some View {
+        content
+            .offset(y: -keyboardHeight)
+            .onReceive(Publishers.keyboardHeight) {
+                self.keyboardHeight = $0 == 0 ? 0 : $0 - offset
+            }
+            .animation(.default, value: keyboardHeight)
+    }
+}
+
+import Combine
+import UIKit
+
+extension Publishers {
+    static var keyboardHeight: AnyPublisher<CGFloat, Never> {
+        let willShow = NotificationCenter.default.publisher(for: UIApplication.keyboardWillShowNotification)
+            .map { $0.keyboardHeight }
+
+        let willHide = NotificationCenter.default.publisher(for: UIApplication.keyboardWillHideNotification)
+            .map { _ in CGFloat(0) }
+
+        return MergeMany(willShow, willHide)
+            .eraseToAnyPublisher()
+    }
+}
+
+extension Notification {
+    var keyboardHeight: CGFloat {
+        return (userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect)?.height ?? 0
+    }
+}