ikualo-ui-kit-mobile 2.1.13 → 2.1.16

package/app.json

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

package/assets/styles/elements/buttons.ts

@@ -140,6 +140,7 @@ const getStylesBtnLightSmall = (theme: ITheme) =>
     },
     'btn-light-small__container-main': { alignItems: 'center', width: 'auto' },
     'btn-light-small__text': { textAlign: 'center', width: 'auto', marginTop: 5 },
+    'btn-light-small__text--disabled': { opacity: 0.25 },
     'btn-light-small--transparent': {
       backgroundColor: theme.colors.transparent,
       borderColor: theme.colors.icon,
@@ -158,9 +159,9 @@ const getStylesBtnLightSmall = (theme: ITheme) =>
       fontSize: 24,
     },
     'btn-light-small--disabled': {
-      backgroundColor: theme.colors.background_btn_disabled,
-      borderColor: theme.colors.icon_disabled,
-      borderRadius: 8,
+      backgroundColor: theme.colors.background_focus,
+      borderColor: theme.colors.icon,
+      opacity: 0.25,
       borderWidth: 1,
       maxWidth: 50,
       minWidth: 50,
@@ -251,10 +252,10 @@ const getStylesButtonActionCircle = (theme: ITheme) =>
   });
 
 export {
+  getStylesBtnLightSmall,
+  getStylesButtonActionCircle,
+  getStylesButtonCircle,
   getStylesButtonContained,
   getStylesButtonOutlined,
   getStylesButtonText,
-  getStylesBtnLightSmall,
-  getStylesButtonCircle,
-  getStylesButtonActionCircle,
 };

package/package.json

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

package/src/elements/buttons/BtnLightSmall.tsx

@@ -1,11 +1,10 @@
+import React, { cloneElement } from 'react';
+import { View } from 'react-native';
 import { ActivityIndicator, Button } from 'react-native-paper';
+import { Text } from '../../';
 import { getStylesBtnLightSmall } from '../../../assets/styles/elements/buttons';
-import { View } from 'react-native';
-import { cloneElement } from 'react';
-import useStore from '../../store';
 import { IBtnLightSmall } from '../../models';
-import React from 'react';
-import { Text } from '../../';
+import useStore from '../../store';
 
 export const BtnLightSmall = (props: IBtnLightSmall) => {
   const theme = useStore().theme;
@@ -14,8 +13,6 @@ export const BtnLightSmall = (props: IBtnLightSmall) => {
   const { onPress, icon, disabled = false, active, isLoading, text, transparent, maxWidth, iconSize } = props;
   const color = active
     ? stylesBtnLightSmall['btn-light-small--active'].borderColor
-    : disabled
-    ? theme.colors.border_disabled
     : stylesBtnLightSmall['btn-light-small--primary'].borderColor;
 
   const colorBtnText = active ? theme.colors.freezed : theme.colors.text_p;
@@ -56,7 +53,11 @@ export const BtnLightSmall = (props: IBtnLightSmall) => {
       </Button>
       {text && (
         <Text
-          style={[stylesBtnLightSmall['btn-light-small__text'], { maxWidth: maxWidth || 'auto' }]}
+          style={[
+            stylesBtnLightSmall['btn-light-small__text'],
+            { maxWidth: maxWidth || 'auto' },
+            disabled && stylesBtnLightSmall['btn-light-small__text--disabled'],
+          ]}
           color={colorBtnText}
           lineHeight={15}
           fontWeight="MontserratSemiBold600"

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 } from 'react';
+import { useState, useCallback, useEffect, useRef } from 'react';
 import { View } from 'react-native';
 import React from 'react';
 import useStore from '../../store';
@@ -43,25 +43,64 @@ export const Input = (props: IInputText) => {
   const patternNumber = /^[0-9]*$/;
   const patternAlphanumeric = /^[a-zA-Z0-9]*$/;
   const patternLettersWithAccentsAndSpaces = /^[a-zA-ZáéíóúÁÉÍÓÚñÑ\s]*$/;
-  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();
+
+  // 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);
     }
-  };
+  }, [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?.trim() === '' ? placeholder : label}
+        label={!isFocus && placeholder && (!value || value.trim() === '') ? placeholder : label}
         mode={mode ?? 'flat'}
-        value={value}
+        value={localValue}
         onChangeText={onChangeText}
         maxLength={maxLength}
         selectionColor={
@@ -95,7 +134,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
@@ -106,7 +145,7 @@ export const Input = (props: IInputText) => {
         activeUnderlineColor={
           activeUnderlineColor
             ? activeUnderlineColor
-            : !isValid && value?.trim() !== ''
+            : !isValid && value && value.trim() !== ''
             ? styleInput['input-text--activeUnderline'].color
             : errorRequired
             ? styleInput['input-txt-error'].color
@@ -114,9 +153,14 @@ 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 ?? ''} />}
-        readOnly={isDisabled || readonly}
-        selection={selection}
+        disabled={isDisabled}
+        readOnly={readonly}
       />
       {!isDisabled && (
         <>