IOS-9445 Hide last divider (#326)

Telefonica · Dec 22, 2023 · 9058967 · 9058967
1 parent 74fce28
commit 9058967
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 51 deletions.
diff --git a/MisticaCatalog/Source/Catalog/CatalogList.swift b/MisticaCatalog/Source/Catalog/CatalogList.swift
@@ -19,17 +19,21 @@ struct CatalogList: View {
                 Cell(
                     style: .fullwidth,
                     title: row.title,
+                    subtitle: nil,
+                    description: nil,
                     assetType: .smallIcon(
                         Image(uiImage: row.icon),
                         foregroundColor: nil
                     ),
-                    presetView: { CellNavigationPreset() }
+                    presetView: { CellNavigationPreset() },
+                    headlineView: {},
+                    destinationView: {
+                        componentView(for: row)
+                            .navigationTitle(row.title)
+                            .navigationBarTitleDisplayMode(.inline)
+                    }
                 )
-                .navigationLink {
-                    componentView(for: row)
-                        .navigationTitle(row.title)
-                        .navigationBarTitleDisplayMode(.inline)
-                }
+                .shouldShowDivider(row != rows.last)
             }
         }
         .misticaListStyle()

diff --git a/MisticaCatalog/Source/Catalog/MisticaSwiftUI/Components/ListCatalogView.swift b/MisticaCatalog/Source/Catalog/MisticaSwiftUI/Components/ListCatalogView.swift
@@ -65,17 +65,19 @@ struct ListCatalogView: View {
 
             NavigationLink("Show List") {
                 List {
-                    ForEach(0 ..< 50) { _ in
+                    let range = 0 ..< 20
+                    ForEach(range, id: \.self) { count in
                         Cell(
                             style: styles[selectedStyleIndex],
                             title: title,
                             subtitle: subtitle.isEmpty ? nil : subtitle,
                             description: description.isEmpty ? nil : description,
                             assetType: assetTypes[selectedAssetTypeIndex],
                             presetView: { presetView },
-                            headlineView: { headlineView }
+                            headlineView: { headlineView },
+                            destinationView: { Text("Detail view \(count)") }
                         )
-                        .navigationLink(to: { Text("Detail view") })
+                        .shouldShowDivider(count != range.last)
                     }
                 }
                 .misticaListStyle()

diff --git a/MisticaCatalog/Source/ColorsView.swift b/MisticaCatalog/Source/ColorsView.swift
@@ -24,6 +24,7 @@ struct ColorsView: View {
                     description: item.color.hexString.uppercased(),
                     assetType: .roundImage(circle(with: item.color))
                 )
+                .shouldShowDivider(item.name != colors.last?.name)
             }
         }
         .misticaListStyle()

diff --git a/Sources/MisticaSwiftUI/Components/List/Cell.swift b/Sources/MisticaSwiftUI/Components/List/Cell.swift
@@ -54,6 +54,7 @@ public struct Cell<PresetView: View, HeadlineView: View, Destination: View>: Vie
     private var backgroundColor = Color.backgroundContainer
     private var pressedBackgroundColor = Color.neutralLow.opacity(0.8)
     private var allowsPressing = true
+    private var shouldShowDivider = true
 
     @State var isPressed = false
 
@@ -90,7 +91,9 @@ public struct Cell<PresetView: View, HeadlineView: View, Destination: View>: Vie
 
         case .fullwidth:
             coreView
-                .overlay(divider, alignment: .bottom)
+                .if(shouldShowDivider) {
+                    $0.overlay(divider, alignment: .bottom)
+                }
                 .if(allowsPressing) {
                     $0.overlay(cellLink)
                 }
@@ -195,27 +198,6 @@ public struct Cell<PresetView: View, HeadlineView: View, Destination: View>: Vie
     }
 }
 
-// MARK: Utils
-
-public extension Cell {
-    /// Sets a NavigationLink as a background with no opacity. This behaves as a workaround to avoid
-    /// NavigationLinks to add extra views to the Cell inside List. Otherwise, the system will add the default chevron.
-    func navigationLink<T: View>(to destination: () -> T) -> Cell<PresetView, HeadlineView, T> {
-        var cell = Cell<PresetView, HeadlineView, T>(
-            style: style,
-            title: title,
-            subtitle: subtitle,
-            description: description,
-            assetType: assetType,
-            presetView: { presetView },
-            headlineView: { headlineView },
-            destinationView: destination
-        )
-        cell.allowsPressing = true
-        return cell
-    }
-}
-
 // MARK: Cell with no preset nor headline
 
 public extension Cell where Destination == EmptyView {
@@ -394,11 +376,17 @@ public extension Cell {
         cell.allowsPressing = allowsPressing
         return cell
     }
+
+    func shouldShowDivider(_ shouldShowDivider: Bool) -> Cell {
+        var cell = self
+        cell.shouldShowDivider = shouldShowDivider
+        return cell
+    }
 }
 
 // MARK: Helpers
 
-struct ListSeparatorHiddenModifieriOS15: ViewModifier {
+struct ListSeparatorHiddenModifier: ViewModifier {
     public func body(content: Content) -> some View {
         if #available(iOS 15.0, *) {
             content
@@ -418,27 +406,9 @@ struct ListSeparatorHiddenModifieriOS15: ViewModifier {
     }
 }
 
-struct ListSeparatorHiddenModifier: ViewModifier {
-    public func body(content: Content) -> some View {
-        content
-            .listRowInsets(EdgeInsets())
-            .overlay(
-                VStack {
-                    Divider(color: .background)
-                    Spacer()
-                    Divider(color: .background)
-                }
-            )
-    }
-}
-
 public extension View {
     func listSeparatorHidden() -> some View {
-        conditionalModifier(
-            .iOS15,
-            then: { $0.modifier(ListSeparatorHiddenModifieriOS15()) },
-            else: { $0.modifier(ListSeparatorHiddenModifier()) }
-        )
+        modifier(ListSeparatorHiddenModifier())
     }
 }
 

diff --git a/Sources/MisticaSwiftUI/Components/List/README.md b/Sources/MisticaSwiftUI/Components/List/README.md
@@ -43,6 +43,17 @@ NavigationView {
 }
 ```
 
+The last cell on a Mistica List should not have a divider. Use the modifier (`shouldShowDivider(<condition to match last item>)`) to hide it. E.g.:
+
+```swift
+    ForEach(rows) { row in
+        Cell(
+            ...
+        )
+        .shouldShowDivider(row != rows.last)
+    }
+```
+
 #### Control Customization
 
 `Cell` can be configured with a custom control like a `Toggle`.