analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
202 lines (188 loc) • 7.29 kB
JavaScript
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
var _chunk23TTOILXjs = require('./chunk-23TTOILX.js');
var _chunkLGPTKTMPjs = require('./chunk-LGPTKTMP.js');
var _chunkTCLRDUMFjs = require('./chunk-TCLRDUMF.js');
var _chunk34ST3MKOjs = require('./chunk-34ST3MKO.js');
var _chunkANT66KVKjs = require('./chunk-ANT66KVK.js');
// src/components/RichEditor/components/ImageDialog.tsx
var _react = require('react');
var _Link = require('@phosphor-icons/react/dist/csr/Link');
var _UploadSimple = require('@phosphor-icons/react/dist/csr/UploadSimple');
var _jsxruntime = require('react/jsx-runtime');
var MAX_IMAGE_SIZE = 5 * 1024 * 1024;
function ImageDialog({
open,
onClose,
onInsert,
onUploadImage
}) {
const [inputMode, setInputMode] = _react.useState.call(void 0,
onUploadImage ? "file" : "url"
);
const [file, setFile] = _react.useState.call(void 0, null);
const [url, setUrl] = _react.useState.call(void 0, "");
const [alt, setAlt] = _react.useState.call(void 0, "");
const [isUploading, setIsUploading] = _react.useState.call(void 0, false);
const [error, setError] = _react.useState.call(void 0, "");
const uploadTokenRef = _react.useRef.call(void 0, 0);
const resetState = () => {
setInputMode(onUploadImage ? "file" : "url");
setFile(null);
setUrl("");
setAlt("");
setIsUploading(false);
setError("");
};
const handleClose = () => {
uploadTokenRef.current += 1;
resetState();
onClose();
};
const handleFileSelect = (selected) => {
setFile(selected);
setError("");
};
const handleSizeError = () => {
setFile(null);
setError("A imagem deve ter no m\xE1ximo 5MB.");
};
const handleTypeError = () => {
setFile(null);
setError("Selecione um arquivo de imagem v\xE1lido.");
};
const switchMode = (mode) => {
setInputMode(mode);
setError("");
};
const handleInsert = async () => {
if (inputMode === "url") {
if (!url.trim()) return;
onInsert(url.trim(), alt.trim());
resetState();
return;
}
if (!file || !onUploadImage) return;
setIsUploading(true);
setError("");
const token = uploadTokenRef.current;
try {
const uploadedUrl = await onUploadImage(file);
if (token !== uploadTokenRef.current) return;
onInsert(uploadedUrl, alt.trim());
resetState();
} catch (err) {
if (token !== uploadTokenRef.current) return;
setError(err instanceof Error ? err.message : "Erro ao enviar a imagem.");
} finally {
setIsUploading(false);
}
};
const canInsert = inputMode === "url" ? !!url.trim() : !!file;
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkTCLRDUMFjs.Modal_default,
{
isOpen: open,
onClose: handleClose,
title: "Inserir imagem",
size: "md",
footer: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunk34ST3MKOjs.Button_default,
{
variant: "outline",
onClick: handleClose,
disabled: isUploading,
children: "Cancelar"
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunk34ST3MKOjs.Button_default,
{
variant: "solid",
action: "primary",
onClick: handleInsert,
disabled: !canInsert || isUploading,
children: isUploading ? "Enviando..." : "Inserir imagem"
}
)
] }),
children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-4", children: [
onUploadImage && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex gap-2", children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
_chunk34ST3MKOjs.Button_default,
{
type: "button",
variant: inputMode === "file" ? "solid" : "outline",
action: "primary",
size: "small",
onClick: () => switchMode("file"),
className: "flex items-center gap-1",
children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _UploadSimple.UploadSimpleIcon, { size: 14 }),
"Enviar arquivo"
]
}
),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
_chunk34ST3MKOjs.Button_default,
{
type: "button",
variant: inputMode === "url" ? "solid" : "outline",
action: "primary",
size: "small",
onClick: () => switchMode("url"),
className: "flex items-center gap-1",
children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Link.LinkIcon, { size: 14 }),
"Usar URL"
]
}
)
] }),
inputMode === "file" && onUploadImage ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunk23TTOILXjs.ImageUpload,
{
selectedFile: file,
onFileSelect: handleFileSelect,
onRemoveFile: () => setFile(null),
buttonText: "Selecionar arquivo",
maxSize: MAX_IMAGE_SIZE,
onSizeError: handleSizeError,
onTypeError: handleTypeError,
disabled: isUploading
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkANT66KVKjs.Text_default, { size: "xs", className: "text-text-400 mt-1", children: "Formatos aceitos: PNG, JPG, GIF, WEBP (m\xE1x. 5MB)" })
] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkANT66KVKjs.Text_default, { weight: "medium", className: "text-xs text-text-600 mb-2 block", children: "URL da imagem" }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkLGPTKTMPjs.Input_default,
{
type: "text",
value: url,
onChange: (e) => setUrl(e.target.value),
placeholder: "https://exemplo.com/imagem.png"
}
)
] }),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkANT66KVKjs.Text_default, { weight: "medium", className: "text-xs text-text-600 mb-2 block", children: "Texto alternativo (opcional)" }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkLGPTKTMPjs.Input_default,
{
type: "text",
value: alt,
onChange: (e) => setAlt(e.target.value),
placeholder: "Descreva a imagem para leitores de tela",
disabled: isUploading
}
)
] }),
error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkANT66KVKjs.Text_default, { size: "xs", className: "text-error-600", children: error })
] })
}
);
}
exports.MAX_IMAGE_SIZE = MAX_IMAGE_SIZE; exports.ImageDialog = ImageDialog;
//# sourceMappingURL=chunk-KXW6LTRV.js.map