dgz-ui-shared
Version:
Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript, dgz-ui library
336 lines (335 loc) • 11.4 kB
JavaScript
import { j as r } from "../../jsx-runtime-C5mzlN2N.js";
import { memo as A, useState as k, useMemo as j, useCallback as g, useEffect as R } from "react";
import { l as F } from "../../lodash-CYNxjS-I.js";
import { m as _ } from "../../utils-B6fNqzRf-B1_jG1K7.js";
import { c as E } from "../../_commonjsHelpers-DaMA6jEr.js";
import { c as L } from "../../createLucideIcon-B950nf2d.js";
/**
* @license lucide-react v0.511.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const S = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]], T = L("chevron-left", S);
/**
* @license lucide-react v0.511.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const D = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]], O = L("chevron-right", D);
/**
* @license lucide-react v0.511.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const U = [
["path", { d: "M12 15V3", key: "m9g1x1" }],
["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }],
["path", { d: "m7 10 5 5 5-5", key: "brsn70" }]
], z = L("download", U);
/**
* @license lucide-react v0.511.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const $ = [
["path", { d: "M18 6 6 18", key: "1bl5f8" }],
["path", { d: "m6 6 12 12", key: "d8bk6v" }]
], B = L("x", $);
var N = { exports: {} }, H = N.exports, C;
function q() {
return C || (C = 1, function(l, v) {
(function(a, u) {
u();
})(H, function() {
function a(e, o) {
return typeof o > "u" ? o = { autoBom: !1 } : typeof o != "object" && (console.warn("Deprecated: Expected third argument to be a object"), o = { autoBom: !o }), o.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 u(e, o, d) {
var n = new XMLHttpRequest();
n.open("GET", e), n.responseType = "blob", n.onload = function() {
f(n.response, o, d);
}, n.onerror = function() {
console.error("could not download file");
}, n.send();
}
function h(e) {
var o = new XMLHttpRequest();
o.open("HEAD", e, !1);
try {
o.send();
} catch {
}
return 200 <= o.status && 299 >= o.status;
}
function p(e) {
try {
e.dispatchEvent(new MouseEvent("click"));
} catch {
var o = document.createEvent("MouseEvents");
o.initMouseEvent("click", !0, !0, window, 0, 0, 0, 80, 20, !1, !1, !1, !1, 0, null), e.dispatchEvent(o);
}
}
var t = typeof window == "object" && window.window === window ? window : typeof self == "object" && self.self === self ? self : typeof E == "object" && E.global === E ? E : void 0, x = t.navigator && /Macintosh/.test(navigator.userAgent) && /AppleWebKit/.test(navigator.userAgent) && !/Safari/.test(navigator.userAgent), f = t.saveAs || (typeof window != "object" || window !== t ? function() {
} : "download" in HTMLAnchorElement.prototype && !x ? function(e, o, d) {
var n = t.URL || t.webkitURL, i = document.createElement("a");
o = o || e.name || "download", i.download = o, i.rel = "noopener", typeof e == "string" ? (i.href = e, i.origin === location.origin ? p(i) : h(i.href) ? u(e, o, d) : p(i, i.target = "_blank")) : (i.href = n.createObjectURL(e), setTimeout(function() {
n.revokeObjectURL(i.href);
}, 4e4), setTimeout(function() {
p(i);
}, 0));
} : "msSaveOrOpenBlob" in navigator ? function(e, o, d) {
if (o = o || e.name || "download", typeof e != "string") navigator.msSaveOrOpenBlob(a(e, d), o);
else if (h(e)) u(e, o, d);
else {
var n = document.createElement("a");
n.href = e, n.target = "_blank", setTimeout(function() {
p(n);
});
}
} : function(e, o, d, n) {
if (n = n || open("", "_blank"), n && (n.document.title = n.document.body.innerText = "downloading..."), typeof e == "string") return u(e, o, d);
var i = e.type === "application/octet-stream", y = /constructor/i.test(t.HTMLElement) || t.safari, b = /CriOS\/[\d]+/.test(navigator.userAgent);
if ((b || i && y || x) && typeof FileReader < "u") {
var m = new FileReader();
m.onloadend = function() {
var c = m.result;
c = b ? c : c.replace(/^data:[^;]*;/, "data:attachment/file;"), n ? n.location.href = c : location = c, n = null;
}, m.readAsDataURL(e);
} else {
var w = t.URL || t.webkitURL, s = w.createObjectURL(e);
n ? n.location = s : location.href = s, n = null, setTimeout(function() {
w.revokeObjectURL(s);
}, 4e4);
}
});
t.saveAs = f.saveAs = f, l.exports = f;
});
}(N)), N.exports;
}
var G = q();
const I = () => [
{
icon: /* @__PURE__ */ r.jsx(z, { size: 20 }),
onClick: (l) => {
G.saveAs(l.src, l.title);
},
label: "Download"
}
], X = A(
({
src: l,
alt: v,
fallbackImage: a
}) => {
const [u, h] = k(!1), p = () => {
h(!0);
};
return /* @__PURE__ */ r.jsx(
"img",
{
src: u && a ? a : l,
alt: v,
className: "max-h-full max-w-full object-contain",
onError: p
}
);
}
), K = A(
({
image: l,
index: v,
onClick: a,
fallbackImage: u
}) => {
const [h, p] = k(!1), t = () => {
p(!0);
};
return /* @__PURE__ */ r.jsx(
"div",
{
className: "aspect-video cursor-pointer overflow-hidden rounded-lg bg-gray-200 transition-opacity hover:opacity-80",
onClick: () => a(v),
children: /* @__PURE__ */ r.jsx(
"img",
{
src: h && u ? u : l.thumbnail || l.src,
alt: l.alt || `Image ${v + 1}`,
className: "h-full w-full object-cover",
onError: t
}
)
},
l.id
);
}
), P = ({
images: l,
actionButtons: v = [],
fallbackImage: a,
className: u,
hasInfo: h,
...p
}) => {
const [t, x] = k(null), [f, e] = k(!1), o = j(() => I(), []), d = j(
() => [...o, ...v],
[o, v]
), n = g((s) => {
x(s), e(!0);
}, []), i = g(() => {
e(!1), x(null);
}, []), y = g(() => {
t !== null && t > 0 && x(t - 1);
}, [t]), b = g(() => {
t !== null && t < l.length - 1 && x(t + 1);
}, [t, l.length]);
R(() => {
const s = (c) => {
if (f)
switch (c.key) {
case "Escape":
i();
break;
case "ArrowLeft":
c.preventDefault(), y();
break;
case "ArrowRight":
c.preventDefault(), b();
break;
}
};
return document.addEventListener("keydown", s), () => document.removeEventListener("keydown", s);
}, [f, y, b, i]), R(() => (f ? document.body.style.overflow = "hidden" : document.body.style.overflow = "unset", () => {
document.body.style.overflow = "unset";
}), [f]);
const m = j(
() => t !== null ? l[t] : null,
[t, l]
), w = j(() => !f || !m ? null : /* @__PURE__ */ r.jsxs("div", { className: "bg-opacity-95 bg-bg fixed inset-0 z-50 flex flex-col items-center justify-center", children: [
/* @__PURE__ */ r.jsxs(
"div",
{
className: "absolute top-0 flex w-full items-start justify-between p-3",
children: [
/* @__PURE__ */ r.jsx("div", { children: m.title && /* @__PURE__ */ r.jsx("h2", { className: "text-body-lg-semi-bold", children: m.title }) }),
/* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-4 py-1", children: [
d.map((s, c) => /* @__PURE__ */ r.jsx(
"button",
{
onClick: () => s.onClick(m),
className: "cursor-pointer",
title: s.label,
children: s.icon
},
c
)),
/* @__PURE__ */ r.jsx(
"button",
{
onClick: i,
className: "cursor-pointer",
title: "Close (Esc)",
children: /* @__PURE__ */ r.jsx(B, { size: 20 })
}
)
] })
]
}
),
F.isNumber(t) && t > 0 && /* @__PURE__ */ r.jsx(
"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__ */ r.jsx(T, { size: 24 })
}
),
F.isNumber(t) && t < l.length - 1 && /* @__PURE__ */ r.jsx(
"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__ */ r.jsx(O, { size: 24 })
}
),
/* @__PURE__ */ r.jsx("div", { className: "flex max-h-full max-w-full items-center justify-center overflow-hidden p-8", children: /* @__PURE__ */ r.jsx(
X,
{
src: m.src,
alt: m.alt || `Image ${t}`,
fallbackImage: a
}
) }),
/* @__PURE__ */ r.jsx("div", { className: "bg-bg absolute bottom-0 w-full", children: /* @__PURE__ */ r.jsx("div", { className: "flex gap-2 overflow-x-auto p-3", children: l.map((s, c) => /* @__PURE__ */ r.jsx(
"div",
{
className: _(
"hover:border-item-primary h-16 min-w-16 shrink-0 cursor-pointer rounded border-3 border-transparent transition-all",
c == t && "border-item-primary"
),
onClick: () => x(c),
children: /* @__PURE__ */ r.jsx(
"img",
{
src: s.thumbnail || s.src,
alt: s.alt || `Thumbnail ${c + 1}`,
className: "size-full object-cover",
onError: (M) => {
a && (M.currentTarget.src = a);
}
}
)
},
s.id
)) }) })
] }), [
f,
a,
m,
d,
i,
t,
y,
l,
b
]);
return /* @__PURE__ */ r.jsxs("div", { className: "w-full", children: [
/* @__PURE__ */ r.jsx(
"div",
{
...p,
className: _(
"grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4",
u
),
children: l.map((s, c) => /* @__PURE__ */ r.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ r.jsx(
K,
{
image: s,
index: c,
onClick: n,
fallbackImage: a
}
),
h && s.title && /* @__PURE__ */ r.jsx(
"div",
{
className: "bg-bg/70 absolute bottom-0 flex min-h-10 w-full items-center justify-center text-center",
children: s.title
}
)
] }, s.id))
}
),
w
] });
}, ee = A(P);
export {
ee as MyGallery
};