iOS: Badges wrapping view (#1116)

^ALTAPPS-769
hyperskill · Jul 24, 2024 · c2e7bda · c2e7bda
1 parent 40e71ff
commit c2e7bda
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 80 deletions.
diff --git a/...odules/ProjectSelection/List/Views/Grid/Cell/ProjectSelectionListGridCellBadgesView.swift b/...odules/ProjectSelection/List/Views/Grid/Cell/ProjectSelectionListGridCellBadgesView.swift
@@ -12,10 +12,13 @@ struct ProjectSelectionListGridCellBadgesView: View {
     }
 
     var body: some View {
-        if isEmpty {
-            EmptyView()
-        } else {
-            HStack(spacing: LayoutInsets.smallInset) {
+        if !isEmpty {
+            FlowLayoutCompatibility(
+                configuration: .init(
+                    spacing: LayoutInsets.smallInset,
+                    fallbackLayout: .horizontal()
+                )
+            ) {
                 if isSelected {
                     BadgeView.selected()
                 }
@@ -40,24 +43,25 @@ struct ProjectSelectionListGridCellBadgesView: View {
     }
 }
 
-struct ProjectSelectionListGridCellBadgesView_Previews: PreviewProvider {
-    static var previews: some View {
-        ProjectSelectionListGridCellBadgesView(
-            isSelected: true,
-            isIdeRequired: true,
-            isBeta: true,
-            isBestRated: true,
-            isFastestToComplete: true
-        )
-        .padding()
-
-        ProjectSelectionListGridCellBadgesView(
-            isSelected: true,
-            isIdeRequired: true,
-            isBeta: true,
-            isBestRated: true,
-            isFastestToComplete: true
-        )
-        .preferredColorScheme(.dark)
-    }
+#if DEBUG
+#Preview {
+    ProjectSelectionListGridCellBadgesView(
+        isSelected: true,
+        isIdeRequired: true,
+        isBeta: true,
+        isBestRated: true,
+        isFastestToComplete: true
+    )
+}
+
+#Preview {
+    ProjectSelectionListGridCellBadgesView(
+        isSelected: true,
+        isIdeRequired: true,
+        isBeta: true,
+        isBestRated: true,
+        isFastestToComplete: true
+    )
+    .preferredColorScheme(.dark)
 }
+#endif
diff --git a/...dules/StepQuizSubmodules/StepQuizCodeBlanks/Views/StepQuizCodeBlanksSuggestionsView.swift b/...dules/StepQuizSubmodules/StepQuizCodeBlanks/Views/StepQuizCodeBlanksSuggestionsView.swift
@@ -7,30 +7,25 @@ struct StepQuizCodeBlanksSuggestionsView: View {
     let onSuggestionTap: (Suggestion) -> Void
 
     var body: some View {
-        let views = ForEach(suggestions, id: \.self) { suggestion in
-            Button(
-                action: {
-                    onSuggestionTap(suggestion)
-                },
-                label: {
-                    StepQuizCodeBlanksOptionView(text: suggestion.text, isActive: true)
-                }
+        FlowLayoutCompatibility(
+            configuration: .init(
+                spacing: LayoutInsets.defaultInset,
+                fallbackLayout: .vertical()
             )
-            .buttonStyle(BounceButtonStyle())
-        }
-
-        if #available(iOS 16.0, *) {
-            FlowLayout(spacing: LayoutInsets.defaultInset) {
-                views
-            }
-            .padding(LayoutInsets.defaultInset)
-            .frame(minHeight: 72)
-        } else {
-            VStack(alignment: .leading, spacing: LayoutInsets.defaultInset) {
-                views
+        ) {
+            ForEach(suggestions, id: \.self) { suggestion in
+                Button(
+                    action: {
+                        onSuggestionTap(suggestion)
+                    },
+                    label: {
+                        StepQuizCodeBlanksOptionView(text: suggestion.text, isActive: true)
+                    }
+                )
+                .buttonStyle(BounceButtonStyle())
             }
-            .padding(LayoutInsets.defaultInset)
-            .frame(minHeight: 72)
         }
+        .padding(LayoutInsets.defaultInset)
+        .frame(minHeight: 72)
     }
 }
diff --git a/...pp/Sources/Modules/StudyPlan/Views/Section/List/Item/StudyPlanSectionItemBadgesView.swift b/...pp/Sources/Modules/StudyPlan/Views/Section/List/Item/StudyPlanSectionItemBadgesView.swift
@@ -10,10 +10,13 @@ struct StudyPlanSectionItemBadgesView: View {
     }
 
     var body: some View {
-        if isEmpty {
-            EmptyView()
-        } else {
-            HStack(spacing: LayoutInsets.smallInset) {
+        if !isEmpty {
+            FlowLayoutCompatibility(
+                configuration: .init(
+                    spacing: LayoutInsets.smallInset,
+                    fallbackLayout: .horizontal()
+                )
+            ) {
                 if let formattedProgress {
                     BadgeView(text: formattedProgress, style: .green)
                 }
@@ -26,11 +29,11 @@ struct StudyPlanSectionItemBadgesView: View {
     }
 }
 
-struct StudyPlanSectionItemBadgesView_Previews: PreviewProvider {
-    static var previews: some View {
-        StudyPlanSectionItemBadgesView(
-            formattedProgress: "50%",
-            isIdeRequired: true
-        )
-    }
+#if DEBUG
+#Preview {
+    StudyPlanSectionItemBadgesView(
+        formattedProgress: "50%",
+        isIdeRequired: true
+    )
 }
+#endif
diff --git a/...es/Modules/TrackSelection/List/Views/Grid/Cell/TrackSelectionListGridCellBadgesView.swift b/...es/Modules/TrackSelection/List/Views/Grid/Cell/TrackSelectionListGridCellBadgesView.swift
@@ -11,10 +11,13 @@ struct TrackSelectionListGridCellBadgesView: View {
     }
 
     var body: some View {
-        if isEmpty {
-            EmptyView()
-        } else {
-            HStack(spacing: LayoutInsets.smallInset) {
+        if !isEmpty {
+            FlowLayoutCompatibility(
+                configuration: .init(
+                    spacing: LayoutInsets.smallInset,
+                    fallbackLayout: .horizontal()
+                )
+            ) {
                 if isSelected {
                     BadgeView.selected()
                 }
@@ -35,23 +38,25 @@ struct TrackSelectionListGridCellBadgesView: View {
     }
 }
 
-struct TrackSelectionListGridCellBadgesView_Previews: PreviewProvider {
-    static var previews: some View {
-        TrackSelectionListGridCellBadgesView(
-            isSelected: true,
-            isIdeRequired: true,
-            isBeta: true,
-            isCompleted: true
-        )
-        .padding()
-
-        TrackSelectionListGridCellBadgesView(
-            isSelected: true,
-            isIdeRequired: true,
-            isBeta: true,
-            isCompleted: true
-        )
-        .padding()
-        .preferredColorScheme(.dark)
-    }
+#if DEBUG
+#Preview {
+    TrackSelectionListGridCellBadgesView(
+        isSelected: true,
+        isIdeRequired: true,
+        isBeta: true,
+        isCompleted: true
+    )
+    .padding()
+}
+
+#Preview {
+    TrackSelectionListGridCellBadgesView(
+        isSelected: true,
+        isIdeRequired: true,
+        isBeta: true,
+        isCompleted: true
+    )
+    .padding()
+    .preferredColorScheme(.dark)
 }
+#endif
diff --git a/iosHyperskillApp/iosHyperskillApp/Sources/Views/SwiftUI/Layouts/FlowLayout.swift b/iosHyperskillApp/iosHyperskillApp/Sources/Views/SwiftUI/Layouts/FlowLayout.swift
@@ -1,5 +1,44 @@
 import SwiftUI
 
+@available(iOS, deprecated: 16.0)
+struct FlowLayoutCompatibility<Content>: View where Content: View {
+    let configuration: Configuration
+
+    let content: Content
+
+    init(
+        configuration: Configuration,
+        @ViewBuilder content: () -> Content
+    ) {
+        self.configuration = configuration
+        self.content = content()
+    }
+
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            FlowLayout(spacing: configuration.spacing) { content }
+        } else {
+            switch configuration.fallbackLayout {
+            case .vertical(let alignment):
+                VStack(alignment: alignment, spacing: configuration.spacing) { content }
+            case .horizontal(let alignment):
+                HStack(alignment: alignment, spacing: configuration.spacing) { content }
+            }
+        }
+    }
+
+    struct Configuration {
+        var spacing: CGFloat = LayoutInsets.smallInset
+
+        let fallbackLayout: FallbackLayout
+
+        enum FallbackLayout {
+            case vertical(alignment: HorizontalAlignment = .leading)
+            case horizontal(alignment: VerticalAlignment = .center)
+        }
+    }
+}
+
 @available(iOS 16.0, *)
 struct FlowLayout: Layout {
     var spacing: CGFloat = LayoutInsets.smallInset