ActionModal

ActionModal actúa como enrutador de modales. Dado un actionName, delega el renderizado al modal especializado correcto (FormModal, MultiSelectModal, RelatedRecordsModal, ExportManyModal, ImportManyModal o ImportOneModal). Todos los props adicionales se reenvían al modal seleccionado.

Props

Props base (siempre requeridos)

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | isOpen | boolean | Sí | — | Controla si el modal está visible. | | onClose | (reason?: any) => void | Sí | — | Se llama cuando el modal se cierra. | | title | string | Sí | — | Título pasado al modal renderizado. | | actionName | string | Sí | — | Determina qué modal renderizar. Ver valores soportados abajo. | | backdropStyle | React.CSSProperties | No | — | Estilos para el backdrop del modal. | | windowStyle | React.CSSProperties | No | — | Estilos para la ventana del modal. | | closeButtonStyle | React.CSSProperties | No | — | Estilos para el botón de cierre. | | closeIcon | string | No | — | Nombre del ícono del botón de cierre. | | closeIconPaths | any[] | No | — | Rutas de ícono personalizadas para el botón de cierre. | | closeIconSize | number | No | — | Tamaño del ícono del botón de cierre. | | zIndex | number | No | — | z-index CSS del overlay. | | id | string | No | — | id HTML del elemento modal. | | subtitle | string | No | — | Subtítulo pasado al modal renderizado. | | fullScreen | boolean | No | — | Cuando es true, el modal ocupa toda la pantalla. | | data | any | No | — | Datos pasados al modal renderizado. | | apiBaseUrl | string | No | — | URL base del cliente HTTP. |

actionName: "openFormModal" — props adicionales

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | formTitle | string | No | — | Título mostrado dentro del formulario. | | formWidth | number | No | — | Ancho máximo del panel del formulario. | | formMode | "create" \| "edit" \| "globalEdit" \| "readOnly" \| "submit" | No | — | Modo del formulario. | | fields | any[] | No | — | Definiciones de campos del formulario. | | savePath | string | No | — | Ruta de API para hacer POST de los datos del formulario. | | fetchPath | string | No | — | Ruta de API para precargar datos del formulario. | | onSuccess | (data: any) => void | No | — | Se llama cuando el envío es exitoso. | | useAuthToken | boolean | No | — | Usar el cliente HTTP autenticado. |

actionName: "openMultiSelectModal" — props adicionales

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | searchPath | string | No | — | Ruta de API para la búsqueda por autocompletado. | | searchPlaceholder | string | No | — | Placeholder para el campo de búsqueda. | | searchItemLabelKey | string | No | — | Clave usada como etiqueta del ítem en resultados. | | searchItemDescriptionKey | string | No | — | Clave usada como descripción del ítem en resultados. | | searchItemImageKey | string | No | — | Clave usada como imagen del ítem en resultados. | | startSlots | any | No | — | Slots al inicio de cada ítem de la lista. | | endSlots | any | No | — | Slots al final de cada ítem de la lista. | | savePath | string | No | — | Ruta de API para guardar la selección. | | useAuthToken | boolean | No | — | Usar el cliente HTTP autenticado. | | noContentText | string | No | — | Texto de estado vacío. | | noContentIcon | string | No | — | Ícono de estado vacío. |

actionName: "openRelatedRecordsModal" — props adicionales

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | startSlots | any | No | — | Slots al inicio de cada ítem de la lista. | | endSlots | any | No | — | Slots al final de cada ítem de la lista. | | noContentText | string | No | — | Texto de estado vacío. | | noContentIcon | string | No | — | Ícono de estado vacío. |

actionName: "openExportManyModal" — props adicionales

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | exportPath | string | Sí | — | Ruta de API para la exportación. | | columns | { label: string; value: string }[] | Sí | — | Definiciones de columnas a exportar. | | format | "excel" \| "pdf" \| "json" | Sí | — | Formato de exportación. |

actionName: "openImportManyModal" — props adicionales

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | importPath | string | Sí | — | Ruta de API para la importación. | | acceptFileTypes | string[] | Sí | — | Extensiones de archivo aceptadas (ej. ["xlsx", "csv"]). |

actionName: "openImportOneModal" — props adicionales

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | importPath | string | Sí | — | Ruta de API para la importación. | | useAuthToken | boolean | No | — | Usar el cliente HTTP autenticado. |

Uso

Básico

import React from 'react';
import ActionModal from '@/components/modals/ActionModal';

export default function Example() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Open</button>
      <ActionModal
        isOpen={open}
        onClose={() => setOpen(false)}
        title="Add Members"
        actionName="openMultiSelectModal"
        searchPath="/v1/users/search"
        searchItemLabelKey="name"
        savePath="/v1/team/members"
        useAuthToken
      />
    </>
  );
}