1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
import {forwardRef, type PropsWithChildren} from 'react'
import {
Pressable,
type PressableProps,
type StyleProp,
type ViewStyle,
} from 'react-native'
import {type View} from 'react-native'
import {addStyle} from '#/lib/styles'
import {useInteractionState} from '#/components/hooks/useInteractionState'
interface PressableWithHover extends PressableProps {
hoverStyle: StyleProp<ViewStyle>
}
export const PressableWithHover = forwardRef<
View,
PropsWithChildren<PressableWithHover>
>(function PressableWithHoverImpl(
{children, style, hoverStyle, ...props},
ref,
) {
const {
state: hovered,
onIn: onHoverIn,
onOut: onHoverOut,
} = useInteractionState()
return (
<Pressable
{...props}
style={
typeof style !== 'function' && hovered
? addStyle(style, hoverStyle)
: style
}
onHoverIn={onHoverIn}
onHoverOut={onHoverOut}
ref={ref}>
{children}
</Pressable>
)
})
|
