Added slot for customizing reactions (#243)

Author: martinmitrevski

Sources/StreamChatSwiftUI/ChatChannel/Reactions/ReactionsHelperViews.swift

@@ -5,11 +5,16 @@
 import StreamChat
 import SwiftUI
 
-struct ReactionsHStack<Content: View>: View {
+public struct ReactionsHStack<Content: View>: View {
     var message: ChatMessage
     var content: () -> Content
 
-    var body: some View {
+    public init(message: ChatMessage, content: @escaping () -> Content) {
+        self.message = message
+        self.content = content
+    }
+    
+    public var body: some View {
         HStack {
             if !message.isSentByCurrentUser {
                 Spacer()

Sources/StreamChatSwiftUI/ChatChannel/Reactions/ReactionsOverlayContainer.swift

@@ -37,7 +37,10 @@ struct ReactionsOverlayContainer: View {
             Spacer()
         }
         .offset(
-            x: offsetX,
+            x: message.reactionOffsetX(
+                for: contentRect,
+                reactionsSize: reactionsSize
+            ),
             y: -20
         )
     }
@@ -54,9 +57,16 @@ struct ReactionsOverlayContainer: View {
         let entrySize = 28
         return CGFloat(reactions.count * entrySize)
     }
+}
+
+public extension ChatMessage {
 
-    private var offsetX: CGFloat {
-        if message.isSentByCurrentUser {
+    func reactionOffsetX(
+        for contentRect: CGRect,
+        availableWidth: CGFloat = UIScreen.main.bounds.width,
+        reactionsSize: CGFloat
+    ) -> CGFloat {
+        if isSentByCurrentUser {
             var originX = contentRect.origin.x - reactionsSize / 2
             let total = originX + reactionsSize
             if total > availableWidth {
@@ -72,13 +82,9 @@ struct ReactionsOverlayContainer: View {
             return contentRect.origin.x - originX
         }
     }
-    
-    private var availableWidth: CGFloat {
-        UIScreen.main.bounds.width
-    }
 }
 
-struct ReactionsAnimatableView: View {
+public struct ReactionsAnimatableView: View {
     @Injected(\.colors) private var colors
     @Injected(\.images) private var images
 
@@ -89,7 +95,7 @@ struct ReactionsAnimatableView: View {
 
     @State var animationStates: [CGFloat]
 
-    init(
+    public init(
         message: ChatMessage,
         useLargeIcons: Bool = false,
         reactions: [MessageReactionType],
@@ -104,45 +110,84 @@ struct ReactionsAnimatableView: View {
         )
     }
 
-    var body: some View {
+    public var body: some View {
         HStack {
             ForEach(reactions) { reaction in
-                if let image = iconProvider(for: reaction) {
-                    Button {
-                        onReactionTap(reaction)
-                    } label: {
-                        Image(uiImage: image)
-                            .resizable()
-                            .scaledToFit()
-                            .foregroundColor(color(for: reaction))
-                            .frame(width: useLargeIcons ? 25 : 20, height: useLargeIcons ? 27 : 20)
-                    }
-                    .background(reactionSelectedBackgroundColor(for: reaction).cornerRadius(8))
-                    .scaleEffect(index(for: reaction) != nil ? animationStates[index(for: reaction)!] : 1)
-                    .onAppear {
-                        guard let index = index(for: reaction) else {
-                            return
-                        }
-                        
-                        withAnimation(
-                            .interpolatingSpring(
-                                stiffness: 170,
-                                damping: 8
-                            )
-                            .delay(0.1 * CGFloat(index + 1))
-                        ) {
-                            animationStates[index] = 1
-                        }
-                    }
-                    .accessibilityElement(children: .contain)
-                    .accessibilityIdentifier("reaction-\(reaction.rawValue)")
-                }
+                ReactionAnimatableView(
+                    message: message,
+                    reaction: reaction,
+                    useLargeIcons: useLargeIcons,
+                    reactions: reactions,
+                    animationStates: $animationStates,
+                    onReactionTap: onReactionTap
+                )
             }
         }
         .padding(.all, 6)
         .padding(.horizontal, 4)
         .reactionsBubble(for: message, background: colors.background8)
     }
+}
+
+public struct ReactionAnimatableView: View {
+    @Injected(\.colors) private var colors
+    @Injected(\.images) private var images
+    
+    let message: ChatMessage
+    let reaction: MessageReactionType
+    var useLargeIcons = false
+    var reactions: [MessageReactionType]
+    @Binding var animationStates: [CGFloat]
+    var onReactionTap: (MessageReactionType) -> Void
+    
+    public init(
+        message: ChatMessage,
+        reaction: MessageReactionType,
+        useLargeIcons: Bool = false,
+        reactions: [MessageReactionType],
+        animationStates: Binding<[CGFloat]>,
+        onReactionTap: @escaping (MessageReactionType) -> Void
+    ) {
+        self.message = message
+        self.reaction = reaction
+        self.useLargeIcons = useLargeIcons
+        self.reactions = reactions
+        _animationStates = animationStates
+        self.onReactionTap = onReactionTap
+    }
+    
+    public var body: some View {
+        if let image = iconProvider(for: reaction) {
+            Button {
+                onReactionTap(reaction)
+            } label: {
+                Image(uiImage: image)
+                    .resizable()
+                    .scaledToFit()
+                    .foregroundColor(color(for: reaction))
+                    .frame(width: useLargeIcons ? 25 : 20, height: useLargeIcons ? 27 : 20)
+            }
+            .background(reactionSelectedBackgroundColor(for: reaction).cornerRadius(8))
+            .scaleEffect(index(for: reaction) != nil ? animationStates[index(for: reaction)!] : 1)
+            .onAppear {
+                guard let index = index(for: reaction) else {
+                    return
+                }
+                
+                withAnimation(
+                    .interpolatingSpring(
+                        stiffness: 170,
+                        damping: 8
+                    )
+                    .delay(0.1 * CGFloat(index + 1))
+                ) {
+                    animationStates[index] = 1
+                }
+            }
+            .accessibilityElement(children: .contain)
+            .accessibilityIdentifier("reaction-\(reaction.rawValue)")
+        }
+    }
 
     private func reactionSelectedBackgroundColor(for reaction: MessageReactionType) -> Color? {
         var colors = colors

Sources/StreamChatSwiftUI/ChatChannel/Reactions/ReactionsOverlayView.swift

@@ -109,7 +109,7 @@ public struct ReactionsOverlayView<Factory: ViewFactory>: View {
                     )
                     .overlay(
                         channel.config.reactionsEnabled ?
-                            ReactionsOverlayContainer(
+                            factory.makeReactionsContentView(
                                 message: viewModel.message,
                                 contentRect: messageDisplayInfo.frame,
                                 onReactionTap: { reaction in

Sources/StreamChatSwiftUI/DefaultViewFactory.swift

@@ -750,6 +750,18 @@ extension ViewFactory {
         )
     }
 
+    public func makeReactionsContentView(
+        message: ChatMessage,
+        contentRect: CGRect,
+        onReactionTap: @escaping (MessageReactionType) -> Void
+    ) -> some View {
+        ReactionsOverlayContainer(
+            message: message,
+            contentRect: contentRect,
+            onReactionTap: onReactionTap
+        )
+    }
+    
     public func makeReactionsBackgroundView(
         currentSnapshot: UIImage,
         popInAnimationInProgress: Bool

Sources/StreamChatSwiftUI/ViewFactory.swift

@@ -752,6 +752,13 @@ public protocol ViewFactory: AnyObject {
         popInAnimationInProgress: Bool
     ) -> ReactionsBackground
 
+    associatedtype ReactionsContentView: View
+    func makeReactionsContentView(
+        message: ChatMessage,
+        contentRect: CGRect,
+        onReactionTap: @escaping (MessageReactionType) -> Void
+    ) -> ReactionsContentView
+    
     associatedtype QuotedMessageHeaderViewType: View
     /// Creates the quoted message header view in the composer.
     /// - Parameters:

StreamChatSwiftUITests/Tests/ChatChannel/ReactionsOverlayView_Tests.swift

@@ -147,6 +147,84 @@ class ReactionsOverlayView_Tests: StreamChatTestCase {
         // Then
         assertSnapshot(matching: view, as: .image)
     }
+    
+    func test_reactionAnimatableView_snapshot() {
+        // Given
+        let message = ChatMessage.mock(text: "Test message")
+        let reactions: [MessageReactionType] = [.init(rawValue: "love"), .init(rawValue: "like")]
+        
+        // When
+        let view = ReactionAnimatableView(
+            message: message,
+            reaction: .init(rawValue: "love"),
+            reactions: reactions,
+            animationStates: .constant([1.0, 1.0]),
+            onReactionTap: { _ in }
+        )
+        .frame(width: 24, height: 24)
+        
+        // Then
+        assertSnapshot(matching: view, as: .image)
+    }
+    
+    func test_reactionsOverlayContainer_snapshot() {
+        // Given
+        let message = ChatMessage.mock(text: "Test message")
+        
+        // When
+        let view = ReactionsOverlayContainer(
+            message: message,
+            contentRect: .init(x: -60, y: 200, width: 300, height: 300),
+            onReactionTap: { _ in }
+        )
+        
+        // Then
+        assertSnapshot(matching: view, as: .image)
+    }
+    
+    func test_reactionsAnimatableView_snapshot() {
+        // Given
+        let message = ChatMessage.mock(text: "Test message")
+        let reactions: [MessageReactionType] = [.init(rawValue: "love"), .init(rawValue: "like")]
+
+        // When
+        let view = ReactionsAnimatableView(
+            message: message,
+            reactions: reactions,
+            onReactionTap: { _ in }
+        )
+        
+        // Then
+        assertSnapshot(matching: view, as: .image)
+    }
+    
+    func test_chatMessage_reactionOffsetCurrentUser() {
+        // Given
+        let message = ChatMessage.mock(text: "Test message", isSentByCurrentUser: true)
+        
+        // When
+        let offset = message.reactionOffsetX(
+            for: .init(origin: .zero, size: .init(width: 50, height: 50)),
+            reactionsSize: 25
+        )
+        
+        // Then
+        XCTAssert(offset == -12.5)
+    }
+    
+    func test_chatMessage_reactionOffsetOtherUser() {
+        // Given
+        let message = ChatMessage.mock(text: "Test message", isSentByCurrentUser: false)
+        
+        // When
+        let offset = message.reactionOffsetX(
+            for: .init(origin: .zero, size: .init(width: 50, height: 50)),
+            reactionsSize: 25
+        )
+        
+        // Then
+        XCTAssert(offset == 12.5)
+    }
 }
 
 struct VerticallyCenteredView<Content: View>: View {

StreamChatSwiftUITests/Tests/ChatChannel/__Snapshots__/ReactionsOverlayView_Tests/test_reactionAnimatableView_snapshot.1.png

@@ -744,6 +744,21 @@ class ViewFactory_Tests: StreamChatTestCase {
         // Then
         XCTAssert(view is TypingIndicatorBottomView)
     }
+    
+    func test_viewFactory_makeReactionsContentView() {
+        // Given
+        let viewFactory = DefaultViewFactory.shared
+        
+        // When
+        let view = viewFactory.makeReactionsContentView(
+            message: .mock(),
+            contentRect: .zero,
+            onReactionTap: { _ in }
+        )
+        
+        // Then
+        XCTAssert(view is ReactionsOverlayContainer)
+    }
 }
 
 extension ChannelAction: Equatable {