Knocking Request Cell (#3516)

* knocking request cell * moved media provider
2026-11-02 21:33:26 +00:00 · 2024-11-15 13:42:30 +01:00
parent 7e192b7571
commit e17a4d5275
24 changed files with 267 additions and 36 deletions
@@ -0,0 +1,162 @@
+//
+// Copyright 2024 New Vector Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+// Please see LICENSE in the repository root for full details.
+//
+
+//
+// Copyright 2022-2024 New Vector Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+// Please see LICENSE in the repository root for full details.
+//
+
+import Compound
+import SwiftUI
+
+struct KnockRequestCellInfo {
+    let userID: String
+    let displayName: String?
+    let avatarUrl: URL?
+    let timestamp: String?
+    let reason: String?
+}
+
+struct KnockRequestCell: View {
+    let cellInfo: KnockRequestCellInfo
+    var mediaProvider: MediaProviderProtocol?
+    let onAccept: (String) -> Void
+    let onDecline: (String) -> Void
+    let onDeclineAndBan: (String) -> Void
+    
+    var body: some View {
+        VStack(spacing: 0) {
+            HStack(alignment: .top, spacing: 16) {
+                LoadableAvatarImage(url: cellInfo.avatarUrl,
+                                    name: cellInfo.displayName,
+                                    contentID: cellInfo.userID,
+                                    avatarSize: .user(on: .knockingUserList),
+                                    mediaProvider: mediaProvider)
+                VStack(alignment: .leading, spacing: 12) {
+                    VStack(alignment: .leading, spacing: 0) {
+                        HStack(alignment: .top, spacing: 0) {
+                            Text(cellInfo.displayName ?? cellInfo.userID)
+                                .font(.compound.bodyLGSemibold)
+                                .foregroundStyle(.compound.textPrimary)
+                                .frame(maxWidth: .infinity, alignment: .leading)
+                            if let timestamp = cellInfo.timestamp {
+                                Text(timestamp)
+                                    .font(.compound.bodySM)
+                                    .foregroundStyle(.compound.textSecondary)
+                            }
+                        }
+                        if cellInfo.displayName != nil {
+                            Text(cellInfo.userID)
+                                .font(.compound.bodyMD)
+                                .foregroundStyle(.compound.textSecondary)
+                        }
+                    }
+                    if let reason = cellInfo.reason {
+                        DisclosableText(text: reason)
+                    }
+                    actions
+                }
+            }
+            .padding(16)
+            Divider()
+        }
+    }
+    
+    @ViewBuilder
+    private var actions: some View {
+        HStack(spacing: 16) {
+            Button(L10n.actionDecline) {
+                onDecline(cellInfo.userID)
+            }
+            .buttonStyle(.compound(.secondary))
+            Button(L10n.actionAccept) {
+                onAccept(cellInfo.userID)
+            }
+            .buttonStyle(.compound(.primary))
+        }
+        Button(L10n.screenKnockRequestsListDeclineAndBanActionTitle, role: .destructive) {
+            onDeclineAndBan(cellInfo.userID)
+        }
+        .buttonStyle(.compound(.plain))
+        .frame(maxWidth: .infinity)
+        .padding(.top, 12)
+        .padding(.bottom, 4)
+    }
+}
+
+private struct DisclosableText: View {
+    let text: String
+    @State private var collapsedHeight = CGFloat.zero
+    @State private var expandedHeight = CGFloat.zero
+    @State private var isExpanded = false
+    
+    var body: some View {
+        HStack(alignment: .top, spacing: 4) {
+            Text(text)
+                .multilineTextAlignment(.leading)
+                .lineLimit(isExpanded ? nil : 3)
+                .font(.compound.bodyMD)
+                .foregroundStyle(.compound.textPrimary)
+                .frame(maxWidth: .infinity, alignment: .leading)
+                .onGeometryChange(for: CGFloat.self) { geometry in
+                    geometry.size.height
+                } action: { newValue in
+                    if !isExpanded {
+                        collapsedHeight = newValue
+                    }
+                }
+                .background {
+                    Text(text)
+                        .multilineTextAlignment(.leading)
+                        .font(.compound.bodyMD)
+                        .foregroundStyle(.compound.textPrimary)
+                        .fixedSize(horizontal: false, vertical: true)
+                        .onGeometryChange(for: CGFloat.self) { geometry in
+                            geometry.size.height
+                        } action: { newValue in
+                            expandedHeight = newValue
+                        }
+                        .hidden()
+                }
+            Button {
+                withAnimation {
+                    isExpanded.toggle()
+                }
+            } label: {
+                CompoundIcon(\.chevronDown, size: .medium, relativeTo: .compound.bodyMD)
+            }
+            .rotationEffect(.degrees(isExpanded ? 180 : 0))
+            .foregroundStyle(.compound.iconTertiary)
+            .opacity(collapsedHeight < expandedHeight ? 1 : 0)
+            .disabled(collapsedHeight >= expandedHeight)
+        }
+    }
+}
+
+struct KnockRequestCell_Previews: PreviewProvider, TestablePreview {
+    // swiftlint:disable:next line_length
+    static let aliceWithLongReason = KnockRequestCellInfo(userID: "@alice:matrix.org", displayName: "Alice", avatarUrl: nil, timestamp: "20 Nov 2024", reason: "Hello would like to join this room, also this is a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long reason")
+    
+    static let aliceWithShortReason = KnockRequestCellInfo(userID: "@alice:matrix.org", displayName: "Alice", avatarUrl: nil, timestamp: "20 Nov 2024", reason: "Hello, I am Alice and would like to join this room, please")
+    
+    static let aliceWithNoReason = KnockRequestCellInfo(userID: "@alice:matrix.org", displayName: "Alice", avatarUrl: nil, timestamp: "20 Nov 2024", reason: nil)
+    
+    static let aliceWithNoName = KnockRequestCellInfo(userID: "@alice:matrix.org", displayName: nil, avatarUrl: nil, timestamp: "20 Nov 2024", reason: nil)
+    
+    static var previews: some View {
+        KnockRequestCell(cellInfo: aliceWithLongReason, onAccept: { _ in }, onDecline: { _ in }, onDeclineAndBan: { _ in })
+            .previewDisplayName("Long reason")
+        KnockRequestCell(cellInfo: aliceWithShortReason, onAccept: { _ in }, onDecline: { _ in }, onDeclineAndBan: { _ in })
+            .previewDisplayName("Short reason")
+        KnockRequestCell(cellInfo: aliceWithNoReason, onAccept: { _ in }, onDecline: { _ in }, onDeclineAndBan: { _ in })
+            .previewDisplayName("No reason")
+        KnockRequestCell(cellInfo: aliceWithNoName, onAccept: { _ in }, onDecline: { _ in }, onDeclineAndBan: { _ in })
+            .previewDisplayName("No name")
+    }
+}