[DMs] Emoji reaction picker (#8023)

1 files changed, 45 insertions, 9 deletions

diff --git a/src/components/ContextMenu/Backdrop.ios.tsx b/src/components/ContextMenu/Backdrop.ios.tsx
index 27a4ed1d8..60a8fda44 100644
--- a/src/components/ContextMenu/Backdrop.ios.tsx
+++ b/src/components/ContextMenu/Backdrop.ios.tsx
@@ -2,26 +2,36 @@ import {Pressable} from 'react-native'
 import Animated, {
   Extrapolation,
   interpolate,
-  SharedValue,
+  type SharedValue,
   useAnimatedProps,
+  useAnimatedStyle,
 } from 'react-native-reanimated'
 import {BlurView} from 'expo-blur'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {atoms as a} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
+import {useContextMenuContext} from './context'
 
 const AnimatedBlurView = Animated.createAnimatedComponent(BlurView)
 
-export function Backdrop({
-  animation,
-  intensity = 50,
-  onPress,
-}: {
+type Props = {
   animation: SharedValue<number>
   intensity?: number
   onPress?: () => void
-}) {
+}
+
+export function Backdrop(props: Props) {
+  const {mode} = useContextMenuContext()
+  switch (mode) {
+    case 'full':
+      return <BlurredBackdrop {...props} />
+    case 'auxiliary-only':
+      return <OpacityBackdrop {...props} />
+  }
+}
+
+function BlurredBackdrop({animation, intensity = 50, onPress}: Props) {
   const {_} = useLingui()
 
   const animatedProps = useAnimatedProps(() => ({
@@ -37,7 +47,7 @@ export function Backdrop({
     <AnimatedBlurView
       animatedProps={animatedProps}
       style={[a.absolute, a.inset_0]}
-      tint="systemThinMaterialDark">
+      tint="systemMaterialDark">
       <Pressable
         style={a.flex_1}
         accessibilityLabel={_(msg`Close menu`)}
@@ -47,3 +57,29 @@ export function Backdrop({
     </AnimatedBlurView>
   )
 }
+
+function OpacityBackdrop({animation, onPress}: Props) {
+  const t = useTheme()
+  const {_} = useLingui()
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(
+      animation.get(),
+      [0, 1],
+      [0, 0.05],
+      Extrapolation.CLAMP,
+    ),
+  }))
+
+  return (
+    <Animated.View
+      style={[a.absolute, a.inset_0, t.atoms.bg_contrast_975, animatedStyle]}>
+      <Pressable
+        style={a.flex_1}
+        accessibilityLabel={_(msg`Close menu`)}
+        accessibilityHint={_(msg`Tap to close context menu`)}
+        onPress={onPress}
+      />
+    </Animated.View>
+  )
+}