Add web only link variant
This commit is contained in:
+30
-8
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user