ConfigurationBuilderModal

Modal a pantalla completa que proporciona un encabezado con título, subtítulo y botón de cierre para construir definiciones de configuración. El prop configurationGroup declara qué tipo de grupo se está configurando. El área de contenido interior es actualmente un placeholder; extiéndela con la UI del constructor apropiada para cada tipo de grupo.

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. | | configurationGroup | 'fields' \| 'slots' \| 'filters' \| 'headerActions' \| 'listActions' \| 'dividerGroups' \| 'importCols' \| 'exportCols' | Sí | — | Declara qué tipo de configuración se está editando. | | subtitle | string | No | — | Subtítulo mostrado debajo del título en el encabezado. | | data | any[] \| null | No | — | Datos de configuración iniciales. | | 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 ConfigurationBuilderModal from '@/components/modals/ConfigurationBuilderModal';

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

  return (
    <>
      <button onClick={() => setOpen(true)}>Configure Fields</button>
      <ConfigurationBuilderModal
        isOpen={open}
        onClose={() => setOpen(false)}
        title="Fields Configuration"
        subtitle="Define the fields for this view"
        configurationGroup="fields"
      />
    </>
  );
}