reset scale automatically

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 {
+export const GrowWrapper = function GrowWrapper({
-  reset: () => void
+  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 (
     <AnimatedPressable
       style={animatedStyle}
@@ -65,4 +52,4 @@ export const GrowWrapper = React.forwardRef(function GrowWrapper(
       {children}
     </AnimatedPressable>
   )
-})
+}

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 (
-    <Dialog.Outer control={control} onClose={onClose}>
+    <Dialog.Outer control={control}>
       <Dialog.Handle />
 
       <Dialog.ScrollableInner label="Menu TODO">

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<GrowWrapperRef>(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 (
     <View
       style={{maxWidth: '65%', marginLeft: isFromSelf ? 'auto' : undefined}}>
-      <GrowWrapper onOpenMenu={onOpenMenu} ref={itemRef}>
+      <GrowWrapper onOpenMenu={onOpenMenu}>
         <View
           style={[
             a.py_sm,
@@ -98,11 +91,7 @@ export function MessageItem({
           isLastInGroup={isLastInGroup}
           style={isFromSelf ? a.text_right : a.text_left}
         />
-        <MessageMenu
+        <MessageMenu message={item} control={control} />
-          message={item}
-          onClose={() => itemRef.current?.reset()}
-          control={control}
-        />
       </GrowWrapper>
     </View>
   )