ModalManager

ModalManager actúa como punto de montaje único para gestionar múltiples tipos de modales a través de un objeto modalConfig unificado. Dado un type, renderiza el modal correspondiente (ListModal, FormModal, MultiSelectModal, RelatedRecordsModal, ExportManyModal, ImportManyModal o ImportOneModal) y distribuye cualquier configuración adicional del campo config. Úsalo para gestionar el estado de los modales desde un componente padre con un único objeto de estado.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | modalConfig | ModalConfig | Sí | — | Objeto que describe qué modal renderizar y su estado. | | onClose | (reason: string, result?: any) => void | Sí | — | Se llama cuando cualquier modal gestionado se cierra. Recibe la razón de cierre y datos opcionales de resultado. |

Estructura de ModalConfig

| Campo | Tipo | Requerido | Descripción | |-------|------|----------|-------------| | type | 'list' \| 'form' \| 'multiSelect' \| 'relatedRecords' \| 'exportMany' \| 'importMany' \| 'importOne' | Sí | Qué modal renderizar. | | isOpen | boolean | Sí | Si el modal está visible. | | title | string | Sí | Título pasado al modal. | | data | any | No | Datos pasados al modal. | | config | any | No | Props adicionales distribuidos en el componente modal. |

Uso

Básico

import React from 'react';
import ModalManager, { ModalConfig } from '@/components/modals/ModalManager';

export default function Example() {
  const [modalConfig, setModalConfig] = React.useState<ModalConfig>({
    type: 'list',
    isOpen: false,
    title: '',
  });

  const openListModal = () => {
    setModalConfig({
      type: 'list',
      isOpen: true,
      title: 'Products',
      config: {
        listPath: '/v1/products',
        useAuthToken: true,
      },
    });
  };

  const openFormModal = () => {
    setModalConfig({
      type: 'form',
      isOpen: true,
      title: 'New Product',
      config: {
        fields: [{ type: 'text', name: 'name', label: 'Name' }],
        savePath: '/v1/products',
        mode: 'create',
      },
    });
  };

  return (
    <>
      <button onClick={openListModal}>Open List</button>
      <button onClick={openFormModal}>Open Form</button>
      <ModalManager
        modalConfig={modalConfig}
        onClose={(reason) => {
          console.log('Closed:', reason);
          setModalConfig((prev) => ({ ...prev, isOpen: false }));
        }}
      />
    </>
  );
}