ConfigurationGroupBuilderModal

Modal a pantalla completa que combina un ItemSelector lateral (en escritorio) o un Drawer (en móvil) con un DynamicList para ensamblar un arreglo ordenado de ítems de grupo de configuración. El prop configurationGroup limita los tipos de ítems disponibles. Un botón flotante de guardar aparece solo cuando hay al menos un ítem seleccionado, y llama a onClose con el arreglo resultante.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | isOpen | boolean | Sí | — | Controla si el modal está visible. | | onClose | (newData?: any) => void | Sí | — | Se llama cuando el modal se cierra. Recibe el arreglo de ítems seleccionados al guardar. | | title | string | Sí | — | Título mostrado en el encabezado del modal. | | configurationGroup | 'fields' \| 'slots' \| 'filters' \| 'headerActions' \| 'listActions' \| 'dividerGroups' \| 'importCols' \| 'exportCols' | Sí | — | Limita qué tipos de ítems están disponibles en el selector. | | subtitle | string | No | — | Subtítulo mostrado debajo del título en el encabezado. | | data | any[] \| null | No | [] | Arreglo inicial de ítems seleccionados precargados en la lista. | | 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. |

Uso

Básico

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

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

  return (
    <>
      <button onClick={() => setOpen(true)}>Build Slots</button>
      <ConfigurationGroupBuilderModal
        isOpen={open}
        onClose={(newData) => {
          if (newData) setItems(newData);
          setOpen(false);
        }}
        title="Slots Builder"
        subtitle="Add and order slot items"
        configurationGroup="slots"
        data={items}
      />
    </>
  );
}