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-02 21:33:26 +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)
+    }
+}
@@ -0,0 +1,80 @@
+//
+// Copyright 2023 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (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.0
+//
+// 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 Foundation
+import SwiftUI
+
+/// A mock of the SwiftUI `LayoutSubviews` struct
+struct LayoutSubviewsMock: Equatable, RandomAccessCollection {
+    var subviews: [LayoutSubviewMock]
+    
+    /// A type that contains a subsequence of proxy values.
+    typealias SubSequence = LayoutSubviewsMock
+    
+    /// A type that contains a proxy value.
+    typealias Element = LayoutSubviewMock
+    
+    /// A type that you can use to index proxy values.
+    typealias Index = Int
+    
+    /// The index of the first subview.
+    var startIndex: Int {
+        subviews.startIndex
+    }
+    
+    /// An index that's one higher than the last subview.
+    var endIndex: Int {
+        subviews.endIndex
+    }
+    
+    /// Gets the subview proxy at a specified index.
+    subscript(index: Int) -> LayoutSubviewsMock.Element {
+        subviews[index]
+    }
+    
+    /// Gets the subview proxies in the specified range.
+    subscript(bounds: Range<Int>) -> LayoutSubviewsMock {
+        LayoutSubviewsMock(subviews: Array(subviews[bounds]))
+    }
+    
+    /// Gets the subview proxies with the specified indicies.
+    subscript<S>(indices: S) -> LayoutSubviewsMock where S: Sequence, S.Element == Int {
+        LayoutSubviewsMock(subviews: Array(indices.map { subviews[$0] }))
+    }
+}
+
+/// A mock of the SwiftUI `LayoutSubview` struct
+struct LayoutSubviewMock: FlowLayoutSubview, Equatable {
+    var size: CGSize
+    
+    var placedPositionCallback: (CGRect) -> Void
+    
+    func sizeThatFits(_ proposal: ProposedViewSize) -> CGSize {
+        size
+    }
+    
+    func place(at position: CGPoint, anchor: UnitPoint, proposal: ProposedViewSize) {
+        let rect = CGRect(origin: position, size: CGSize(width: proposal.width ?? 0, height: proposal.height ?? 0))
+        placedPositionCallback(rect)
+    }
+    
+    static func == (lhs: LayoutSubviewMock, rhs: LayoutSubviewMock) -> Bool {
+        lhs.size == rhs.size
+    }
+}
+
+extension LayoutSubviewsMock: FlowLayoutSubviews { }