robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Add option to remove quoted post in composer (#3670)
* add option to remove quoted post
* add generous hitslop
samuel.fm
+47
-5
+8
-3
src/view/com/composer/Composer.tsx
+8
-3
src/view/com/composer/Composer.tsx
···
53
53
import {Button} from '#/components/Button'
54
54
import {EmojiArc_Stroke2_Corner0_Rounded as EmojiSmile} from '#/components/icons/Emoji'
55
55
import * as Prompt from '#/components/Prompt'
56
-
import {QuoteEmbed} from '../util/post-embeds/QuoteEmbed'
56
+
import {QuoteEmbed, QuoteX} from '../util/post-embeds/QuoteEmbed'
57
57
import {Text} from '../util/text/Text'
58
58
import * as Toast from '../util/Toast'
59
59
import {UserAvatar} from '../util/UserAvatar'
···
483
483
/>
484
484
)}
485
485
{quote ? (
486
-
<View style={[s.mt5, isWeb && s.mb10, {pointerEvents: 'none'}]}>
487
-
<QuoteEmbed quote={quote} />
486
+
<View style={[s.mt5, isWeb && s.mb10]}>
487
+
<View style={{pointerEvents: 'none'}}>
488
+
<QuoteEmbed quote={quote} />
489
+
</View>
490
+
{quote.uri !== initQuote?.uri && (
491
+
<QuoteX onRemove={() => setQuote(undefined)} />
492
+
)}
488
493
</View>
489
494
) : undefined}
490
495
</ScrollView>
+39
-2
src/view/com/util/post-embeds/QuoteEmbed.tsx
+39
-2
src/view/com/util/post-embeds/QuoteEmbed.tsx
···
1
1
import React from 'react'
2
-
import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
2
+
import {
3
+
StyleProp,
4
+
StyleSheet,
5
+
TouchableOpacity,
6
+
View,
7
+
ViewStyle,
8
+
} from 'react-native'
3
9
import {
4
10
AppBskyEmbedExternal,
5
11
AppBskyEmbedImages,
···
12
18
RichText as RichTextAPI,
13
19
} from '@atproto/api'
14
20
import {AtUri} from '@atproto/api'
15
-
import {Trans} from '@lingui/macro'
21
+
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
22
+
import {msg, Trans} from '@lingui/macro'
23
+
import {useLingui} from '@lingui/react'
16
24
import {useQueryClient} from '@tanstack/react-query'
17
25
26
+
import {HITSLOP_20} from '#/lib/constants'
27
+
import {s} from '#/lib/styles'
18
28
import {useModerationOpts} from '#/state/queries/preferences'
19
29
import {RQKEY as RQKEY_URI} from '#/state/queries/resolve-uri'
20
30
import {usePalette} from 'lib/hooks/usePalette'
···
174
184
{embed && <PostEmbeds embed={embed} moderation={moderation} />}
175
185
</Link>
176
186
</ContentHider>
187
+
)
188
+
}
189
+
190
+
export function QuoteX({onRemove}: {onRemove: () => void}) {
191
+
const {_} = useLingui()
192
+
return (
193
+
<TouchableOpacity
194
+
style={[
195
+
a.absolute,
196
+
a.p_xs,
197
+
a.rounded_full,
198
+
a.align_center,
199
+
a.justify_center,
200
+
{
201
+
top: 16,
202
+
right: 10,
203
+
backgroundColor: 'rgba(0, 0, 0, 0.75)',
204
+
},
205
+
]}
206
+
onPress={onRemove}
207
+
accessibilityRole="button"
208
+
accessibilityLabel={_(msg`Remove quote`)}
209
+
accessibilityHint={_(msg`Removes quoted post`)}
210
+
onAccessibilityEscape={onRemove}
211
+
hitSlop={HITSLOP_20}>
212
+
<FontAwesomeIcon size={12} icon="xmark" style={s.white} />
213
+
</TouchableOpacity>
177
214
)
178
215
}
179
216