analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
167 lines (158 loc) • 6.94 kB
JavaScript
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
var _chunk34ST3MKOjs = require('./chunk-34ST3MKO.js');
var _chunkANT66KVKjs = require('./chunk-ANT66KVK.js');
var _chunkTN3AYOMVjs = require('./chunk-TN3AYOMV.js');
// src/components/ImageUpload/ImageUpload.tsx
var _react = require('react');
var _Image = require('@phosphor-icons/react/dist/csr/Image');
var _Paperclip = require('@phosphor-icons/react/dist/csr/Paperclip');
var _X = require('@phosphor-icons/react/dist/csr/X');
var _jsxruntime = require('react/jsx-runtime');
function ImageUpload({
selectedFile,
onFileSelect,
onRemoveFile,
buttonText = "Inserir imagem",
buttonIcon,
accept = "image/*",
disabled = false,
className,
maxSize,
onSizeError,
onTypeError,
variant = "default"
}) {
const fileInputRef = _react.useRef.call(void 0, null);
const [internalFile, setInternalFile] = _react.useState.call(void 0, null);
const currentFile = _nullishCoalesce(selectedFile, () => ( internalFile));
const hasFile = currentFile !== null;
const handleButtonClick = () => {
if (!disabled) {
_optionalChain([fileInputRef, 'access', _ => _.current, 'optionalAccess', _2 => _2.click, 'call', _3 => _3()]);
}
};
const handleFileChange = (event) => {
const file = _optionalChain([event, 'access', _4 => _4.target, 'access', _5 => _5.files, 'optionalAccess', _6 => _6[0]]);
if (!file) return;
const acceptedTypes = accept.split(",").map((type) => type.trim());
const isValidType = acceptedTypes.some((type) => {
if (type.endsWith("/*")) {
const mainType = type.split("/")[0];
return file.type.startsWith(mainType + "/");
}
if (type.startsWith(".")) {
return file.name.toLowerCase().endsWith(type.toLowerCase());
}
return file.type === type;
});
if (!isValidType) {
_optionalChain([onTypeError, 'optionalCall', _7 => _7(file)]);
return;
}
if (maxSize && file.size > maxSize) {
_optionalChain([onSizeError, 'optionalCall', _8 => _8(file, maxSize)]);
return;
}
if (selectedFile === void 0) {
setInternalFile(file);
}
_optionalChain([onFileSelect, 'optionalCall', _9 => _9(file)]);
event.target.value = "";
};
const handleRemoveFile = () => {
if (!disabled) {
if (selectedFile === void 0) {
setInternalFile(null);
}
_optionalChain([onRemoveFile, 'optionalCall', _10 => _10()]);
}
};
if (variant === "compact") {
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkTN3AYOMVjs.cn.call(void 0, "inline-flex items-center gap-2", className), children: [
hasFile ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "inline-flex items-center gap-2 bg-muted rounded-md px-3 py-1.5", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Paperclip.PaperclipIcon, { className: "h-4 w-4 text-text-800" }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkANT66KVKjs.Text_default, { size: "sm", weight: "medium", className: "text-text-800", children: currentFile.name }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"button",
{
type: "button",
onClick: handleRemoveFile,
disabled,
className: "hover:opacity-70 disabled:cursor-not-allowed disabled:opacity-50",
"aria-label": "Remover imagem",
title: "Remover imagem",
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _X.XIcon, { className: "h-3 w-3 text-primary-950" })
}
)
] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
_chunk34ST3MKOjs.Button_default,
{
type: "button",
variant: "link",
size: "extra-small",
onClick: handleButtonClick,
disabled,
children: [
buttonIcon || /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Image.ImageIcon, { className: "h-4 w-4" }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ml-2", children: buttonText })
]
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"input",
{
ref: fileInputRef,
type: "file",
accept,
className: "hidden",
onChange: handleFileChange,
disabled
}
)
] });
}
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkTN3AYOMVjs.cn.call(void 0, "space-y-3", className), children: [
hasFile ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "space-y-2", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "inline-flex items-center gap-2 bg-muted rounded-md px-3 py-2", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Paperclip.PaperclipIcon, { className: "h-4 w-4 text-text-800" }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkANT66KVKjs.Text_default, { size: "sm", weight: "medium", className: "text-text-800", children: currentFile.name }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"button",
{
type: "button",
onClick: handleRemoveFile,
disabled,
className: "hover:opacity-70 disabled:cursor-not-allowed disabled:opacity-50",
"aria-label": "Remover imagem",
title: "Remover imagem",
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _X.XIcon, { className: "h-4 w-4 text-primary-950 cursor-pointer" })
}
)
] }) }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
_chunk34ST3MKOjs.Button_default,
{
type: "button",
variant: "link",
className: "gap-1.5",
onClick: handleButtonClick,
disabled,
children: [
buttonIcon || /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Image.ImageIcon, { className: "h-4 w-4" }),
buttonText
]
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"input",
{
ref: fileInputRef,
type: "file",
accept,
className: "hidden",
onChange: handleFileChange,
disabled
}
)
] });
}
exports.ImageUpload = ImageUpload;
//# sourceMappingURL=chunk-23TTOILX.js.map