dgz-ui-shared
Version:
Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript, dgz-ui library
309 lines (308 loc) • 10.2 kB
JavaScript
import { jsxs as g, jsx as l } from "react/jsx-runtime";
import { memo as R, useState as L, useMemo as j, useCallback as N, useEffect as C, createElement as M } from "react";
import { cn as F } from "dgz-ui/utils";
import { c as k } from "../../chunks/_commonjsHelpers-DaMA6jEr.es.js";
import { X as D, ChevronLeft as O, ChevronRight as U, Download as z } from "lucide-react";
var A = { exports: {} }, _ = A.exports, S;
function B() {
return S || (S = 1, (function(s, w) {
(function(p, i) {
i();
})(_, function() {
function p(e, t) {
return typeof t > "u" ? t = { autoBom: !1 } : typeof t != "object" && (console.warn("Deprecated: Expected third argument to be a object"), t = { autoBom: !t }), t.autoBom && /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(e.type) ? new Blob(["\uFEFF", e], { type: e.type }) : e;
}
function i(e, t, u) {
var o = new XMLHttpRequest();
o.open("GET", e), o.responseType = "blob", o.onload = function() {
d(o.response, t, u);
}, o.onerror = function() {
console.error("could not download file");
}, o.send();
}
function h(e) {
var t = new XMLHttpRequest();
t.open("HEAD", e, !1);
try {
t.send();
} catch {
}
return 200 <= t.status && 299 >= t.status;
}
function v(e) {
try {
e.dispatchEvent(new MouseEvent("click"));
} catch {
var t = document.createEvent("MouseEvents");
t.initMouseEvent("click", !0, !0, window, 0, 0, 0, 80, 20, !1, !1, !1, !1, 0, null), e.dispatchEvent(t);
}
}
var c = typeof window == "object" && window.window === window ? window : typeof self == "object" && self.self === self ? self : typeof k == "object" && k.global === k ? k : void 0, r = c.navigator && /Macintosh/.test(navigator.userAgent) && /AppleWebKit/.test(navigator.userAgent) && !/Safari/.test(navigator.userAgent), d = c.saveAs || (typeof window != "object" || window !== c ? function() {
} : "download" in HTMLAnchorElement.prototype && !r ? function(e, t, u) {
var o = c.URL || c.webkitURL, a = document.createElement("a");
t = t || e.name || "download", a.download = t, a.rel = "noopener", typeof e == "string" ? (a.href = e, a.origin === location.origin ? v(a) : h(a.href) ? i(e, t, u) : v(a, a.target = "_blank")) : (a.href = o.createObjectURL(e), setTimeout(function() {
o.revokeObjectURL(a.href);
}, 4e4), setTimeout(function() {
v(a);
}, 0));
} : "msSaveOrOpenBlob" in navigator ? function(e, t, u) {
if (t = t || e.name || "download", typeof e != "string") navigator.msSaveOrOpenBlob(p(e, u), t);
else if (h(e)) i(e, t, u);
else {
var o = document.createElement("a");
o.href = e, o.target = "_blank", setTimeout(function() {
v(o);
});
}
} : function(e, t, u, o) {
if (o = o || open("", "_blank"), o && (o.document.title = o.document.body.innerText = "downloading..."), typeof e == "string") return i(e, t, u);
var a = e.type === "application/octet-stream", x = /constructor/i.test(c.HTMLElement) || c.safari, y = /CriOS\/[\d]+/.test(navigator.userAgent);
if ((y || a && x || r) && typeof FileReader < "u") {
var b = new FileReader();
b.onloadend = function() {
var n = b.result;
n = y ? n : n.replace(/^data:[^;]*;/, "data:attachment/file;"), o ? o.location.href = n : location = n, o = null;
}, b.readAsDataURL(e);
} else {
var m = c.URL || c.webkitURL, E = m.createObjectURL(e);
o ? o.location = E : location.href = E, o = null, setTimeout(function() {
m.revokeObjectURL(E);
}, 4e4);
}
});
c.saveAs = d.saveAs = d, s.exports = d;
});
})(A)), A.exports;
}
var H = B();
const $ = () => [
{
icon: /* @__PURE__ */ l(z, { size: 20 }),
onClick: (s) => {
H.saveAs(s.src, s.title);
},
label: "Download"
}
], q = R(
({
src: s,
alt: w,
fallbackImage: p
}) => {
const [i, h] = L(!1);
return /* @__PURE__ */ l(
"img",
{
src: i && p ? p : s,
alt: w,
className: "max-h-full max-w-full object-contain",
onError: () => {
h(!0);
}
}
);
}
), G = R(
({
image: s,
index: w,
onClick: p,
fallbackImage: i,
className: h,
...v
}) => {
const [c, r] = L(!1), d = () => {
r(!0);
};
return /* @__PURE__ */ M(
"div",
{
...v,
key: s.id,
className: F(
"aspect-video cursor-pointer overflow-hidden rounded-lg bg-gray-200 transition-opacity hover:opacity-80",
h
),
onClick: () => p(w)
},
/* @__PURE__ */ l(
"img",
{
src: c && i ? i : s.thumbnail || s.src,
alt: s.alt || `Image ${w + 1}`,
className: "h-full w-full object-cover",
onError: d
}
)
);
}
), I = ({
images: s,
thumbnailProps: w,
actionButtons: p = [],
fallbackImage: i,
className: h,
hasInfo: v,
...c
}) => {
const [r, d] = L(null), [e, t] = L(!1), u = j(() => $(), []), o = j(
() => [...u, ...p],
[u, p]
), a = N((n) => {
d(n), t(!0);
}, []), x = N(() => {
t(!1), d(null);
}, []), y = N(() => {
r !== null && r > 0 && d(r - 1);
}, [r]), b = N(() => {
r !== null && r < s.length - 1 && d(r + 1);
}, [r, s.length]);
C(() => {
const n = (f) => {
if (e)
switch (f.key) {
case "Escape":
x();
break;
case "ArrowLeft":
f.preventDefault(), y();
break;
case "ArrowRight":
f.preventDefault(), b();
break;
}
};
return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
}, [e, y, b, x]), C(() => (e ? document.body.style.overflow = "hidden" : document.body.style.overflow = "unset", () => {
document.body.style.overflow = "unset";
}), [e]);
const m = j(
() => r !== null ? s[r] : null,
[r, s]
), E = j(() => !e || !m ? null : /* @__PURE__ */ g("div", { className: "bg-opacity-95 bg-bg fixed inset-0 z-50 flex flex-col items-center justify-center", children: [
/* @__PURE__ */ g(
"div",
{
className: "absolute top-0 flex w-full items-start justify-between p-3",
children: [
/* @__PURE__ */ l("div", { children: m.title && /* @__PURE__ */ l("h2", { className: "text-body-lg-semi-bold", children: m.title }) }),
/* @__PURE__ */ g("div", { className: "flex items-center gap-4 py-1", children: [
o.map((n, f) => /* @__PURE__ */ l(
"button",
{
onClick: () => n.onClick(m),
className: "cursor-pointer",
title: n.label,
children: n.icon
},
f
)),
/* @__PURE__ */ l(
"button",
{
onClick: x,
className: "cursor-pointer",
title: "Close (Esc)",
children: /* @__PURE__ */ l(D, { size: 20 })
}
)
] })
]
}
),
(r || 0) > 0 && /* @__PURE__ */ l(
"button",
{
onClick: y,
className: "bg-opacity-50 hover:bg-opacity-70 bg-bg text-secondary absolute top-1/2 left-2 z-50 -translate-y-1/2 rounded-full p-3 transition-all",
title: "Previous (←)",
children: /* @__PURE__ */ l(O, { size: 24 })
}
),
(r || 0) < s.length - 1 && /* @__PURE__ */ l(
"button",
{
onClick: b,
className: "bg-opacity-0 hover:bg-opacity-100 text-secondary bg-bg absolute top-1/2 right-2 z-50 -translate-y-1/2 rounded-full p-3 transition-all",
title: "Next (→)",
children: /* @__PURE__ */ l(U, { size: 24 })
}
),
/* @__PURE__ */ l("div", { className: "flex max-h-full max-w-full items-center justify-center overflow-hidden p-8", children: /* @__PURE__ */ l(
q,
{
src: m.src,
alt: m.alt || `Image ${r}`,
fallbackImage: i
}
) }),
/* @__PURE__ */ l("div", { className: "bg-bg absolute bottom-0 w-full", children: /* @__PURE__ */ l("div", { className: "flex gap-2 overflow-x-auto p-3", children: s.map((n, f) => /* @__PURE__ */ l(
"div",
{
className: F(
"hover:border-item-primary h-16 min-w-16 shrink-0 cursor-pointer rounded border-3 border-transparent transition-all",
f == r && "border-item-primary"
),
onClick: () => d(f),
children: /* @__PURE__ */ l(
"img",
{
src: n.thumbnail || n.src,
alt: n.alt || `Thumbnail ${f + 1}`,
className: "size-full object-cover",
onError: (T) => {
i && (T.currentTarget.src = i);
}
}
)
},
n.id
)) }) })
] }), [
e,
i,
m,
o,
x,
r,
y,
s,
b
]);
return /* @__PURE__ */ g("div", { className: "w-full", children: [
/* @__PURE__ */ l(
"div",
{
...c,
className: F(
"grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4",
h
),
children: s.map((n, f) => /* @__PURE__ */ g("div", { className: "relative", children: [
/* @__PURE__ */ l(
G,
{
...w,
image: n,
index: f,
onClick: a,
fallbackImage: i
}
),
v && n.title && /* @__PURE__ */ l(
"div",
{
className: "bg-bg/70 absolute bottom-0 flex min-h-10 w-full items-center justify-center text-center",
children: n.title
}
)
] }, n.id))
}
),
E
] });
}, J = R(I);
export {
J as MyGallery
};
//# sourceMappingURL=index.es.js.map