ImportOneModal

Modal que permite a los usuarios seleccionar un archivo .json, previsualiza el contenido parseado usando JsonViewer, y lo envía a un endpoint de API configurado al confirmar. Solo se aceptan objetos JSON planos (no arreglos). El botón de acción flotante se habilita únicamente cuando se ha cargado un objeto JSON válido.

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. | | apiBaseUrl | string | Sí | — | URL base del cliente HTTP para hacer POST del JSON. | | importPath | string | Sí | — | Ruta de API para hacer POST del objeto JSON importado. | | subtitle | string | No | — | Subtítulo mostrado en el encabezado del modal. | | useAuthToken | boolean | No | true | Cuando es true, usa el cliente HTTP autenticado. | | 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. |

Uso

Básico

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

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

  return (
    <>
      <button onClick={() => setOpen(true)}>Import Configuration</button>
      <ImportOneModal
        isOpen={open}
        onClose={() => setOpen(false)}
        title="Import Configuration"
        subtitle="Select a .json file to import"
        apiBaseUrl="https://api.example.com"
        importPath="/v1/configurations/import"
        useAuthToken
      />
    </>
  );
}