diff options
Diffstat (limited to 'src/components/dms/ActionsWrapper.tsx')
-rw-r--r-- | src/components/dms/ActionsWrapper.tsx | 125 |
1 files changed, 47 insertions, 78 deletions
diff --git a/src/components/dms/ActionsWrapper.tsx b/src/components/dms/ActionsWrapper.tsx index a087fed3f..385086d7c 100644 --- a/src/components/dms/ActionsWrapper.tsx +++ b/src/components/dms/ActionsWrapper.tsx @@ -1,22 +1,10 @@ -import React from 'react' -import {Keyboard} from 'react-native' -import {Gesture, GestureDetector} from 'react-native-gesture-handler' -import Animated, { - cancelAnimation, - runOnJS, - useAnimatedStyle, - useSharedValue, - withTiming, -} from 'react-native-reanimated' +import {View} from 'react-native' import {ChatBskyConvoDefs} from '@atproto/api' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {HITSLOP_10} from '#/lib/constants' -import {useHaptics} from '#/lib/haptics' import {atoms as a} from '#/alf' -import {MessageMenu} from '#/components/dms/MessageMenu' -import {useMenuControl} from '#/components/Menu' +import {MessageContextMenu} from '#/components/dms/MessageContextMenu' export function ActionsWrapper({ message, @@ -28,71 +16,52 @@ export function ActionsWrapper({ children: React.ReactNode }) { const {_} = useLingui() - const playHaptic = useHaptics() - const menuControl = useMenuControl() - - const scale = useSharedValue(1) - - const animatedStyle = useAnimatedStyle(() => ({ - transform: [{scale: scale.get()}], - })) - - const open = React.useCallback(() => { - playHaptic() - Keyboard.dismiss() - menuControl.open() - }, [menuControl, playHaptic]) - - const shrink = React.useCallback(() => { - 'worklet' - cancelAnimation(scale) - scale.set(() => withTiming(1, {duration: 200})) - }, [scale]) - - const doubleTapGesture = Gesture.Tap() - .numberOfTaps(2) - .hitSlop(HITSLOP_10) - .onEnd(open) - .runOnJS(true) - - const pressAndHoldGesture = Gesture.LongPress() - .onStart(() => { - 'worklet' - scale.set(() => - withTiming(1.05, {duration: 200}, finished => { - if (!finished) return - runOnJS(open)() - shrink() - }), - ) - }) - .onTouchesUp(shrink) - .onTouchesMove(shrink) - .cancelsTouchesInView(false) - - const composedGestures = Gesture.Exclusive( - doubleTapGesture, - pressAndHoldGesture, - ) return ( - <GestureDetector gesture={composedGestures}> - <Animated.View - style={[ - { - maxWidth: '80%', - }, - isFromSelf ? a.self_end : a.self_start, - animatedStyle, - ]} - accessible={true} - accessibilityActions={[ - {name: 'activate', label: _(msg`Open message options`)}, - ]} - onAccessibilityAction={open}> - {children} - <MessageMenu message={message} control={menuControl} /> - </Animated.View> - </GestureDetector> + <MessageContextMenu message={message}> + {trigger => + // will always be true, since this file is platform split + trigger.isNative && ( + <View style={[a.flex_1, a.relative]}> + {/* {isNative && ( + <View + style={[ + a.rounded_full, + a.absolute, + {bottom: '100%'}, + isFromSelf ? a.right_0 : a.left_0, + t.atoms.bg, + a.flex_row, + a.shadow_lg, + a.py_xs, + a.px_md, + a.gap_md, + a.mb_xs, + ]}> + {['👍', '😆', '❤️', '👀', '😢'].map(emoji => ( + <Text key={emoji} style={[a.text_center, {fontSize: 32}]}> + {emoji} + </Text> + ))} + </View> + )} */} + <View + style={[ + {maxWidth: '80%'}, + isFromSelf + ? [a.self_end, a.align_end] + : [a.self_start, a.align_start], + ]} + accessible={true} + accessibilityActions={[ + {name: 'activate', label: _(msg`Open message options`)}, + ]} + onAccessibilityAction={trigger.control.open}> + {children} + </View> + </View> + ) + } + </MessageContextMenu> ) } |