Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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