forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Put applied reactions inside context menu wrapper on native (#8078)
authored by
Eric Bailey
and committed by
GitHub
78220e29
c2d6fb82
+72
-71
+72
-71
src/components/dms/MessageItem.tsx
+72
-71
src/components/dms/MessageItem.tsx
···
21
21
import {useLingui} from '@lingui/react'
22
22
23
23
import {sanitizeDisplayName} from '#/lib/strings/display-names'
24
+
import {isNative} from '#/platform/detection'
24
25
import {useConvoActive} from '#/state/messages/convo'
25
26
import {type ConvoItem} from '#/state/messages/convo/types'
26
27
import {useSession} from '#/state/session'
···
103
104
return new RichTextAPI({text: message.text, facets: message.facets})
104
105
}, [message.text, message.facets])
105
106
107
+
const appliedReactions = (
108
+
<LayoutAnimationConfig skipEntering skipExiting>
109
+
{message.reactions && message.reactions.length > 0 && (
110
+
<View
111
+
style={[isFromSelf ? a.align_end : a.align_start, a.px_sm, a.pb_2xs]}>
112
+
<View
113
+
style={[
114
+
a.flex_row,
115
+
a.gap_2xs,
116
+
a.py_xs,
117
+
a.px_xs,
118
+
a.justify_center,
119
+
isFromSelf ? a.justify_end : a.justify_start,
120
+
a.flex_wrap,
121
+
a.pb_xs,
122
+
t.atoms.bg_contrast_25,
123
+
a.border,
124
+
t.atoms.border_contrast_low,
125
+
a.rounded_lg,
126
+
t.atoms.shadow_sm,
127
+
{
128
+
// vibe coded number
129
+
transform: [{translateY: -11}],
130
+
},
131
+
]}>
132
+
{message.reactions.map((reaction, _i, reactions) => {
133
+
let label
134
+
if (reaction.sender.did === currentAccount?.did) {
135
+
label = _(msg`You reacted ${reaction.value}`)
136
+
} else {
137
+
const senderDid = reaction.sender.did
138
+
const sender = convo.members.find(
139
+
member => member.did === senderDid,
140
+
)
141
+
if (sender) {
142
+
label = _(
143
+
msg`${sanitizeDisplayName(
144
+
sender.displayName || sender.handle,
145
+
)} reacted ${reaction.value}`,
146
+
)
147
+
} else {
148
+
label = _(msg`Someone reacted ${reaction.value}`)
149
+
}
150
+
}
151
+
return (
152
+
<Animated.View
153
+
entering={native(ZoomIn.springify(200).delay(400))}
154
+
exiting={reactions.length > 1 && native(ZoomOut.delay(200))}
155
+
layout={native(LinearTransition.delay(300))}
156
+
key={reaction.sender.did + reaction.value}
157
+
style={[a.p_2xs]}
158
+
accessible={true}
159
+
accessibilityLabel={label}
160
+
accessibilityHint={_(
161
+
msg`Double tap or long press the message to add a reaction`,
162
+
)}>
163
+
<Text emoji style={[a.text_sm]}>
164
+
{reaction.value}
165
+
</Text>
166
+
</Animated.View>
167
+
)
168
+
})}
169
+
</View>
170
+
</View>
171
+
)}
172
+
</LayoutAnimationConfig>
173
+
)
174
+
106
175
return (
107
176
<>
108
177
{isNewDay && <DateDivider date={message.sentAt} />}
···
147
216
/>
148
217
</View>
149
218
)}
219
+
220
+
{isNative && appliedReactions}
150
221
</ActionsWrapper>
151
222
152
-
<LayoutAnimationConfig skipEntering skipExiting>
153
-
{message.reactions && message.reactions.length > 0 && (
154
-
<View
155
-
style={[
156
-
isFromSelf ? a.align_end : a.align_start,
157
-
a.px_sm,
158
-
a.pb_2xs,
159
-
]}>
160
-
<View
161
-
style={[
162
-
a.flex_row,
163
-
a.gap_2xs,
164
-
a.py_xs,
165
-
a.px_xs,
166
-
a.justify_center,
167
-
isFromSelf ? a.justify_end : a.justify_start,
168
-
a.flex_wrap,
169
-
a.pb_xs,
170
-
t.atoms.bg_contrast_25,
171
-
a.border,
172
-
t.atoms.border_contrast_low,
173
-
a.rounded_lg,
174
-
t.atoms.shadow_sm,
175
-
{
176
-
// vibe coded number
177
-
transform: [{translateY: -11}],
178
-
},
179
-
]}>
180
-
{message.reactions.map((reaction, _i, reactions) => {
181
-
let label
182
-
if (reaction.sender.did === currentAccount?.did) {
183
-
label = _(msg`You reacted ${reaction.value}`)
184
-
} else {
185
-
const senderDid = reaction.sender.did
186
-
const sender = convo.members.find(
187
-
member => member.did === senderDid,
188
-
)
189
-
if (sender) {
190
-
label = _(
191
-
msg`${sanitizeDisplayName(
192
-
sender.displayName || sender.handle,
193
-
)} reacted ${reaction.value}`,
194
-
)
195
-
} else {
196
-
label = _(msg`Someone reacted ${reaction.value}`)
197
-
}
198
-
}
199
-
return (
200
-
<Animated.View
201
-
entering={native(ZoomIn.springify(200).delay(400))}
202
-
exiting={
203
-
reactions.length > 1 && native(ZoomOut.delay(200))
204
-
}
205
-
layout={native(LinearTransition.delay(300))}
206
-
key={reaction.sender.did + reaction.value}
207
-
style={[a.p_2xs]}
208
-
accessible={true}
209
-
accessibilityLabel={label}
210
-
accessibilityHint={_(
211
-
msg`Double tap or long press the message to add a reaction`,
212
-
)}>
213
-
<Text emoji style={[a.text_sm]}>
214
-
{reaction.value}
215
-
</Text>
216
-
</Animated.View>
217
-
)
218
-
})}
219
-
</View>
220
-
</View>
221
-
)}
222
-
</LayoutAnimationConfig>
223
+
{!isNative && appliedReactions}
223
224
224
225
{isLastInGroup && (
225
226
<MessageItemMetadata