cdslibrary 1.2.11 → 1.2.12

package/components/CDSBottomSheet.jsx

@@ -1,15 +1,11 @@
-import React, { useEffect, useRef, useState } from "react";
-import { View, Text, Animated, Dimensions, StyleSheet, Pressable, Platform } from "react-native";
+import React, { useEffect, useState } from "react";
+import { View, Text, Animated, Dimensions, StyleSheet, Pressable, Platform, ScrollView } from "react-native";
 import { CDSButton } from "./CDSButton";
-
 import { MaterialIcons } from "@expo/vector-icons";
 import { useTheme } from "../context/CDSThemeContext";
-import { ScrollView } from "react-native-web";
 import { LinearGradient } from 'expo-linear-gradient';
 
-
 const { height, width } = Dimensions.get("window");
-
 const isMobile = width <= 878;
 
 export const CDSBottomSheet = ({
@@ -24,90 +20,99 @@ export const CDSBottomSheet = ({
   secondaryButtonLabel = "Cancelar",
   onFinish,
 }) => {
-
-  
-  
   const { theme } = useTheme();
-  const [childHeight, setChildHeight] = useState(0);
   const [modalVisible, setModalVisible] = useState(isVisible);
   const [modalOpacity] = useState(new Animated.Value(0));
-  const [slidePosition] = useState(new Animated.Value(height));
-  
-  const handleLayout = (event) => {
-    const { height: layoutHeight } = event.nativeEvent.layout;
-    setChildHeight(layoutHeight);
-  };
-
-  useEffect(() => {
-    const targetValue = isMobile ? height : width; // Valor fuera de pantalla
+  const [slidePosition] = useState(new Animated.Value(isMobile ? height : width));
 
+  // Función unificada para cerrar con animación
+  const handleClose = () => {
+    const targetValue = isMobile ? height : width;
 
     Animated.parallel([
       Animated.timing(modalOpacity, {
-        toValue: modalVisible ? 1 : 0,
-        duration: 400,
+        toValue: 0,
+        duration: 350,
         useNativeDriver: false,
       }),
       Animated.timing(slidePosition, {
-        toValue: modalVisible ? 0 : targetValue, // 0 es visible, targetValue es oculto
-        duration: 400,
+        toValue: targetValue,
+        duration: 350,
         useNativeDriver: false,
       }),
-    ]).start();
-  }, [modalVisible, isMobile]); // Añadimos isMobile a las dependencias
+    ]).start(() => {
+      // Importante: onFinish se ejecuta SOLO cuando la animación termina
+      if (onFinish) onFinish();
+      setModalVisible(false);
+    });
+  };
+
+  useEffect(() => {
+    if (modalVisible) {
+      Animated.parallel([
+        Animated.timing(modalOpacity, {
+          toValue: 1,
+          duration: 400,
+          useNativeDriver: false,
+        }),
+        Animated.timing(slidePosition, {
+          toValue: 0,
+          duration: 400,
+          useNativeDriver: false,
+        }),
+      ]).start();
+    }
+  }, [modalVisible]);
+
   return (
     <>
       <Animated.View
-        onLayout={handleLayout}
         style={[
           isMobile ? styles.container.typeBottomSheet : styles.container.typeDrawer,
           {
             opacity: modalOpacity,
             transform: [
-              isMobile
-                ? { translateY: slidePosition } // Sube en móvil
-                : { translateX: slidePosition } // Entra lateral en desktop
+              isMobile ? { translateY: slidePosition } : { translateX: slidePosition }
             ],
-            backgroundColor: theme.surface.neutral.primary, paddingHorizontal: theme.space.sm,
+            backgroundColor: theme.surface.neutral.primary,
+            paddingHorizontal: theme.space.sm,
             paddingTop: theme.space.xl,
             gap: theme.space.sm,
-          }, isMobile ? [styles.container.typeBottomSheet, {
-            borderTopLeftRadius: theme.radius.lg,
-            borderTopRightRadius: theme.radius.lg,
-          }] : [styles.container.typeDrawer, {
-            borderBottomLeftRadius: theme.radius.lg, borderTopLeftRadius: theme.radius.lg, paddingBottom: theme.space.md,
-          },
-          ]]}
+            ...(isMobile ? {
+              borderTopLeftRadius: theme.radius.lg,
+              borderTopRightRadius: theme.radius.lg,
+            } : {
+              borderBottomLeftRadius: theme.radius.lg,
+              borderTopLeftRadius: theme.radius.lg,
+              paddingBottom: theme.space.md,
+            })
+          }
+        ]}
       >
-
         {hasClose && (
           <MaterialIcons
-            name={"close"}
+            name="close"
             size={theme.typography.icon.lg}
             color={theme.text.neutral.primary}
-            onPress={() => {
-              onFinish && onFinish();
-              setModalVisible(false);
-            }}
-            style={{ position: "absolute", right: theme.space.sm, top: theme.space.sm }}
+            onPress={handleClose}
+            style={{ position: "absolute", right: theme.space.sm, top: theme.space.sm, zIndex: 10 }}
           />
         )}
-        <Text style={theme.typography.bold.lg}>{title}</Text>
+
+        {!!title && <Text style={theme.typography.bold.lg}>{title}</Text>}
+
         <View style={styles.scrollWrapper}>
           <ScrollView
             style={styles.scrollArea}
