cdslibrary 1.2.85 → 1.2.86

package/components/CDSInput.jsx

@@ -5,66 +5,84 @@ import Animated, {
   useSharedValue,
   withSequence,
   withTiming,
+  withDelay,
   interpolateColor
 } from "react-native-reanimated";
 import { useTheme } from "../context/CDSThemeContext";
 
+const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+
 export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeText, animationTrigger, returnKeyType, onFocus }) => {
   const { theme } = useTheme();
   const [isFocused, setIsFocused] = useState(false);
 
   const flashValue = useSharedValue(0);
+  const textHighlight = useSharedValue(0);
   const isInternalChange = useRef(false);
 
+  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 
+
   useEffect(() => {
-    if (!isInternalChange.current) {
-      flashValue.value = withSequence(
-        withTiming(1, { duration: 200 }),
+    // ELIMINAMOS la restricción de !isReadOnly para que se anime siempre
+    if (!isInternalChange.current && value) {
+      flashValue.value = withDelay(400, withSequence(
+        withTiming(1, { duration: 400 }),
+        withTiming(0, { duration: 600 })
+      ));
+
+      textHighlight.value = withSequence(
+        withTiming(1, { duration: 400 }),
         withTiming(0, { duration: 600 })
       );
     }
     isInternalChange.current = false;
-  }, [value, animationTrigger]);
-
-  const handleTextChange = (inputText) => {
-    isInternalChange.current = true;
-
-    if (keyboard === "decimal-pad") {
-      let cleaned = inputText.replace(',', '.').replace(/[^0-9.]/g, "");
-      const parts = cleaned.split('.');
-      if (parts.length > 2) cleaned = parts[0] + '.' + parts.slice(1).join('');
-      onChangeText && onChangeText(cleaned);
-    } else {
-      onChangeText && onChangeText(inputText);
-    }
-  };
+  }, [value, animationTrigger]); // Quitamos isReadOnly de las dependencias para evitar disparos extra
 
   const animatedBoxStyle = useAnimatedStyle(() => {
     const borderColor = interpolateColor(
       flashValue.value,
       [0, 1],
       [
-        isFocused ? theme.outline.neutral.focus : value ? theme.outline.neutral.tertiaryVariant : theme.outline.neutral.primary,
-        theme.outline.neutral.focus
+        isFocused ? colorFocus : value ? colorTertiary : colorPrimaryOutline,
+        colorFocus
       ]
     );
 
     return {
-      borderColor: borderColor,
-      // Quitamos el scale momentáneamente para asegurar que el layout no brinque
-      // transform: [{ scale: 1 + flashValue.value * 0.01 }], 
-      borderWidth: 1 + (flashValue.value * 1),
+      borderColor,
+      borderWidth: 1 + (flashValue.value * 2),
+      transform: [{ scale: 1 + (flashValue.value * 0.06) }]
     };
   });
 
+  const animatedTextStyle = useAnimatedStyle(() => {
+    // Definimos el color inicial según si es readOnly o no
+    const startColor = isReadOnly ? colorReadOnlyText : colorBase;
+
+    return {
+      color: interpolateColor(
+        textHighlight.value,
+        [0, 1],
+        [startColor, colorFocus] // El color de "brillo" sigue siendo el de foco
+      ),
+      letterSpacing: textHighlight.value * 1,
+      opacity: isReadOnly ? 0.85 + (textHighlight.value * 0.3) : 0.8 + (textHighlight.value * 0.2),
+    };
+  });
+
+  if (!theme) return null;
 
   return (
     <View style={styles.container}>
       {label && (
-        <Text style={[
-          theme.typography.label,
-          { color: theme.text.neutral.primary, marginBottom: theme.space.xs }
-        ]}>
+        <Text style={[theme.typography.label, { color: colorBase, marginBottom: theme.space?.xs || 4 }]}>
           {label}
         </Text>
       )}
@@ -73,35 +91,34 @@ export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeTe
         styles.wrapper,
         animatedBoxStyle,
         {
-          backgroundColor: type === 'readOnly' ? theme.surface.neutral.primaryVariant : theme.surface.neutral.primary,
-          borderRadius: theme.radius.sm,
+          backgroundColor: isReadOnly ? theme.surface.neutral.primaryVariant : theme.surface.neutral.primary,
+          borderRadius: theme.radius?.sm || 8,
         }
       ]}>
-        <TextInput
+        <AnimatedTextInput
           style={[
             styles.textBox,
-            theme.typography.inputText.value,
+            theme.typography.inputText?.value,
+            animatedTextStyle,
             {
-              paddingHorizontal: theme.space.sm,
-              color: type === 'readOnly' ? theme.text.neutral.secondary : theme.text.neutral.primary,
-              // Fix para web:
-              ...Platform.select({
-                web: { outlineStyle: 'none' }
-              })
+              paddingHorizontal: theme.space?.sm || 12,
+              fontWeight: '600',
+              ...Platform.select({ web: { outlineStyle: 'none' } })
             },
           ]}
           placeholder={placeholder}
           placeholderTextColor={theme.text.neutral.placeholder}
           keyboardType={keyboard}
-          onChangeText={handleTextChange}
+          onChangeText={(txt) => {
+            isInternalChange.current = true;
+            onChangeText && onChangeText(txt);
+          }}
           value={value}
-          editable={type !== 'readOnly'}
+          editable={!isReadOnly}
           secureTextEntry={type === "password"}
-          onFocus={() => { setIsFocused(true); onFocus }}
+          onFocus={() => { setIsFocused(true); onFocus && onFocus(); }}
           onBlur={() => setIsFocused(false)}
           underlineColorAndroid="transparent"
-          returnKeyType={returnKeyType}
-          dataSet={{ lpignore: "true" }}
         />
       </Animated.View>
     </View>
@@ -109,20 +126,14 @@ export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeTe
 };
 
 const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-    alignSelf: 'stretch',
-  },
+  container: { width: "100%", alignSelf: 'stretch' },
   wrapper: {
     width: '100%',
     height: 48,
-    flexDirection: 'row', // Asegura que el TextInput interno tenga un eje claro
+    flexDirection: 'row',
     alignItems: 'center',
     borderWidth: 1,
+    overflow: 'hidden'
   },
-  textBox: {
-    flex: 1,      // Esto es lo más importante: ocupa todo el espacio sobrante
-    height: '100%',
-    width: '100%',
-  },
+  textBox: { flex: 1, height: '100%', width: '100%' },
 });

package/package.json

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