Updated creation of quoted messages

martinmitrevski · martinmitrevski · commit ced3f6e1922b · 2022-03-25T11:06:44.000+01:00
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/Composer/MessageComposerView.swift b/Sources/StreamChatSwiftUI/ChatChannel/Composer/MessageComposerView.swift
@@ -211,8 +211,11 @@ public struct ComposerInputView<Factory: ViewFactory>: View {
     public var body: some View {
         VStack {
             if let quotedMessage = quotedMessage.wrappedValue {
-                factory.makeQuotedMessageComposerView(
-                    quotedMessage: quotedMessage
+                factory.makeQuotedMessageView(
+                    quotedMessage: quotedMessage,
+                    fillAvailableSpace: true,
+                    isInComposer: true,
+                    scrolledId: .constant(nil)
                 )
             }
             
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/FileAttachmentView.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/FileAttachmentView.swift
@@ -18,10 +18,10 @@ public struct FileAttachmentsContainer<Factory: ViewFactory>: View {
     public var body: some View {
         VStack(alignment: message.alignmentInBubble) {
             if let quotedMessage = utils.messageCachingUtils.quotedMessage(for: message) {
-                QuotedMessageViewContainer(
-                    factory: factory,
+                factory.makeQuotedMessageView(
                     quotedMessage: quotedMessage,
                     fillAvailableSpace: !message.attachmentCounts.isEmpty,
+                    isInComposer: false,
                     scrolledId: $scrolledId
                 )
             }
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/GiphyAttachmentView.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/GiphyAttachmentView.swift
@@ -27,10 +27,10 @@ public struct GiphyAttachmentView<Factory: ViewFactory>: View {
             spacing: 0
         ) {
             if let quotedMessage = utils.messageCachingUtils.quotedMessage(for: message) {
-                QuotedMessageViewContainer(
-                    factory: factory,
+                factory.makeQuotedMessageView(
                     quotedMessage: quotedMessage,
                     fillAvailableSpace: !message.attachmentCounts.isEmpty,
+                    isInComposer: false,
                     scrolledId: $scrolledId
                 )
             }
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/ImageAttachmentView.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/ImageAttachmentView.swift
@@ -26,10 +26,10 @@ public struct ImageAttachmentContainer<Factory: ViewFactory>: View {
             spacing: 0
         ) {
             if let quotedMessage = utils.messageCachingUtils.quotedMessage(for: message) {
-                QuotedMessageViewContainer(
-                    factory: factory,
+                factory.makeQuotedMessageView(
                     quotedMessage: quotedMessage,
                     fillAvailableSpace: !message.attachmentCounts.isEmpty,
+                    isInComposer: false,
                     scrolledId: $scrolledId
                 )
             }
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/LinkAttachmentView.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/LinkAttachmentView.swift
@@ -27,10 +27,10 @@ public struct LinkAttachmentContainer<Factory: ViewFactory>: View {
             spacing: 0
         ) {
             if let quotedMessage = utils.messageCachingUtils.quotedMessage(for: message) {
-                QuotedMessageViewContainer(
-                    factory: factory,
+                factory.makeQuotedMessageView(
                     quotedMessage: quotedMessage,
                     fillAvailableSpace: !message.attachmentCounts.isEmpty,
+                    isInComposer: false,
                     scrolledId: $scrolledId
                 )
             }
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageView.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageView.swift
@@ -115,10 +115,10 @@ public struct MessageTextView<Factory: ViewFactory>: View {
             spacing: 0
         ) {
             if let quotedMessage = utils.messageCachingUtils.quotedMessage(for: message) {
-                QuotedMessageViewContainer(
-                    factory: factory,
+                factory.makeQuotedMessageView(
                     quotedMessage: quotedMessage,
                     fillAvailableSpace: !message.attachmentCounts.isEmpty,
+                    isInComposer: false,
                     scrolledId: $scrolledId
                 )
             }
@@ -145,10 +145,10 @@ public struct EmojiTextView<Factory: ViewFactory>: View {
         ZStack {
             if let quotedMessage = utils.messageCachingUtils.quotedMessage(for: message) {
                 VStack(spacing: 0) {
-                    QuotedMessageViewContainer(
-                        factory: factory,
+                    factory.makeQuotedMessageView(
                         quotedMessage: quotedMessage,
                         fillAvailableSpace: !message.attachmentCounts.isEmpty,
+                        isInComposer: false,
                         scrolledId: $scrolledId
                     )
                     
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/QuotedMessageView.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/QuotedMessageView.swift
@@ -54,19 +54,29 @@ struct QuotedMessageViewContainer<Factory: ViewFactory>: View {
 }
 
 /// View for the quoted message.
-struct QuotedMessageView: View {
-    
+public struct QuotedMessageView: View {
+
     @Injected(\.images) private var images
     @Injected(\.fonts) private var fonts
     @Injected(\.colors) private var colors
     
     private let attachmentWidth: CGFloat = 36
     
-    var quotedMessage: ChatMessage
-    var fillAvailableSpace: Bool
-    var forceLeftToRight: Bool
+    public var quotedMessage: ChatMessage
+    public var fillAvailableSpace: Bool
+    public var forceLeftToRight: Bool
     
-    var body: some View {
+    public init(
+        quotedMessage: ChatMessage,
+        fillAvailableSpace: Bool,
+        forceLeftToRight: Bool
+    ) {
+        self.quotedMessage = quotedMessage
+        self.fillAvailableSpace = fillAvailableSpace
+        self.forceLeftToRight = forceLeftToRight
+    }
+    
+    public var body: some View {
         HStack(alignment: .top) {
             if !quotedMessage.attachmentCounts.isEmpty {
                 ZStack {
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/VideoAttachmentView.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/VideoAttachmentView.swift
@@ -19,10 +19,10 @@ public struct VideoAttachmentsContainer<Factory: ViewFactory>: View {
         VStack {
             if let quotedMessage = utils.messageCachingUtils.quotedMessage(for: message) {
                 VStack {
-                    QuotedMessageViewContainer(
-                        factory: factory,
+                    factory.makeQuotedMessageView(
                         quotedMessage: quotedMessage,
                         fillAvailableSpace: !message.attachmentCounts.isEmpty,
+                        isInComposer: false,
                         scrolledId: $scrolledId
                     )
                     
diff --git a/Sources/StreamChatSwiftUI/DefaultViewFactory.swift b/Sources/StreamChatSwiftUI/DefaultViewFactory.swift
@@ -680,15 +680,18 @@ extension ViewFactory {
         QuotedMessageHeaderView(quotedMessage: quotedMessage)
     }
     
-    public func makeQuotedMessageComposerView(
-        quotedMessage: ChatMessage
+    public func makeQuotedMessageView(
+        quotedMessage: ChatMessage,
+        fillAvailableSpace: Bool,
+        isInComposer: Bool,
+        scrolledId: Binding<String?>
     ) -> some View {
         QuotedMessageViewContainer(
             factory: self,
             quotedMessage: quotedMessage,
-            fillAvailableSpace: true,
-            forceLeftToRight: true,
-            scrolledId: .constant(nil)
+            fillAvailableSpace: fillAvailableSpace,
+            forceLeftToRight: isInComposer,
+            scrolledId: scrolledId
         )
     }
     
diff --git a/Sources/StreamChatSwiftUI/ViewFactory.swift b/Sources/StreamChatSwiftUI/ViewFactory.swift
@@ -667,12 +667,19 @@ public protocol ViewFactory: AnyObject {
         quotedMessage: Binding<ChatMessage?>
     ) -> QuotedMessageHeaderViewType
     
-    associatedtype QuotedMessageComposerViewType: View
-    /// Creates the quoted message shown in a composer view.
-    /// - Parameter quotedMessage: the quoted message shown in the composer input.
-    func makeQuotedMessageComposerView(
-        quotedMessage: ChatMessage
-    ) -> QuotedMessageComposerViewType
+    associatedtype QuotedMessageViewType: View
+    /// Creates the quoted message view, shown in the message list and the composer.
+    /// - Parameters:
+    ///  - quotedMessage: the quoted message.
+    ///  - fillAvailableSpace: whether the quoted container should take all the available space.
+    ///  - isInComposer: whether the quoted message is shown in the composer.
+    ///  - scrolledId: binding of the scroll id, use it to scroll to the original message.
+    func makeQuotedMessageView(
+        quotedMessage: ChatMessage,
+        fillAvailableSpace: Bool,
+        isInComposer: Bool,
+        scrolledId: Binding<String?>
+    ) -> QuotedMessageViewType
     
     associatedtype EditedMessageHeaderViewType: View
     /// Creates the edited message header view in the composer.
diff --git a/StreamChatSwiftUITests/Tests/Utils/ViewFactory_Tests.swift b/StreamChatSwiftUITests/Tests/Utils/ViewFactory_Tests.swift
@@ -464,8 +464,11 @@ class ViewFactory_Tests: StreamChatTestCase {
         let viewFactory = DefaultViewFactory.shared
         
         // When
-        let view = viewFactory.makeQuotedMessageComposerView(
-            quotedMessage: message
+        let view = viewFactory.makeQuotedMessageView(
+            quotedMessage: message,
+            fillAvailableSpace: true,
+            isInComposer: false,
+            scrolledId: .constant(nil)
         )
         
         // Then
diff --git a/docusaurus/docs/iOS/swiftui/components/inline-replies.md b/docusaurus/docs/iOS/swiftui/components/inline-replies.md
@@ -18,24 +18,33 @@ public func makeQuotedMessageHeaderView(
 }
 ```
 
-Another customization that can be done is to swap the preview of the message shown in the composer. The default implementation is able to present several different attachments, such as text, image, video, gifs, links and files. The UI consists of small image and either the message text (if present), or a description for the attachment.
+Another customization that can be done is to swap the preview of the message shown in the composer, as well as in the message list (when it's sent). The default implementation is able to present several different attachments, such as text, image, video, gifs, links and files. The UI consists of small image and either the message text (if present), or a description for the attachment.
 
-In order to swap this UI, you need to implement the `makeQuotedMessageComposerView` method in the `ViewFactory`. The method passes the quoted message as a parameter.
+In order to swap this UI, you need to implement the `makeQuotedMessageView` method in the `ViewFactory`.
 
 ```swift
-public func makeQuotedMessageComposerView(
-        quotedMessage: ChatMessage
+func makeQuotedMessageView(
+    quotedMessage: ChatMessage,
+    fillAvailableSpace: Bool,
+    isInComposer: Bool,
+    scrolledId: Binding<String?>
 ) -> some View {
-    QuotedMessageViewContainer(
+    CustomQuotedMessageView(
         quotedMessage: quotedMessage,
-        fillAvailableSpace: true,
-        forceLeftToRight: true,
-        scrolledId: .constant(nil)
+        fillAvailableSpace: fillAvailableSpace,
+        isInComposer: isInComposer,
+        scrolledId: scrolledId
     )
 }
 ```
 
-If you only want to customize the message avatar, without changing the whole quoted message composer view, you can implement the `makeQuotedMessageAvatarView`. This method is called with `UserDisplayInfo` that you can use to populate the avatar's data, as well as the required `size` for this view. Note, if you don't set this size in your implementation, the view might not fit in the quoted message composer view.
+The parameters provided in this method are:
+- `quotedMessage` - the quoted message that will be displayed.
+- `fillAvailableSpace` - whether the view should take whole available space (e.q. when it contains attachments).
+- `isInComposer` - whether the quoted message is displayed in the composer, in case you want to distinguish it from being displayed in the message list.
+- `scrolledId` - binding that allows you to scroll to the original place where the quoted message was sent.
+
+If you only want to customize the message avatar, without changing the whole quoted message view, you can implement the `makeQuotedMessageAvatarView`. This method is called with `UserDisplayInfo` that you can use to populate the avatar's data, as well as the required `size` for this view. Note, if you don't set this size in your implementation, the view might not fit in the quoted message composer view.
 
 ```swift
 func makeQuotedMessageAvatarView(

Original file line number	Diff line number	Diff line change
`@@ -211,8 +211,11 @@ public struct ComposerInputView<Factory: ViewFactory>: View {`
`211`	`211`	`public var body: some View {`
`212`	`212`	`VStack {`
`213`	`213`	`if let quotedMessage = quotedMessage.wrappedValue {`
`214`		`- factory.makeQuotedMessageComposerView(`
`215`		`- quotedMessage: quotedMessage`
	`214`	`+ factory.makeQuotedMessageView(`
	`215`	`+ quotedMessage: quotedMessage,`
	`216`	`+ fillAvailableSpace: true,`
	`217`	`+ isInComposer: true,`
	`218`	`+ scrolledId: .constant(nil)`
`216`	`219`	`)`
`217`	`220`	`}`
`218`	`221`
Original file line number	Diff line number	Diff line change
`@@ -18,10 +18,10 @@ public struct FileAttachmentsContainer<Factory: ViewFactory>: View {`
`18`	`18`	`public var body: some View {`
`19`	`19`	`VStack(alignment: message.alignmentInBubble) {`
`20`	`20`	`if let quotedMessage = utils.messageCachingUtils.quotedMessage(for: message) {`
`21`		`- QuotedMessageViewContainer(`
`22`		`- factory: factory,`
	`21`	`+ factory.makeQuotedMessageView(`
`23`	`22`	`quotedMessage: quotedMessage,`
`24`	`23`	`fillAvailableSpace: !message.attachmentCounts.isEmpty,`
	`24`	`+ isInComposer: false,`
`25`	`25`	`scrolledId: $scrolledId`
`26`	`26`	`)`
`27`	`27`	`}`
Original file line number	Diff line number	Diff line change
`@@ -27,10 +27,10 @@ public struct GiphyAttachmentView<Factory: ViewFactory>: View {`
`27`	`27`	`spacing: 0`
`28`	`28`	`) {`
`29`	`29`	`if let quotedMessage = utils.messageCachingUtils.quotedMessage(for: message) {`
`30`		`- QuotedMessageViewContainer(`
`31`		`- factory: factory,`
	`30`	`+ factory.makeQuotedMessageView(`
`32`	`31`	`quotedMessage: quotedMessage,`
`33`	`32`	`fillAvailableSpace: !message.attachmentCounts.isEmpty,`
	`33`	`+ isInComposer: false,`
`34`	`34`	`scrolledId: $scrolledId`
`35`	`35`	`)`
`36`	`36`	`}`
Original file line number	Diff line number	Diff line change
`@@ -26,10 +26,10 @@ public struct ImageAttachmentContainer<Factory: ViewFactory>: View {`
`26`	`26`	`spacing: 0`
`27`	`27`	`) {`
`28`	`28`	`if let quotedMessage = utils.messageCachingUtils.quotedMessage(for: message) {`
`29`		`- QuotedMessageViewContainer(`
`30`		`- factory: factory,`
	`29`	`+ factory.makeQuotedMessageView(`
`31`	`30`	`quotedMessage: quotedMessage,`
`32`	`31`	`fillAvailableSpace: !message.attachmentCounts.isEmpty,`
	`32`	`+ isInComposer: false,`
`33`	`33`	`scrolledId: $scrolledId`
`34`	`34`	`)`
`35`	`35`	`}`
Original file line number	Diff line number	Diff line change
`@@ -27,10 +27,10 @@ public struct LinkAttachmentContainer<Factory: ViewFactory>: View {`
`27`	`27`	`spacing: 0`
`28`	`28`	`) {`
`29`	`29`	`if let quotedMessage = utils.messageCachingUtils.quotedMessage(for: message) {`
`30`		`- QuotedMessageViewContainer(`
`31`		`- factory: factory,`
	`30`	`+ factory.makeQuotedMessageView(`
`32`	`31`	`quotedMessage: quotedMessage,`
`33`	`32`	`fillAvailableSpace: !message.attachmentCounts.isEmpty,`
	`33`	`+ isInComposer: false,`
`34`	`34`	`scrolledId: $scrolledId`
`35`	`35`	`)`
`36`	`36`	`}`