Merge pull request #2 from adisve/additions/pills

Additions/pills

Author: defaultdino

Assets/Showroom_1.png

@@ -36,6 +36,9 @@ struct ContentView: View {
                     ExampleBuilder(selectedItems: $selectedGenres, content: {
                         PillPickerView(items: genres, selectedPills: $selectedGenres)
                             .pillStackStyle(.wrap)
+                            .pillLeadingIcon(Image(systemName: "popcorn"))
+                            .pillTrailingIcon(Image(systemName: "checkmark"))
+                            .pillTrailingOnlySelected(true)
                     })
                     .tag(0)
                     .navigationTitle("Wrapping pills")
@@ -45,6 +48,9 @@ struct ContentView: View {
                     ExampleBuilder(selectedItems: $selectedGenres, content: {
                         PillPickerView(items: genres, selectedPills: $selectedGenres)
                             .pillStackStyle(.noWrap)
+                            .pillLeadingIcon(Image(systemName: "popcorn"))
+                            .pillTrailingIcon(Image(systemName: "checkmark"))
+                            .pillTrailingOnlySelected(true)
                     })
                     .tag(1)
                     .navigationTitle("Static pills")

Assets/Showroom_2.png

@@ -219,12 +219,22 @@ To change the foreground color of a not selected and selected pill, respectively
 The height and width of the pills can also be set, but width will be treated as the minimum width of the pills
 
 ```swift
-.pillWidth(20)
+.pillMinWidth(20)
 .pillHeight(10)
 ```
 
 <br>
 
+This adds trailing and leading icons to the view, but only displays the trailing icons when the element has been selected.
+
+```swift
+.pillLeadingIcon(Image(systemName: "popcorn"))
+.pillTrailingIcon(Image(systemName: "checkmark"))
+.pillTrailingOnlySelected(true) /// Only when item is selected
+```
+
+<br>
+
 Corner radius and border color can also be changed easily
 
 ```swift

Example/PillPickerViewExample/PillPickerViewExample.swift

@@ -66,8 +66,19 @@ public struct PillOptions {
     /// Spacing applied horizontally between pills
     public var horizontalSpacing: CGFloat = 2
 
-    /// Icon displayed in the pill when selected
-    public var selectedIcon: Image = Image(systemName: "xmark")
+    /// Trailing icon displayed inside the pills
+    public var trailingIcon: Image? = nil
+    
+    /// Leading icon displayed inside the pills
+    public var leadingIcon: Image? = nil
+    
+    /// Whether leading icon should only be displayed if
+    /// the element is selected or not
+    public var leadingOnlyWhenSelected: Bool = false
+    
+    /// Whether trailing icon should only be displayed if
+    /// the element is selected or not
+    public var trailingOnlyWhenSelected: Bool = false
 }
 
 // MARK: - Main view
@@ -221,9 +232,27 @@ public extension PillPickerView {
         return view
     }
 
-    func pillSelectedIcon(_ value: Image) -> PillPickerView {
+    func pillLeadingIcon(_ value: Image) -> PillPickerView {
+        var view = self
+        view.options.leadingIcon = value
+        return view
+    }
+    
+    func pillTrailingIcon(_ value: Image) -> PillPickerView {
+        var view = self
+        view.options.trailingIcon = value
+        return view
+    }
+    
+    func pillTrailingOnlySelected(_ value: Bool) -> PillPickerView {
         var view = self
-        view.options.selectedIcon = value
+        view.options.trailingOnlyWhenSelected = value
+        return view
+    }
+    
+    func pillLeadingOnlySelected(_ value: Bool) -> PillPickerView {
+        var view = self
+        view.options.leadingOnlyWhenSelected = value
         return view
     }
 
@@ -252,23 +281,20 @@ struct PillView<T: Pill>: View {
             withAnimation(options.animation) {
                 if !isItemSelected() {
                     selectedPills.append(item)
+                } else {
+                    selectedPills.removeAll(where: { $0 == item })
                 }
             }
         }, label: {
             HStack {
+                if !options.leadingOnlyWhenSelected || isItemSelected() {
+                    leadingIcon
+                }
                 Text(item.title)
                     .font(options.font)
                     .foregroundColor(pillForegroundColor)
-                if isItemSelected() {
-                    options.selectedIcon
-                        .font(options.font)
-                        .foregroundColor(pillForegroundColor)
-                        .padding(.leading, 5)
-                        .onTapGesture {
-                            withAnimation(options.animation) {
-                                selectedPills.removeAll(where: { $0 == item })
-                            }
-                        }
+                if !options.trailingOnlyWhenSelected || isItemSelected() {
+                    trailingIcon
                 }
             }
             .padding(options.padding)
@@ -286,6 +312,20 @@ struct PillView<T: Pill>: View {
         .padding(.vertical, 2.5)
     }
 
+    var leadingIcon: some View {
+        options.leadingIcon
+            .font(options.font)
+            .foregroundColor(pillForegroundColor)
+            .padding(.leading, 5)
+    }
+    
+    var trailingIcon: some View {
+        options.trailingIcon
+            .font(options.font)
+            .foregroundColor(pillForegroundColor)
+            .padding(.leading, 5)
+    }
+    
     // MARK: - Helper Functions
 
     /// Checks if @Binding collection contains
@@ -367,11 +407,13 @@ struct StaticStack<T, V>: View where T: Pill, V: View {
     /// Current total height calculated
     @State private var totalHeight = CGFloat.zero
 
+    /// The calculateChunkSize function determines the optimal number
+    /// of items per chunk based on the available width of the view.
     private func calculateChunkSize(geometry: GeometryProxy) {
         let availableWidth = geometry.size.width
         let itemWidth: CGFloat = 100
 
-        chunkSize = max(Int(availableWidth / (itemWidth + options.horizontalSpacing)), 1)
+        chunkSize = max(Int(availableWidth / (itemWidth + options.minWidth + options.horizontalSpacing)), 1)
     }
 
     // MARK: - Height Calculation