Added possibility to apply custom modifiers to the lists

Author: martinmitrevski

DemoAppSwiftUI/AppDelegate.swift

@@ -13,7 +13,7 @@ class AppDelegate: NSObject, UIApplicationDelegate {
 
     var chatClient: ChatClient = {
         var config = ChatClientConfig(apiKey: .init(apiKeyString))
-        // config.isLocalStorageEnabled = true
+        config.isLocalStorageEnabled = true
         config.applicationGroupIdentifier = applicationGroupIdentifier
 
         let client = ChatClient(config: config)

Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageListView.swift

@@ -133,6 +133,7 @@ public struct MessageListView<Factory: ViewFactory>: View, KeyboardReadable {
                         }
                         .id(listId)
                     }
+                    .modifier(factory.makeMessageListModifier())
                 }
                 .background(
                     factory.makeMessageListBackground(

Sources/StreamChatSwiftUI/ChatChannelList/ChatChannelHelperViews.swift

@@ -70,6 +70,13 @@ struct ChatTitleView: View {
     }
 }
 
+struct EmptyViewModifier: ViewModifier {
+    
+    public func body(content: Content) -> some View {
+        content
+    }
+}
+
 extension CGSize {
     /// Default size of the avatar used in the channel list.
     public static var defaultAvatarSize: CGSize = CGSize(width: 48, height: 48)

Sources/StreamChatSwiftUI/ChatChannelList/ChatChannelList.swift

@@ -166,6 +166,7 @@ struct ChannelsLazyVStack<Factory: ViewFactory>: View {
 
             factory.makeChannelListFooterView()
         }
+        .modifier(factory.makeChannelListModifier())
     }
 }
 

Sources/StreamChatSwiftUI/DefaultViewFactory.swift

@@ -162,6 +162,10 @@ extension ViewFactory {
         )
     }
 
+    public func makeChannelListModifier() -> some ViewModifier {
+        EmptyViewModifier()
+    }
+    
     // MARK: messages
 
     public func makeChannelDestination() -> (ChannelSelectionInfo) -> ChatChannelView<Self> {
@@ -196,6 +200,10 @@ extension ViewFactory {
         }
     }
 
+    public func makeMessageListModifier() -> some ViewModifier {
+        EmptyViewModifier()
+    }
+    
     public func makeMessageAvatarView(for userDisplayInfo: UserDisplayInfo) -> some View {
         MessageAvatarView(avatarURL: userDisplayInfo.imageURL)
     }

Sources/StreamChatSwiftUI/ViewFactory.swift

@@ -168,6 +168,10 @@ public protocol ViewFactory: AnyObject {
         channelDestination: @escaping (ChannelSelectionInfo) -> ChannelDestination
     ) -> ChannelListSearchResultItem
 
+    associatedtype ChannelListModifier: ViewModifier
+    /// Returns a view modifier applied to the channel list.
+    func makeChannelListModifier() -> ChannelListModifier
+    
     // MARK: - messages
 
     associatedtype ChannelDestination: View
@@ -178,6 +182,10 @@ public protocol ViewFactory: AnyObject {
     /// Returns a function that creats the message thread destination.
     func makeMessageThreadDestination() -> (ChatChannel, ChatMessage) -> MessageThreadDestination
 
+    associatedtype MessageListModifier: ViewModifier
+    /// Returns a view modifier applied to the message list.
+    func makeMessageListModifier() -> MessageListModifier
+    
     associatedtype UserAvatar: View
     /// Creates the message avatar view.
     /// - Parameter userDisplayInfo: the author's display info.

StreamChatSwiftUITests/Tests/Utils/ViewFactory_Tests.swift

@@ -593,6 +593,28 @@ class ViewFactory_Tests: StreamChatTestCase {
         // Then
         XCTAssert(view is EmptyView)
     }
+    
+    func test_viewFactory_makeChannelListModifier() {
+        // Given
+        let viewFactory = DefaultViewFactory.shared
+        
+        // When
+        let modifier = viewFactory.makeChannelListModifier()
+        
+        // Then
+        XCTAssert(modifier is EmptyViewModifier)
+    }
+    
+    func test_viewFactory_makeMessageListModifier() {
+        // Given
+        let viewFactory = DefaultViewFactory.shared
+        
+        // When
+        let modifier = viewFactory.makeMessageListModifier()
+        
+        // Then
+        XCTAssert(modifier is EmptyViewModifier)
+    }
 }
 
 extension ChannelAction: Equatable {

docusaurus/docs/iOS/swiftui/components/helper-views.md

@@ -179,6 +179,25 @@ var body: some Scene {
 }
 ```
 
+## Applying Custom Modifier
+
+You can customize the channel list further, by applying your own custom view modifier. In order to do this, you need to implement the method `makeChannelListModifier`, which by default doesn't apply anything additional to the view. Here's an example how to add vertical padding to the channel list:
+
+```swift
+func makeChannelListModifier() -> some ViewModifier {
+    VerticalPaddingViewModifier()
+}
+
+struct VerticalPaddingViewModifier: ViewModifier {
+    
+    public func body(content: Content) -> some View {
+        content
+            .padding(.vertical, 8)
+    }
+    
+}
+```
+
 ## Customizing the Leading and Trailing Areas
 
 When the user swipes to the right, the SDK by default shows two buttons - one for deleting the channel and one for showing more options. You can customize this view by implementing the `makeTrailingSwipeActionsView` in the `ViewFactory`. Please note that the width of this view is fixed. It's up to the integrating code how the available width will be filled.

docusaurus/docs/iOS/swiftui/components/message-list.md

@@ -55,6 +55,25 @@ let appearance = Appearance(colors: colors)
 streamChat = StreamChat(chatClient: chatClient, appearance: appearance)
 ```
 
+## Applying Custom Modifier
+
+You can customize the message list further, by applying your own custom view modifier. In order to do this, you need to implement the method `makeMessageListModifier`, which by default doesn't apply anything additional to the view. Here's an example how to add vertical padding to the message list:
+
+```swift
+func makeMessageListModifier() -> some ViewModifier {
+    VerticalPaddingViewModifier()
+}
+
+struct VerticalPaddingViewModifier: ViewModifier {
+    
+    public func body(content: Content) -> some View {
+        content
+            .padding(.vertical, 8)
+    }
+    
+}
+```
+
 ## Custom Message Container View
 
 However, if you are building a livestream app similar to Twitch, you will need a different type of user interface for the message views. The SwiftUI SDK allows swapping the message container view with your own implementation, without needing to implement the whole message list, the composer or the reactions. In order to do this, you need to implement the method `makeMessageContainerView` in the `ViewFactory` protocol.