@xiping/react-components 0.0.62 → 0.0.64

package/dist/es/components/image-viewer/ImageViewer.d.ts

@@ -1,7 +1,8 @@
 interface ImageViewerProps {
     isOpen: boolean;
-    imgSrc: string;
+    imgSrc: string | string[];
     onClose: () => void;
+    canDownload?: boolean;
 }
 declare const ImageViewer: (props: ImageViewerProps) => import("react/jsx-runtime").JSX.Element;
 export default ImageViewer;

package/dist/es/components/image-viewer/ImageViewer.js

@@ -1,39 +1,88 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { Modal as r, ModalContent as n } from "@nextui-org/modal";
-import { IoCloseSharp as i } from "react-icons/io5";
-import c from "../pinch-content/PinchContent.js";
-const f = (l) => {
-  const { isOpen: o, onClose: s, imgSrc: t } = l;
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { Modal as N, ModalContent as y } from "@nextui-org/modal";
+import { Spinner as k } from "@nextui-org/spinner";
+import { IoDownloadOutline as j, IoCloseSharp as I } from "react-icons/io5";
+import L from "../pinch-content/PinchContent.js";
+import { useState as m } from "react";
+const D = (h) => {
+  const { isOpen: f, onClose: u, imgSrc: t, canDownload: p = !1 } = h, r = Array.isArray(t) ? t : [t], [n, g] = m(0), [b, s] = m(!0), i = () => {
+    s(!0), u();
+  }, w = async () => {
+    const o = r[n];
+    try {
+      const C = await (await fetch(o)).blob(), d = window.URL.createObjectURL(C), l = document.createElement("a");
+      l.href = d, l.download = o.split("/").pop() || "image", document.body.appendChild(l), l.click(), window.URL.revokeObjectURL(d), document.body.removeChild(l);
+    } catch (a) {
+      console.error("Error downloading image:", a);
+    }
+  }, x = () => {
+    s(!1);
+  }, v = () => {
+    s(!1);
+  };
   return /* @__PURE__ */ e(
-    r,
+    N,
     {
-      isOpen: o,
+      isOpen: f,
       size: "full",
-      onClose: s,
-      className: "pppp bg-black bg-opacity-70",
+      onClose: i,
+      className: "bg-black bg-opacity-70",
       hideCloseButton: !0,
-      children: /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ a("div", { className: "w-screen h-screen relative", children: [
-        /* @__PURE__ */ e(
-          i,
-          {
-            size: 24,
-            className: "absolute top-2 right-2 text-white z-10",
-            onClick: s
-          }
-        ),
-        /* @__PURE__ */ e("div", { className: "w-full h-full", children: /* @__PURE__ */ e(c, { canRotate: !1, children: /* @__PURE__ */ e(
-          "img",
+      portalContainer: document.body,
+      children: /* @__PURE__ */ e(y, { className: "overflow-hidden", children: /* @__PURE__ */ c("div", { className: "w-screen h-screen relative flex flex-col", children: [
+        /* @__PURE__ */ c("div", { className: "absolute top-2 right-2 flex gap-4 z-10", children: [
+          p && /* @__PURE__ */ e(
+            j,
+            {
+              size: 24,
+              className: "text-white cursor-pointer",
+              onClick: w
+            }
+          ),
+          /* @__PURE__ */ e(
+            I,
+            {
+              size: 24,
+              className: "text-white cursor-pointer",
+              onClick: i
+            }
+          )
+        ] }),
+        /* @__PURE__ */ c("div", { className: "flex-1 min-h-0 relative flex items-center justify-center", children: [
+          /* @__PURE__ */ e(L, { canRotate: !1, className: "w-full h-full", children: /* @__PURE__ */ e(
+            "img",
+            {
+              draggable: "false",
+              src: r[n],
+              alt: "",
+              className: "w-screen h-full object-contain pointer-events-none",
+              onLoad: x,
+              onError: v
+            }
+          ) }),
+          b && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center bg-black bg-opacity-50", children: /* @__PURE__ */ e(k, { color: "white", size: "lg" }) })
+        ] }),
+        r.length > 1 && /* @__PURE__ */ e("div", { className: "h-24 bg-black bg-opacity-50 shrink-0 z-10", children: /* @__PURE__ */ e("div", { className: "w-full h-full overflow-x-auto flex gap-2 p-2", children: r.map((o, a) => /* @__PURE__ */ e(
+          "div",
           {
-            draggable: "false",
-            src: t,
-            alt: "",
-            className: "w-screen h-screen object-contain pointer-events-none"
-          }
-        ) }) })
+            className: `h-full aspect-square flex-shrink-0 cursor-pointer border-2 transition-all ${a === n ? "border-white" : "border-transparent"}`,
+            onClick: () => g(a),
+            children: /* @__PURE__ */ e(
+              "img",
+              {
+                src: o,
+                alt: "",
+                className: "w-full h-full object-contain",
+                draggable: "false"
+              }
+            )
+          },
+          o
+        )) }) })
       ] }) })
     }
   );
 };
 export {
-  f as default
+  D as default
 };

package/dist/es/components/pinch-content/PinchContent.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 export interface PinchContentProps {
+    className?: string;
     children?: ReactNode;
     canDrag?: boolean;
     canPinch?: boolean;

package/dist/es/components/pinch-content/PinchContent.js

@@ -1,61 +1,72 @@
-import { jsx as f } from "react/jsx-runtime";
-import { useSpring as B, animated as C } from "@react-spring/web";
-import { createUseGesture as G, dragAction as N, pinchAction as U } from "@use-gesture/react";
-import { useRef as j } from "react";
-import { useMount as w, useUnmount as M } from "ahooks";
-const S = G([N, U]), o = (i) => i.preventDefault(), I = (i) => {
+import { jsx as B } from "react/jsx-runtime";
+import { useSpring as C, animated as G } from "@react-spring/web";
+import { createUseGesture as N, dragAction as U, pinchAction as j } from "@use-gesture/react";
+import { useRef as w } from "react";
+import { useMount as M, useUnmount as S } from "ahooks";
+import k from "clsx";
+const q = N([U, j]), o = (u) => u.preventDefault(), O = (u) => {
   const {
+    className: f,
     children: l,
-    canPinch: h = !0,
-    canDrag: v = !0,
-    canRotate: p = !0,
-    scaleBounds: m = { min: 0.3, max: 8 }
-  } = i, t = j(null);
-  w(() => {
+    canPinch: m = !0,
+    canDrag: p = !0,
+    canRotate: h = !0,
+    scaleBounds: v = { min: 0.3, max: 10 }
+  } = u, t = w(null);
+  M(() => {
     var r, e, n;
     (r = t.current) == null || r.addEventListener("gesturestart", o), (e = t.current) == null || e.addEventListener("gesturechange", o), (n = t.current) == null || n.addEventListener("gestureend", o);
-  }), M(() => {
+  }), S(() => {
     var r, e, n;
     (r = t.current) == null || r.removeEventListener("gesturestart", o), (e = t.current) == null || e.removeEventListener("gesturechange", o), (n = t.current) == null || n.removeEventListener("gestureend", o);
   });
-  const [c, g] = B(() => ({
+  const [c, g] = C(() => ({
     x: 0,
     y: 0,
     scale: 1,
     rotateZ: 0
   }));
-  return S(
+  return q(
     {
       // onHover: ({ active, event }) => console.log('hover', event, active),
       // onMove: ({ event }) => console.log('move', event),
-      onDrag: ({ pinching: r, cancel: e, offset: [n, a], ...u }) => {
-        if (console.log(u), !v || r) return e();
+      onDrag: ({ pinching: r, cancel: e, offset: [n, a], ...i }) => {
+        if (console.log(i), !p || r) return e();
         g.start({ x: n, y: a });
       },
       onPinch: ({
         origin: [r, e],
         first: n,
         movement: [a],
-        offset: [u, x],
+        offset: [i, x],
         memo: s,
         cancel: y
       }) => {
-        if (!h) return y();
+        if (!m) return y();
         if (n) {
           const { width: b, height: D, x: P, y: R } = t.current.getBoundingClientRect(), Z = r - (P + b / 2), A = e - (R + D / 2);
           s = [c.x.get(), c.y.get(), Z, A];
         }
-        const E = s[0] - (a - 1) * s[2], L = s[1] - (a - 1) * s[3], d = { scale: u, rotateZ: 0, x: E, y: L };
-        return p && (d.rotateZ = x), g.start(d), s;
+        const E = s[0] - (a - 1) * s[2], L = s[1] - (a - 1) * s[3], d = { scale: i, rotateZ: 0, x: E, y: L };
+        return h && (d.rotateZ = x), g.start(d), s;
       }
     },
     {
       target: t,
       drag: { from: () => [c.x.get(), c.y.get()] },
-      pinch: { scaleBounds: m, rubberband: !0 }
+      pinch: { scaleBounds: v, rubberband: !0 }
     }
-  ), /* @__PURE__ */ f("div", { className: "flex fill center", children: /* @__PURE__ */ f(C.div, { className: "select-none", ref: t, style: c, children: l }) });
+  ), // <div className="flex items-center justify-center h-full w-full">
+  /* @__PURE__ */ B(
+    G.div,
+    {
+      className: k("select-none", f),
+      ref: t,
+      style: c,
+      children: l
+    }
+  );
 };
 export {
-  I as default
+  O as default
 };