FAB - delay followup haptic (#5974)

src/view/com/post-thread/PostThreadComposePrompt.tsx

@@ -5,11 +5,10 @@ import {useLingui} from '@lingui/react'
 
 import {PressableScale} from '#/lib/custom-animations/PressableScale'
 import {useHaptics} from '#/lib/haptics'
-import {useHapticsDisabled} from '#/state/preferences'
 import {useProfileQuery} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, native, useBreakpoints, useTheme} from '#/alf'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {Text} from '#/components/Typography'
 
@@ -23,24 +22,13 @@ export function PostThreadComposePrompt({
   const {_} = useLingui()
   const {gtMobile} = useBreakpoints()
   const t = useTheme()
-  const playHaptics = useHaptics()
+  const playHaptic = useHaptics()
-  const isHapticsDisabled = useHapticsDisabled()
   const {
     state: hovered,
     onIn: onHoverIn,
     onOut: onHoverOut,
   } = useInteractionState()
 
-  const onPress = () => {
-    playHaptics('Light')
-    setTimeout(
-      () => {
-        onPressCompose()
-      },
-      isHapticsDisabled ? 0 : 75,
-    )
-  }
-
   return (
     <PressableScale
       accessibilityRole="button"
@@ -53,7 +41,15 @@ export function PostThreadComposePrompt({
         t.atoms.border_contrast_low,
         t.atoms.bg,
       ]}
-      onPress={onPress}
+      onPressIn={() => playHaptic('Light')}
+      onPress={() => {
+        onPressCompose()
+        setTimeout(() => playHaptic('Medium'), 200)
+      }}
+      onLongPress={native(() => {
+        onPressCompose()
+        setTimeout(() => playHaptic('Heavy'), 200)
+      })}
       onHoverIn={onHoverIn}
       onHoverOut={onHoverOut}>
       <View

src/view/com/util/fab/FABInner.tsx

@@ -11,7 +11,7 @@ import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {clamp} from '#/lib/numbers'
 import {gradients} from '#/lib/styles'
 import {isWeb} from '#/platform/detection'
-import {useHapticsDisabled} from '#/state/preferences'
+import {native} from '#/alf'
 
 export interface FABProps
   extends ComponentProps<typeof TouchableWithoutFeedback> {
@@ -23,7 +23,6 @@ export function FABInner({testID, icon, onPress, ...props}: FABProps) {
   const insets = useSafeAreaInsets()
   const {isMobile, isTablet} = useWebMediaQueries()
   const playHaptic = useHaptics()
-  const isHapticsDisabled = useHapticsDisabled()
   const fabMinimalShellTransform = useMinimalShellFabTransform()
 
   const size = isTablet ? styles.sizeLarge : styles.sizeRegular
@@ -43,14 +42,14 @@ export function FABInner({testID, icon, onPress, ...props}: FABProps) {
       <PressableScale
         testID={testID}
         onPressIn={() => playHaptic('Light')}
-        onPress={e => {
+        onPress={evt => {
-          playHaptic('Light')
+          onPress?.(evt)
-          setTimeout(() => onPress?.(e), isHapticsDisabled ? 0 : 75)
+          setTimeout(() => playHaptic('Medium'), 200)
-        }}
-        onLongPress={e => {
-          playHaptic('Medium')
-          setTimeout(() => onPress?.(e), isHapticsDisabled ? 0 : 75)
         }}
+        onLongPress={native((evt: any) => {
+          onPress?.(evt)
+          setTimeout(() => playHaptic('Heavy'), 200)
+        })}
         targetScale={0.9}
         {...props}>
         <LinearGradient