fix: LMN-925 App Search Modal don't recreate BPKTextField when moving…

… between content and loading states (#1842)
Skyscanner · Dec 20, 2023 · 6ee7218 · 6ee7218
1 parent f7e85bf
commit 6ee7218
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 32 deletions.
diff --git a/Backpack-SwiftUI/AppSearchModal/Classes/BPKAppSearchModal.swift b/Backpack-SwiftUI/AppSearchModal/Classes/BPKAppSearchModal.swift
@@ -47,12 +47,14 @@ public struct BPKAppSearchModal: View {
 
             makeNavigationBar(title: title, closeAccessibilityLabel: closeAccessibilityLabel, onClose: onClose)
 
+            if results.showTextField {
+                BPKTextField(placeholder: inputHint, $inputText)
+            }
+
             switch results {
             case .loading(let loading):
-                BPKTextField(placeholder: inputHint, $inputText)
                 AppSearchModalLoadingView(state: loading)
             case .content(let content):
-                BPKTextField(placeholder: inputHint, $inputText)
                 AppSearchModalContentView(state: content)
                     .padding(.top, .md)
             case .error(let error):
@@ -89,6 +91,15 @@ public struct BPKAppSearchModal: View {
     }
 }
 
+extension BPKAppSearchModalResults {
+    var showTextField: Bool {
+        switch self {
+        case .loading, .content: return true
+        case .error: return false
+        }
+    }
+}
+
 struct BPKAppSearchModal_Previews: PreviewProvider {
     static var previews: some View {
         BPKAppSearchModal(

diff --git a/Example/Backpack.xcodeproj/project.pbxproj b/Example/Backpack.xcodeproj/project.pbxproj
@@ -15,6 +15,7 @@
 		17068B8A299C0106000EA7F4 /* RatingGroupsProvider.swift in Sources */ = {isa = PBXBuildFile; fileRef = 17068B89299C0106000EA7F4 /* RatingGroupsProvider.swift */; };
 		1750EB6329915230005226DF /* CardButtonsViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1750EB6229915230005226DF /* CardButtonsViewController.swift */; };
 		1A2A4BD82A6801AE00C18218 /* SelectExampleView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1A2A4BD72A6801AE00C18218 /* SelectExampleView.swift */; };
+		1A68212D2B3308C80048220E /* AppSearchModalExampleViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1A68212C2B3308C80048220E /* AppSearchModalExampleViewModel.swift */; };
 		2A62FDDD2AB89F4500D545E5 /* TextAreaExampleView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2A62FDDC2AB89F4500D545E5 /* TextAreaExampleView.swift */; };
 		3A7D2D47214AB9F400ECBD5B /* BPKButtonsViewController.m in Sources */ = {isa = PBXBuildFile; fileRef = 3A7D2D46214AB9F400ECBD5B /* BPKButtonsViewController.m */; };
 		3AA018EF215BE26600838FBB /* SpinnersViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3AA018EE215BE26500838FBB /* SpinnersViewController.swift */; };
@@ -231,6 +232,7 @@
 		17068B89299C0106000EA7F4 /* RatingGroupsProvider.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RatingGroupsProvider.swift; sourceTree = "<group>"; };
 		1750EB6229915230005226DF /* CardButtonsViewController.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = CardButtonsViewController.swift; sourceTree = "<group>"; };
 		1A2A4BD72A6801AE00C18218 /* SelectExampleView.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = SelectExampleView.swift; sourceTree = "<group>"; usesTabs = 0; };
+		1A68212C2B3308C80048220E /* AppSearchModalExampleViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppSearchModalExampleViewModel.swift; sourceTree = "<group>"; };
 		2A62FDDC2AB89F4500D545E5 /* TextAreaExampleView.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = TextAreaExampleView.swift; sourceTree = "<group>"; };
 		3A7D2D45214AB9F400ECBD5B /* BPKButtonsViewController.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = BPKButtonsViewController.h; sourceTree = "<group>"; };
 		3A7D2D46214AB9F400ECBD5B /* BPKButtonsViewController.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = BPKButtonsViewController.m; sourceTree = "<group>"; };
@@ -1329,6 +1331,7 @@
 			isa = PBXGroup;
 			children = (
 				BA809EC42B05ED410030D1E7 /* AppSearchModalExampleView.swift */,
+				1A68212C2B3308C80048220E /* AppSearchModalExampleViewModel.swift */,
 			);
 			path = AppSearchModal;
 			sourceTree = "<group>";
