cdslibrary 1.2.45 → 1.2.47
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useEffect, useState } from "react";
|
|
1
|
+
import React, { useEffect, useState, forwardRef } from "react";
|
|
2
2
|
import { View, Text, Animated, Dimensions, StyleSheet, Pressable, Platform, ScrollView } from "react-native";
|
|
3
3
|
import { CDSButton } from "./CDSButton";
|
|
4
4
|
import { MaterialIcons } from "@expo/vector-icons";
|
|
@@ -8,7 +8,7 @@ import { LinearGradient } from 'expo-linear-gradient';
|
|
|
8
8
|
const { height, width } = Dimensions.get("window");
|
|
9
9
|
const isMobile = width <= 878;
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
const bottomSheetRender = ({
|
|
12
12
|
type,
|
|
13
13
|
isVisible,
|
|
14
14
|
hasClose,
|
|
@@ -19,7 +19,7 @@ export const CDSBottomSheet = ({
|
|
|
19
19
|
primaryButtonOnPress,
|
|
20
20
|
secondaryButtonLabel,
|
|
21
21
|
onFinish,
|
|
22
|
-
}) => {
|
|
22
|
+
}, ref) => {
|
|
23
23
|
const { theme } = useTheme();
|
|
24
24
|
const [modalVisible, setModalVisible] = useState(isVisible);
|
|
25
25
|
const [modalOpacity] = useState(new Animated.Value(0));
|
|
@@ -104,6 +104,7 @@ export const CDSBottomSheet = ({
|
|
|
104
104
|
|
|
105
105
|
<View style={styles.scrollWrapper}>
|
|
106
106
|
<ScrollView
|
|
107
|
+
ref={ref}
|
|
107
108
|
style={styles.scrollArea}
|
|
108
109
|
contentContainerStyle={[styles.scrollContent, { paddingBottom: theme.space.xl }]}
|
|
109
110
|
showsVerticalScrollIndicator={true}
|
|
@@ -189,6 +190,7 @@ const styles = StyleSheet.create({
|
|
|
189
190
|
},
|
|
190
191
|
},
|
|
191
192
|
scrollWrapper: {
|
|
193
|
+
overflow: 'visible',
|
|
192
194
|
flex: 1,
|
|
193
195
|
position: 'relative',
|
|
194
196
|
width: '100%',
|
|
@@ -221,4 +223,7 @@ const styles = StyleSheet.create({
|
|
|
221
223
|
marginTop: 'auto',
|
|
222
224
|
},
|
|
223
225
|
},
|
|
224
|
-
});
|
|
226
|
+
});
|
|
227
|
+
|
|
228
|
+
|
|
229
|
+
export const CDSBottomSheet = forwardRef(bottomSheetRender);
|
|
@@ -55,9 +55,17 @@ export const CDSSnackBar = ({ message, visible, onDismiss, action }) => {
|
|
|
55
55
|
}
|
|
56
56
|
});
|
|
57
57
|
|
|
58
|
-
const animatedStyle = useAnimatedStyle(() =>
|
|
59
|
-
|
|
60
|
-
|
|
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]);
|
|
61
69
|
|
|
62
70
|
if (!visible && translateY.value >= 100) return null;
|
|
63
71
|
|
|
@@ -101,7 +109,7 @@ const styles = StyleSheet.create({
|
|
|
101
109
|
alignSelf: 'center',
|
|
102
110
|
width: '90%',
|
|
103
111
|
maxWidth: 600,
|
|
104
|
-
position: '
|
|
112
|
+
position: 'absolute',
|
|
105
113
|
flexDirection: 'row',
|
|
106
114
|
alignItems: 'center',
|
|
107
115
|
justifyContent: 'space-between',
|