Milton Gonzalez
e65111a7f4
Permisos (superadmin, viewer, busqueda, tareas recurrentes), bootstrap atomico, revocacion de JWT por version de sesion (028), control optimista de edicion (029), logo sin SVG + CSP, ingesta endurecida, correos escapados, borradores, paginacion de proyectos, accesibilidad de dialogos/controles e i18n. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
32 lines
1.6 KiB
React
32 lines
1.6 KiB
React
import { createPortal } from 'react-dom';
|
|
import { X } from 'lucide-react';
|
|
import { useId } from 'react';
|
|
import { useModalFocus } from '../hooks/useModalFocus.js';
|
|
import { useUi } from '../context/ui-context.jsx';
|
|
|
|
// Popup grande para ver/editar el detalle de un elemento de un listado (reemplaza el patron
|
|
// "panel debajo del listado"). Reglas duras:
|
|
// 1. NUNCA se cierra con clic afuera del popup — solo con el boton "Cerrar" de su header o una
|
|
// accion explicita del formulario (ej. Guardar/Cancelar).
|
|
// 2. Alto FIJO (no se ajusta al contenido): moverse entre pestañas/secciones internas del popup
|
|
// (ej. Info/Comentarios/Documentos) nunca debe cambiar su tamaño — solo el contenido interno
|
|
// hace scroll. `height` es fijo por instancia; ajustar via prop segun cuanto contenido espera.
|
|
export function DetailPopup({ open, title, onClose, children, width = 720, height = 640 }) {
|
|
const titleId = useId();
|
|
const { t } = useUi();
|
|
const modalRef = useModalFocus(open, onClose);
|
|
if (!open) return null;
|
|
return createPortal(
|
|
<div className="detail-popup-overlay">
|
|
<div className="detail-popup" style={{ maxWidth: width, height }} role="dialog" aria-modal="true" aria-labelledby={titleId} tabIndex={-1} ref={modalRef}>
|
|
<div className="detail-popup-header">
|
|
<div className="detail-popup-title" id={titleId}>{title}</div>
|
|
<button className="icon-btn" aria-label={t('common_close')} onClick={onClose}><X /></button>
|
|
</div>
|
|
<div className="detail-popup-body">{children}</div>
|
|
</div>
|
|
</div>,
|
|
document.body
|
|
);
|
|
}
|