ikualo-ui-kit-mobile 2.1.16 → 2.1.18

package/app.json

@@ -3,7 +3,7 @@
     "name": "ikualo-app-2.0",
     "slug": "ikualo-app-20",
     "owner": "ikualo",
-    "version": "2.1.16",
+    "version": "2.1.17",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "automatic",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ikualo-ui-kit-mobile",
-  "version": "2.1.16",
+  "version": "2.1.18",
   "main": "src/index.ts",
   "scripts": {
     "start": "expo start",

package/src/elements/dialogs/DialogDown.tsx

@@ -1,6 +1,15 @@
 import { Icon, Text } from 'react-native-paper';
 import { getStylesDialog } from '../../../assets/styles/elements/dialog';
-import { View, TouchableWithoutFeedback, Modal, Keyboard, TouchableHighlight, Animated } from 'react-native';
+import {
+  View,
+  TouchableWithoutFeedback,
+  Modal,
+  Keyboard,
+  TouchableHighlight,
+  Animated,
+  BackHandler,
+  Platform,
+} from 'react-native';
 import { useEffect, useState, useRef } from 'react';
 import useStore from '../../store';
 import { IDialogDown } from '../../models';
@@ -8,7 +17,7 @@ import { IDialogDown } from '../../models';
 // Sistema simple de prioridades global
 class PriorityManager {
   private static instance: PriorityManager;
-  private currentDialog: { id: string; priority: number; onDismiss: () => void } | null = null;
+  private currentDialog: { id: string; priority: number; onDismiss?: () => void } | null = null;
   private readonly listeners: Set<() => void> = new Set();
 
   static getInstance(): PriorityManager {
@@ -27,10 +36,10 @@ class PriorityManager {
     this.listeners.forEach((listener) => listener());
   }
 
-  showDialog(id: string, priority: number, onDismiss: () => void) {
+  showDialog(id: string, priority: number, onDismiss?: () => void) {
     // Si hay un diálogo actual y el nuevo tiene mayor prioridad, cerrar el actual
     if (this.currentDialog && priority > this.currentDialog.priority) {
-      this.currentDialog.onDismiss();
+      this.currentDialog.onDismiss?.();
       this.currentDialog = null;
     }
 
@@ -129,16 +138,38 @@ export const DialogDown = (props: IDialogDown & { priority?: 0 | 1 | 2 | 3 | 4 |
     };
   }, []);
 
+  useEffect(() => {
+    if (Platform.OS === 'android' && !onDismiss && isVisible) {
+      const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
+        // Si no hay onDismiss, prevenir el cierre
+        return true;
+      });
+      return () => backHandler.remove();
+    }
+  }, [isVisible, onDismiss]);
+
   const handleDismiss = () => {
     priorityManager.current.hideDialog(dialogId);
-    onDismiss();
+    onDismiss?.();
+  };
+
+  const handleRequestClose = () => {
+    if (onDismiss) {
+      handleDismiss();
+    }
+    // Si no hay onDismiss, no hacer nada - previene el cierre
   };
 
   // Solo renderizar si este diálogo es el actual
   const isCurrentDialog = Boolean(isVisible && currentDialog && currentDialog.id === dialogId);
 
   return (
-    <Modal visible={isCurrentDialog} transparent={true} animationType="none" onRequestClose={handleDismiss}>
+    <Modal
+      visible={isCurrentDialog}
+      transparent={true}
+      animationType="none"
+      onRequestClose={handleRequestClose}
+    >
       <TouchableWithoutFeedback onPress={handleDismissKeyboard}>
         <View style={stylesDialog.modalBackground}>
           <Animated.View

package/src/elements/dialogs/DialogExamples.tsx

@@ -64,8 +64,19 @@ export const DialogExamples = () => {
           setIsVisible2(true);
         }}
       />
-      <DialogDown isVisible={isVisible2} onDismiss={() => setIsVisible2(false)} title="Titulo de prueba">
+      <DialogDown
+        isVisible={isVisible2}
+        showCloseButton={false}
+        title="Titulo de prueba"
+        //onDismiss={() => setIsVisible2(false)}
+      >
         <Text>Texto de prueba</Text>
+        <BtnContained
+          text="Aceptar"
+          onPress={() => {
+            setIsVisible2(false);
+          }}
+        />
       </DialogDown>
       <BtnContained
         text="Modal bajo animacion"

package/src/elements/inputs/Input.tsx

@@ -1,6 +1,6 @@
 import { HelperText, TextInput, Text } from 'react-native-paper';
 import { getStyleInput } from '../../../assets/styles/elements/inputs';
-import { useState, useCallback, useEffect, useRef } from 'react';
+import { useState } from 'react';
 import { View } from 'react-native';
 import React from 'react';
 import useStore from '../../store';
@@ -43,64 +43,25 @@ export const Input = (props: IInputText) => {
   const patternNumber = /^[0-9]*$/;
   const patternAlphanumeric = /^[a-zA-Z0-9]*$/;
   const patternLettersWithAccentsAndSpaces = /^[a-zA-ZáéíóúÁÉÍÓÚñÑ\s]*$/;
-
-  // Normalizar el valor para asegurar que siempre sea una cadena
-  const normalizedValue = value ?? '';
-  const stringValue = typeof normalizedValue === 'string' ? normalizedValue : String(normalizedValue);
-
-  // Estado local para controlar el valor del input
-  const [localValue, setLocalValue] = useState<string>(stringValue);
-  const isUserTypingRef = useRef<boolean>(false);
-  const lastPropValueRef = useRef<string>(stringValue);
-
-  // Sincronizar el estado local con el prop value cuando cambia desde fuera
-  // Solo si el usuario no está escribiendo
-  useEffect(() => {
-    if (!isUserTypingRef.current && stringValue !== lastPropValueRef.current) {
-      lastPropValueRef.current = stringValue;
-      setLocalValue(stringValue);
+  const onChangeText = (text: string) => {
+    onChange(text);
+    setErrorRequired(false);
+    if (type === 'number' && !patternNumber.test(text)) {
+      onInvalid && onInvalid();
+    } else if (type === 'alphanumeric' && !patternAlphanumeric.test(text)) {
+      onInvalid && onInvalid();
+    } else if (type === 'text' && !patternLettersWithAccentsAndSpaces.test(text)) {
+      onInvalid && onInvalid();
+    } else if (pattern && !pattern.test(text)) {
+      onInvalid && onInvalid();
     }
-  }, [stringValue]);
-
-  const onChangeText = useCallback(
-    (text: string) => {
-      // Asegurar que el texto sea una cadena
-      const cleanText = typeof text === 'string' ? text : String(text);
-
-      // Marcar que el usuario está escribiendo
-      isUserTypingRef.current = true;
-
-      // Actualizar el estado local inmediatamente
-      setLocalValue(cleanText);
-      lastPropValueRef.current = cleanText;
-
-      // Pasar el texto directamente al onChange
-      onChange(cleanText);
-
-      // Resetear el flag después de un breve delay
-      setTimeout(() => {
-        isUserTypingRef.current = false;
-      }, 50);
-
-      setErrorRequired(false);
-      if (type === 'number' && !patternNumber.test(cleanText)) {
-        onInvalid && onInvalid();
-      } else if (type === 'alphanumeric' && !patternAlphanumeric.test(cleanText)) {
-        onInvalid && onInvalid();
-      } else if (type === 'text' && !patternLettersWithAccentsAndSpaces.test(cleanText)) {
-        onInvalid && onInvalid();
-      } else if (pattern && !pattern.test(cleanText)) {
-        onInvalid && onInvalid();
-      }
-    },
-    [onChange, type, pattern, onInvalid]
-  );
+  };
   return (
     <View>
       <TextInput
-        label={!isFocus && placeholder && (!value || value.trim() === '') ? placeholder : label}
+        label={!isFocus && placeholder && value?.trim() === '' ? placeholder : label}
         mode={mode ?? 'flat'}
-        value={localValue}
+        value={value}
         onChangeText={onChangeText}
         maxLength={maxLength}
         selectionColor={
@@ -134,7 +95,7 @@ export const Input = (props: IInputText) => {
           isFocus && isValid && !errorRequired && { backgroundColor: 'transparent' },
           style ?? [],
         ]}
-        contentStyle={[styleInput['input-txt'], contentStyle ?? []]}
+        contentStyle={[styleInput['input-txt'], contentStyle ?? {}]}
         underlineColor={
           underlineColor
             ? underlineColor
@@ -145,7 +106,7 @@ export const Input = (props: IInputText) => {
         activeUnderlineColor={
           activeUnderlineColor
             ? activeUnderlineColor
-            : !isValid && value && value.trim() !== ''
+            : !isValid && value?.trim() !== ''
             ? styleInput['input-text--activeUnderline'].color
             : errorRequired
             ? styleInput['input-txt-error'].color
@@ -153,14 +114,9 @@ export const Input = (props: IInputText) => {
         }
         underlineStyle={{ height: isFocus ? 1.5 : 2 }}
         keyboardType={type === 'number' ? 'numeric' : 'default'}
-        autoCorrect={false}
-        autoCapitalize="none"
-        autoComplete="off"
-        textContentType="none"
-        spellCheck={false}
         right={icon && <TextInput.Icon color={theme.colors.icon} icon={icon ?? ''} />}
-        disabled={isDisabled}
-        readOnly={readonly}
+        readOnly={isDisabled || readonly}
+        selection={selection}
       />
       {!isDisabled && (
         <>

package/src/models/interfaces.models.ts

@@ -125,7 +125,7 @@ export interface IDialogDown {
   title?: string;
   showCloseButton?: boolean;
   children: any;
-  onDismiss: () => void;
+  onDismiss?: () => void;
   style?: ViewStyle;
   image?: React.ReactNode;
   priority?: 0 | 1 | 2 | 3 | 4 | 5;