|
1 | 1 | import GravatarUI |
2 | 2 | import SwiftUI |
3 | 3 |
|
4 | | -struct FailedUploadInfo { |
5 | | - let avatarLocalID: String |
6 | | - let supportsRetry: Bool |
7 | | - let errorMessage: String |
8 | | -} |
9 | | - |
10 | | -extension CGFloat { |
11 | | - fileprivate static let horizontalPadding: CGFloat = .DS.Padding.double |
12 | | - fileprivate static let selectedBorderWidth: CGFloat = 3 |
13 | | - fileprivate static let avatarCornerRadius: CGFloat = 6 |
14 | | -} |
15 | | - |
16 | 4 | struct AvatarPickerAvatarView: View { |
17 | 5 | let avatar: AvatarImageModel |
18 | 6 | let maxSize: CGFloat |
19 | 7 | let minSize: CGFloat |
20 | 8 | let shouldSelect: () -> Bool |
21 | | - let onFailedUploadTapped: (FailedUploadInfo) -> Void |
22 | | - let onActionTap: (AvatarAction) -> Void |
| 9 | + let avatarUploadErrorAction: (AvatarUploadErrorAction) -> Void |
| 10 | + let onActionSelected: (AvatarAction) -> Void |
| 11 | + |
| 12 | + @State private var uploadError: AvatarUploadErrorInfo? |
| 13 | + @State private var presentUploadErrorActions: Bool = false |
23 | 14 |
|
24 | 15 | var body: some View { |
25 | | - ZStack(alignment: .bottomTrailing) { |
26 | | - AvatarView( |
27 | | - url: avatar.url, |
28 | | - placeholderView: { |
29 | | - avatar.localImage?.resizable() |
30 | | - }, |
31 | | - loadingView: { |
32 | | - ProgressView() |
33 | | - .progressViewStyle(CircularProgressViewStyle()) |
34 | | - }, |
35 | | - transaction: .init(animation: .smooth) |
36 | | - ) |
37 | | - .scaledToFill() |
38 | | - .frame(minWidth: minSize, maxWidth: maxSize, minHeight: minSize, maxHeight: maxSize) |
39 | | - .background(Color(UIColor.secondarySystemBackground)) |
40 | | - .aspectRatio(1, contentMode: .fill) |
41 | | - .shape( |
42 | | - RoundedRectangle(cornerRadius: .avatarCornerRadius), |
43 | | - borderColor: Color.clear, |
44 | | - borderWidth: 0 |
45 | | - ) |
46 | | - .overlay { |
47 | | - switch avatar.state { |
48 | | - case .loading: |
49 | | - DimmingActivityIndicator() |
50 | | - .cornerRadius(.avatarCornerRadius) |
51 | | - case .error(let supportsRetry, let errorMessage): |
52 | | - DimmingErrorButton { |
53 | | - onFailedUploadTapped( |
54 | | - .init( |
55 | | - avatarLocalID: avatar.id, |
56 | | - supportsRetry: supportsRetry, |
57 | | - errorMessage: errorMessage |
58 | | - ) |
59 | | - ) |
60 | | - } |
61 | | - .cornerRadius(.avatarCornerRadius) |
62 | | - case .loaded: |
63 | | - if shouldSelect() { |
64 | | - ZStack { |
65 | | - // We want an inner border, so we draw it in the overlay |
66 | | - RoundedRectangle(cornerRadius: .avatarCornerRadius) |
67 | | - .stroke(Color.primary, lineWidth: .selectedBorderWidth) |
68 | | - .padding(1) |
69 | | - CheckmarkCircleView() |
70 | | - .transition(.scale) |
71 | | - } |
72 | | - } else { |
73 | | - EmptyView() |
74 | | - } |
75 | | - } |
76 | | - } |
77 | | - .transition(.opacity) |
| 16 | + AvatarView( |
| 17 | + url: avatar.url, |
| 18 | + placeholderView: { |
| 19 | + avatar.localImage?.resizable() |
| 20 | + }, |
| 21 | + loadingView: { |
| 22 | + ProgressView() |
| 23 | + .progressViewStyle(CircularProgressViewStyle()) |
| 24 | + }, |
| 25 | + transaction: .init(animation: .smooth) |
| 26 | + ) |
| 27 | + .scaledToFill() |
| 28 | + .frame(minWidth: minSize, maxWidth: maxSize, minHeight: minSize, maxHeight: maxSize) |
| 29 | + .background(Color(UIColor.secondarySystemBackground)) |
| 30 | + .aspectRatio(1, contentMode: .fill) |
| 31 | + .shape( |
| 32 | + RoundedRectangle(cornerRadius: .avatarCornerRadius), |
| 33 | + borderColor: Color.clear, |
| 34 | + borderWidth: 0 |
| 35 | + ) |
| 36 | + .overlay { |
| 37 | + avatarOverlayView(for: avatar.state) |
78 | 38 | } |
| 39 | + .transition(.opacity) |
| 40 | + .avatarUploadErrorDialog(isPresented: $presentUploadErrorActions, uploadError: $uploadError, action: { action in |
| 41 | + avatarUploadErrorAction(action) |
| 42 | + }) |
79 | 43 | .accessibilityElement(children: .combine) |
80 | 44 | .accessibilityAddTraits(.isButton) |
81 | 45 | .accessibilityAddTraits(shouldSelect() ? .isSelected : []) |
82 | 46 | .accessibilityLabel(Text(avatar.accessibilityLabel(altText: avatar.altText))) |
83 | 47 | } |
| 48 | + |
| 49 | + @ViewBuilder |
| 50 | + private func avatarOverlayView(for state: AvatarImageModel.State) -> some View { |
| 51 | + switch state { |
| 52 | + case .loading: |
| 53 | + loadingOverlayView() |
| 54 | + case .error(let supportsRetry, let errorMessage): |
| 55 | + errorOverlayView(supportsRetry: supportsRetry, errorMessage: errorMessage) |
| 56 | + case .loaded: |
| 57 | + loadedOverlayView(avatarSelected: shouldSelect()) |
| 58 | + } |
| 59 | + } |
| 60 | + |
| 61 | + private func loadingOverlayView() -> some View { |
| 62 | + DimmingActivityIndicator() |
| 63 | + .cornerRadius(.avatarCornerRadius) |
| 64 | + } |
| 65 | + |
| 66 | + private func errorOverlayView(supportsRetry: Bool, errorMessage: String) -> some View { |
| 67 | + DimmingErrorButton { |
| 68 | + uploadError = AvatarUploadErrorInfo(avatarLocalID: avatar.id, supportsRetry: supportsRetry, errorMessage: errorMessage) |
| 69 | + presentUploadErrorActions = true |
| 70 | + } |
| 71 | + .cornerRadius(.avatarCornerRadius) |
| 72 | + } |
| 73 | + |
| 74 | + @ViewBuilder |
| 75 | + private func loadedOverlayView(avatarSelected: Bool) -> some View { |
| 76 | + if avatarSelected { |
| 77 | + selectedCheckmarkView() |
| 78 | + } |
| 79 | + AvatarActionsMenu(isAvatarSelected: avatarSelected) { |
| 80 | + Color.clear |
| 81 | + } onActionSelected: { action in |
| 82 | + onActionSelected(action) |
| 83 | + } |
| 84 | + } |
| 85 | + |
| 86 | + private func selectedCheckmarkView() -> some View { |
| 87 | + ZStack { |
| 88 | + // We want an inner border, so we draw it in the overlay |
| 89 | + RoundedRectangle(cornerRadius: .avatarCornerRadius) |
| 90 | + .stroke(Color.primary, lineWidth: .selectedBorderWidth) |
| 91 | + .padding(1) |
| 92 | + CheckmarkCircleView() |
| 93 | + .transition(.scale) |
| 94 | + } |
| 95 | + } |
| 96 | +} |
| 97 | + |
| 98 | +extension CGFloat { |
| 99 | + fileprivate static let horizontalPadding: CGFloat = .DS.Padding.double |
| 100 | + fileprivate static let selectedBorderWidth: CGFloat = 3 |
| 101 | + fileprivate static let avatarCornerRadius: CGFloat = 6 |
84 | 102 | } |
85 | 103 |
|
86 | 104 | #Preview { |
87 | | - let avatar = AvatarImageModel.preview_init( |
88 | | - id: "1", |
89 | | - source: .remote(url: "https://gravatar.com/userimage/110207384/aa5f129a2ec75162cee9a1f0c472356a.jpeg?size=256") |
90 | | - ) |
| 105 | + let avatar = AvatarImageModel.preview_init() |
| 106 | + let avatarLoading = AvatarImageModel.preview_init(state: .loading) |
| 107 | + let avatarError = AvatarImageModel.preview_init(state: .error( |
| 108 | + supportsRetry: true, |
| 109 | + errorMessage: "Something went wrong. Retry?" |
| 110 | + )) |
| 111 | + let avatarErrorNoRetry = AvatarImageModel.preview_init(state: .error( |
| 112 | + supportsRetry: false, |
| 113 | + errorMessage: "Something terrible happened." |
| 114 | + )) |
91 | 115 | AvatarPickerAvatarView(avatar: avatar, maxSize: 90, minSize: 80) { |
92 | 116 | false |
93 | | - } onFailedUploadTapped: { _ in |
94 | | - } onActionTap: { _ in |
95 | | - } |
| 117 | + } avatarUploadErrorAction: { _ in |
| 118 | + } onActionSelected: { _ in } |
| 119 | + AvatarPickerAvatarView(avatar: avatar, maxSize: 90, minSize: 80) { |
| 120 | + true |
| 121 | + } avatarUploadErrorAction: { _ in |
| 122 | + } onActionSelected: { _ in } |
| 123 | + AvatarPickerAvatarView(avatar: avatarLoading, maxSize: 90, minSize: 80) { |
| 124 | + true |
| 125 | + } avatarUploadErrorAction: { _ in |
| 126 | + } onActionSelected: { _ in } |
| 127 | + AvatarPickerAvatarView(avatar: avatarError, maxSize: 90, minSize: 80) { |
| 128 | + true |
| 129 | + } avatarUploadErrorAction: { _ in |
| 130 | + } onActionSelected: { _ in } |
| 131 | + AvatarPickerAvatarView(avatar: avatarErrorNoRetry, maxSize: 90, minSize: 80) { |
| 132 | + true |
| 133 | + } avatarUploadErrorAction: { _ in |
| 134 | + } onActionSelected: { _ in } |
96 | 135 | } |
0 commit comments