ikualo-ui-kit-mobile 2.0.10 → 2.0.12

package/app.json

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

package/assets/styles/elements/buttons.ts

@@ -121,12 +121,12 @@ const getStylesBtnLightSmall = (theme: ITheme) =>
     'btn-light-small': {
       borderWidth: 1,
       borderRadius: 36,
-      maxWidth: 48,
-      minWidth: 48,
-      maxHeight: 48,
-      minHeight: 48,
-      width: 48,
-      height: 48,
+      maxWidth: 50,
+      minWidth: 50,
+      maxHeight: 50,
+      minHeight: 50,
+      width: 50,
+      height: 50,
       position: 'relative',
     },
     'btn-light-small--primary': {
@@ -142,12 +142,12 @@ const getStylesBtnLightSmall = (theme: ITheme) =>
     'btn-light-small-content': {
       alignSelf: 'center',
       alignItems: 'center',
-      maxWidth: 48,
-      minWidth: 48,
-      maxHeight: 48,
-      minHeight: 48,
-      width: 48,
-      height: 48,
+      maxWidth: 50,
+      minWidth: 50,
+      maxHeight: 50,
+      minHeight: 50,
+      width: 50,
+      height: 50,
     },
     'btn-light-small-label': {
       fontSize: 24,
@@ -157,24 +157,24 @@ const getStylesBtnLightSmall = (theme: ITheme) =>
       borderColor: theme.colors.icon_disabled,
       borderRadius: 8,
       borderWidth: 1,
-      maxWidth: 48,
-      minWidth: 48,
-      maxHeight: 48,
-      minHeight: 48,
-      width: 48,
-      height: 48,
+      maxWidth: 50,
+      minWidth: 50,
+      maxHeight: 50,
+      minHeight: 50,
+      width: 50,
+      height: 50,
     },
     'btn-light-small--active': {
       backgroundColor: theme.colors.background_freezed,
       borderColor: theme.colors.freezed,
       borderRadius: 100,
       borderWidth: 1,
-      maxWidth: 48,
-      minWidth: 48,
-      maxHeight: 48,
-      minHeight: 48,
-      width: 48,
-      height: 48,
+      maxWidth: 50,
+      minWidth: 50,
+      maxHeight: 50,
+      minHeight: 50,
+      width: 50,
+      height: 50,
     },
     'btn-light-small-label--disabled': {
       color: theme.colors.icon_disabled,
@@ -227,8 +227,8 @@ const getStylesButtonActionCircle = (theme: ITheme) =>
   StyleSheet.create({
     'btn-container-item': {
       display: 'flex',
-      width: 48,
-      height: 48,
+      width: 50,
+      height: 50,
       justifyContent: 'center',
       borderRadius: 50,
       alignItems: 'center',

package/package.json

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

package/src/elements/dialogs/DialogDown.tsx

@@ -51,17 +51,17 @@ class DialogManager {
     // Agregar a la cola
     this.dialogs.push(dialog);
 
-    // Si no hay diálogo actual, mostrar el nuevo
-    if (!this.currentDialog) {
-      this.showNextDialog();
-    }
+    // Siempre mostrar el siguiente diálogo (por prioridad)
+    this.showNextDialog();
 
     this.notify();
   }
 
   removeDialog(id: string) {
+    // Remover de la cola
     this.dialogs = this.dialogs.filter((dialog) => dialog.id !== id);
 
+    // Si el diálogo que se está removiendo es el actual, limpiar y mostrar el siguiente
     if (this.currentDialog?.id === id) {
       this.currentDialog = null;
       this.showNextDialog();
@@ -82,6 +82,8 @@ class DialogManager {
       // Ordenar por prioridad (mayor prioridad primero)
       this.dialogs.sort((a, b) => b.priority - a.priority);
       this.currentDialog = this.dialogs[0];
+    } else {
+      this.currentDialog = null;
     }
   }
 
@@ -90,10 +92,25 @@ class DialogManager {
   }
 
   clear() {
+    console.log('DialogManager: Clearing all dialogs');
     this.dialogs = [];
     this.currentDialog = null;
     this.notify();
   }
+
+  // Método para forzar la limpieza de un diálogo específico
+  forceRemoveDialog(id: string) {
+    console.log('DialogManager: Force removing dialog', { id });
+    this.dialogs = this.dialogs.filter((dialog) => dialog.id !== id);
+
+    if (this.currentDialog?.id === id) {
+      this.currentDialog = null;
+    }
+
+    // Mostrar el siguiente diálogo si hay alguno
+    this.showNextDialog();
+    this.notify();
+  }
 }
 
 export const DialogDown = (props: IDialogDown & { priority?: 0 | 1 | 2 | 3 | 4 | 5 }) => {
@@ -113,41 +130,62 @@ export const DialogDown = (props: IDialogDown & { priority?: 0 | 1 | 2 | 3 | 4 |
   // Suscribirse a cambios en el diálogo actual
   useEffect(() => {
     const unsubscribe = dialogManager.current.subscribe(() => {
-      setCurrentDialog(dialogManager.current.getCurrentDialog());
+      const newCurrentDialog = dialogManager.current.getCurrentDialog();
+      setCurrentDialog(newCurrentDialog);
     });
     return () => {
       unsubscribe();
     };
   }, []);
 
+  // Función helper para agregar diálogo al manager
+  const addDialogToManager = (dialogId: string) => {
+    dialogManager.current.addDialog({
+      ...props,
+      id: dialogId,
+      priority: priority || 0,
+      onDismiss: () => {
+        Animated.timing(slideAnim, {
+          toValue: 0,
+          duration: 200,
+          useNativeDriver: true,
+        }).start(() => {
+          dialogManager.current.removeDialog(dialogId);
+          setDialogId(null);
+          onDismiss();
+        });
+      },
+    });
+  };
+
   // Manejar cuando se debe mostrar/ocultar el diálogo
   useEffect(() => {
     if (isVisible) {
-      const newDialogId = Math.random().toString(36).substr(2, 9);
-      setDialogId(newDialogId);
-
-      dialogManager.current.addDialog({
-        ...props,
-        id: newDialogId,
-        priority: priority || 0, // Si no se especifica prioridad, usar 0 (sin prioridad)
-        onDismiss: () => {
-          Animated.timing(slideAnim, {
-            toValue: 0,
-            duration: 200,
-            useNativeDriver: true,
-          }).start(() => {
-            dialogManager.current.removeDialog(newDialogId);
-            onDismiss();
-          });
-        },
-      });
-    } else {
+      if (!dialogId) {
+        // Generar nuevo ID cada vez que se muestra el diálogo
+        const newDialogId = Math.random().toString(36).substring(2, 11);
+        setDialogId(newDialogId);
+      } else if (dialogId && !currentDialog) {
+        // Si ya tiene ID pero no está en el manager, agregarlo
+        addDialogToManager(dialogId);
+      } else if (dialogId && currentDialog && currentDialog.id !== dialogId) {
+        // Si ya tiene ID pero hay otro diálogo actual, agregarlo (el manager manejará prioridades)
+        addDialogToManager(dialogId);
+      }
+    } else if (dialogId) {
+      dialogManager.current.removeDialog(dialogId);
+      setDialogId(null);
+    }
+  }, [isVisible, dialogId, currentDialog, priority, title]);
+
+  // Cleanup al desmontar el componente
+  useEffect(() => {
+    return () => {
       if (dialogId) {
         dialogManager.current.removeDialog(dialogId);
-        setDialogId(null);
       }
-    }
-  }, [isVisible, priority]);
+    };
+  }, [dialogId]);
 
   // Animación basada en si este diálogo es el actual
   useEffect(() => {
@@ -178,11 +216,15 @@ export const DialogDown = (props: IDialogDown & { priority?: 0 | 1 | 2 | 3 | 4 |
   const handleDismiss = () => {
     if (dialogId) {
       dialogManager.current.removeDialog(dialogId);
+      // Limpiar el dialogId inmediatamente después de remover
+      setDialogId(null);
     }
+    // Llamar onDismiss para que el componente padre cambie isVisible a false
+    onDismiss();
   };
 
   // Solo renderizar si este diálogo es el actual
-  const isCurrentDialog = Boolean(currentDialog && currentDialog.id === dialogId);
+  const isCurrentDialog = Boolean(isVisible && dialogId && currentDialog && currentDialog.id === dialogId);
 
   return (
     <Modal visible={isCurrentDialog} transparent={true} animationType="none" onRequestClose={handleDismiss}>