ComponentTemplateBuilderModal

Modal a pantalla completa que embebe un JsonBuilder para construir o editar un arreglo de objetos de plantilla de componentes. Rastrea los cambios no guardados y solo habilita el botón de guardar cuando los datos han sido modificados. Al cerrar, siempre informa la razón ('cancel' o 'save') y, opcionalmente, los datos resultantes.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | isOpen | boolean | Sí | — | Controla si el modal está visible. | | onClose | (reason: 'cancel' \| 'save', data?: object[]) => void | Sí | — | Se llama cuando el modal se cierra. Recibe la razón y, al guardar, el arreglo actualizado. | | title | string | Sí | — | Título mostrado en el encabezado del modal. | | subtitle | string | No | — | Subtítulo mostrado debajo del título en el encabezado. | | 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 | true | Cuando es true, el modal ocupa toda la pantalla. | | data | object[] \| null | No | — | Arreglo inicial de objetos de plantilla para cargar en el constructor. |

Uso

Básico

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

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

  return (
    <>
      <button onClick={() => setOpen(true)}>Edit Template</button>
      <ComponentTemplateBuilderModal
        isOpen={open}
        onClose={(reason, data) => {
          if (reason === 'save' && data) setTemplate(data);
          setOpen(false);
        }}
        title="Component Template"
        subtitle="Define the structure of your component"
        data={template}
      />
    </>
  );
}