this repo has no description
use PressableScale for animation (#5541)
authored by
Samuel Newman
and committed by
GitHub
9ca2928a
587c0c62
+33
-44
+2
-1
src/view/com/util/fab/FAB.web.tsx
+2
-1
src/view/com/util/fab/FAB.web.tsx
···
1
1
import React from 'react'
2
2
import {View} from 'react-native'
3
+
4
+
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
3
5
import {FABInner, FABProps} from './FABInner'
4
-
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
5
6
6
7
export const FAB = (_opts: FABProps) => {
7
8
const {isDesktop} = useWebMediaQueries()
+31
-43
src/view/com/util/fab/FABInner.tsx
+31
-43
src/view/com/util/fab/FABInner.tsx
···
1
1
import React, {ComponentProps} from 'react'
2
2
import {StyleSheet, TouchableWithoutFeedback} from 'react-native'
3
-
import Animated, {useAnimatedStyle, withTiming} from 'react-native-reanimated'
3
+
import Animated from 'react-native-reanimated'
4
4
import {useSafeAreaInsets} from 'react-native-safe-area-context'
5
5
import {LinearGradient} from 'expo-linear-gradient'
6
6
7
+
import {PressableScale} from '#/lib/custom-animations/PressableScale'
7
8
import {useHaptics} from '#/lib/haptics'
8
9
import {useMinimalShellFabTransform} from '#/lib/hooks/useMinimalShellTransform'
9
10
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
···
11
12
import {gradients} from '#/lib/styles'
12
13
import {isWeb} from '#/platform/detection'
13
14
import {useHapticsDisabled} from '#/state/preferences'
14
-
import {useInteractionState} from '#/components/hooks/useInteractionState'
15
15
16
16
export interface FABProps
17
17
extends ComponentProps<typeof TouchableWithoutFeedback> {
···
25
25
const playHaptic = useHaptics()
26
26
const isHapticsDisabled = useHapticsDisabled()
27
27
const fabMinimalShellTransform = useMinimalShellFabTransform()
28
-
const {
29
-
state: pressed,
30
-
onIn: onPressIn,
31
-
onOut: onPressOut,
32
-
} = useInteractionState()
33
28
34
29
const size = isTablet ? styles.sizeLarge : styles.sizeRegular
35
30
···
37
32
? {right: 50, bottom: 50}
38
33
: {right: 24, bottom: clamp(insets.bottom, 15, 60) + 15}
39
34
40
-
const scale = useAnimatedStyle(() => ({
41
-
transform: [{scale: withTiming(pressed ? 0.95 : 1)}],
42
-
}))
43
-
44
35
return (
45
-
<TouchableWithoutFeedback
46
-
testID={testID}
47
-
onPressIn={onPressIn}
48
-
onPressOut={onPressOut}
49
-
onPress={e => {
50
-
playHaptic('Light')
51
-
setTimeout(
52
-
() => {
53
-
onPress?.(e)
54
-
},
55
-
isHapticsDisabled ? 0 : 75,
56
-
)
57
-
}}
58
-
{...props}>
59
-
<Animated.View
60
-
style={[
61
-
styles.outer,
62
-
size,
63
-
tabletSpacing,
64
-
isMobile && fabMinimalShellTransform,
65
-
]}>
66
-
<Animated.View style={scale}>
67
-
<LinearGradient
68
-
colors={[gradients.blueLight.start, gradients.blueLight.end]}
69
-
start={{x: 0, y: 0}}
70
-
end={{x: 1, y: 1}}
71
-
style={[styles.inner, size]}>
72
-
{icon}
73
-
</LinearGradient>
74
-
</Animated.View>
75
-
</Animated.View>
76
-
</TouchableWithoutFeedback>
36
+
<Animated.View
37
+
style={[
38
+
styles.outer,
39
+
size,
40
+
tabletSpacing,
41
+
isMobile && fabMinimalShellTransform,
42
+
]}>
43
+
<PressableScale
44
+
testID={testID}
45
+
onPress={e => {
46
+
playHaptic('Light')
47
+
setTimeout(
48
+
() => {
49
+
onPress?.(e)
50
+
},
51
+
isHapticsDisabled ? 0 : 75,
52
+
)
53
+
}}
54
+
targetScale={0.9}
55
+
{...props}>
56
+
<LinearGradient
57
+
colors={[gradients.blueLight.start, gradients.blueLight.end]}
58
+
start={{x: 0, y: 0}}
59
+
end={{x: 1, y: 1}}
60
+
style={[styles.inner, size]}>
61
+
{icon}
62
+
</LinearGradient>
63
+
</PressableScale>
64
+
</Animated.View>
77
65
)
78
66
}
79
67