ikualo-ui-kit-mobile 2.0.6 → 2.0.8

package/app.json

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

package/package.json

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

package/src/elements/dialogs/DialogDown.tsx

@@ -8,7 +8,7 @@ import { IDialogDown } from '../../models';
 // Sistema de cola de diálogos global
 interface DialogQueueItem extends IDialogDown {
   id: string;
-  priority: 0 |1 | 2 | 3 | 4 | 5;
+  priority: 0 | 1 | 2 | 3 | 4 | 5;
 }
 
 class DialogManager {
@@ -33,18 +33,23 @@ class DialogManager {
     this.listeners.forEach((listener) => listener());
   }
 
-  addDialog(dialog: Omit<DialogQueueItem, 'id'>) {
-    const id = Math.random().toString(36).substr(2, 9);
-    const dialogWithId = { ...dialog, id };
+  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
 
-    // Solo cerrar el diálogo actual si el nuevo tiene prioridad explícita (1-5)
-    // y es mayor que la prioridad del diálogo actual
-    if (this.currentDialog && dialog.priority > 0 && dialog.priority > this.currentDialog.priority) {
-      this.closeCurrentDialog();
+      if (shouldCloseCurrent) {
+        this.closeCurrentDialog();
+      }
     }
 
     // Agregar a la cola
-    this.dialogs.push(dialogWithId);
+    this.dialogs.push(dialog);
 
     // Si no hay diálogo actual, mostrar el nuevo
     if (!this.currentDialog) {
@@ -91,12 +96,13 @@ class DialogManager {
   }
 }
 
-export const DialogDown = (props: IDialogDown) => {
+export const DialogDown = (props: IDialogDown & { priority?: 0 | 1 | 2 | 3 | 4 | 5 }) => {
   const theme = useStore().theme;
   const stylesDialog = getStylesDialog(theme);
-  const { isVisible, title, children, onDismiss, image, showCloseButton = true, priority } = props;
+  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 handleDismissKeyboard = () => {
@@ -117,8 +123,12 @@ export const DialogDown = (props: IDialogDown) => {
   // 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, {
@@ -126,21 +136,22 @@ export const DialogDown = (props: IDialogDown) => {
             duration: 200,
             useNativeDriver: true,
           }).start(() => {
-            dialogManager.current.removeDialog(currentDialog?.id || '');
+            dialogManager.current.removeDialog(newDialogId);
             onDismiss();
           });
         },
       });
     } else {
-      if (currentDialog?.id) {
-        dialogManager.current.removeDialog(currentDialog.id);
+      if (dialogId) {
+        dialogManager.current.removeDialog(dialogId);
+        setDialogId(null);
       }
     }
   }, [isVisible, priority]);
 
   // Animación basada en si este diálogo es el actual
   useEffect(() => {
-    const isCurrentDialog = currentDialog?.id === props.title; // Usar title como identificador único
+    const isCurrentDialog = currentDialog?.id === dialogId;
     if (isCurrentDialog) {
       Animated.timing(slideAnim, {
         toValue: 1,
@@ -150,7 +161,7 @@ export const DialogDown = (props: IDialogDown) => {
     } else {
       slideAnim.setValue(0);
     }
-  }, [currentDialog, slideAnim, props.title]);
+  }, [currentDialog, slideAnim, dialogId]);
 
   useEffect(() => {
     const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => setIsKeyboardVisible(true));
@@ -165,13 +176,25 @@ export const DialogDown = (props: IDialogDown) => {
   }, []);
 
   const handleDismiss = () => {
-    if (currentDialog?.id) {
-      dialogManager.current.removeDialog(currentDialog.id);
+    if (dialogId) {
+      dialogManager.current.removeDialog(dialogId);
     }
   };
 
   // Solo renderizar si este diálogo es el actual
-  const isCurrentDialog = Boolean(currentDialog && currentDialog.title === title);
+  const isCurrentDialog = Boolean(currentDialog && currentDialog.id === dialogId);
+
+  // Debug logging
+  console.log('DialogDown Debug:', {
+    title,
+    dialogId,
+    currentDialogId: currentDialog?.id,
+    currentPriority: currentDialog?.priority,
+    newPriority: priority,
+    isCurrentDialog,
+    isVisible,
+    shouldShow: isCurrentDialog && isVisible,
+  });
 
   return (
     <Modal visible={isCurrentDialog} transparent={true} animationType="none" onRequestClose={handleDismiss}>