ansxor.ca
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
add pressed state to quote embed (#9592)
samuel.fm
+29
-13
src/components/Post/Embed/index.tsx
+29
-13
src/components/Post/Embed/index.tsx
···
1
-
import React from 'react'
2
import {View} from 'react-native'
3
import {
4
type $Typed,
···
11
import {Trans} from '@lingui/macro'
12
import {useQueryClient} from '@tanstack/react-query'
13
14
-
import {usePalette} from '#/lib/hooks/usePalette'
15
import {makeProfileLink} from '#/lib/routes/links'
16
import {useModerationOpts} from '#/state/preferences/moderation-opts'
17
import {unstableCacheProfileView} from '#/state/queries/profile'
···
19
import {Link} from '#/view/com/util/Link'
20
import {PostMeta} from '#/view/com/util/PostMeta'
21
import {atoms as a, useTheme} from '#/alf'
22
import {ContentHider} from '#/components/moderation/ContentHider'
23
import {PostAlerts} from '#/components/moderation/PostAlerts'
24
import {RichText} from '#/components/RichText'
···
232
viewContext?: QuoteEmbedViewContext
233
}) {
234
const moderationOpts = useModerationOpts()
235
-
const quote = React.useMemo<$Typed<AppBskyFeedDefs.PostView>>(
236
() => ({
237
...embed.view,
238
$type: 'app.bsky.feed.defs#postView',
···
241
}),
242
[embed],
243
)
244
-
const moderation = React.useMemo(() => {
245
return moderationOpts ? moderatePost(quote, moderationOpts) : undefined
246
}, [quote, moderationOpts])
247
248
const t = useTheme()
249
const queryClient = useQueryClient()
250
-
const pal = usePalette('default')
251
const itemUrip = new AtUri(quote.uri)
252
const itemHref = makeProfileLink(quote.author, 'post', itemUrip.rkey)
253
const itemTitle = `Post by ${quote.author.handle}`
254
255
-
const richText = React.useMemo(() => {
256
if (
257
!bsky.dangerousIsType<AppBskyFeedPost.Record>(
258
quote.record,
···
266
: undefined
267
}, [quote.record])
268
269
-
const onBeforePress = React.useCallback(() => {
270
unstableCacheProfileView(queryClient, quote.author)
271
onOpen?.()
272
}, [queryClient, quote.author, onOpen])
273
274
-
const [hover, setHover] = React.useState(false)
275
return (
276
<View
277
style={[a.mt_sm]}
278
-
onPointerEnter={() => setHover(true)}
279
-
onPointerLeave={() => setHover(false)}>
280
<ContentHider
281
modui={moderation?.ui('contentList')}
282
style={[a.rounded_md, a.border, t.atoms.border_contrast_low, style]}
···
284
childContainerStyle={[a.pt_sm]}>
285
{({active}) => (
286
<>
287
-
{!active && <SubtleHover hover={hover} style={[a.rounded_md]} />}
288
<Link
289
style={[!active && a.p_md]}
290
-
hoverStyle={{borderColor: pal.colors.borderLinkHover}}
291
href={itemHref}
292
title={itemTitle}
293
-
onBeforePress={onBeforePress}>
294
<View pointerEvents="none">
295
<PostMeta
296
author={quote.author}
···
1
+
import {useCallback, useMemo} from 'react'
2
import {View} from 'react-native'
3
import {
4
type $Typed,
···
11
import {Trans} from '@lingui/macro'
12
import {useQueryClient} from '@tanstack/react-query'
13
14
import {makeProfileLink} from '#/lib/routes/links'
15
import {useModerationOpts} from '#/state/preferences/moderation-opts'
16
import {unstableCacheProfileView} from '#/state/queries/profile'
···
18
import {Link} from '#/view/com/util/Link'
19
import {PostMeta} from '#/view/com/util/PostMeta'
20
import {atoms as a, useTheme} from '#/alf'
21
+
import {useInteractionState} from '#/components/hooks/useInteractionState'
22
import {ContentHider} from '#/components/moderation/ContentHider'
23
import {PostAlerts} from '#/components/moderation/PostAlerts'
24
import {RichText} from '#/components/RichText'
···
232
viewContext?: QuoteEmbedViewContext
233
}) {
234
const moderationOpts = useModerationOpts()
235
+
const quote = useMemo<$Typed<AppBskyFeedDefs.PostView>>(
236
() => ({
237
...embed.view,
238
$type: 'app.bsky.feed.defs#postView',
···
241
}),
242
[embed],
243
)
244
+
const moderation = useMemo(() => {
245
return moderationOpts ? moderatePost(quote, moderationOpts) : undefined
246
}, [quote, moderationOpts])
247
248
const t = useTheme()
249
const queryClient = useQueryClient()
250
const itemUrip = new AtUri(quote.uri)
251
const itemHref = makeProfileLink(quote.author, 'post', itemUrip.rkey)
252
const itemTitle = `Post by ${quote.author.handle}`
253
254
+
const richText = useMemo(() => {
255
if (
256
!bsky.dangerousIsType<AppBskyFeedPost.Record>(
257
quote.record,
···
265
: undefined
266
}, [quote.record])
267
268
+
const onBeforePress = useCallback(() => {
269
unstableCacheProfileView(queryClient, quote.author)
270
onOpen?.()
271
}, [queryClient, quote.author, onOpen])
272
273
+
const {
274
+
state: hover,
275
+
onIn: onPointerEnter,
276
+
onOut: onPointerLeave,
277
+
} = useInteractionState()
278
+
const {
279
+
state: pressed,
280
+
onIn: onPressIn,
281
+
onOut: onPressOut,
282
+
} = useInteractionState()
283
return (
284
<View
285
style={[a.mt_sm]}
286
+
onPointerEnter={onPointerEnter}
287
+
onPointerLeave={onPointerLeave}>
288
<ContentHider
289
modui={moderation?.ui('contentList')}
290
style={[a.rounded_md, a.border, t.atoms.border_contrast_low, style]}
···
292
childContainerStyle={[a.pt_sm]}>
293
{({active}) => (
294
<>
295
+
{!active && (
296
+
<SubtleHover
297
+
native
298
+
hover={hover || pressed}
299
+
style={[a.rounded_md]}
300
+
/>
301
+
)}
302
<Link
303
style={[!active && a.p_md]}
304
+
hoverStyle={t.atoms.border_contrast_high}
305
href={itemHref}
306
title={itemTitle}
307
+
onBeforePress={onBeforePress}
308
+
onPressIn={onPressIn}
309
+
onPressOut={onPressOut}>
310
<View pointerEvents="none">
311
<PostMeta
312
author={quote.author}