-            contentContainerStyle={[styles.scrollContent, {
-              flexGrow: 0,
-              paddingBottom: theme.space.md
-            }]}
+            contentContainerStyle={[styles.scrollContent, { paddingBottom: theme.space.md }]}
             showsVerticalScrollIndicator={true}
-            persistentScrollbar={true}
-            indicatorStyle={theme.name === 'dark' ? 'white' : 'black'}
           >
-            {description && (
-              <Text style={[theme.typography.regular.md, { marginBottom: theme.space.md }]}>{description}</Text>
+            {!!description && (
+              <Text style={[theme.typography.regular.md, { marginBottom: theme.space.md }]}>
+                {description}
+              </Text>
             )}
-            {customSlot && <View style={styles.customSlot}>{customSlot}</View>}
+            {customSlot}
           </ScrollView>
           <LinearGradient
             colors={['transparent', theme.surface.neutral.primary]}
@@ -115,27 +120,25 @@ export const CDSBottomSheet = ({
             pointerEvents="none"
           />
         </View>
+
         {type !== "informative" && (
           <View style={isMobile ? styles.actionsContainer.typeBottomSheet : styles.actionsContainer.typeDrawer}>
             <CDSButton
               label={primaryButtonLabel}
               onPress={() => {
-                primaryButtonOnPress && primaryButtonOnPress();
-                setModalVisible(false)
-              }
-              }
+                if (primaryButtonOnPress) primaryButtonOnPress();
+                handleClose();
+              }}
             />
             <CDSButton
               label={secondaryButtonLabel}
               type="ghost"
-              onPress={() => {
-                onFinish && onFinish();
-                setModalVisible(false);
-              }}
+              onPress={handleClose}
             />
           </View>
         )}
       </Animated.View>
+
       <Animated.View
         style={[
           styles.overlay,
@@ -145,103 +148,74 @@ export const CDSBottomSheet = ({
           },
         ]}
       >
-        <Pressable onPress={() => setModalVisible(false)} style={{ flex: 1 }} />
+        <Pressable onPress={handleClose} style={{ flex: 1 }} />
       </Animated.View>
     </>
   );
-}
+};
 
 const styles = StyleSheet.create({
   overlay: {
     position: "absolute",
     top: 0,
     left: 0,
-    width: "100%",
-    height: "100%"
+    right: 0,
+    bottom: 0,
+    zIndex: 98,
   },
-
   container: {
     typeBottomSheet: {
       maxHeight: '90%',
-      flex: 1,
-      justifyContent: "flex-end",
-      alignItems: "center",
-      zIndex: 99,
       width: "100%",
       position: "absolute",
       bottom: 0,
+      left: 0,
+      right: 0,
+      zIndex: 99,
     },
     typeDrawer: {
-      position: "absolute", // Clave para el Drawer
-      right: 0,            // Anclado a la derecha
+      position: "absolute",
+      right: 0,
       top: 0,
       bottom: 0,
-      justifyContent: "center",
-      zIndex: 99,
       width: 600,
+      zIndex: 99,
+      ...Platform.select({
+        web: { boxShadow: '-10px 0px 15px rgba(0,0,0,0.1)' }
+      })
     },
   },
-
   scrollWrapper: {
-    flex: 1, // Ocupa todo el espacio vertical disponible
-    position: 'relative', // Para que el gradiente se posicione absolutamente dentro de él
+    flex: 1,
+    position: 'relative',
     width: '100%',
   },
   scrollArea: {
-    flexShrink: 1,
-    flexGrow: 1,
+    flex: 1,
     width: '100%',
-    paddingBottom: 20,
   },
-
   scrollContent: {
-    paddingBottom: 20, // Aire al final del contenido
     gap: 16,
   },
-
   fadeGradient: {
     position: 'absolute',
     bottom: 0,
     left: 0,
     right: 0,
-    height: 60, // Ajusta la altura del gradiente según tu diseño
-  },
-
-  infoContainer: {
-    typeBottomSheet: {
-      width: "100%",
-      zIndex: 100,
-      pointerEvents: "all",
-    },
-    typeDrawer: {
-      flex: 1,             // Ocupa todo el alto disponible en el Drawer
-      width: "100%",
-      zIndex: 100,
-      pointerEvents: "all",
-      // Opcional: una sombra elegante para Desktop
-      ...Platform.select({
-        web: { boxShadow: '-10px 0px 15px rgba(0,0,0,0.2)' }
-      })
-    },
+    height: 40,
   },
   actionsContainer: {
     typeBottomSheet: {
-      flex: "row",
+      flexDirection: "row",
       width: "100%",
       gap: 8,
+      paddingBottom: 20,
     },
     typeDrawer: {
-      marginTop: 'auto',
       flexDirection: "row-reverse",
       width: "100%",
       gap: 8,
+      marginTop: 'auto',
     },
   },
-
-  customSlot: {
-    width: '100%',
-    height: 'auto',
-  },
-
-});
-
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cdslibrary",
   "license": "0BSD",
-  "version": "1.2.11",
+  "version": "1.2.12",
   "main": "index.js",
   "author": "Nat Viramontes",
   "description": "A library of components for the CDS project",