diff options
| author | dan <dan.abramov@gmail.com> | 2024-11-21 19:20:46 +0000 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-11-21 19:20:46 +0000 |
| commit | ff23ddb556be4b2a9c4029dce6f857df34fc0b6b (patch) | |
| tree | e9a6c32186fa9f0cf434ccaf4f7b42f0a5fff5a2 | |
| parent | dff11fc076c67f03319db375dfd844026dc03046 (diff) | |
| download | voidsky-ff23ddb556be4b2a9c4029dce6f857df34fc0b6b.tar.zst | |
Don't underline links on native hover (#6588)
| -rw-r--r-- | src/components/Link.tsx | 18 | ||||
| -rw-r--r-- | src/components/RichText.tsx | 18 |
2 files changed, 13 insertions, 23 deletions
diff --git a/src/components/Link.tsx b/src/components/Link.tsx index 054a543c1..a5203b252 100644 --- a/src/components/Link.tsx +++ b/src/components/Link.tsx @@ -274,11 +274,6 @@ export function InlineLinkText({ onOut: onHoverOut, } = useInteractionState() const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState() - const { - state: pressed, - onIn: onPressIn, - onOut: onPressOut, - } = useInteractionState() const flattenedStyle = flatten(style) || {} return ( @@ -289,19 +284,20 @@ export function InlineLinkText({ {...rest} style={[ {color: t.palette.primary_500}, - (hovered || focused || pressed) && + (hovered || focused) && !disableUnderline && { - ...web({outline: 0}), - textDecorationLine: 'underline', - textDecorationColor: flattenedStyle.color ?? t.palette.primary_500, + ...web({ + outline: 0, + textDecorationLine: 'underline', + textDecorationColor: + flattenedStyle.color ?? t.palette.primary_500, + }), }, flattenedStyle, ]} role="link" onPress={download ? undefined : onPress} onLongPress={onLongPress} - onPressIn={onPressIn} - onPressOut={onPressOut} onFocus={onFocus} onBlur={onBlur} onMouseEnter={onHoverIn} diff --git a/src/components/RichText.tsx b/src/components/RichText.tsx index 8f6358dd5..e2d05ac6c 100644 --- a/src/components/RichText.tsx +++ b/src/components/RichText.tsx @@ -53,7 +53,6 @@ export function RichText({ const plainStyles = [a.leading_snug, flattenedStyle] const interactiveStyles = [ a.leading_snug, - a.pointer_events_auto, flatten(interactiveStyle), flattenedStyle, ] @@ -194,11 +193,6 @@ function RichTextTag({ onOut: onHoverOut, } = useInteractionState() const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState() - const { - state: pressed, - onIn: onPressIn, - onOut: onPressOut, - } = useInteractionState() const navigation = useNavigation<NavigationProp>() const navigateToPage = React.useCallback(() => { @@ -228,8 +222,6 @@ function RichTextTag({ accessibilityRole: isNative ? 'button' : undefined, onPress: navigateToPage, onLongPress: openDialog, - onPressIn: onPressIn, - onPressOut: onPressOut, })} {...web({ onMouseEnter: onHoverIn, @@ -243,10 +235,12 @@ function RichTextTag({ cursor: 'pointer', }), {color: t.palette.primary_500}, - (hovered || focused || pressed) && { - ...web({outline: 0}), - textDecorationLine: 'underline', - textDecorationColor: t.palette.primary_500, + (hovered || focused) && { + ...web({ + outline: 0, + textDecorationLine: 'underline', + textDecorationColor: t.palette.primary_500, + }), }, style, ]}> |