don't underline handle in post meta (#3591)

* alignment

remove the unnecessary styles now

seriously?

flex-end everything

flex shrink

test

test

rm unneeded flex

flex the text

don't underline handle in post meta

* use `paddingLeft`

* use `paddingLeft` but with `4`

* Fix overflow color

* Use nbsp to make mobile work

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
zio/stable
Hailey 2024-04-17 19:09:10 -07:00 committed by GitHub
parent 7e16276c04
commit 086dc93a7a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 43 additions and 31 deletions

View File

@ -2,34 +2,35 @@ import React, {ComponentProps, memo, useMemo} from 'react'
import {
GestureResponderEvent,
Platform,
Pressable,
StyleProp,
TextStyle,
TextProps,
TextStyle,
TouchableOpacity,
View,
ViewStyle,
Pressable,
TouchableOpacity,
} from 'react-native'
import {useLinkProps, StackActions} from '@react-navigation/native'
import {Text} from './text/Text'
import {TypographyVariant} from 'lib/ThemeContext'
import {router} from '../../../routes'
import {sanitizeUrl} from '@braintree/sanitize-url'
import {StackActions, useLinkProps} from '@react-navigation/native'
import {useModalControls} from '#/state/modals'
import {useOpenLink} from '#/state/preferences/in-app-browser'
import {
DebouncedNavigationProp,
useNavigationDeduped,
} from 'lib/hooks/useNavigationDeduped'
import {
convertBskyAppUrlIfNeeded,
isExternalUrl,
linkRequiresWarning,
} from 'lib/strings/url-helpers'
import {TypographyVariant} from 'lib/ThemeContext'
import {isAndroid, isWeb} from 'platform/detection'
import {sanitizeUrl} from '@braintree/sanitize-url'
import {PressableWithHover} from './PressableWithHover'
import {useModalControls} from '#/state/modals'
import {useOpenLink} from '#/state/preferences/in-app-browser'
import {WebAuxClickWrapper} from 'view/com/util/WebAuxClickWrapper'
import {
DebouncedNavigationProp,
useNavigationDeduped,
} from 'lib/hooks/useNavigationDeduped'
import {useTheme} from '#/alf'
import {router} from '../../../routes'
import {PressableWithHover} from './PressableWithHover'
import {Text} from './text/Text'
type Event =
| React.MouseEvent<HTMLAnchorElement, MouseEvent>
@ -149,6 +150,7 @@ export const TextLink = memo(function TextLink({
onPress,
disableMismatchWarning,
navigationAction,
anchorNoUnderline,
...orgProps
}: {
testID?: string
@ -162,6 +164,7 @@ export const TextLink = memo(function TextLink({
title?: string
disableMismatchWarning?: boolean
navigationAction?: 'push' | 'replace' | 'navigate'
anchorNoUnderline?: boolean
} & TextProps) {
const {...props} = useLinkProps({to: sanitizeUrl(href)})
const navigation = useNavigationDeduped()
@ -172,6 +175,11 @@ export const TextLink = memo(function TextLink({
console.error('Unable to detect mismatching label')
}
if (anchorNoUnderline) {
dataSet = dataSet ?? {}
dataSet.noUnderline = 1
}
props.onPress = React.useCallback(
(e?: Event) => {
const requiresWarning =
@ -267,6 +275,7 @@ interface TextLinkOnWebOnlyProps extends TextProps {
navigationAction?: 'push' | 'replace' | 'navigate'
disableMismatchWarning?: boolean
onPointerEnter?: () => void
anchorNoUnderline?: boolean
}
export const TextLinkOnWebOnly = memo(function DesktopWebTextLink({
testID,

View File

@ -35,6 +35,11 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
const handle = opts.author.handle
const prefetchProfileQuery = usePrefetchProfileQuery()
const profileLink = makeProfileLink(opts.author)
const onPointerEnter = isWeb
? () => prefetchProfileQuery(opts.author.did)
: undefined
return (
<View style={[styles.container, opts.style]}>
{opts.showAvatar && (
@ -49,11 +54,10 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
/>
</View>
)}
<View style={styles.maxWidth}>
<Text numberOfLines={1} style={[styles.maxWidth, pal.textLight]}>
<TextLinkOnWebOnly
type={opts.displayNameType || 'lg-bold'}
style={[pal.text, opts.displayNameStyle]}
numberOfLines={1}
lineHeight={1.2}
disableMismatchWarning
text={
@ -62,22 +66,21 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
displayName,
opts.moderation?.ui('displayName'),
)}
&nbsp;
<Text
type="md"
numberOfLines={1}
lineHeight={1.2}
style={pal.textLight}>
{sanitizeHandle(handle, '@')}
</Text>
</>
}
href={makeProfileLink(opts.author)}
onPointerEnter={
isWeb ? () => prefetchProfileQuery(opts.author.did) : undefined
}
href={profileLink}
onPointerEnter={onPointerEnter}
/>
</View>
<TextLinkOnWebOnly
type="md"
disableMismatchWarning
style={[pal.textLight, {flexShrink: 4}]}
text={'\xa0' + sanitizeHandle(handle, '@')}
href={profileLink}
onPointerEnter={onPointerEnter}
anchorNoUnderline
/>
</Text>
{!isAndroid && (
<Text
type="md"
@ -110,7 +113,7 @@ export {PostMeta}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'center',
alignItems: 'flex-end',
paddingBottom: 2,
gap: 4,
zIndex: 1,