Merge pull request #1052 from adevinta/1051-bottomsheet-fix-width

[BottomSheet#1051] Fix width of bottom sheet.
adevinta · Jul 12, 2024 · f130de8 · f130de8
2 parents 89efbb1 + 54166fb
commit f130de8
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 79 deletions.
diff --git a/core/Sources/Components/BottomSheet/SwiftUI/PresentationDetent-MaxHeight.swift b/core/Sources/Components/BottomSheet/SwiftUI/PresentationDetent-MaxHeight.swift
@@ -0,0 +1,21 @@
+//
+//  PresentationDetent-MaxHeight.swift
+//  
+//
+//  Created by Michael Zimmermann on 26.06.24.
+//  Copyright © 2024 Adevinta. All rights reserved.
+//
+
+import SwiftUI
+
+@available(iOS 16.0, *)
+public extension PresentationDetent {
+    static let maxHeight = Self.custom(MaxHeightPresentationDetent.self)
+}
+
+@available(iOS 16.0, *)
+private struct MaxHeightPresentationDetent: CustomPresentationDetent {
+    static func height(in context: Context) -> CGFloat? {
+        return context.maxDetentValue - 1
+    }
+}
diff --git a/core/Sources/Components/BottomSheet/SwiftUI/View-Height.swift b/core/Sources/Components/BottomSheet/SwiftUI/View-Height.swift
@@ -21,7 +21,7 @@ struct ViewHeightModifier: ViewModifier {
     let height: Binding<CGFloat>
     func body(content: Content) -> some View {
         content
-            .fixedSize(horizontal: true, vertical: true)
+            .fixedSize(horizontal: false, vertical: true)
             .background(
                 GeometryReader{ geometry in
                     Color.clear

diff --git a/spark/Demo/Classes/View/Components/BottomSheet/SwiftUI/BottomSheetPresentedView.swift b/spark/Demo/Classes/View/Components/BottomSheet/SwiftUI/BottomSheetPresentedView.swift
@@ -10,9 +10,9 @@ import SwiftUI
 
 struct BottomSheetPresentedView: View {
     var description: String = """
-Sample of a SwiftUI bottom sheet with little text.
-🧡💙
-"""
+     SwiftUI bottom sheet with little text.
+     🧡💙
+     """
     var dismiss: () -> Void
 
     var body: some View {
@@ -29,9 +29,7 @@ Sample of a SwiftUI bottom sheet with little text.
             }
             .buttonStyle(.borderedProminent)
         }
-        .frame(maxWidth: .infinity)
-        .background(alignment: .top) {
-            Image("BottomSheet")
-        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .background(.green)
     }
 }
diff --git a/spark/Demo/Classes/View/Components/BottomSheet/SwiftUI/BottomSheetPresentingView.swift b/spark/Demo/Classes/View/Components/BottomSheet/SwiftUI/BottomSheetPresentingView.swift
@@ -9,70 +9,70 @@
 import SwiftUI
 
 private let longDescription: String = """
-Sample of a SwiftUI bottom sheet with a scroll view.
-🧡
-💙
-🧡
-💙
-🧡
-💙
-🧡
-💙
-🧡
-💙
-🧡
-💙
-🧡
-💙
-🧡
-💙
-🧡
-💙
-🧡
-💙
-🧡
-💙
-🧡
-💙
-🧡
-💙
-🧡
-💙
-🧡
-💙
-🧡
-💙
-🧡
-💙
-🧡
-💙
-"""
+ SwiftUI bottom sheet with a scroll view.
+ 🧡
+ 💙
+ 🧡
+ 💙
+ 🧡
+ 💙
+ 🧡
+ 💙
+ 🧡
+ 💙
+ 🧡
+ 💙
+ 🧡
+ 💙
+ 🧡
+ 💙
+ 🧡
+ 💙
+ 🧡
+ 💙
+ 🧡
+ 💙
+ 🧡
+ 💙
+ 🧡
+ 💙
+ 🧡
+ 💙
+ 🧡
+ 💙
+ 🧡
+ 💙
+ 🧡
+ 💙
+ 🧡
+ 💙
+ """
 private let mediumDescription: String = """
-Sample of a SwiftUI bottom sheet with a long text.
-🧡
-💙
-🧡
-💙
-🧡
-💙
-🧡
-💙
-🧡
-💙
-🧡
-💙
-🧡
-💙
-🧡
-💙
-🧡
-💙
-🧡
-💙
-🧡
-💙
-🧡
-"""
+ SwiftUI bottom sheet with a medium text. The text should wrap to a new line
+ 🧡
+ 💙
+ 🧡
+ 💙
+ 🧡
+ 💙
+ 🧡
+ 💙
+ 🧡
+ 💙
+ 🧡
+ 💙
+ 🧡
+ 💙
+ 🧡
+ 💙
+ 🧡
+ 💙
+ 🧡
+ 💙
+ 🧡
+ 💙
+ 🧡
+ """
 struct BottomSheetPresentingView: View {
     var body: some View {
         if #available(iOS 16.4, *) {
@@ -101,7 +101,7 @@ struct BottomSheetPresentingViewWithHeightDetent: View {
                     self.showingShortSheet.toggle()
                 }
                 .readHeight(self.$shortHeight)
-                .presentationDetents([.height(self.shortHeight), .large])
+                .presentationDetents([.height(self.shortHeight), .medium])
             }
             .buttonStyle(.borderedProminent)
 
@@ -113,21 +113,21 @@ struct BottomSheetPresentingViewWithHeightDetent: View {
                     self.showingMediumSheet.toggle()
                 }
                 .readHeight(self.$mediumHeight)
-                .presentationDetents([.height(self.mediumHeight), .large])
+                .presentationDetents([.height(self.mediumHeight), .maxHeight])
             }
             .buttonStyle(.borderedProminent)
 
             Button("Show bottom sheet with scroll view") {
                 self.showingLongSheet.toggle()
             }
             .sheet(isPresented: $showingLongSheet) {
-                    ScrollView {
-                        BottomSheetPresentedView(description: longDescription) {
-                            self.showingLongSheet.toggle()
-                        }
+                ScrollView {
+                    BottomSheetPresentedView(description: longDescription) {
+                        self.showingLongSheet.toggle()
                     }
-                    .scrollIndicators(.visible)
-                .presentationDetents([.medium, .large])
+                }
+                .scrollIndicators(.visible)
+                .presentationDetents([.medium, .maxHeight])
             }
             .buttonStyle(.borderedProminent)
         }