analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
202 lines (200 loc) • 6.33 kB
JavaScript
import {
ImageUpload
} from "./chunk-IPVIZIHN.mjs";
import {
Input_default
} from "./chunk-EXVVHZOO.mjs";
import {
Modal_default
} from "./chunk-TNLGS7SB.mjs";
import {
Button_default
} from "./chunk-LAYB7IKW.mjs";
import {
Text_default
} from "./chunk-IMCIR6TJ.mjs";
// src/components/RichEditor/components/ImageDialog.tsx
import { useState, useRef } from "react";
import { LinkIcon } from "@phosphor-icons/react/dist/csr/Link";
import { UploadSimpleIcon } from "@phosphor-icons/react/dist/csr/UploadSimple";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var MAX_IMAGE_SIZE = 5 * 1024 * 1024;
function ImageDialog({
open,
onClose,
onInsert,
onUploadImage
}) {
const [inputMode, setInputMode] = useState(
onUploadImage ? "file" : "url"
);
const [file, setFile] = useState(null);
const [url, setUrl] = useState("");
const [alt, setAlt] = useState("");
const [isUploading, setIsUploading] = useState(false);
const [error, setError] = useState("");
const uploadTokenRef = useRef(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__ */ jsx(
Modal_default,
{
isOpen: open,
onClose: handleClose,
title: "Inserir imagem",
size: "md",
footer: /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
Button_default,
{
variant: "outline",
onClick: handleClose,
disabled: isUploading,
children: "Cancelar"
}
),
/* @__PURE__ */ jsx(
Button_default,
{
variant: "solid",
action: "primary",
onClick: handleInsert,
disabled: !canInsert || isUploading,
children: isUploading ? "Enviando..." : "Inserir imagem"
}
)
] }),
children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
onUploadImage && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
/* @__PURE__ */ jsxs(
Button_default,
{
type: "button",
variant: inputMode === "file" ? "solid" : "outline",
action: "primary",
size: "small",
onClick: () => switchMode("file"),
className: "flex items-center gap-1",
children: [
/* @__PURE__ */ jsx(UploadSimpleIcon, { size: 14 }),
"Enviar arquivo"
]
}
),
/* @__PURE__ */ jsxs(
Button_default,
{
type: "button",
variant: inputMode === "url" ? "solid" : "outline",
action: "primary",
size: "small",
onClick: () => switchMode("url"),
className: "flex items-center gap-1",
children: [
/* @__PURE__ */ jsx(LinkIcon, { size: 14 }),
"Usar URL"
]
}
)
] }),
inputMode === "file" && onUploadImage ? /* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx(
ImageUpload,
{
selectedFile: file,
onFileSelect: handleFileSelect,
onRemoveFile: () => setFile(null),
buttonText: "Selecionar arquivo",
maxSize: MAX_IMAGE_SIZE,
onSizeError: handleSizeError,
onTypeError: handleTypeError,
disabled: isUploading
}
),
/* @__PURE__ */ jsx(Text_default, { size: "xs", className: "text-text-400 mt-1", children: "Formatos aceitos: PNG, JPG, GIF, WEBP (m\xE1x. 5MB)" })
] }) : /* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx(Text_default, { weight: "medium", className: "text-xs text-text-600 mb-2 block", children: "URL da imagem" }),
/* @__PURE__ */ jsx(
Input_default,
{
type: "text",
value: url,
onChange: (e) => setUrl(e.target.value),
placeholder: "https://exemplo.com/imagem.png"
}
)
] }),
/* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx(Text_default, { weight: "medium", className: "text-xs text-text-600 mb-2 block", children: "Texto alternativo (opcional)" }),
/* @__PURE__ */ jsx(
Input_default,
{
type: "text",
value: alt,
onChange: (e) => setAlt(e.target.value),
placeholder: "Descreva a imagem para leitores de tela",
disabled: isUploading
}
)
] }),
error && /* @__PURE__ */ jsx(Text_default, { size: "xs", className: "text-error-600", children: error })
] })
}
);
}
export {
MAX_IMAGE_SIZE,
ImageDialog
};
//# sourceMappingURL=chunk-LVDGCRQI.mjs.map