[🐴] Adjust press and hold delay on messages (#3918)
* adjust press and hold delay on messages * adjust hit slopzio/stable
parent
701e508a1a
commit
f62b0458a7
|
@ -1,4 +1,4 @@
|
||||||
import React, {useCallback} from 'react'
|
import React from 'react'
|
||||||
import {Keyboard, Pressable, View} from 'react-native'
|
import {Keyboard, Pressable, View} from 'react-native'
|
||||||
import Animated, {
|
import Animated, {
|
||||||
cancelAnimation,
|
cancelAnimation,
|
||||||
|
@ -9,6 +9,7 @@ import Animated, {
|
||||||
} from 'react-native-reanimated'
|
} from 'react-native-reanimated'
|
||||||
import {ChatBskyConvoDefs} from '@atproto-labs/api'
|
import {ChatBskyConvoDefs} from '@atproto-labs/api'
|
||||||
|
|
||||||
|
import {HITSLOP_10} from 'lib/constants'
|
||||||
import {useHaptics} from 'lib/haptics'
|
import {useHaptics} from 'lib/haptics'
|
||||||
import {atoms as a} from '#/alf'
|
import {atoms as a} from '#/alf'
|
||||||
import {MessageMenu} from '#/components/dms/MessageMenu'
|
import {MessageMenu} from '#/components/dms/MessageMenu'
|
||||||
|
@ -37,12 +38,12 @@ export function ActionsWrapper({
|
||||||
|
|
||||||
// Reanimated's `runOnJS` doesn't like refs, so we can't use `runOnJS(menuControl.open)()`. Instead, we'll use this
|
// Reanimated's `runOnJS` doesn't like refs, so we can't use `runOnJS(menuControl.open)()`. Instead, we'll use this
|
||||||
// function
|
// function
|
||||||
const open = useCallback(() => {
|
const open = React.useCallback(() => {
|
||||||
Keyboard.dismiss()
|
Keyboard.dismiss()
|
||||||
menuControl.open()
|
menuControl.open()
|
||||||
}, [menuControl])
|
}, [menuControl])
|
||||||
|
|
||||||
const shrink = useCallback(() => {
|
const shrink = React.useCallback(() => {
|
||||||
'worklet'
|
'worklet'
|
||||||
cancelAnimation(scale)
|
cancelAnimation(scale)
|
||||||
scale.value = withTiming(1, {duration: 200}, () => {
|
scale.value = withTiming(1, {duration: 200}, () => {
|
||||||
|
@ -52,7 +53,7 @@ export function ActionsWrapper({
|
||||||
|
|
||||||
const grow = React.useCallback(() => {
|
const grow = React.useCallback(() => {
|
||||||
'worklet'
|
'worklet'
|
||||||
scale.value = withTiming(1.05, {duration: 750}, finished => {
|
scale.value = withTiming(1.05, {duration: 450}, finished => {
|
||||||
if (!finished) return
|
if (!finished) return
|
||||||
animationDidComplete.value = true
|
animationDidComplete.value = true
|
||||||
runOnJS(playHaptic)()
|
runOnJS(playHaptic)()
|
||||||
|
@ -74,7 +75,8 @@ export function ActionsWrapper({
|
||||||
style={animatedStyle}
|
style={animatedStyle}
|
||||||
unstable_pressDelay={200}
|
unstable_pressDelay={200}
|
||||||
onPressIn={grow}
|
onPressIn={grow}
|
||||||
onTouchEnd={shrink}>
|
onTouchEnd={shrink}
|
||||||
|
hitSlop={HITSLOP_10}>
|
||||||
{children}
|
{children}
|
||||||
</AnimatedPressable>
|
</AnimatedPressable>
|
||||||
<MessageMenu message={message} control={menuControl} hideTrigger={true} />
|
<MessageMenu message={message} control={menuControl} hideTrigger={true} />
|
||||||
|
|
Loading…
Reference in New Issue