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
parent
7e16276c04
commit
086dc93a7a
|
@ -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,
|
||||
|
|
|
@ -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'),
|
||||
)}
|
||||
|
||||
<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,
|
||||
|
|
Loading…
Reference in New Issue