Use ListRow in InviteUsersScreen and MessageForwardingScreen. (#2196)

* Use ListRow in InviteUsersScreen and MessageForwardingScreen. * Remove button styles and fix snapshots.
2026-11-03 16:10:20 +00:00 · 2023-12-04 14:47:43 +00:00
parent 3fe5ec5ffa
commit 6905ac5f70
81 changed files with 304 additions and 628 deletions
@@ -14,113 +14,9 @@
 // limitations under the License.
 //

+import Compound
 import SwiftUI

-/// A view to be added on the trailing edge of a form row.
-struct FormRowAccessory: View {
-    @Environment(\.isEnabled) private var isEnabled
-    
-    enum Kind {
-        case navigationLink
-        case progressView
-        case singleSelection(isSelected: Bool)
-        case multipleSelection(isSelected: Bool)
-    }
-    
-    let kind: Kind
-    
-    static var navigationLink: Self {
-        .init(kind: .navigationLink)
-    }
-    
-    static var progressView: Self {
-        .init(kind: .progressView)
-    }
-    
-    static func singleSelection(isSelected: Bool) -> Self {
-        .init(kind: .singleSelection(isSelected: isSelected))
-    }
-    
-    static func multipleSelection(isSelected: Bool) -> Self {
-        .init(kind: .multipleSelection(isSelected: isSelected))
-    }
-    
-    var body: some View {
-        switch kind {
-        case .navigationLink:
-            Image(systemName: "chevron.forward")
-                .font(.compound.bodyMDSemibold)
-                .foregroundColor(.compound.iconTertiaryAlpha)
-        case .progressView:
-            ProgressView()
-        case .singleSelection(let isSelected):
-            if isSelected {
-                Image(systemName: "checkmark.circle.fill")
-                    .font(.compound.bodyLG)
-                    .foregroundColor(isSelected && isEnabled ? .compound.iconPrimary : .compound.iconTertiary)
-                    .accessibilityAddTraits(.isSelected)
-            }
-        case .multipleSelection(let isSelected):
-            Image(systemName: isSelected ? "checkmark.circle.fill" : "circle")
-                .font(.compound.bodyLG)
-                .foregroundColor(isSelected && isEnabled ? .compound.iconPrimary : .compound.iconTertiary)
-                .accessibilityAddTraits(isSelected ? .isSelected : [])
-        }
-    }
-    
-    init(kind: Kind) {
-        self.kind = kind
-    }
-}
-
-/// Default button styling for form rows.
-///
-/// The primitive style is needed to set the list row insets to `0`. The inner style is then needed
-/// to change the background colour depending on whether the button is currently pressed or not.
-struct FormButtonStyle: PrimitiveButtonStyle {
-    var iconAlignment: VerticalAlignment = .firstTextBaseline
-    /// An accessory to be added on the trailing side of the row.
-    var accessory: FormRowAccessory?
-    
-    func makeBody(configuration: Configuration) -> some View {
-        Button(action: configuration.trigger) {
-            configuration.label
-                .labelStyle(FormRowLabelStyle(alignment: iconAlignment, role: configuration.role))
-                .frame(maxHeight: .infinity) // Make sure the label fills the cell vertically.
-        }
-        .buttonStyle(Style(accessory: accessory))
-        .listRowInsets(EdgeInsets()) // Remove insets so the background fills the cell.
-    }
-    
-    /// Inner style used to set the pressed background colour.
-    private struct Style: ButtonStyle {
-        var accessory: FormRowAccessory?
-        
-        func makeBody(configuration: Configuration) -> some View {
-            HStack(spacing: 8) {
-                configuration.label
-                    .labelStyle(FormRowLabelStyle(role: configuration.role))
-                    .foregroundColor(.compound.textPrimary)
-                    .frame(maxWidth: .infinity, alignment: .leading)
-                
-                accessory
-            }
-            .contentShape(Rectangle())
-            .padding(FormRow.insets) // Re-apply the normal insets using padding.
-            .background(backgroundColor(for: configuration))
-        }
-        
-        private func backgroundColor(for configuration: Configuration) -> Color {
-            switch accessory?.kind {
-            case .none, .navigationLink, .progressView:
-                return configuration.isPressed ? .compound.bgSubtlePrimary : .compound.bgCanvasDefaultLevel1
-            default:
-                return .compound.bgCanvasDefaultLevel1
-            }
-        }
-    }
-}
-
 /// Small squared action button style for settings screens
 struct FormActionButtonStyle: ButtonStyle {
    let title: String
@@ -146,88 +42,13 @@ struct FormActionButtonStyle: ButtonStyle {
 struct FormButtonStyles_Previews: PreviewProvider, TestablePreview {
    static var previews: some View {
        Form {
-            Section {
+            Section { } header: {
                Button { } label: {
-                    Label("Hello world", systemImage: "globe")
+                    CompoundIcon(asset: Asset.Images.shareIos)
                }
-                .buttonStyle(FormButtonStyle())
-                
-                Button { } label: {
-                    Label("Block user", systemImage: "circle.slash")
-                }
-                .buttonStyle(FormButtonStyle(accessory: .progressView))
-                .disabled(true)
-                
-                Button { } label: {
-                    Label("Show something", systemImage: "rectangle.portrait")
-                }
-                .buttonStyle(FormButtonStyle(accessory: .navigationLink))
-
-                Button(role: .destructive) { } label: {
-                    Label("Destroy", systemImage: "trash")
-                }
-                .buttonStyle(FormButtonStyle())
-                
-                ShareLink(item: "test")
-                    .buttonStyle(FormButtonStyle())
+                .buttonStyle(FormActionButtonStyle(title: "Share"))
            }
-            .compoundFormSection()
-            
-            Section("Single selection") {
-                Button { } label: {
-                    Text("Hello world")
-                }
-                .buttonStyle(FormButtonStyle())
-               
-                Button { } label: {
-                    Text("Selected")
-                }
-                .buttonStyle(FormButtonStyle(accessory: .singleSelection(isSelected: true)))
-                
-                Button { } label: {
-                    Text("Selected (disabled)")
-                }
-                .buttonStyle(FormButtonStyle(accessory: .singleSelection(isSelected: true)))
-                .disabled(true)
-               
-                Button { } label: {
-                    Text("Unselected")
-                }
-                .buttonStyle(FormButtonStyle(accessory: .singleSelection(isSelected: false)))
-            }
-            .compoundFormSection()
-            
-            Section("Multiple selection") {
-                Button { } label: {
-                    Text("Hello world")
-                }
-                .buttonStyle(FormButtonStyle())
-               
-                Button { } label: {
-                    Text("Selected")
-                }
-                .buttonStyle(FormButtonStyle(accessory: .multipleSelection(isSelected: true)))
-                
-                Button { } label: {
-                    Text("Selected (disabled)")
-                }
-                .buttonStyle(FormButtonStyle(accessory: .multipleSelection(isSelected: true)))
-                .disabled(true)
-               
-                Button { } label: {
-                    Text("Unselected")
-                }
-                .buttonStyle(FormButtonStyle(accessory: .multipleSelection(isSelected: false)))
-            }
-            .compoundFormSection()
-
-            Section {
-                Button(role: .destructive) { } label: {
-                    Label("Destroy", systemImage: "x.circle")
-                }
-                .buttonStyle(FormButtonStyle())
-            }
-            .compoundFormSection()
        }
+        .compoundList()
    }
 }
@@ -1,22 +0,0 @@
-//
-// 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.
-//
-
-import SwiftUI
-
-enum FormRow {
-    /// Element specific insets that are used for all our Form rows.
-    static let insets = EdgeInsets(top: 7, leading: 16, bottom: 7, trailing: 16)
-}
@@ -1,82 +0,0 @@
-//
-// 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.
-//
-
-import SwiftUI
-
-struct FormRowLabelStyle: LabelStyle {
-    var alignment = VerticalAlignment.firstTextBaseline
-    var role: ButtonRole?
-
-    private var titleColor: Color {
-        if role == .destructive {
-            return .compound.textCriticalPrimary
-        } else {
-            return .compound.textPrimary
-        }
-    }
-
-    private var iconBackgroundColor: Color {
-        if role == .destructive {
-            return .compound._bgCriticalSubtleAlpha
-        } else {
-            return .compound._bgSubtleSecondaryAlpha
-        }
-    }
-
-    private var iconForegroundColor: Color {
-        if role == .destructive {
-            return .compound.textCriticalPrimary
-        } else {
-            return .compound.iconTertiaryAlpha
-        }
-    }
-
-    func makeBody(configuration: Configuration) -> some View {
-        HStack(alignment: alignment, spacing: 16) {
-            configuration.icon
-                .foregroundColor(iconForegroundColor)
-                .padding(4)
-                .scaledFrame(size: 30)
-                .background(iconBackgroundColor)
-                .clipShape(RoundedRectangle(cornerRadius: 8))
-            configuration.title
-                .font(.compound.bodyLG)
-                .foregroundColor(titleColor)
-        }
-    }
-}
-
-struct FormRowLabelStyle_Previews: PreviewProvider, TestablePreview {
-    static var previews: some View {
-        VStack(alignment: .leading, spacing: 12) {
-            Label("Person", systemImage: "person")
-                .labelStyle(FormRowLabelStyle())
-            
-            Label("Help", systemImage: "questionmark.circle")
-                .labelStyle(FormRowLabelStyle())
-            
-            Label("Camera", systemImage: "camera")
-                .labelStyle(FormRowLabelStyle())
-            
-            Label("Help", systemImage: "questionmark")
-                .labelStyle(FormRowLabelStyle())
-
-            Label("Destroy", systemImage: "x.circle")
-                .labelStyle(FormRowLabelStyle(role: .destructive))
-        }
-        .padding()
-    }
-}
@@ -1,130 +0,0 @@
-//
-// 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.
-//
-
-import MatrixRustSDK
-import SwiftUI
-
-struct UserProfileCell: View {
-    let user: UserProfileProxy
-    let membership: MembershipState?
-    let imageProvider: ImageProviderProtocol?
-    
-    private var subtitle: String? {
-        if let membershipText = membership?.localizedDescription {
-            return membershipText
-        } else if user.displayName != nil {
-            return user.userID
-        } else {
-            return nil
-        }
-    }
-    
-    var body: some View {
-        HStack(spacing: 16) {
-            LoadableAvatarImage(url: user.avatarURL,
-                                name: user.displayName,
-                                contentID: user.userID,
-                                avatarSize: .user(on: .startChat),
-                                imageProvider: imageProvider)
-                .accessibilityHidden(true)
-            
-            VStack(alignment: .leading, spacing: 0) {
-                Text(user.displayName ?? user.userID)
-                    .font(.compound.headingSM)
-                    .foregroundColor(.compound.textPrimary)
-                
-                if let subtitle {
-                    Text(subtitle)
-                        .font(.compound.bodyMD)
-                        .foregroundColor(.compound.textSecondary)
-                }
-                
-                warningContent
-                    .padding(.top, 2)
-            }
-            .accessibilityElement(children: .combine)
-        }
-    }
-    
-    // MARK: - Private
-    
-    @ViewBuilder
-    private var warningContent: some View {
-        if !user.isVerified, membership == nil {
-            HStack(alignment: .firstTextBaseline, spacing: 5) {
-                Text(Image(systemName: "exclamationmark.circle.fill"))
-                    .foregroundColor(.compound.textCriticalPrimary)
-                
-                Text(L10n.commonInviteUnknownProfile)
-                    .foregroundColor(.compound.textSecondary)
-            }
-            .font(.compound.bodyXS)
-        }
-    }
-}
-
-private extension MembershipState {
-    var localizedDescription: String? {
-        switch self {
-        case .join:
-            return L10n.screenRoomDetailsAlreadyAMember
-        case .invite:
-            return L10n.screenRoomDetailsAlreadyInvited
-        default:
-            return nil
-        }
-    }
-}
-
-struct UserProfileCell_Previews: PreviewProvider, TestablePreview {
-    static let action: () -> Void = { }
-    
-    static var previews: some View {
-        Form {
-            Button(action: action) {
-                UserProfileCell(user: .mockAlice, membership: nil, imageProvider: MockMediaProvider())
-            }
-            .buttonStyle(FormButtonStyle(accessory: .multipleSelection(isSelected: true)))
-            .previewDisplayName("Selected user")
-
-            Button(action: action) {
-                UserProfileCell(user: .mockBob, membership: nil, imageProvider: MockMediaProvider())
-            }
-            .buttonStyle(FormButtonStyle(accessory: .multipleSelection(isSelected: false)))
-            .previewDisplayName("Unselected user")
-            
-            Button(action: action) {
-                UserProfileCell(user: .mockCharlie, membership: .join, imageProvider: MockMediaProvider())
-            }
-            .disabled(true)
-            .buttonStyle(FormButtonStyle(accessory: .multipleSelection(isSelected: true)))
-            .previewDisplayName("Selected disabled user")
-            
-            Button(action: action) {
-                UserProfileCell(user: .init(userID: "@someone:matrix.org"), membership: .join, imageProvider: MockMediaProvider())
-            }
-            .disabled(true)
-            .buttonStyle(FormButtonStyle(accessory: .multipleSelection(isSelected: true)))
-            .previewDisplayName("Unverified joined user")
-            
-            Button(action: action) {
-                UserProfileCell(user: .init(userID: "@someone:matrix.org"), membership: nil, imageProvider: MockMediaProvider())
-            }
-            .buttonStyle(FormButtonStyle(accessory: .multipleSelection(isSelected: false)))
-            .previewDisplayName("Unverified user")
-        }
-    }
-}
@@ -0,0 +1,96 @@
+//
+// 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.
+//
+
+import Compound
+import MatrixRustSDK
+import SwiftUI
+
+struct UserProfileListRow: View {
+    let user: UserProfileProxy
+    let membership: MembershipState?
+    let imageProvider: ImageProviderProtocol?
+    
+    let kind: ListRow<LoadableAvatarImage, EmptyView, EmptyView, Bool>.Kind<EmptyView, Bool>
+    
+    var isUnknownProfile: Bool { !user.isVerified && membership == nil }
+    
+    private var subtitle: String? {
+        guard !isUnknownProfile else { return L10n.commonInviteUnknownProfile }
+        
+        if let membershipText = membership?.localizedDescription {
+            return membershipText
+        } else if user.displayName != nil {
+            return user.userID
+        } else {
+            return nil
+        }
+    }
+    
+    var body: some View {
+        ListRow(label: .avatar(title: user.displayName ?? user.userID,
+                               description: subtitle,
+                               icon: avatar,
+                               role: isUnknownProfile ? .error : nil),
+                kind: kind)
+    }
+    
+    var avatar: LoadableAvatarImage {
+        LoadableAvatarImage(url: user.avatarURL,
+                            name: user.displayName,
+                            contentID: user.userID,
+                            avatarSize: .user(on: .startChat),
+                            imageProvider: imageProvider)
+    }
+}
+
+private extension MembershipState {
+    var localizedDescription: String? {
+        switch self {
+        case .join:
+            return L10n.screenRoomDetailsAlreadyAMember
+        case .invite:
+            return L10n.screenRoomDetailsAlreadyInvited
+        default:
+            return nil
+        }
+    }
+}
+
+struct UserProfileCell_Previews: PreviewProvider, TestablePreview {
+    static let action: () -> Void = { }
+    
+    static var previews: some View {
+        Form {
+            UserProfileListRow(user: .mockAlice, membership: nil, imageProvider: MockMediaProvider(),
+                               kind: .multiSelection(isSelected: true, action: action))
+            
+            UserProfileListRow(user: .mockBob, membership: nil, imageProvider: MockMediaProvider(),
+                               kind: .multiSelection(isSelected: false, action: action))
+            
+            UserProfileListRow(user: .mockCharlie, membership: .join, imageProvider: MockMediaProvider(),
+                               kind: .multiSelection(isSelected: true, action: action))
+                .disabled(true)
+            
+            UserProfileListRow(user: .init(userID: "@someone:matrix.org"), membership: .join, imageProvider: MockMediaProvider(),
+                               kind: .multiSelection(isSelected: false, action: action))
+                .disabled(true)
+            
+            UserProfileListRow(user: .init(userID: "@someone:matrix.org"), membership: nil, imageProvider: MockMediaProvider(),
+                               kind: .multiSelection(isSelected: false, action: action))
+        }
+        .compoundList()
+    }
+}