forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Revert change in FAB animation (#5465)
+14
-25
+2
-2
src/lib/haptics.ts
+2
-2
src/lib/haptics.ts
···
1
1
import React from 'react'
2
2
import {impactAsync, ImpactFeedbackStyle} from 'expo-haptics'
3
3
4
-
import {isIOS, isWeb} from 'platform/detection'
5
-
import {useHapticsDisabled} from 'state/preferences/disable-haptics'
4
+
import {isIOS, isWeb} from '#/platform/detection'
5
+
import {useHapticsDisabled} from '#/state/preferences/disable-haptics'
6
6
7
7
export function useHaptics() {
8
8
const isHapticsDisabled = useHapticsDisabled()
+12
-23
src/view/com/util/fab/FABInner.tsx
+12
-23
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, {
4
-
Easing,
5
-
useAnimatedStyle,
6
-
withTiming,
7
-
} from 'react-native-reanimated'
3
+
import Animated, {useAnimatedStyle, withTiming} from 'react-native-reanimated'
8
4
import {useSafeAreaInsets} from 'react-native-safe-area-context'
9
5
import {LinearGradient} from 'expo-linear-gradient'
10
6
7
+
import {useHaptics} from '#/lib/haptics'
11
8
import {useMinimalShellFabTransform} from '#/lib/hooks/useMinimalShellTransform'
12
9
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
13
10
import {clamp} from '#/lib/numbers'
14
11
import {gradients} from '#/lib/styles'
15
12
import {isWeb} from '#/platform/detection'
16
-
import {useHaptics} from 'lib/haptics'
17
-
import {useHapticsDisabled} from 'state/preferences'
13
+
import {useHapticsDisabled} from '#/state/preferences'
18
14
import {useInteractionState} from '#/components/hooks/useInteractionState'
19
15
20
16
export interface FABProps
···
26
22
export function FABInner({testID, icon, onPress, ...props}: FABProps) {
27
23
const insets = useSafeAreaInsets()
28
24
const {isMobile, isTablet} = useWebMediaQueries()
25
+
const playHaptic = useHaptics()
26
+
const isHapticsDisabled = useHapticsDisabled()
29
27
const fabMinimalShellTransform = useMinimalShellFabTransform()
30
28
const {
31
-
state: isPressed,
29
+
state: pressed,
32
30
onIn: onPressIn,
33
31
onOut: onPressOut,
34
32
} = useInteractionState()
35
-
const playHaptic = useHaptics()
36
-
const isHapticsDisabled = useHapticsDisabled()
37
33
38
34
const size = isTablet ? styles.sizeLarge : styles.sizeRegular
39
35
···
41
37
? {right: 50, bottom: 50}
42
38
: {right: 24, bottom: clamp(insets.bottom, 15, 60) + 15}
43
39
44
-
const animatedStyle = useAnimatedStyle(() => ({
45
-
transform: [
46
-
{
47
-
scale: withTiming(isPressed ? 1.1 : 1, {
48
-
duration: 250,
49
-
easing: Easing.out(Easing.quad),
50
-
}),
51
-
},
52
-
],
40
+
const scale = useAnimatedStyle(() => ({
41
+
transform: [{scale: withTiming(pressed ? 0.95 : 1)}],
53
42
}))
54
43
55
44
return (
56
45
<TouchableWithoutFeedback
57
46
testID={testID}
47
+
onPressIn={onPressIn}
48
+
onPressOut={onPressOut}
58
49
onPress={e => {
59
-
playHaptic()
50
+
playHaptic('Light')
60
51
setTimeout(
61
52
() => {
62
53
onPress?.(e)
···
64
55
isHapticsDisabled ? 0 : 75,
65
56
)
66
57
}}
67
-
onPressIn={onPressIn}
68
-
onPressOut={onPressOut}
69
58
{...props}>
70
59
<Animated.View
71
60
style={[
···
74
63
tabletSpacing,
75
64
isMobile && fabMinimalShellTransform,
76
65
]}>
77
-
<Animated.View style={animatedStyle}>
66
+
<Animated.View style={scale}>
78
67
<LinearGradient
79
68
colors={[gradients.blueLight.start, gradients.blueLight.end]}
80
69
start={{x: 0, y: 0}}