Add web only link variant

This commit is contained in:
Eric Bailey
2024-09-21 16:04:57 -05:00
parent 673a0d25fc
commit c05b8dee66
+30 -8
View File
@@ -9,6 +9,7 @@ import {sanitizeUrl} from '@braintree/sanitize-url'
import {StackActions, useLinkProps} from '@react-navigation/native' import {StackActions, useLinkProps} from '@react-navigation/native'
import {BSKY_DOWNLOAD_URL} from '#/lib/constants' import {BSKY_DOWNLOAD_URL} from '#/lib/constants'
import {useNavigationDeduped} from '#/lib/hooks/useNavigationDeduped'
import {AllNavigatorParams} from '#/lib/routes/types' import {AllNavigatorParams} from '#/lib/routes/types'
import {shareUrl} from '#/lib/sharing' import {shareUrl} from '#/lib/sharing'
import { import {
@@ -17,11 +18,10 @@ import {
isExternalUrl, isExternalUrl,
linkRequiresWarning, linkRequiresWarning,
} from '#/lib/strings/url-helpers' } from '#/lib/strings/url-helpers'
import {isNative} from '#/platform/detection' import {isNative, isWeb} from '#/platform/detection'
import {shouldClickOpenNewTab} from '#/platform/urls' import {shouldClickOpenNewTab} from '#/platform/urls'
import {useModalControls} from '#/state/modals' import {useModalControls} from '#/state/modals'
import {useOpenLink} from '#/state/preferences/in-app-browser' import {useOpenLink} from '#/state/preferences/in-app-browser'
import {useNavigationDeduped} from 'lib/hooks/useNavigationDeduped'
import {atoms as a, flatten, TextStyleProp, useTheme, web} from '#/alf' import {atoms as a, flatten, TextStyleProp, useTheme, web} from '#/alf'
import {Button, ButtonProps} from '#/components/Button' import {Button, ButtonProps} from '#/components/Button'
import {useInteractionState} from '#/components/hooks/useInteractionState' import {useInteractionState} from '#/components/hooks/useInteractionState'
@@ -244,7 +244,10 @@ export function Link({
export type InlineLinkProps = React.PropsWithChildren< export type InlineLinkProps = React.PropsWithChildren<
BaseLinkProps & TextStyleProp & Pick<TextProps, 'selectable'> BaseLinkProps & TextStyleProp & Pick<TextProps, 'selectable'>
> & > &
Pick<ButtonProps, 'label'> Pick<ButtonProps, 'label'> & {
disableUnderline?: boolean
title?: string
}
export function InlineLinkText({ export function InlineLinkText({
children, children,
@@ -257,6 +260,7 @@ export function InlineLinkText({
selectable, selectable,
label, label,
shareOnLongPress, shareOnLongPress,
disableUnderline,
...rest ...rest
}: InlineLinkProps) { }: InlineLinkProps) {
const t = useTheme() const t = useTheme()
@@ -290,11 +294,12 @@ export function InlineLinkText({
{...rest} {...rest}
style={[ style={[
{color: t.palette.primary_500}, {color: t.palette.primary_500},
(hovered || focused || pressed) && { (hovered || focused || pressed) &&
...web({outline: 0}), !disableUnderline && {
textDecorationLine: 'underline', ...web({outline: 0}),
textDecorationColor: flattenedStyle.color ?? t.palette.primary_500, textDecorationLine: 'underline',
}, textDecorationColor: flattenedStyle.color ?? t.palette.primary_500,
},
flattenedStyle, flattenedStyle,
]} ]}
role="link" role="link"
@@ -365,3 +370,20 @@ export function BaseLink({
</Pressable> </Pressable>
) )
} }
export function WebOnlyInlineLinkText({
children,
to,
onPress,
...props
}: InlineLinkProps) {
return isWeb ? (
<InlineLinkText {...props} to={to} onPress={onPress}>
{children}
</InlineLinkText>
) : (
<Text selectable={false} accessible={false} {...props}>
{children}
</Text>
)
}