ListModal

Modal a pantalla completa que renderiza un DynamicList con paginación, búsqueda y soporte de acciones de encabezado integrados. Puede obtener datos de una API (listPath) o aceptar un arreglo estático data. Cuando canCreate está habilitado, un botón flotante abre un FormModal anidado. Las acciones de encabezado admiten los tipos importMany, importOne y exportMany, que abren sus respectivos modales anidados.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | isOpen | boolean | Sí | — | Controla si el modal está visible. | | onClose | () => void | Sí | — | Se llama cuando el modal se cierra. | | title | string | Sí | — | Título mostrado en el encabezado del modal. | | backdropStyle | React.CSSProperties | No | — | Estilos en línea para el backdrop del modal. | | windowStyle | React.CSSProperties | No | — | Estilos en línea fusionados en 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 del modal. | | id | string | No | — | id HTML del elemento modal. | | subtitle | string | No | — | Subtítulo mostrado en el encabezado del modal. | | fullScreen | boolean | No | true | Cuando es true, el modal ocupa toda la pantalla. | | itemStyle | React.CSSProperties | No | — | Estilos en línea para cada ítem de la lista. | | startSlots | Slot[] | No | [] | Slots al inicio de cada ítem de la lista. | | endSlots | Slot[] | No | [] | Slots al final de cada ítem de la lista. | | data | any[] \| null | No | null | Arreglo de datos estático. Cuando se proporciona, omite la petición a la API. | | apiBaseUrl | string | No | — | URL base del cliente HTTP. | | useAuthToken | boolean | No | true | Cuando es true, usa el cliente HTTP autenticado. | | listPath | string | No | — | Ruta de API para obtener los datos de la lista. | | reorderPath | string | No | — | Ruta de API para reordenar ítems (reservado). | | displayMode | 'row' \| 'grid' | No | — | Modo de layout para los ítems de la lista. | | noContentText | string | No | 'No content available' | Texto mostrado cuando la lista está vacía. | | noContentIcon | string | No | 'records' | Ícono mostrado cuando la lista está vacía. | | forceRefresh | boolean | No | — | Cuando cambia, fuerza una recarga de la lista. | | isSortable | boolean | No | — | Cuando es true, habilita el arrastre para ordenar ítems. | | isItemClickable | boolean | No | false | Cuando es true, los ítems de la lista son clickeables. | | canCreate | boolean | No | false | Cuando es true, muestra un botón flotante de agregar que abre un formulario de creación. | | createFormConfig | { title?: string; fields: any[]; useAuthToken?: boolean; savePath?: string; zIndex?: number } | No | — | Configuración del FormModal de creación anidado. Requerido cuando canCreate es true. | | showSearchBar | boolean | No | — | Cuando es true, muestra una barra de búsqueda en el encabezado. | | searchBarConfig | any | No | — | Objeto de configuración para la barra de búsqueda. | | headerActions | HeaderAction[] | No | — | Botones de acción primarios en el encabezado. | | moreHeaderActions | HeaderAction[] | No | — | Acciones secundarias en el menú de desbordamiento del encabezado. Soporta los tipos exportMany, importMany e importOne. | | renderItem | (item: any, index: number) => React.ReactNode | No | — | Renderer personalizado para cada ítem de la lista. | | onActionClick | (actionData: any, itemData: any) => void | No | — | Se llama cuando se hace clic en una acción de slot en un ítem. | | onItemChangeSuccess | (item: any, message?: string) => void | No | — | Se llama cuando un cambio de ítem es exitoso. Dispara una recarga de la lista. | | onItemChangeError | (item: any, error: any) => void | No | — | Se llama cuando un cambio de ítem falla. | | onItemClick | (item: any, index: number) => void | No | — | Se llama cuando se hace clic en un ítem (requiere isItemClickable). | | onSlotClick | (slot: Slot, item: any) => void | No | — | Se llama cuando se hace clic en un slot de un ítem. |

Uso

Básico

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

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

  return (
    <>
      <button onClick={() => setOpen(true)}>View Products</button>
      <ListModal
        isOpen={open}
        onClose={() => setOpen(false)}
        title="Products"
        apiBaseUrl="https://api.example.com"
        listPath="/v1/products"
        useAuthToken
        startSlots={[{ type: 'text', name: 'name', label: 'Name', config: {} }]}
        canCreate
        createFormConfig={{
          title: 'New Product',
          fields: [
            { type: 'text', name: 'name', label: 'Name' },
          ],
          savePath: '/v1/products',
          useAuthToken: true,
        }}
      />
    </>
  );
}