forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
scale down FAB on press (#4259)
authored by
Samuel Newman
and committed by
GitHub
fba4a9ca
e48f8e15
+30
-20
+30
-20
src/view/com/util/fab/FABInner.tsx
+30
-20
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 from 'react-native-reanimated'
3
+
import Animated, {useAnimatedStyle, withTiming} from 'react-native-reanimated'
4
4
import {useSafeAreaInsets} from 'react-native-safe-area-context'
5
5
import {LinearGradient} from 'expo-linear-gradient'
6
6
···
9
9
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
10
10
import {clamp} from 'lib/numbers'
11
11
import {gradients} from 'lib/styles'
12
+
import {useInteractionState} from '#/components/hooks/useInteractionState'
12
13
13
14
export interface FABProps
14
15
extends ComponentProps<typeof TouchableWithoutFeedback> {
···
20
21
const insets = useSafeAreaInsets()
21
22
const {isMobile, isTablet} = useWebMediaQueries()
22
23
const {fabMinimalShellTransform} = useMinimalShellMode()
24
+
const {
25
+
state: pressed,
26
+
onIn: onPressIn,
27
+
onOut: onPressOut,
28
+
} = useInteractionState()
23
29
24
-
const size = React.useMemo(() => {
25
-
return isTablet ? styles.sizeLarge : styles.sizeRegular
26
-
}, [isTablet])
27
-
const tabletSpacing = React.useMemo(() => {
28
-
return isTablet
29
-
? {right: 50, bottom: 50}
30
-
: {
31
-
right: 24,
32
-
bottom: clamp(insets.bottom, 15, 60) + 15,
33
-
}
34
-
}, [insets.bottom, isTablet])
30
+
const size = isTablet ? styles.sizeLarge : styles.sizeRegular
31
+
32
+
const tabletSpacing = isTablet
33
+
? {right: 50, bottom: 50}
34
+
: {right: 24, bottom: clamp(insets.bottom, 15, 60) + 15}
35
+
36
+
const scale = useAnimatedStyle(() => ({
37
+
transform: [{scale: withTiming(pressed ? 0.95 : 1)}],
38
+
}))
35
39
36
40
return (
37
-
<TouchableWithoutFeedback testID={testID} {...props}>
41
+
<TouchableWithoutFeedback
42
+
testID={testID}
43
+
onPressIn={onPressIn}
44
+
onPressOut={onPressOut}
45
+
{...props}>
38
46
<Animated.View
39
47
style={[
40
48
styles.outer,
···
42
50
tabletSpacing,
43
51
isMobile && fabMinimalShellTransform,
44
52
]}>
45
-
<LinearGradient
46
-
colors={[gradients.blueLight.start, gradients.blueLight.end]}
47
-
start={{x: 0, y: 0}}
48
-
end={{x: 1, y: 1}}
49
-
style={[styles.inner, size]}>
50
-
{icon}
51
-
</LinearGradient>
53
+
<Animated.View style={scale}>
54
+
<LinearGradient
55
+
colors={[gradients.blueLight.start, gradients.blueLight.end]}
56
+
start={{x: 0, y: 0}}
57
+
end={{x: 1, y: 1}}
58
+
style={[styles.inner, size]}>
59
+
{icon}
60
+
</LinearGradient>
61
+
</Animated.View>
52
62
</Animated.View>
53
63
</TouchableWithoutFeedback>
54
64
)