RelatedRecordsModal

Modal a pantalla completa que renderiza un DynamicList para mostrar registros relacionados con una entidad padre. Puede aceptar un arreglo estático data u obtener registros de una API mediante fetchPath. La lista es de solo lectura (los ítems son clickeables pero no se exponen mutaciones). La lista se monta de forma diferida hasta que la animación de apertura del modal finaliza.

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 | 99999 | z-index CSS del overlay del modal. | | id | string | No | — | id HTML del elemento modal. | | fullScreen | boolean | No | — | Cuando es true, el modal ocupa toda la pantalla. | | subtitle | string | No | — | Subtítulo mostrado en el encabezado del modal. | | apiBaseUrl | string | No | — | URL base del cliente HTTP. | | useAuthToken | boolean | No | — | Cuando es true, usa el cliente HTTP autenticado. | | data | any[] \| null | No | — | Arreglo estático de registros relacionados. | | 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. | | startSlots | Slot[] | No | [] | Slots al inicio de cada ítem de la lista. | | endSlots | Slot[] | No | [] | Slots al final de cada ítem de la lista. | | searchPlaceholder | string | No | — | Placeholder para el campo de búsqueda (reservado). | | fetchPath | string | No | — | Ruta de API para obtener los registros relacionados. | | savePath | string | No | — | Ruta de API para guardar (reservado). | | payloadKey | string | No | — | Clave de payload para la petición de guardado (reservado). |

Uso

Básico

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

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

  return (
    <>
      <button onClick={() => setOpen(true)}>View Orders</button>
      <RelatedRecordsModal
        isOpen={open}
        onClose={() => setOpen(false)}
        title="Customer Orders"
        fetchPath="/v1/customers/42/orders"
        useAuthToken
        startSlots={[
          { type: 'text', name: 'order_number', label: 'Order #', config: {} },
        ]}
      />
    </>
  );
}