use-vibes
Version:
Transform any DOM element into an AI-powered micro-app
34 lines • 2.35 kB
JavaScript
import * as React from 'react';
import { ImgFile } from 'use-fireproof';
import { createPortal } from 'react-dom';
import { ImageOverlay } from './overlays/ImageOverlay';
import { ImgGenError } from './ImgGenError';
import { defaultClasses } from '../../utils/style-utils';
export function ImgGenModal({ isOpen, onClose, currentFile, alt, promptText, editedPrompt, setEditedPrompt, handlePromptEdit, handleDeleteConfirm, handlePrevVersion, handleNextVersion, handleRegen, versionIndex, totalVersions, progress, versionFlash = false, isRegenerating = false, error = null, classes = defaultClasses, }) {
// ESC handling while modal is open
React.useEffect(() => {
const handleEsc = (e) => {
if (e.key === 'Escape') {
onClose();
}
};
if (isOpen) {
window.addEventListener('keydown', handleEsc);
return () => window.removeEventListener('keydown', handleEsc);
}
}, [isOpen, onClose]);
if (!isOpen || !currentFile) {
return null;
}
// Determine what prompt to show in the modal
const effectivePromptText = promptText;
return createPortal(React.createElement("div", { className: "imggen-backdrop", onClick: (e) => {
e.stopPropagation(); // Prevent click from propagating beyond
onClose();
}, role: "presentation" },
React.createElement("figure", { className: "imggen-full-wrapper", onClick: (e) => e.stopPropagation() },
error ? (React.createElement("div", { className: "imggen-backdrop-error" },
React.createElement(ImgGenError, { message: error.message }))) : (React.createElement(ImgFile, { file: currentFile, className: "imggen-backdrop-image", alt: alt || 'Generated image' })),
React.createElement(ImageOverlay, { promptText: effectivePromptText, editedPrompt: editedPrompt, setEditedPrompt: setEditedPrompt, handlePromptEdit: handlePromptEdit, handleDeleteConfirm: handleDeleteConfirm, handlePrevVersion: handlePrevVersion, handleNextVersion: handleNextVersion, handleRegen: handleRegen, versionIndex: versionIndex, totalVersions: totalVersions, progress: progress, versionFlash: versionFlash, isRegenerating: isRegenerating, classes: classes, showDelete: true }))), globalThis.document.body);
}
//# sourceMappingURL=ImgGenModal.js.map