cdslibrary 1.2.44 → 1.2.46
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/CDSSnackBar.jsx +22 -13
- package/package.json +1 -1
|
@@ -1,16 +1,15 @@
|
|
|
1
1
|
import React, { useEffect } from "react";
|
|
2
|
-
import { StyleSheet, Text, TouchableOpacity,
|
|
3
|
-
import Animated, {
|
|
4
|
-
useSharedValue,
|
|
5
|
-
useAnimatedStyle,
|
|
6
|
-
withSpring,
|
|
7
|
-
withTiming,
|
|
8
|
-
runOnJS
|
|
2
|
+
import { StyleSheet, Text, TouchableOpacity, } from "react-native";
|
|
3
|
+
import Animated, {
|
|
4
|
+
useSharedValue,
|
|
5
|
+
useAnimatedStyle,
|
|
6
|
+
withSpring,
|
|
7
|
+
withTiming,
|
|
8
|
+
runOnJS
|
|
9
9
|
} from "react-native-reanimated";
|
|
10
10
|
import { GestureDetector, Gesture, } from "react-native-gesture-handler";
|
|
11
11
|
import { useTheme } from "../context/CDSThemeContext";
|
|
12
12
|
|
|
13
|
-
const { height: SCREEN_HEIGHT } = Dimensions.get("window");
|
|
14
13
|
|
|
15
14
|
export const CDSSnackBar = ({ message, visible, onDismiss, action }) => {
|
|
16
15
|
const { theme } = useTheme();
|
|
@@ -56,9 +55,17 @@ export const CDSSnackBar = ({ message, visible, onDismiss, action }) => {
|
|
|
56
55
|
}
|
|
57
56
|
});
|
|
58
57
|
|
|
59
|
-
const animatedStyle = useAnimatedStyle(() =>
|
|
60
|
-
|
|
61
|
-
|
|
58
|
+
const animatedStyle = useAnimatedStyle(() => {
|
|
59
|
+
return {
|
|
60
|
+
transform: [
|
|
61
|
+
{ translateY: translateY.value }
|
|
62
|
+
],
|
|
63
|
+
};
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
useEffect(() => {
|
|
67
|
+
translateY.value = withTiming(visible ? 0 : 150, { duration: 400 });
|
|
68
|
+
}, [visible]);
|
|
62
69
|
|
|
63
70
|
if (!visible && translateY.value >= 100) return null;
|
|
64
71
|
|
|
@@ -77,7 +84,7 @@ export const CDSSnackBar = ({ message, visible, onDismiss, action }) => {
|
|
|
77
84
|
]}
|
|
78
85
|
>
|
|
79
86
|
<Text style={[
|
|
80
|
-
theme.typography.regular.sm,
|
|
87
|
+
theme.typography.regular.sm,
|
|
81
88
|
{ color: theme.text.neutral.contrast, flex: 1 }
|
|
82
89
|
]}>
|
|
83
90
|
{message}
|
|
@@ -106,7 +113,9 @@ const styles = StyleSheet.create({
|
|
|
106
113
|
flexDirection: 'row',
|
|
107
114
|
alignItems: 'center',
|
|
108
115
|
justifyContent: 'space-between',
|
|
109
|
-
|
|
116
|
+
bottom: 40,
|
|
117
|
+
zIndex: 9999,
|
|
118
|
+
elevation: 10,
|
|
110
119
|
},
|
|
111
120
|
actionButton: {
|
|
112
121
|
marginLeft: 16,
|