@@ -1691,6 +1694,7 @@
 				D2BBC1C922560FDD002DA71A /* BPKTableViewSelectableCell.swift in Sources */,
 				79F5129329AEFEB600D0997A /* LabelViewController.swift in Sources */,
 				53B6DB6627FC47290042B7C0 /* DialogGroups.swift in Sources */,
+				1A68212D2B3308C80048220E /* AppSearchModalExampleViewModel.swift in Sources */,
 				53C6621229EA0DAB00BF1A62 /* SwitchExampleView.swift in Sources */,
 				0245783E2ABC3AA1006008D1 /* InsetBannerExampleView.swift in Sources */,
 				D61ACE052306E238001C976E /* NavigationBarViewController.swift in Sources */,

diff --git a/Example/Backpack/SwiftUI/Components/AppSearchModal/AppSearchModalExampleView.swift b/Example/Backpack/SwiftUI/Components/AppSearchModal/AppSearchModalExampleView.swift
@@ -21,42 +21,39 @@ import Backpack_SwiftUI
 
 struct AppSearchModalExampleView: View {
 
-    enum ResultsType {
-        case error
-        case loading
-        case content
-    }
-
-    let resultsType: ResultsType
+    @ObservedObject var viewModel: AppSearchModalExampleViewModel
     @State private var inputText = ""
 
     var body: some View {
         ZStack {
             Color(BPKColor.canvasContrastColor)
 
-            switch resultsType {
-            case .error:
-                makeAppSearchModal(with: .error(errorState))
-            case .loading:
-                makeAppSearchModal(with: .loading(loadingState))
-            case .content:
-                makeAppSearchModal(with: .content(contentState))
-            }
+            BPKAppSearchModal(
+                title: "Search Modal",
+                inputText: $inputText,
+                inputHint: "Search",
+                results: results(),
+                closeAccessibilityLabel: "Close",
+                onClose: {
+                    print("Tapped close button")
+                }
+            )
+            .onChange(of: inputText, perform: { _ in
+                self.viewModel.loadContentFrom(inputText)
+            })
+            .padding()
         }
     }
 
-    private func makeAppSearchModal(with results: BPKAppSearchModalResults) -> some View {
-        BPKAppSearchModal(
-            title: "Search Modal",
-            inputText: $inputText,
-            inputHint: "Search",
-            results: results,
-            closeAccessibilityLabel: "Close",
-            onClose: {
-                print("Tapped close button")
-            }
-        )
-        .padding()
+    private func results() -> BPKAppSearchModalResults {
+        switch viewModel.resultsType {
+        case .error:
+            return .error(errorState)
+        case .loading:
+            return .loading(loadingState)
+        case .content:
+            return .content(contentState)
+        }
     }
 
     private var loadingState: BPKAppSearchModalLoading {

diff --git a/Example/Backpack/SwiftUI/Components/AppSearchModal/AppSearchModalExampleViewModel.swift b/Example/Backpack/SwiftUI/Components/AppSearchModal/AppSearchModalExampleViewModel.swift
@@ -0,0 +1,42 @@
+//
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright © 2023 Skyscanner Ltd. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Foundation
+
+class AppSearchModalExampleViewModel: ObservableObject {
+    enum ResultsType {
+        case error
+        case loading
+        case content
+    }
+
+    @Published var resultsType: ResultsType
+
+    init(resultsType: ResultsType) {
+        self.resultsType = resultsType
+    }
+
+    func loadContentFrom(_ text: String) {
+        resultsType = .loading
+
+        DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
+            self.resultsType = .content
+        }
+    }
+}
diff --git a/Example/Backpack/Utils/FeatureStories/Groups/AppSearchModalGroups.swift b/Example/Backpack/Utils/FeatureStories/Groups/AppSearchModalGroups.swift
@@ -27,15 +27,15 @@ struct AppSearchModalGroupsProvider {
             cellDataSources: [
                 presentable(
                     "Loading",
-                    view: AppSearchModalExampleView(resultsType: .loading)
+                    view: AppSearchModalExampleView(viewModel: .init(resultsType: .loading))
                 ),
                 presentable(
                     "Content",
-                    view: AppSearchModalExampleView(resultsType: .content)
+                    view: AppSearchModalExampleView(viewModel: .init(resultsType: .content))
                 ),
                 presentable(
                     "Error",
-                    view: AppSearchModalExampleView(resultsType: .error)
+                    view: AppSearchModalExampleView(viewModel: .init(resultsType: .error))
                 )
             ]
         ).groups()