acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

use button instead of TextLink for show more

Browse Source
This commit is contained in:
Samuel Newman
2025-06-12 14:05:17 +03:00
parent a26b20b56c
commit 7ec4d7b1d5
7 changed files with 61 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ShowMore.tsx
+31
View File
@@ -0,0 +1,31 @@
import {useCallback} from 'react'
import {LayoutAnimation} from 'react-native'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {HITSLOP_10} from '#/lib/constants'
import {atoms as a} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
export function ShowMore({onPress: onPressProp}: {onPress: () => void}) {
const {_} = useLingui()
const onPress = useCallback(() => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
onPressProp()
}, [onPressProp])
return (
<Button
label={_(msg`Expand post text`)}
onPress={onPress}
color="primary"
variant="ghost"
style={[a.self_start, a.my_xs, a.rounded_2xs]}
hitSlop={HITSLOP_10}>
<ButtonText>
<Trans>Show More</Trans>
</ButtonText>
</Button>
)
}
src/screens/PostThread/components/ThreadItemPost.tsx
+3 -14
View File
@@ -6,13 +6,11 @@ import {
AtUri,
RichText as RichTextAPI,
} from '@atproto/api'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {Trans} from '@lingui/macro'
import {useActorStatus} from '#/lib/actor-status'
import {MAX_POST_LINES} from '#/lib/constants'
import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
import {usePalette} from '#/lib/hooks/usePalette'
import {makeProfileLink} from '#/lib/routes/links'
import {countLines} from '#/lib/strings/helpers'
import {
@@ -24,7 +22,6 @@ import {type ThreadItem} from '#/state/queries/usePostThread/types'
import {useSession} from '#/state/session'
import {type OnPostSuccessData} from '#/state/shell/composer'
import {useMergedThreadgateHiddenReplies} from '#/state/threadgate-hidden-replies'
import {TextLink} from '#/view/com/util/Link'
import {PostEmbeds, PostEmbedViewContext} from '#/view/com/util/post-embeds'
import {PostMeta} from '#/view/com/util/PostMeta'
import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
@@ -42,6 +39,7 @@ import {PostHider} from '#/components/moderation/PostHider'
import {type AppModerationCause} from '#/components/Pills'
import {PostControls} from '#/components/PostControls'
import {RichText} from '#/components/RichText'
import {ShowMore} from '#/components/ShowMore'
import * as Skele from '#/components/Skeleton'
import {SubtleWebHover} from '#/components/SubtleWebHover'
import {Text} from '#/components/Typography'
@@ -187,8 +185,6 @@ const ThreadItemPostInner = memo(function ThreadItemPostInner({
postShadow: Shadow<AppBskyFeedDefs.PostView>
}) {
const t = useTheme()
const pal = usePalette('default')
const {_} = useLingui()
const {openComposer} = useOpenComposer()
const {currentAccount} = useSession()
@@ -313,14 +309,7 @@ const ThreadItemPostInner = memo(function ThreadItemPostInner({
shouldProxyLinks={true}
/>
) : undefined}
{limitLines ? (
<TextLink
text={_(msg`Show More`)}
style={pal.link}
onPress={onPressShowMore}
href="#"
/>
) : undefined}
{limitLines && <ShowMore onPress={onPressShowMore} />}
{post.embed && (
<View style={[a.pb_xs]}>
<PostEmbeds
src/screens/PostThread/components/ThreadItemTreePost.tsx
+9 -20
View File
@@ -1,4 +1,4 @@
import React, {memo, useMemo} from 'react'
import {memo, useCallback, useMemo, useState} from 'react'
import {View} from 'react-native'
import {
type AppBskyFeedDefs,
@@ -6,12 +6,10 @@ import {
AtUri,
RichText as RichTextAPI,
} from '@atproto/api'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {Trans} from '@lingui/macro'
import {MAX_POST_LINES} from '#/lib/constants'
import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
import {usePalette} from '#/lib/hooks/usePalette'
import {makeProfileLink} from '#/lib/routes/links'
import {countLines} from '#/lib/strings/helpers'
import {
@@ -23,7 +21,6 @@ import {type ThreadItem} from '#/state/queries/usePostThread/types'
import {useSession} from '#/state/session'
import {type OnPostSuccessData} from '#/state/shell/composer'
import {useMergedThreadgateHiddenReplies} from '#/state/threadgate-hidden-replies'
import {TextLink} from '#/view/com/util/Link'
import {PostEmbeds, PostEmbedViewContext} from '#/view/com/util/post-embeds'
import {PostMeta} from '#/view/com/util/PostMeta'
import {
@@ -41,6 +38,7 @@ import {PostHider} from '#/components/moderation/PostHider'
import {type AppModerationCause} from '#/components/Pills'
import {PostControls} from '#/components/PostControls'
import {RichText} from '#/components/RichText'
import {ShowMore} from '#/components/ShowMore'
import * as Skele from '#/components/Skeleton'
import {SubtleWebHover} from '#/components/SubtleWebHover'
import {Text} from '#/components/Typography'
@@ -255,8 +253,6 @@ const ThreadItemTreePostInner = memo(function ThreadItemTreePostInner({
onPostSuccess?: (data: OnPostSuccessData) => void
threadgateRecord?: AppBskyFeedThreadgate.Record
}): React.ReactNode {
const pal = usePalette('default')
const {_} = useLingui()
const {openComposer} = useOpenComposer()
const {currentAccount} = useSession()
@@ -271,18 +267,18 @@ const ThreadItemTreePostInner = memo(function ThreadItemTreePostInner({
}),
[record],
)
const [limitLines, setLimitLines] = React.useState(
const [limitLines, setLimitLines] = useState(
() => countLines(richText?.text) >= MAX_POST_LINES,
)
const threadRootUri = record.reply?.root?.uri || post.uri
const postHref = React.useMemo(() => {
const postHref = useMemo(() => {
const urip = new AtUri(post.uri)
return makeProfileLink(post.author, 'post', urip.rkey)
}, [post.uri, post.author])
const threadgateHiddenReplies = useMergedThreadgateHiddenReplies({
threadgateRecord,
})
const additionalPostAlerts: AppModerationCause[] = React.useMemo(() => {
const additionalPostAlerts: AppModerationCause[] = useMemo(() => {
const isPostHiddenByThreadgate = threadgateHiddenReplies.has(post.uri)
const isControlledByViewer =
new AtUri(threadRootUri).host === currentAccount?.did
@@ -297,7 +293,7 @@ const ThreadItemTreePostInner = memo(function ThreadItemTreePostInner({
: []
}, [post, currentAccount?.did, threadgateHiddenReplies, threadRootUri])
const onPressReply = React.useCallback(() => {
const onPressReply = useCallback(() => {
openComposer({
replyTo: {
uri: post.uri,
@@ -311,7 +307,7 @@ const ThreadItemTreePostInner = memo(function ThreadItemTreePostInner({
})
}, [openComposer, post, record, onPostSuccess, moderation])
const onPressShowMore = React.useCallback(() => {
const onPressShowMore = useCallback(() => {
setLimitLines(false)
}, [setLimitLines])
@@ -359,14 +355,7 @@ const ThreadItemTreePostInner = memo(function ThreadItemTreePostInner({
/>
</View>
) : undefined}
{limitLines ? (
<TextLink
text={_(msg`Show More`)}
style={pal.link}
onPress={onPressShowMore}
href="#"
/>
) : undefined}
{limitLines && <ShowMore onPress={onPressShowMore} />}
{post.embed && (
<View style={[a.pb_xs]}>
<PostEmbeds
src/view/com/notifications/NotificationFeedItem.tsx
+3 -1
View File
@@ -30,6 +30,7 @@ import {useLingui} from '@lingui/react'
import {useNavigation} from '@react-navigation/native'
import {useQueryClient} from '@tanstack/react-query'
import {MAX_POST_LINES} from '#/lib/constants'
import {useAnimatedValue} from '#/lib/hooks/useAnimatedValue'
import {usePalette} from '#/lib/hooks/usePalette'
import {makeProfileLink} from '#/lib/routes/links'
@@ -918,7 +919,8 @@ function AdditionalPostText({post}: {post?: AppBskyFeedDefs.PostView}) {
{text?.length > 0 && (
<Text
emoji
style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}>
style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}
numberOfLines={MAX_POST_LINES}>
{text}
</Text>
)}
src/view/com/post-thread/PostThreadItem.tsx
+3 -9
View File
@@ -44,7 +44,7 @@ import {useMergedThreadgateHiddenReplies} from '#/state/threadgate-hidden-replie
import {type PostSource} from '#/state/unstable-post-source'
import {PostThreadFollowBtn} from '#/view/com/post-thread/PostThreadFollowBtn'
import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
import {Link, TextLink} from '#/view/com/util/Link'
import {Link} from '#/view/com/util/Link'
import {formatCount} from '#/view/com/util/numeric/format'
import {PostEmbeds, PostEmbedViewContext} from '#/view/com/util/post-embeds'
import {PostMeta} from '#/view/com/util/PostMeta'
@@ -65,6 +65,7 @@ import {type AppModerationCause} from '#/components/Pills'
import {PostControls} from '#/components/PostControls'
import * as Prompt from '#/components/Prompt'
import {RichText} from '#/components/RichText'
import {ShowMore} from '#/components/ShowMore'
import {SubtleWebHover} from '#/components/SubtleWebHover'
import {Text} from '#/components/Typography'
import {VerificationCheckButton} from '#/components/verification/VerificationCheckButton'
@@ -687,14 +688,7 @@ let PostThreadItemLoaded = ({
/>
</View>
) : undefined}
{limitLines ? (
<TextLink
text={_(msg`Show More`)}
style={pal.link}
onPress={onPressShowMore}
href="#"
/>
) : undefined}
{limitLines && <ShowMore onPress={onPressShowMore} />}
{post.embed && (
<View style={[a.pb_xs]}>
<PostEmbeds
src/view/com/post/Post.tsx
+9 -17
View File
@@ -1,4 +1,4 @@
import React, {useMemo, useState} from 'react'
import {useCallback, useMemo, useState} from 'react'
import {type StyleProp, StyleSheet, View, type ViewStyle} from 'react-native'
import {
type AppBskyFeedDefs,
@@ -9,8 +9,7 @@ import {
RichText as RichTextAPI,
} from '@atproto/api'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {Trans} from '@lingui/macro'
import {useQueryClient} from '@tanstack/react-query'
import {MAX_POST_LINES} from '#/lib/constants'
@@ -27,7 +26,7 @@ import {
import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {precacheProfile} from '#/state/queries/profile'
import {useSession} from '#/state/session'
import {Link, TextLink} from '#/view/com/util/Link'
import {Link} from '#/view/com/util/Link'
import {PostEmbeds, PostEmbedViewContext} from '#/view/com/util/post-embeds'
import {PostMeta} from '#/view/com/util/PostMeta'
import {Text} from '#/view/com/util/text/Text'
@@ -40,6 +39,7 @@ import {PostAlerts} from '#/components/moderation/PostAlerts'
import {PostControls} from '#/components/PostControls'
import {ProfileHoverCard} from '#/components/ProfileHoverCard'
import {RichText} from '#/components/RichText'
import {ShowMore} from '#/components/ShowMore'
import {SubtleWebHover} from '#/components/SubtleWebHover'
import * as bsky from '#/types/bsky'
@@ -115,7 +115,6 @@ function PostInner({
}) {
const queryClient = useQueryClient()
const pal = usePalette('default')
const {_} = useLingui()
const {openComposer} = useOpenComposer()
const [limitLines, setLimitLines] = useState(
() => countLines(richText?.text) >= MAX_POST_LINES,
@@ -128,7 +127,7 @@ function PostInner({
replyAuthorDid = urip.hostname
}
const onPressReply = React.useCallback(() => {
const onPressReply = useCallback(() => {
openComposer({
replyTo: {
uri: post.uri,
@@ -141,18 +140,18 @@ function PostInner({
})
}, [openComposer, post, record, moderation])
const onPressShowMore = React.useCallback(() => {
const onPressShowMore = useCallback(() => {
setLimitLines(false)
}, [setLimitLines])
const onBeforePress = React.useCallback(() => {
const onBeforePress = useCallback(() => {
precacheProfile(queryClient, post.author)
}, [queryClient, post.author])
const {currentAccount} = useSession()
const isMe = replyAuthorDid === currentAccount?.did
const [hover, setHover] = React.useState(false)
const [hover, setHover] = useState(false)
return (
<Link
href={itemHref}
@@ -239,14 +238,7 @@ function PostInner({
/>
</View>
) : undefined}
{limitLines ? (
<TextLink
text={_(msg`Show More`)}
style={pal.link}
onPress={onPressShowMore}
href="#"
/>
) : undefined}
{limitLines && <ShowMore onPress={onPressShowMore} />}
{post.embed ? (
<PostEmbeds
embed={post.embed}
src/view/com/posts/PostFeedItem.tsx
+3 -11
View File
@@ -41,7 +41,7 @@ import {
setUnstablePostSource,
} from '#/state/unstable-post-source'
import {FeedNameText} from '#/view/com/util/FeedInfoText'
import {Link, TextLink, TextLinkOnWebOnly} from '#/view/com/util/Link'
import {Link, TextLinkOnWebOnly} from '#/view/com/util/Link'
import {PostEmbeds, PostEmbedViewContext} from '#/view/com/util/post-embeds'
import {PostMeta} from '#/view/com/util/PostMeta'
import {Text} from '#/view/com/util/text/Text'
@@ -57,6 +57,7 @@ import {PostControls} from '#/components/PostControls'
import {DiscoverDebug} from '#/components/PostControls/DiscoverDebug'
import {ProfileHoverCard} from '#/components/ProfileHoverCard'
import {RichText} from '#/components/RichText'
import {ShowMore} from '#/components/ShowMore'
import {SubtleWebHover} from '#/components/SubtleWebHover'
import * as bsky from '#/types/bsky'
@@ -500,8 +501,6 @@ let PostContent = ({
post: AppBskyFeedDefs.PostView
threadgateRecord?: AppBskyFeedThreadgate.Record
}): React.ReactNode => {
const pal = usePalette('default')
const {_} = useLingui()
const {currentAccount} = useSession()
const [limitLines, setLimitLines] = useState(
() => countLines(richText.text) >= MAX_POST_LINES,
@@ -558,14 +557,7 @@ let PostContent = ({
/>
</View>
) : undefined}
{limitLines ? (
<TextLink
text={_(msg`Show More`)}
style={pal.link}
onPress={onPressShowMore}
href="#"
/>
) : undefined}
{limitLines && <ShowMore onPress={onPressShowMore} />}
{postEmbed ? (
<View style={[a.pb_xs]}>
<PostEmbeds