mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1import {Pressable} from 'react-native'
2import Animated, {
3 Extrapolation,
4 interpolate,
5 type SharedValue,
6 useAnimatedProps,
7 useAnimatedStyle,
8} from 'react-native-reanimated'
9import {BlurView} from 'expo-blur'
10import {msg} from '@lingui/macro'
11import {useLingui} from '@lingui/react'
12
13import {atoms as a, useTheme} from '#/alf'
14import {useContextMenuContext} from './context'
15
16const AnimatedBlurView = Animated.createAnimatedComponent(BlurView)
17
18type Props = {
19 animation: SharedValue<number>
20 intensity?: number
21 onPress?: () => void
22}
23
24export function Backdrop(props: Props) {
25 const {mode} = useContextMenuContext()
26 switch (mode) {
27 case 'full':
28 return <BlurredBackdrop {...props} />
29 case 'auxiliary-only':
30 return <OpacityBackdrop {...props} />
31 }
32}
33
34function BlurredBackdrop({animation, intensity = 50, onPress}: Props) {
35 const {_} = useLingui()
36
37 const animatedProps = useAnimatedProps(() => ({
38 intensity: interpolate(
39 animation.get(),
40 [0, 1],
41 [0, intensity],
42 Extrapolation.CLAMP,
43 ),
44 }))
45
46 return (
47 <AnimatedBlurView
48 animatedProps={animatedProps}
49 style={[a.absolute, a.inset_0]}
50 tint="systemMaterialDark">
51 <Pressable
52 style={a.flex_1}
53 accessibilityLabel={_(msg`Close menu`)}
54 accessibilityHint={_(msg`Tap to close context menu`)}
55 onPress={onPress}
56 />
57 </AnimatedBlurView>
58 )
59}
60
61function OpacityBackdrop({animation, onPress}: Props) {
62 const t = useTheme()
63 const {_} = useLingui()
64
65 const animatedStyle = useAnimatedStyle(() => ({
66 opacity: interpolate(
67 animation.get(),
68 [0, 1],
69 [0, 0.05],
70 Extrapolation.CLAMP,
71 ),
72 }))
73
74 return (
75 <Animated.View
76 style={[a.absolute, a.inset_0, t.atoms.bg_contrast_975, animatedStyle]}>
77 <Pressable
78 style={a.flex_1}
79 accessibilityLabel={_(msg`Close menu`)}
80 accessibilityHint={_(msg`Tap to close context menu`)}
81 onPress={onPress}
82 />
83 </Animated.View>
84 )
85}