ikualo-ui-kit-mobile 2.0.12 → 2.0.14

package/app.json

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

package/assets/styles/elements/buttons.ts

@@ -28,7 +28,7 @@ const getStylesButtonContained = (theme: ITheme) =>
 
     'btn-contained--sm': {
       padding: 0,
-      width: 158,
+      width: 'auto',
     },
     'btn-contained--md': {
       paddingVertical: 3,

package/package.json

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

package/src/elements/dialogs/DialogDown.tsx

@@ -5,23 +5,17 @@ import { useEffect, useState, useRef } from 'react';
 import useStore from '../../store';
 import { IDialogDown } from '../../models';
 
-// Sistema de cola de diálogos global
-interface DialogQueueItem extends IDialogDown {
-  id: string;
-  priority: 0 | 1 | 2 | 3 | 4 | 5;
-}
-
-class DialogManager {
-  private static instance: DialogManager;
-  private dialogs: DialogQueueItem[] = [];
-  private currentDialog: DialogQueueItem | null = null;
+// Sistema simple de prioridades global
+class PriorityManager {
+  private static instance: PriorityManager;
+  private currentDialog: { id: string; priority: number; onDismiss: () => void } | null = null;
   private readonly listeners: Set<() => void> = new Set();
 
-  static getInstance(): DialogManager {
-    if (!DialogManager.instance) {
-      DialogManager.instance = new DialogManager();
+  static getInstance(): PriorityManager {
+    if (!PriorityManager.instance) {
+      PriorityManager.instance = new PriorityManager();
     }
-    return DialogManager.instance;
+    return PriorityManager.instance;
   }
 
   subscribe(listener: () => void) {
@@ -33,84 +27,39 @@ class DialogManager {
     this.listeners.forEach((listener) => listener());
   }
 
-  addDialog(dialog: DialogQueueItem) {
-    // Lógica de cierre del diálogo actual:
-    // 1. Si el nuevo NO tiene prioridad (0): cierra si el anterior tampoco tiene prioridad
-    // 2. Si el nuevo SÍ tiene prioridad (1-5): cierra si el anterior no tiene prioridad O si tiene prioridad menor o igual
-    if (this.currentDialog) {
-      const shouldCloseCurrent =
-        (dialog.priority === 0 && this.currentDialog.priority === 0) || // Ambos sin prioridad: cierra el anterior
-        (dialog.priority > 0 && this.currentDialog.priority === 0) || // Nuevo con prioridad, anterior sin: cierra
-        (dialog.priority > 0 && dialog.priority >= this.currentDialog.priority); // Ambos con prioridad: si nueva es mayor o igual
-
-      if (shouldCloseCurrent) {
-        this.closeCurrentDialog();
-      }
-    }
-
-    // Agregar a la cola
-    this.dialogs.push(dialog);
-
-    // 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();
+  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 = null; // Eliminar completamente de memoria
     }
 
-    this.notify();
-  }
-
-  private closeCurrentDialog() {
-    if (this.currentDialog) {
-      this.currentDialog.onDismiss();
-      this.currentDialog = null;
+    // Si no hay diálogo actual o el nuevo tiene mayor prioridad, mostrarlo
+    if (!this.currentDialog || priority > this.currentDialog.priority) {
+      this.currentDialog = { id, priority, onDismiss };
+      this.notify();
+    } else {
+      // Si el diálogo no puede mostrarse por prioridad menor, eliminarlo completamente
+      // No mantener referencia alguna al diálogo rechazado
     }
   }
 
-  private showNextDialog() {
-    if (this.dialogs.length > 0) {
-      // Ordenar por prioridad (mayor prioridad primero)
-      this.dialogs.sort((a, b) => b.priority - a.priority);
-      this.currentDialog = this.dialogs[0];
-    } else {
+  hideDialog(id: string) {
+    if (this.currentDialog?.id === id) {
       this.currentDialog = null;
+      this.notify();
     }
   }
 
-  getCurrentDialog(): DialogQueueItem | null {
+  getCurrentDialog() {
     return this.currentDialog;
   }
 
+  // Método para limpiar completamente la memoria
   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 }) => {
@@ -118,9 +67,9 @@ export const DialogDown = (props: IDialogDown & { priority?: 0 | 1 | 2 | 3 | 4 |
   const stylesDialog = getStylesDialog(theme);
   const { isVisible, title, children, onDismiss, image, showCloseButton = true, priority = 0 } = props;
   const slideAnim = useRef(new Animated.Value(0)).current;
-  const [currentDialog, setCurrentDialog] = useState<DialogQueueItem | null>(null);
-  const [dialogId, setDialogId] = useState<string | null>(null);
-  const dialogManager = useRef(DialogManager.getInstance());
+  const [currentDialog, setCurrentDialog] = useState<{ id: string; priority: number } | null>(null);
+  const [dialogId] = useState(() => Math.random().toString(36).substring(2, 11));
+  const priorityManager = useRef(PriorityManager.getInstance());
 
   const handleDismissKeyboard = () => {
     Keyboard.dismiss();
@@ -129,8 +78,8 @@ 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(() => {
-      const newCurrentDialog = dialogManager.current.getCurrentDialog();
+    const unsubscribe = priorityManager.current.subscribe(() => {
+      const newCurrentDialog = priorityManager.current.getCurrentDialog();
       setCurrentDialog(newCurrentDialog);
     });
     return () => {
@@ -138,52 +87,19 @@ export const DialogDown = (props: IDialogDown & { priority?: 0 | 1 | 2 | 3 | 4 |
     };
   }, []);
 
-  // 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) {
-      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);
+      priorityManager.current.showDialog(dialogId, priority, onDismiss);
+    } else {
+      priorityManager.current.hideDialog(dialogId);
     }
-  }, [isVisible, dialogId, currentDialog, priority, title]);
+  }, [isVisible, dialogId, priority, onDismiss]);
 
   // Cleanup al desmontar el componente
   useEffect(() => {
     return () => {
-      if (dialogId) {
-        dialogManager.current.removeDialog(dialogId);
-      }
+      priorityManager.current.hideDialog(dialogId);
     };
   }, [dialogId]);
 
@@ -214,17 +130,12 @@ 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
+    priorityManager.current.hideDialog(dialogId);
     onDismiss();
   };
 
   // Solo renderizar si este diálogo es el actual
-  const isCurrentDialog = Boolean(isVisible && dialogId && currentDialog && currentDialog.id === dialogId);
+  const isCurrentDialog = Boolean(isVisible && currentDialog && currentDialog.id === dialogId);
 
   return (
     <Modal visible={isCurrentDialog} transparent={true} animationType="none" onRequestClose={handleDismiss}>