diff --git a/src/components/dms/GrowWrapper.tsx b/src/components/dms/GrowWrapper.tsx index 9a6748f462..021e52083a 100644 --- a/src/components/dms/GrowWrapper.tsx +++ b/src/components/dms/GrowWrapper.tsx @@ -1,4 +1,4 @@ -import React, {useCallback, useImperativeHandle} from 'react' +import React, {useCallback} from 'react' import {Pressable} from 'react-native' import Animated, { cancelAnimation, @@ -8,22 +8,19 @@ import Animated, { withTiming, } from 'react-native-reanimated' +import {useHaptics} from 'lib/haptics' + const AnimatedPressable = Animated.createAnimatedComponent(Pressable) -export interface GrowWrapperRef { - reset: () => void -} +export const GrowWrapper = function GrowWrapper({ + onOpenMenu, + children, +}: { + onOpenMenu: () => unknown + children: React.ReactNode +}) { + const playHaptic = useHaptics() -export const GrowWrapper = React.forwardRef(function GrowWrapper( - { - onOpenMenu, - children, - }: { - onOpenMenu: () => unknown - children: React.ReactNode - }, - ref, -) { const scale = useSharedValue(1) const animationDidComplete = useSharedValue(false) @@ -31,31 +28,21 @@ export const GrowWrapper = React.forwardRef(function GrowWrapper( transform: [{scale: scale.value}], })) - const reset = useCallback(() => { + const onTouchStart = React.useCallback(() => { + scale.value = withTiming(1.05, {duration: 750}, finished => { + if (!finished) return + animationDidComplete.value = true + runOnJS(playHaptic)() + runOnJS(onOpenMenu)() + }) + }, [scale, animationDidComplete, playHaptic, onOpenMenu]) + + const onTouchEnd = useCallback(() => { cancelAnimation(scale) animationDidComplete.value = false scale.value = withTiming(1, {duration: 200}) }, [animationDidComplete, scale]) - const onTouchStart = React.useCallback(() => { - scale.value = withTiming(1.05, {duration: 750}, finished => { - if (!finished) return - - animationDidComplete.value = true - runOnJS(onOpenMenu)() - }) - }, [scale, animationDidComplete, onOpenMenu]) - - const onTouchEnd = React.useCallback(() => { - if (!animationDidComplete.value) { - reset() - } - }, [animationDidComplete, reset]) - - useImperativeHandle(ref, () => ({ - reset, - })) - return ( ) -}) +} diff --git a/src/components/dms/MessageMenu.tsx b/src/components/dms/MessageMenu.tsx index 19ee52870a..ea8367ee16 100644 --- a/src/components/dms/MessageMenu.tsx +++ b/src/components/dms/MessageMenu.tsx @@ -9,18 +9,16 @@ import * as Dialog from '#/components/Dialog' export let MessageMenu = ({ // eslint-disable-next-line @typescript-eslint/no-unused-vars message, - onClose, control, }: { message: ChatBskyConvoDefs.MessageView - onClose: () => void control: Dialog.DialogControlProps }): React.ReactNode => { // eslint-disable-next-line @typescript-eslint/no-unused-vars const {_} = useLingui() return ( - + diff --git a/src/screens/Messages/Conversation/MessageItem.tsx b/src/screens/Messages/Conversation/MessageItem.tsx index 68b8ca0097..e4e247e93b 100644 --- a/src/screens/Messages/Conversation/MessageItem.tsx +++ b/src/screens/Messages/Conversation/MessageItem.tsx @@ -5,12 +5,10 @@ import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useSession} from '#/state/session' -import {useHaptics} from 'lib/haptics' -import {isNative} from 'platform/detection' import {TimeElapsed} from '#/view/com/util/TimeElapsed' import {atoms as a, useTheme} from '#/alf' import {useDialogControl} from '#/components/Dialog' -import {GrowWrapper, GrowWrapperRef} from '#/components/dms/GrowWrapper' +import {GrowWrapper} from '#/components/dms/GrowWrapper' import {MessageMenu} from '#/components/dms/MessageMenu' import {Text} from '#/components/Typography' @@ -26,10 +24,8 @@ export function MessageItem({ }) { const t = useTheme() const {currentAccount} = useSession() - const playHaptic = useHaptics() const control = useDialogControl() - const itemRef = React.useRef(null) const isFromSelf = item.sender?.did === currentAccount?.did @@ -58,16 +54,13 @@ export function MessageItem({ }, [item, next, isFromSelf, isNextFromSelf]) const onOpenMenu = React.useCallback(() => { - if (isNative) { - playHaptic() - } control.open() - }, [control, playHaptic]) + }, [control]) return ( - + - itemRef.current?.reset()} - control={control} - /> + )