laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
222 lines (221 loc) • 8.43 kB
JavaScript
"use client";
import { jsx as r, jsxs as a } from "react/jsx-runtime";
import c, { useEffect as P } from "react";
import { motion as b } from "framer-motion";
import { Button as j } from "../../dist/components/ui/button.js";
import { Icon as p } from "../../dist/components/ui/icon.js";
import { Tooltip as W, TooltipTrigger as C, TooltipContent as k } from "../../dist/components/ui/tooltip.js";
import { Command as U, CommandGroup as R, CommandItem as h } from "../../dist/components/ui/command.js";
import { Popover as L, PopoverTrigger as z, PopoverContent as S } from "../../dist/components/ui/popover.js";
import { cn as N } from "../../dist/lib/utils.js";
import f from "../../node_modules/lucide-react/dist/esm/icons/x.js";
import I from "../../node_modules/lucide-react/dist/esm/icons/file.js";
const x = ({ url: e, onPreview: t, onDownload: i, onRemove: s }) => /* @__PURE__ */ a(L, { children: [
/* @__PURE__ */ r(z, { children: /* @__PURE__ */ r(j, { variant: "ghost", size: "icon", children: /* @__PURE__ */ r(p, { name: "Menu", size: "sm" }) }) }),
/* @__PURE__ */ r(S, { className: "w-42 p-0", align: "end", children: /* @__PURE__ */ r(U, { children: /* @__PURE__ */ a(R, { children: [
t && /* @__PURE__ */ a(h, { onSelect: () => t(e), children: [
/* @__PURE__ */ r(p, { name: "Presentation", size: "sm" }),
/* @__PURE__ */ r("span", { children: "Anteprima" })
] }),
i && /* @__PURE__ */ a(h, { onSelect: () => i(e), children: [
/* @__PURE__ */ r(p, { name: "Download", size: "sm" }),
/* @__PURE__ */ r("span", { children: "Download" })
] }),
s && /* @__PURE__ */ a(
h,
{
onSelect: () => s(e),
className: "text-red-500",
children: [
/* @__PURE__ */ r(p, { name: "Trash", className: "text-red-500", size: "sm" }),
/* @__PURE__ */ r("span", { children: "Elimina" })
]
}
)
] }) }) })
] });
function y({ text: e }) {
return /* @__PURE__ */ a(W, { children: [
/* @__PURE__ */ r(C, { className: "w-full truncate", children: /* @__PURE__ */ r("span", { className: "text-d-secondary-foreground w-full truncate", children: e }) }),
/* @__PURE__ */ r(k, { children: /* @__PURE__ */ r("span", { children: e }) })
] });
}
const m = (e) => "type" in e && typeof e.type == "string" && e instanceof File, $ = (e) => {
if (m(e) || e.type)
return e.type;
const t = e.name.toLowerCase();
return t.endsWith(".jpg") || t.endsWith(".jpeg") || t.endsWith(".png") || t.endsWith(".gif") || t.endsWith(".webp") ? "image/" + t.split(".").pop() : t.endsWith(".txt") || t.endsWith(".md") ? "text/plain" : "application/octet-stream";
}, G = c.forwardRef(
(e, t) => {
const i = $(e.file);
return i.startsWith("image/") ? /* @__PURE__ */ r(v, { ...e, ref: t }) : i.startsWith("text/") || e.file.name.endsWith(".txt") || e.file.name.endsWith(".md") ? /* @__PURE__ */ r(F, { ...e, ref: t }) : /* @__PURE__ */ r(T, { ...e, ref: t });
}
);
G.displayName = "FilePreview";
const v = c.forwardRef(
({
file: e,
onRemove: t,
onPreview: i,
onDownload: s,
showActionMenu: d = !1,
className: l
}, o) => {
const n = m(e) ? URL.createObjectURL(e) : e.url;
return /* @__PURE__ */ a(
b.div,
{
ref: o,
className: N(
"border-d-border relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs",
l
),
layout: !0,
initial: { opacity: 0, y: "100%" },
animate: { opacity: 1, y: 0 },
exit: { opacity: 0, y: "100%" },
children: [
/* @__PURE__ */ a("div", { className: "flex w-full items-center space-x-2", children: [
/* @__PURE__ */ r(
"img",
{
alt: `Attachment ${e.name}`,
className: "bg-d-secondary border-d-border grid h-10 w-10 shrink-0 place-items-center rounded-sm border object-cover",
src: n
}
),
/* @__PURE__ */ r(y, { text: e.name }),
d && /* @__PURE__ */ r(
x,
{
url: n,
onPreview: i,
onDownload: s,
onRemove: t
}
)
] }),
!d && t ? /* @__PURE__ */ r(
"button",
{
className: "bg-d-background border-d-border absolute -top-2 -right-2 flex h-4 w-4 items-center justify-center rounded-full border",
type: "button",
onClick: () => t(n),
"aria-label": "Remove attachment",
children: /* @__PURE__ */ r(f, { className: "h-2.5 w-2.5" })
}
) : null
]
}
);
}
);
v.displayName = "ImageFilePreview";
const F = c.forwardRef(
({ file: e, onRemove: t, onPreview: i, onDownload: s, showActionMenu: d = !1 }, l) => {
const [o, n] = c.useState(""), g = m(e) ? URL.createObjectURL(e) : e.url;
return P(() => {
if (m(e)) {
const w = new FileReader();
w.onload = (u) => {
u.target?.result && n(
typeof u.target.result == "string" ? u.target.result.slice(0, 100) : ""
);
}, w.readAsText(e);
} else
n("Anteprima non disponibile");
}, [e]), /* @__PURE__ */ a(
b.div,
{
ref: l,
className: "border-d-border relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs",
layout: !0,
initial: { opacity: 0, y: "100%" },
animate: { opacity: 1, y: 0 },
exit: { opacity: 0, y: "100%" },
children: [
/* @__PURE__ */ a("div", { className: "flex w-full items-center space-x-2", children: [
/* @__PURE__ */ r("div", { className: "bg-d-secondary border-d-border grid h-10 w-10 shrink-0 place-items-center rounded rounded-sm border p-1 text-[8px]", children: o }),
/* @__PURE__ */ r(y, { text: e.name }),
d && /* @__PURE__ */ r(
x,
{
url: g,
onPreview: i,
onDownload: s,
onRemove: t
}
)
] }),
!d && t ? /* @__PURE__ */ r(
"button",
{
className: "bg-d-background border-d-border absolute -top-2 -right-2 flex h-4 w-4 items-center justify-center rounded-full border",
type: "button",
onClick: () => t(g),
"aria-label": "Remove attachment",
children: /* @__PURE__ */ r(f, { className: "h-2.5 w-2.5" })
}
) : null
]
}
);
}
);
F.displayName = "TextFilePreview";
const T = c.forwardRef(
({
file: e,
onRemove: t,
onPreview: i,
onDownload: s,
showActionMenu: d = !1,
className: l
}, o) => {
const n = m(e) ? URL.createObjectURL(e) : e.url;
return /* @__PURE__ */ a(
b.div,
{
ref: o,
className: N(
"border-d-border relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs",
l
),
layout: !0,
initial: { opacity: 0, y: "100%" },
animate: { opacity: 1, y: 0 },
exit: { opacity: 0, y: "100%" },
children: [
/* @__PURE__ */ a("div", { className: "flex w-full cursor-pointer items-center space-x-2", children: [
/* @__PURE__ */ r("div", { className: "bg-d-secondary border-d-border grid h-10 w-10 shrink-0 place-items-center rounded-sm border", children: /* @__PURE__ */ r(I, { className: "h-5 w-5" }) }),
/* @__PURE__ */ r(y, { text: e.name }),
d && /* @__PURE__ */ r(
x,
{
url: n,
onPreview: i,
onDownload: s,
onRemove: t
}
)
] }),
!d && t ? /* @__PURE__ */ r(
"button",
{
className: "bg-d-background border-d-border absolute -top-2 -right-2 flex h-4 w-4 items-center justify-center rounded-full border",
type: "button",
onClick: () => t(n),
"aria-label": "Remove attachment",
children: /* @__PURE__ */ r(f, { className: "h-2.5 w-2.5" })
}
) : null
]
}
);
}
);
T.displayName = "GenericFilePreview";
export {
G as FilePreview,
y as default
};