ikualo-ui-kit-mobile 2.0.4 → 2.0.5

package/app.json

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

package/package.json

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

package/src/elements/dialogs/DialogDown.tsx

@@ -1,101 +1,224 @@
-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 { useEffect, useState, useRef } from 'react';
-import useStore from '../../store';
-import { IDialogDown } from '../../models';
-
-export const DialogDown = (props: IDialogDown) => {
-  const theme = useStore().theme;
-  const stylesDialog = getStylesDialog(theme);
-  const { isVisible, title, children, onDismiss, image, showCloseButton = true } = props;
-  const slideAnim = useRef(new Animated.Value(0)).current;
-
-  const handleDismissKeyboard = () => {
-    Keyboard.dismiss();
-  };
-  const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
-
-  useEffect(() => {
-    if (isVisible) {
-      Animated.timing(slideAnim, {
-        toValue: 1,
-        duration: 300,
-        useNativeDriver: true,
-      }).start();
-    } else {
-      slideAnim.setValue(0);
-    }
-  }, [isVisible, slideAnim]);
-
-  useEffect(() => {
-    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => setIsKeyboardVisible(true));
-    const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () =>
-      setIsKeyboardVisible(false)
-    );
-
-    return () => {
-      keyboardDidShowListener.remove();
-      keyboardDidHideListener.remove();
-    };
-  }, []);
-
-  const handleDismiss = () => {
-    Animated.timing(slideAnim, {
-      toValue: 0,
-      duration: 200,
-      useNativeDriver: true,
-    }).start(() => {
-      onDismiss();
-    });
-  };
-
-  return (
-    <Modal visible={isVisible} transparent={true} animationType="none" onRequestClose={handleDismiss}>
-      <TouchableWithoutFeedback onPress={handleDismissKeyboard}>
-        <View style={stylesDialog.modalBackground}>
-          <Animated.View
-            style={[
-              stylesDialog['dialog-down'],
-              !isKeyboardVisible && stylesDialog['dialog-bottom'],
-              {
-                transform: [
-                  {
-                    translateY: slideAnim.interpolate({
-                      inputRange: [0, 1],
-                      outputRange: [300, 0],
-                    }),
-                  },
-                ],
-              },
-            ]}
-          >
-            {showCloseButton && (
-              <TouchableHighlight
-                onPress={handleDismiss}
-                underlayColor={theme.colors.background_focus}
-                style={stylesDialog['dialog-down-close']}
-              >
-                <Icon
-                  source="close"
-                  color={stylesDialog['dialog-down-close-icon'].color}
-                  size={stylesDialog['dialog-down-close-icon'].width}
-                />
-              </TouchableHighlight>
-            )}
-
-            {image ? (
-              <View style={stylesDialog['dialog-img']}>{image}</View>
-            ) : (
-              <View style={{ marginTop: image ? 0 : -16, position: 'relative' }}>
-                <Text style={[stylesDialog['dialog-title']]}>{title}</Text>
-              </View>
-            )}
-
-            {children}
-          </Animated.View>
-        </View>
-      </TouchableWithoutFeedback>
-    </Modal>
-  );
-};
+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 { 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: number;
+}
+
+class DialogManager {
+  private static instance: DialogManager;
+  private dialogs: DialogQueueItem[] = [];
+  private currentDialog: DialogQueueItem | null = null;
+  private listeners: Set<() => void> = new Set();
+
+  static getInstance(): DialogManager {
+    if (!DialogManager.instance) {
+      DialogManager.instance = new DialogManager();
+    }
+    return DialogManager.instance;
+  }
+
+  subscribe(listener: () => void) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  private notify() {
+    this.listeners.forEach((listener) => listener());
+  }
+
+  addDialog(dialog: Omit<DialogQueueItem, 'id'>) {
+    const id = Math.random().toString(36).substr(2, 9);
+    const dialogWithId = { ...dialog, id };
+
+    // 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();
+    }
+
+    // Agregar a la cola
+    this.dialogs.push(dialogWithId);
+
+    // Si no hay diálogo actual, mostrar el nuevo
+    if (!this.currentDialog) {
+      this.showNextDialog();
+    }
+
+    this.notify();
+  }
+
+  removeDialog(id: string) {
+    this.dialogs = this.dialogs.filter((dialog) => dialog.id !== id);
+
+    if (this.currentDialog?.id === id) {
+      this.currentDialog = null;
+      this.showNextDialog();
+    }
+
+    this.notify();
+  }
+
+  private closeCurrentDialog() {
+    if (this.currentDialog) {
+      this.currentDialog.onDismiss();
+      this.currentDialog = null;
+    }
+  }
+
+  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];
+    }
+  }
+
+  getCurrentDialog(): DialogQueueItem | null {
+    return this.currentDialog;
+  }
+
+  clear() {
+    this.dialogs = [];
+    this.currentDialog = null;
+    this.notify();
+  }
+}
+
+export const DialogDown = (props: IDialogDown & { priority?: 1 | 2 | 3 | 4 | 5 }) => {
+  const theme = useStore().theme;
+  const stylesDialog = getStylesDialog(theme);
+  const { isVisible, title, children, onDismiss, image, showCloseButton = true, priority } = props;
+  const slideAnim = useRef(new Animated.Value(0)).current;
+  const [currentDialog, setCurrentDialog] = useState<DialogQueueItem | null>(null);
+  const dialogManager = useRef(DialogManager.getInstance());
+
+  const handleDismissKeyboard = () => {
+    Keyboard.dismiss();
+  };
+  const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
+
+  // Suscribirse a cambios en el diálogo actual
+  useEffect(() => {
+    const unsubscribe = dialogManager.current.subscribe(() => {
+      setCurrentDialog(dialogManager.current.getCurrentDialog());
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  // Manejar cuando se debe mostrar/ocultar el diálogo
+  useEffect(() => {
+    if (isVisible) {
+      dialogManager.current.addDialog({
+        ...props,
+        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(currentDialog?.id || '');
+            onDismiss();
+          });
+        },
+      });
+    } else {
+      if (currentDialog?.id) {
+        dialogManager.current.removeDialog(currentDialog.id);
+      }
+    }
+  }, [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
+    if (isCurrentDialog) {
+      Animated.timing(slideAnim, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    } else {
+      slideAnim.setValue(0);
+    }
+  }, [currentDialog, slideAnim, props.title]);
+
+  useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => setIsKeyboardVisible(true));
+    const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () =>
+      setIsKeyboardVisible(false)
+    );
+
+    return () => {
+      keyboardDidShowListener.remove();
+      keyboardDidHideListener.remove();
+    };
+  }, []);
+
+  const handleDismiss = () => {
+    if (currentDialog?.id) {
+      dialogManager.current.removeDialog(currentDialog.id);
+    }
+  };
+
+  // Solo renderizar si este diálogo es el actual
+  const isCurrentDialog = Boolean(currentDialog && currentDialog.title === title);
+
+  return (
+    <Modal visible={isCurrentDialog} transparent={true} animationType="none" onRequestClose={handleDismiss}>
+      <TouchableWithoutFeedback onPress={handleDismissKeyboard}>
+        <View style={stylesDialog.modalBackground}>
+          <Animated.View
+            style={[
+              stylesDialog['dialog-down'],
+              !isKeyboardVisible && stylesDialog['dialog-bottom'],
+              {
+                transform: [
+                  {
+                    translateY: slideAnim.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [300, 0],
+                    }),
+                  },
+                ],
+              },
+            ]}
+          >
+            {showCloseButton && (
+              <TouchableHighlight
+                onPress={handleDismiss}
+                underlayColor={theme.colors.background_focus}
+                style={stylesDialog['dialog-down-close']}
+              >
+                <Icon
+                  source="close"
+                  color={stylesDialog['dialog-down-close-icon'].color}
+                  size={stylesDialog['dialog-down-close-icon'].width}
+                />
+              </TouchableHighlight>
+            )}
+
+            {image ? (
+              <View style={stylesDialog['dialog-img']}>{image}</View>
+            ) : (
+              <View style={{ marginTop: image ? 0 : -16, position: 'relative' }}>
+                <Text style={[stylesDialog['dialog-title']]}>{title}</Text>
+              </View>
+            )}
+
+            {children}
+          </Animated.View>
+        </View>
+      </TouchableWithoutFeedback>
+    </Modal>
+  );
+};

package/src/store.ts

@@ -2,13 +2,12 @@ import { create } from 'zustand';
 import { darkTheme, getGlobalTheme, lightTheme } from './config/paper.config';
 import { ITheme } from './models';
 
-const useStore = create<
-  {
-    theme: ITheme,
-    setTheme: (newTheme: any) => void
-  }>((set) => ({
-    theme: getGlobalTheme(),
-    setTheme: (newTheme: ITheme) => set((state: any) => ({ theme: newTheme })),
-  }));
+const useStore = create<{
+  theme: ITheme;
+  setTheme: (newTheme: any) => void;
+}>((set) => ({
+  theme: getGlobalTheme(),
+  setTheme: (newTheme: ITheme) => set((state: any) => ({ theme: newTheme })),
+}));
 
 export default useStore;