cdslibrary 1.2.88 → 1.2.89

package/components/CDSBottomSheet.jsx

@@ -26,8 +26,10 @@ const bottomSheetRender = ({
   customSlot,
   primaryButtonLabel = "Aceptar",
   primaryButtonOnPress,
+  secondaryButtonOnPress,
   secondaryButtonLabel,
   onFinish,
+  closeOnSecondaryPress = true,
 }, ref) => {
   const { theme } = useTheme();
   const isMobile = theme.isMobile;
@@ -36,16 +38,28 @@ const bottomSheetRender = ({
   const translation = useSharedValue(startPos);
   const opacity = useSharedValue(0);
 
-  const triggerOnFinish = useCallback(() => {
+  const [contentHeight, setContentHeight] = React.useState(0);
+  const [layoutHeight, setLayoutHeight] = React.useState(0);
+
+  // Comprobamos si el contenido desborda el contenedor
+  const isScrollable = contentHeight > layoutHeight;
+
+  const triggerOnFinish = useCallback((wasActionAlreadyDone = false) => {
     if (onFinish) onFinish();
-    if (primaryButtonOnPress) primaryButtonOnPress();
-  }, [onFinish, primaryButtonOnPress]);
 
-  const handleClose = useCallback(() => {
+    // SI NO se ha ejecutado la acción (se cerró por X, gesto o backdrop)
+    // Y SI NO hay botón secundario (es un modal de botón único)
+    if (!wasActionAlreadyDone && !secondaryButtonLabel && primaryButtonOnPress) {
+      primaryButtonOnPress();
+    }
+  }, [onFinish, secondaryButtonLabel, primaryButtonOnPress]);
+
+  // 2. handleClose recibe el parámetro y lo pasa al JS
+  const handleClose = useCallback((wasActionAlreadyDone = false) => {
     "worklet";
     translation.value = withTiming(startPos, { duration: 300 }, (finished) => {
       if (finished) {
-        runOnJS(triggerOnFinish)();
+        runOnJS(triggerOnFinish)(wasActionAlreadyDone);
       }
     });
     opacity.value = withTiming(0, { duration: 300 });
@@ -86,7 +100,7 @@ const bottomSheetRender = ({
     }
   }, [isVisible, startPos]); // Asegúrate de incluir startPos
 
-const animatedStyle = useAnimatedStyle(() => {
+  const animatedStyle = useAnimatedStyle(() => {
     return {
       opacity: opacity.value,
       // Ocultamos el layout completamente si terminó de salir
@@ -120,11 +134,11 @@ const animatedStyle = useAnimatedStyle(() => {
       <Animated.View
         style={[
           styles.overlay,
-          {pointerEvents: isVisible ? "auto" : "none", backgroundColor: theme.surface.special.overlay },
+          { pointerEvents: isVisible ? "auto" : "none", backgroundColor: theme.surface.special.overlay },
           backdropStyle
         ]}
       >
-        <Pressable onPress={() => runOnJS(handleClose)()} style={{ flex: 1 }} />
+        <Pressable onPress={() => runOnJS(handleClose)(false)} style={{ flex: 1 }} />
       </Animated.View>
       <Animated.View
         style={[
@@ -141,7 +155,6 @@ const animatedStyle = useAnimatedStyle(() => {
             } : {
               borderBottomLeftRadius: theme.radius.lg,
               borderTopLeftRadius: theme.radius.lg,
-              paddingBottom: theme.space.md,
             })
           }
         ]}
@@ -166,42 +179,65 @@ const animatedStyle = useAnimatedStyle(() => {
 
         {!!title && <Text style={[theme.typography.h3, { marginHorizontal: theme.space.md }]}>{title}</Text>}
 
-        <View style={styles.scrollWrapper}>
+        <View style={styles.scrollWrapper} onLayout={(e) => setLayoutHeight(e.nativeEvent.layout.height)}>
           <GestureDetector gesture={Gesture.Simultaneous(nativeGesture)}>
             <ScrollView
               ref={ref}
               style={styles.scrollArea}
-              contentContainerStyle={[styles.scrollContent, { paddingBottom: theme.space.xl }]} // Tu padding original
+              scrollEnabled={isScrollable} // Desactiva el scroll si no es necesario
+              onContentSizeChange={(_, h) => setContentHeight(h)}
+              contentContainerStyle={[styles.scrollContent, {}]} // Tu padding original
               showsVerticalScrollIndicator={true}
               bounces={true}
               nestedScrollEnabled={true}
               scrollEventThrottle={16}
             >
               {!!description && (
-                <Text style={[theme.typography.regular.md, { padding: theme.space.md }]}>
+                <Text style={[theme.typography.regular.md, { paddingHorizontal: theme.space.md }]}>
                   {description}
                 </Text>
               )}
               {customSlot}
             </ScrollView>
           </GestureDetector>
-          <LinearGradient
-            colors={['transparent', theme.surface.neutral.primary]}
-            style={[styles.fadeGradient, { pointerEvents: 'none' }]}
-          />
+          {isScrollable && (
+            <LinearGradient
+              colors={['transparent', theme.surface.neutral.primary]}
+              style={[styles.fadeGradient, {
+                pointerEvents: 'none',
+                marginLeft: !isMobile && theme.space.md,
+                borderBottomLeftRadius: !isMobile && 2
+              }]}
+            />
+          )}
         </View>
 
         {type !== "informative" && (
-          <View style={[isMobile ? styles.actionsContainer.typeBottomSheet : styles.actionsContainer.typeDrawer, { paddingHorizontal: theme.space.md, paddingVertical: theme.space.lg }]}>
+          <View style={[isMobile ? styles.actionsContainer.typeBottomSheet : styles.actionsContainer.typeDrawer, { margin: theme.space.md }]}>
+            {/* BOTÓN PRIMARIO */}
             <CDSButton
               label={primaryButtonLabel}
-              onPress={() => runOnJS(handleClose)()}
+              onPress={() => {
+                if (primaryButtonOnPress) primaryButtonOnPress();
+                runOnJS(handleClose)(true); // <--- TRUE: Acción ya hecha
+              }}
             />
-            {secondaryButtonLabel && (<CDSButton
-              label={secondaryButtonLabel}
-              type="ghost"
-              onPress={() => runOnJS(handleClose)()}
-            />)}
+
+            {/* BOTÓN SECUNDARIO (si existe) */}
+            {secondaryButtonLabel && (
+              <CDSButton
+                label={secondaryButtonLabel}
+                type="ghost"
+                onPress={() => {
+                  if (secondaryButtonOnPress) secondaryButtonOnPress();
+
+                  // Solo cerramos si no nos dijeron lo contrario
+                  if (closeOnSecondaryPress) {
+                    runOnJS(handleClose)(true);
+                  }
+                }}
+              />
+            )}
           </View>
         )}
       </Animated.View>
@@ -249,27 +285,29 @@ const styles = StyleSheet.create({
     width: '100%',
   },
   scrollArea: {
+
     width: '100%',
   },
   scrollContent: {
     gap: 16,
+
   },
   fadeGradient: {
     position: 'absolute',
     bottom: 0,
     left: 0,
     right: 0,
-    height: 24,
+    height: 32,
   },
   actionsContainer: {
     typeBottomSheet: {
       flexDirection: "column",
-      width: "100%",
+      width: "auto",
       gap: 8,
     },
     typeDrawer: {
       flexDirection: "row-reverse",
-      width: "100%",
+      width: "auto",
       gap: 8,
       marginTop: 'auto',
     },

package/components/CDSButton.jsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect } from "react";
-import { Text, StyleSheet, TouchableOpacity, Animated } from "react-native";
+import { Text, StyleSheet, TouchableOpacity, Animated, View } from "react-native";
 import { MaterialIcons } from "@expo/vector-icons";
 import { useTheme } from "../context/CDSThemeContext";
 
@@ -15,34 +15,6 @@ export const CDSButton = ({
   const { theme } = useTheme();
   const isMobile = theme.isMobile;
 
-  // 1. Referencia de animación
-  const animatedValue = useRef(new Animated.Value(0)).current;
-
-  // 2. Disparar entrada al montar
-  useEffect(() => {
-    Animated.timing(animatedValue, {
-      toValue: 1,
-      duration: 400,
-      useNativeDriver: false // Para manejar maxHeight y otros layouts
-    }).start();
-  }, []);
-
-  // 3. Estructura de animatedLayout unificada
-  const animatedLayout = {
-    opacity: animatedValue,
-    transform: [{
-      scale: animatedValue.interpolate({
-        inputRange: [0, 1],
-        outputRange: [0.95, 1]
-      })
-    }],
-    // Permite que el botón aparezca empujando suavemente
-    maxHeight: animatedValue.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, (variant === "fill" || isMobile ? 48 : 56)]
-    }),
-  };
-
   const backgroundColor =
     type === "disabled"
       ? theme.surface.action.disabled
@@ -58,11 +30,10 @@ export const CDSButton = ({
         : theme.text.neutral.contrast;
 
   return (
-    <Animated.View style={[
-      animatedLayout,
+    <View style={[
       {
         overflow: 'hidden',
-        alignSelf: (variant === "fill" || isMobile) ? "stretch" : "center",
+        alignSelf: (variant === "fill" || isMobile) ? "stretch" : "",
         flexGrow: (variant === "fill" || isMobile ? 1 : 0),
       }
     ]}>
@@ -113,7 +84,7 @@ export const CDSButton = ({
           />
         )}
       </TouchableOpacity>
-    </Animated.View>
+    </View>
   );
 };
 

package/components/CDSButtonGroup.jsx

@@ -24,7 +24,7 @@ export const CDSButtonGroup = ({ options, onSelect, label = 'Label', selected =
     };
 
     return (
-        <View style={[styles.container, { gap: theme.space.sm }]}>
+        <View style={[styles.container, { gap: theme.space.sm, }]}>
             <Text style={[theme.typography.label]}>{label}</Text>
             <View style={[styles.actionsContainer, { gap: theme.space.sm }]}>
                 {options.map((option, index) => (

package/components/CDSCarousel.jsx

@@ -29,7 +29,7 @@ export const CDSCarousel = ({ activeIndex, scrollViewRef, onScroll, images }) =>
         onLayout={onLayout}
       >
         {images.map((image, index) => (
-          <View key={index} style={{ width: scrollViewWidth, justifyContent: 'center', alignItems: 'center', backgroundColor: 'red' }}>
+          <View key={index} style={{ width: scrollViewWidth, justifyContent: 'center', alignItems: 'center',}}>
             <Image
               source={image}
               style={{

package/components/CDSImageButtonGroup.jsx

@@ -35,7 +35,7 @@ export const CDSImageButtonGroup = ({ array, onSelect, isCentered }) => {
     };
 
     return (
-        <Animated.View style={[
+        <View style={[
             animatedLayout,
             { width: '100%' } // Asegura que el contenedor ocupe todo el ancho disponible
         ]}>
@@ -65,7 +65,7 @@ export const CDSImageButtonGroup = ({ array, onSelect, isCentered }) => {
                     />
                 ))}
             </ScrollView>
-        </Animated.View>
+        </View>
     );
 }
 

package/components/CDSInput.jsx

@@ -23,11 +23,33 @@ export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeTe
   const isReadOnly = type === 'readOnly';
 
   // --- Colores de seguridad ---
-  const colorBase = theme?.text?.neutral?.primary 
-  const colorReadOnlyText = theme?.text?.neutral?.secondary 
-  const colorFocus = theme?.surface?.special?.progress
-  const colorTertiary = theme?.outline?.neutral?.tertiaryVariant 
-  const colorPrimaryOutline = theme?.outline?.neutral?.primary 
+  const colorBase = theme?.text?.neutral?.primary
+  const colorReadOnlyText = theme?.text?.neutral?.secondary
+  const colorFocus = theme?.outline?.neutral?.focus
+  const colorTertiary = theme?.outline?.neutral?.tertiaryVariant
+  const colorPrimaryOutline = theme?.outline?.neutral?.primary
+
+  const handleTextChange = (text) => {
+    let filteredText = text;
+
+    if (keyboard === 'numeric') {
+      // Elimina cualquier cosa que no sea un número del 0 al 9
+      filteredText = text.replace(/[^0-9]/g, '');
+    }
+    else if (keyboard === 'decimal-pad') {
+      // 1. Permite solo números y puntos
+      filteredText = text.replace(/[^0-9.]/g, '');
+
+      // 2. Evita que haya más de un punto decimal
+      const parts = filteredText.split('.');
+      if (parts.length > 2) {
+        filteredText = parts[0] + '.' + parts.slice(1).join('');
+      }
+    }
+
+    isInternalChange.current = true;
+    onChangeText && onChangeText(filteredText);
+  };
 
   useEffect(() => {
     // ELIMINAMOS la restricción de !isReadOnly para que se anime siempre
@@ -58,7 +80,7 @@ export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeTe
     return {
       borderColor,
       borderWidth: 1 + (flashValue.value * 2),
-      transform: [{ scale: 1 + (flashValue.value * 0.06) }]
+      transform: [{ scale: 1 + (flashValue.value * 0.01) }]
     };
   });
 
@@ -109,10 +131,7 @@ export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeTe
           placeholder={placeholder}
           placeholderTextColor={theme.text.neutral.placeholder}
           keyboardType={keyboard}
-          onChangeText={(txt) => {
-            isInternalChange.current = true;
-            onChangeText && onChangeText(txt);
-          }}
+          onChangeText={handleTextChange}
           value={value}
           editable={!isReadOnly}
           secureTextEntry={type === "password"}

package/components/CDSLoader.jsx

@@ -21,8 +21,8 @@ export const CDSLoader = ({ visible = false, message }) => {
       opacity.value = withTiming(1, { duration: 300 });
     } else {
       opacity.value = withDelay(
-        1000,
-        withTiming(0, { duration: 1200 }, (isFinished) => {
+        200,
+        withTiming(0, { duration: 200 }, (isFinished) => {
           if (isFinished) {
             runOnJS(setShouldRender)(false);
           }

package/package.json

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