Add expand/collapse UI for reactions (#1249)

* Add expand/collapse UI for reactions - Adds a CollapsibleFlowLayout for controlling the layout - Adds tests for this layout and some mocks for testing layouts generally - Improves the rendering of the reaction buttons which were not pixel perfect - Adds the UI for the expand collapse buttons including the count of hidden items in the collapsed state. * Add comment for reactionsCollapsed binding. * Remove Flow and simplify implementation - Remove SwiftUI-Flow - Add strings by importing from Localyse - Remove count on expand button as requires GeometryReader and can cause loops - Don't use GeometryReader for hiding reactions with opacity(just put them way off screen for now) - Fix unit and UI tests * Address PR comments - use synthesized inits - use rows rather than lines for naming flow layout - other naming improvements - reactions were already rendered in another ui test, removing my test on favour of those and updating the screenshots for those.
2026-11-03 06:55:59 +00:00 · 2023-07-10 16:13:58 +01:00
parent c453cc0680
commit 2cec1858ff
29 changed files with 610 additions and 143 deletions
@@ -0,0 +1,137 @@
+//
+// Copyright 2023 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+@testable import ElementX
+import SwiftUI
+import XCTest
+
+final class CollapsibleFlowLayoutTests: XCTestCase {
+    func testFlowLayoutWithExpandAndCollapse() {
+        let containerSize = CGSize(width: 250, height: 400)
+        var flowLayout = CollapsibleFlowLayout(itemSpacing: 5, rowSpacing: 5, rowsBeforeCollapsible: 2)
+        
+        var placedViews: [CGRect] = []
+        let placedViewsCallback = { rect in
+            placedViews.append(rect)
+        }
+        let subviews: [LayoutSubviewMock] = [
+            LayoutSubviewMock(size: CGSize(width: 100, height: 50), placedPositionCallback: placedViewsCallback),
+            LayoutSubviewMock(size: CGSize(width: 100, height: 50), placedPositionCallback: placedViewsCallback),
+            LayoutSubviewMock(size: CGSize(width: 100, height: 50), placedPositionCallback: placedViewsCallback),
+            LayoutSubviewMock(size: CGSize(width: 100, height: 50), placedPositionCallback: placedViewsCallback),
+            LayoutSubviewMock(size: CGSize(width: 100, height: 50), placedPositionCallback: placedViewsCallback),
+            LayoutSubviewMock(size: CGSize(width: 100, height: 50), placedPositionCallback: placedViewsCallback),
+            // The expand/collapse button
+            LayoutSubviewMock(size: CGSize(width: 100, height: 50), placedPositionCallback: placedViewsCallback)
+        ]
+        let subviewsMock = LayoutSubviewsMock(subviews: subviews)
+        var a: () = ()
+        var size = flowLayout.sizeThatFits(proposal: ProposedViewSize(containerSize), subviews: subviewsMock, cache: &a)
+        
+        // Collapsed target layout has 2 rows of 2 items, so just 1 spacing between items hence 205, 105
+        XCTAssertEqual(size, CGSize(width: 205, height: 105))
+        flowLayout.placeSubviews(in: CGRect(origin: .zero, size: size), proposal: ProposedViewSize(containerSize), subviews: subviewsMock, cache: &a)
+        
+        // 3 items are hidden in the collapsed state (put in the centre with zero size)
+        var targetPlacements: [CGRect] = [
+            CGRect(x: 0, y: 25, width: 100, height: 50),
+            CGRect(x: 105, y: 25, width: 100, height: 50),
+            CGRect(x: 0, y: 80, width: 100, height: 50),
+            CGRect(x: 105, y: 80, width: 100, height: 50),
+            CGRect(x: -10000, y: -10000, width: 0, height: 0),
+            CGRect(x: -10000, y: -10000, width: 0, height: 0),
+            CGRect(x: -10000, y: -10000, width: 0, height: 0)
+        ]
+        XCTAssertEqual(placedViews, targetPlacements)
+        
+        flowLayout.collapsed = false
+        placedViews = []
+        
+        size = flowLayout.sizeThatFits(proposal: ProposedViewSize(containerSize), subviews: subviewsMock, cache: &a)
+        
+        // Expanded target layout has 4 rows and no more than 2 items per row
+        XCTAssertEqual(size, CGSize(width: 205, height: 215))
+        
+        flowLayout.placeSubviews(in: CGRect(origin: .zero, size: size), proposal: ProposedViewSize(containerSize), subviews: subviewsMock, cache: &a)
+        
+        targetPlacements = [
+            CGRect(x: 0, y: 25, width: 100, height: 50),
+            CGRect(x: 105, y: 25, width: 100, height: 50),
+            CGRect(x: 0, y: 80, width: 100, height: 50),
+            CGRect(x: 105, y: 80, width: 100, height: 50),
+            CGRect(x: 0, y: 135, width: 100, height: 50),
+            CGRect(x: 105, y: 135, width: 100, height: 50),
+            CGRect(x: 0, y: 190, width: 100, height: 50)
+        ]
+        XCTAssertEqual(placedViews, targetPlacements)
+    }
+    
+    func testFlowLayoutWithExpandButtonIsHidden() {
+        let containerSize = CGSize(width: 250, height: 400)
+        let flowLayout = CollapsibleFlowLayout(itemSpacing: 5, rowSpacing: 5, rowsBeforeCollapsible: 2)
+        
+        var placedViews: [CGRect] = []
+        let placedViewsCallback = { rect in
+            placedViews.append(rect)
+        }
+        let subviews: [LayoutSubviewMock] = [
+            LayoutSubviewMock(size: CGSize(width: 100, height: 50), placedPositionCallback: placedViewsCallback),
+            LayoutSubviewMock(size: CGSize(width: 100, height: 50), placedPositionCallback: placedViewsCallback),
+            LayoutSubviewMock(size: CGSize(width: 100, height: 50), placedPositionCallback: placedViewsCallback),
+            LayoutSubviewMock(size: CGSize(width: 100, height: 50), placedPositionCallback: placedViewsCallback)
+        ]
+        let subviewsMock = LayoutSubviewsMock(subviews: subviews)
+        var a: () = ()
+        let size = flowLayout.sizeThatFits(proposal: ProposedViewSize(containerSize), subviews: subviewsMock, cache: &a)
+        
+        XCTAssertEqual(size, CGSize(width: 205, height: 105))
+        flowLayout.placeSubviews(in: CGRect(origin: .zero, size: size), proposal: ProposedViewSize(containerSize), subviews: subviewsMock, cache: &a)
+        
+        let targetPlacements: [CGRect] = [
+            CGRect(x: 0, y: 25, width: 100, height: 50),
+            CGRect(x: 105, y: 25, width: 100, height: 50),
+            CGRect(x: 0, y: 80, width: 100, height: 50),
+            // Button is hidden
+            CGRect(x: -10000, y: -10000, width: 0, height: 0)
+        ]
+        XCTAssertEqual(placedViews, targetPlacements)
+    }
+    
+    func testFlowLayoutEmptyState() {
+        let containerSize = CGSize(width: 250, height: 400)
+        let flowLayout = CollapsibleFlowLayout(itemSpacing: 5, rowSpacing: 5, rowsBeforeCollapsible: 2)
+        
+        var placedViews: [CGRect] = []
+        let placedViewsCallback = { rect in
+            placedViews.append(rect)
+        }
+        let subviews: [LayoutSubviewMock] = [
+            // No subviews to layout just the expand/collapse button
+            LayoutSubviewMock(size: CGSize(width: 100, height: 50), placedPositionCallback: placedViewsCallback)
+        ]
+        let subviewsMock = LayoutSubviewsMock(subviews: subviews)
+        var a: () = ()
+        let size = flowLayout.sizeThatFits(proposal: ProposedViewSize(containerSize), subviews: subviewsMock, cache: &a)
+        
+        XCTAssertEqual(size, CGSize(width: 0, height: 0))
+        flowLayout.placeSubviews(in: CGRect(origin: .zero, size: size), proposal: ProposedViewSize(containerSize), subviews: subviewsMock, cache: &a)
+        
+        let targetPlacements: [CGRect] = [
+            CGRect(x: -10000, y: -10000, width: 0, height: 0)
+        ]
+        XCTAssertEqual(placedViews, targetPlacements)
+    }
+}