Added scrolling for instant commands

Author: martinmitrevski

CHANGELOG.md

@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ### ✅ Added
 - Support for custom message receipt states
+- Scrolling of instant commands
 
 ### 🔄 Changed
 - Updated Nuke dependency to 11.3.0 for SPM

Sources/StreamChatSwiftUI/ChatChannel/Composer/Suggestions/InstantCommands/InstantCommandsView.swift

@@ -15,40 +15,66 @@ struct InstantCommandsView: View {
     var instantCommands: [CommandHandler]
     var commandSelected: (ComposerCommand) -> Void
 
+    @State private var itemHeight: CGFloat = 40
+    
     var body: some View {
         VStack {
             InstantCommandsHeader()
                 .standardPadding()
                 .accessibilityElement(children: .contain)
 
-            ForEach(0..<instantCommands.count, id: \.self) { i in
-                let command = instantCommands[i]
-                if let displayInfo = command.displayInfo {
-                    InstantCommandView(displayInfo: displayInfo)
-                        .standardPadding()
-                        .highPriorityGesture(
-                            TapGesture()
-                                .onEnded { _ in
-                                    let instantCommand = ComposerCommand(
-                                        id: command.id,
-                                        typingSuggestion: TypingSuggestion.empty,
-                                        displayInfo: command.displayInfo,
-                                        replacesMessageSent: command.replacesMessageSent
-                                    )
-                                    commandSelected(instantCommand)
+            ScrollView {
+                VStack {
+                    ForEach(0..<instantCommands.count, id: \.self) { i in
+                        let command = instantCommands[i]
+                        if let displayInfo = command.displayInfo {
+                            InstantCommandView(displayInfo: displayInfo)
+                                .standardPadding()
+                                .overlay(
+                                    GeometryReader { geo in
+                                        Color.clear.preference(key: HeightPreferenceKey.self, value: geo.size.height)
+                                    }
+                                )
+                                .onPreferenceChange(HeightPreferenceKey.self) { value in
+                                    if let value = value, value != itemHeight {
+                                        itemHeight = value
+                                    }
                                 }
-                        )
-                        .accessibilityElement(children: .contain)
-                        .accessibilityIdentifier("InstantCommandView")
+                                .highPriorityGesture(
+                                    TapGesture()
+                                        .onEnded { _ in
+                                            let instantCommand = ComposerCommand(
+                                                id: command.id,
+                                                typingSuggestion: TypingSuggestion.empty,
+                                                displayInfo: command.displayInfo,
+                                                replacesMessageSent: command.replacesMessageSent
+                                            )
+                                            commandSelected(instantCommand)
+                                        }
+                                )
+                                .accessibilityElement(children: .contain)
+                                .accessibilityIdentifier("InstantCommandView")
+                        }
+                    }
                 }
             }
         }
         .background(Color(colors.background))
+        .frame(height: viewHeight)
         .modifier(ShadowViewModifier())
         .padding(.all, 8)
         .animation(.spring())
         .accessibilityElement(children: .contain)
     }
+    
+    private var viewHeight: CGFloat {
+        if instantCommands.isEmpty {
+            return 40
+        }
+        let height = CGFloat(instantCommands.count) * itemHeight + 70
+        let maxHeight: CGFloat = 320
+        return height > maxHeight ? maxHeight : height
+    }
 }
 
 /// View for the instant commands header.

StreamChatSwiftUITests/Tests/ChatChannel/Suggestions/InstantCommandsView_Tests.swift

@@ -25,4 +25,70 @@ class InstantCommandsView_Tests: StreamChatTestCase {
         // Then
         assertSnapshot(matching: view, as: .image)
     }
+    
+    func test_instantCommandsContainerViewEmpty_snapshot() {
+        // Given
+        let commands: [CommandHandler] = []
+        
+        // When
+        let view = InstantCommandsView(instantCommands: commands, commandSelected: { _ in })
+            .applyDefaultSize()
+        
+        // Then
+        assertSnapshot(matching: view, as: .image)
+    }
+    
+    func test_instantCommandsContainerView_snapshot() {
+        // Given
+        let commands: [CommandHandler] = defaultCommands()
+        
+        // When
+        let view = InstantCommandsView(instantCommands: commands, commandSelected: { _ in })
+            .applyDefaultSize()
+        
+        // Then
+        assertSnapshot(matching: view, as: .image)
+    }
+    
+    func test_instantCommandsContainerMaxSize_snapshot() {
+        // Given
+        var commands = [CommandHandler]()
+        for i in 0..<5 {
+            commands.append(contentsOf: defaultCommands(suffix: "\(i)"))
+        }
+        
+        // When
+        let view = InstantCommandsView(instantCommands: commands, commandSelected: { _ in })
+            .applyDefaultSize()
+        
+        // Then
+        assertSnapshot(matching: view, as: .image)
+    }
+    
+    private func defaultCommands(suffix: String = "") -> [CommandHandler] {
+        let channelController = ChatChannelTestHelpers.makeChannelController(
+            chatClient: chatClient,
+            messages: []
+        )
+        var instantCommands = [CommandHandler]()
+        let giphyCommand = GiphyCommandHandler(
+            commandSymbol: "/giphy",
+            id: "/giphy\(suffix)"
+        )
+        instantCommands.append(giphyCommand)
+        let muteCommand = MuteCommandHandler(
+            channelController: channelController,
+            commandSymbol: "/mute",
+            id: "/mute\(suffix)"
+        )
+        let unmuteCommand = UnmuteCommandHandler(
+            channelController: channelController,
+            commandSymbol: "/unmute",
+            id: "/unmute\(suffix)"
+        )
+        instantCommands.append(muteCommand)
+        instantCommands.append(unmuteCommand)
+        
+        return instantCommands
+    }
 }