| author | |
| committer | |
| log | 6ecc15fa25c808922a58f07377add25b55d9ac90 |
| tree | 41a4d185051401c7e871f5d50ff07b097814e67a |
| parent | 9ea892e3b365faff31eed294ac38f70d122656b2 |
| signature | Signed by PGP key B5690EEEBB952194 |
2 files changed, 7 insertions(+), 5 deletions(-)
apps/mobile/src/components/RowPressable.tsx+2-2| ... | ... | @@ -5,7 +5,7 @@ import { GestureDetector } from "react-native-gesture-handler"; |
| 5 | 5 | import { cn } from "../lib/cn"; |
| 6 | 6 | import { useHoverGesture } from "../lib/useHoverGesture"; |
| 7 | 7 | |
| 8 | /** Shared row feedback, layered over the background so selection stays visible. */ | |
| 8 | /** Pointer feedback layered over selection. Touch-down may be the start of a scroll. */ | |
| 9 | 9 | export function RowPressable({ |
| 10 | 10 | children, |
| 11 | 11 | className, |
| ... | ... | @@ -24,7 +24,7 @@ export function RowPressable({ |
| 24 | 24 | <View |
| 25 | 25 | pointerEvents="none" |
| 26 | 26 | className={cn("absolute inset-0", interactionClassName)} |
| 27 | style={{ opacity: props.disabled ? 0 : pressed ? 0.2 : hovered ? 0.1 : 0 }} | |
| 27 | style={{ opacity: props.disabled || !hovered ? 0 : pressed ? 0.2 : 0.1 }} | |
| 28 | 28 | /> |
| 29 | 29 | {children} |
| 30 | 30 | </> |
apps/mobile/src/lib/useHoverGesture.ts+5-3| ... | ... | @@ -1,5 +1,5 @@ |
| 1 | 1 | import { useMemo, useState } from "react"; |
| 2 | import { Gesture } from "react-native-gesture-handler"; | |
| 2 | import { Gesture, PointerType } from "react-native-gesture-handler"; | |
| 3 | 3 | |
| 4 | 4 | /** Uses native hover recognition without React Native's optional pointer-event flags. */ |
| 5 | 5 | export function useHoverGesture(disabled = false) { |
| ... | ... | @@ -12,8 +12,10 @@ export function useHoverGesture(disabled = false) { |
| 12 | 12 | // Observe hover without competing with row taps, scrolling, or swipe actions. |
| 13 | 13 | .cancelsTouchesInView(false) |
| 14 | 14 | .runOnJS(true) |
| 15 | .onBegin(() => { | |
| 16 | setHovered(true); | |
| 15 | .onBegin((event) => { | |
| 16 | setHovered( | |
| 17 | event.pointerType === PointerType.MOUSE || event.pointerType === PointerType.STYLUS, | |
| 18 | ); | |
| 17 | 19 | }) |
| 18 | 20 | .onFinalize(() => { |
| 19 | 21 | setHovered(false); |