-
Notifications
You must be signed in to change notification settings - Fork 13
/
MotionPressable.tsx
52 lines (47 loc) · 1.67 KB
/
MotionPressable.tsx
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
45
46
47
48
49
50
51
52
import React, { createContext, useCallback, useState } from 'react';
import { Platform, Pressable, PressableProps } from 'react-native';
export const ContextPressable = createContext({ pressed: false, hovered: false });
export function MotionPressable(props: PressableProps) {
// @ts-ignore Web props cause errors
const { onPressIn, onPressOut, onMouseEnter, onMouseLeave, children, ...rest } = props;
const [state, setState] = useState({ pressed: false, hovered: false });
const update = useCallback((pressed: boolean, hovered: boolean) => {
setState((cur) => ({
pressed: pressed ?? cur.pressed,
hovered: hovered ?? cur.hovered,
}));
}, []);
return (
<Pressable
onPressIn={(e) => {
update(true, undefined);
onPressIn?.(e);
}}
onPressOut={(e) => {
update(false, undefined);
onPressOut?.(e);
}}
// @ts-ignore
onMouseEnter={
Platform.OS === 'web'
? (e) => {
update(undefined, true);
onMouseEnter?.(e);
}
: undefined
}
// @ts-ignore
onMouseLeave={
Platform.OS === 'web'
? (e) => {
update(undefined, false);
onMouseLeave?.(e);
}
: undefined
}
{...rest}
>
<ContextPressable.Provider value={state}>{children}</ContextPressable.Provider>
</Pressable>
);
}