Added possiblity to customize no content icons (#740)

Author: martinmitrevski

CHANGELOG.md

@@ -12,6 +12,7 @@ public struct FileAttachmentsView: View {
 
     @Injected(\.colors) private var colors
     @Injected(\.fonts) private var fonts
+    @Injected(\.images) private var images
 
     public init(channel: ChatChannel) {
         _viewModel = StateObject(
@@ -29,7 +30,7 @@ public struct FileAttachmentsView: View {
                 LoadingView()
             } else if viewModel.attachmentsDataSource.isEmpty {
                 NoContentView(
-                    imageName: "folder",
+                    image: images.noMedia,
                     title: L10n.ChatInfo.Files.emptyTitle,
                     description: L10n.ChatInfo.Files.emptyDesc
                 )

Sources/StreamChatSwiftUI/ChatChannel/ChannelInfo/FileAttachmentsView.swift

@@ -7,6 +7,8 @@ import SwiftUI
 
 /// View displaying media attachments.
 public struct MediaAttachmentsView: View {
+    
+    @Injected(\.images) private var images
 
     @StateObject private var viewModel: MediaAttachmentsViewModel
 
@@ -40,7 +42,7 @@ public struct MediaAttachmentsView: View {
                 LoadingView()
             } else if viewModel.mediaItems.isEmpty {
                 NoContentView(
-                    imageName: "folder",
+                    image: images.noMedia,
                     title: L10n.ChatInfo.Media.emptyTitle,
                     description: L10n.ChatInfo.Media.emptyDesc
                 )

Sources/StreamChatSwiftUI/ChatChannel/ChannelInfo/MediaAttachmentsView.swift

@@ -7,6 +7,8 @@ import SwiftUI
 
 /// View displaying pinned messages in the chat info screen.
 public struct PinnedMessagesView: View {
+    
+    @Injected(\.images) private var images
 
     @StateObject private var viewModel: PinnedMessagesViewModel
 
@@ -32,7 +34,7 @@ public struct PinnedMessagesView: View {
                 }
             } else {
                 NoContentView(
-                    imageName: "message",
+                    image: images.noContent,
                     title: L10n.ChatInfo.PinnedMessages.emptyTitle,
                     description: L10n.ChatInfo.PinnedMessages.emptyDesc,
                     shouldRotateImage: true

Sources/StreamChatSwiftUI/ChatChannel/ChannelInfo/PinnedMessagesView.swift

@@ -8,10 +8,12 @@ import SwiftUI
 ///
 /// Different view can be injected in its place.
 public struct NoChannelsView: View {
+    
+    @Injected(\.images) private var images
 
     public var body: some View {
         NoContentView(
-            imageName: "message",
+            image: images.noContent,
             title: L10n.Channel.NoContent.title,
             description: L10n.Channel.NoContent.message,
             shouldRotateImage: true

Sources/StreamChatSwiftUI/ChatChannelList/NoChannelsView.swift

@@ -6,12 +6,14 @@ import SwiftUI
 
 /// Default SDK implementation for the view displayed when there are no threads available.
 public struct NoThreadsView: View {
+    
+    @Injected(\.images) private var images
 
     public init() {}
 
     public var body: some View {
         NoContentView(
-            imageName: "text.bubble",
+            image: images.noThreads,
             title: nil,
             description: L10n.Thread.NoContent.message,
             shouldRotateImage: false

Sources/StreamChatSwiftUI/ChatThreadList/NoThreadsView.swift

@@ -10,22 +10,25 @@ struct NoContentView: View {
     @Injected(\.fonts) private var fonts
     @Injected(\.colors) private var colors
 
-    var imageName: String
+    var image: UIImage
     var title: String?
     var description: String
     var shouldRotateImage: Bool = false
+    var size: CGSize = CGSize(width: 100, height: 100)
 
     public var body: some View {
         VStack(spacing: 8) {
             Spacer()
 
             VStack(spacing: 8) {
-                Image(systemName: imageName)
+                Image(uiImage: image)
+                    .resizable()
+                    .renderingMode(.template)
+                    .aspectRatio(contentMode: .fit)
+                    .frame(width: size.width, height: size.height)
                     .rotation3DEffect(
                         shouldRotateImage ? .degrees(180) : .zero, axis: (x: 0, y: 1, z: 0)
                     )
-                    .aspectRatio(contentMode: .fit)
-                    .font(.system(size: 100))
                     .foregroundColor(Color(colors.textLowEmphasis))
                 title.map { Text($0) }
                     .font(fonts.bodyBold)

Sources/StreamChatSwiftUI/CommonViews/NoContentView.swift

@@ -278,4 +278,19 @@ public class Images {
     // MARK: - Threads
 
     public var threadIcon: UIImage = UIImage(systemName: "text.bubble")!
+    
+    // MARK: - No Content Icons
+    
+    public var noContent: UIImage = UIImage(
+        systemName: "message",
+        withConfiguration: UIImage.SymbolConfiguration(pointSize: 100, weight: .regular)
+    ) ?? UIImage.circleImage
+    public var noMedia: UIImage = UIImage(
+        systemName: "folder",
+        withConfiguration: UIImage.SymbolConfiguration(pointSize: 100, weight: .regular)
+    ) ?? UIImage.circleImage
+    public var noThreads: UIImage = UIImage(
+        systemName: "text.bubble",
+        withConfiguration: UIImage.SymbolConfiguration(pointSize: 100, weight: .regular)
+    ) ?? UIImage.circleImage
 }

Sources/StreamChatSwiftUI/Images.swift

@@ -42,7 +42,7 @@ class FileAttachmentsView_Tests: StreamChatTestCase {
             .applyDefaultSize()
 
         // Then
-        assertSnapshot(matching: view, as: .image(perceptualPrecision: precision))
+        AssertSnapshot(view, size: defaultScreenSize)
     }
 
     func test_fileAttachmentsView_loadingSnapshot() {

StreamChatSwiftUITests/Tests/ChatChannel/ChannelInfo/FileAttachmentsView_Tests.swift

@@ -43,7 +43,7 @@ class MediaAttachmentsView_Tests: StreamChatTestCase {
             .applyDefaultSize()
 
         // Then
-        assertSnapshot(matching: view, as: .image(perceptualPrecision: precision))
+        AssertSnapshot(view, size: .defaultAvatarSize)
     }
 
     func test_mediaAttachmentsView_loading() {