JsonBuilderModal

Modal a pantalla completa que embebe un editor JsonBuilder para construir o modificar un objeto JSON. Rastrea si el estado actual difiere de los datos originales y habilita el botón flotante de guardar solo cuando hay cambios no guardados. Al guardar, llama al endpoint de API configurado usando el método HTTP especificado. Los errores y estados de éxito se comunican mediante un Toast.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | isOpen | boolean | Sí | — | Controla si el modal está visible. | | onClose | (reason?: 'success' \| 'cancel' \| 'error' \| 'custom') => void | Sí | — | Se llama cuando el modal se cierra. Recibe una cadena de razón. | | title | string | Sí | — | Título mostrado en el encabezado del modal. | | apiBaseUrl | string | Sí | — | URL base del cliente HTTP. | | savePath | string | Sí | — | Ruta de API para guardar los datos JSON. | | subtitle | string | No | — | Subtí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 | true | Cuando es true, el modal ocupa toda la pantalla. | | useAuthToken | boolean | No | true | Cuando es true, usa el cliente HTTP autenticado. | | saveMethod | 'POST' \| 'PUT' \| 'PATCH' | No | 'POST' | Método HTTP para guardar los datos JSON. | | payloadKey | string | No | — | Cuando está definido, envuelve los datos JSON bajo esta clave en el payload de la petición. | | data | object \| null | No | — | Objeto JSON inicial cargado en el constructor. |

Uso

Básico

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

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

  return (
    <>
      <button onClick={() => setOpen(true)}>Edit JSON Config</button>
      <JsonBuilderModal
        isOpen={open}
        onClose={(reason) => {
          console.log('Closed:', reason);
          setOpen(false);
        }}
        title="Configuration Editor"
        apiBaseUrl="https://api.example.com"
        savePath="/v1/settings/config"
        saveMethod="PUT"
        payloadKey="config"
        data={{ theme: 'dark', language: 'en' }}
      />
    </>
  );
}