@xiping/react-components 0.0.63 → 0.0.64

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

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

package/dist/cjs/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/cjs/components/pinch-content/PinchContent.js

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

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

@@ -1,60 +1,72 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import { Modal as b, ModalContent as g } from "@nextui-org/modal";
-import { IoDownloadOutline as w, IoCloseSharp as x } from "react-icons/io5";
-import v from "../pinch-content/PinchContent.js";
-import C from "react";
-const I = (d) => {
-  const { isOpen: m, onClose: s, imgSrc: t, canDownload: h = !1 } = d, l = Array.isArray(t) ? t : [t], [n, p] = C.useState(0), f = async () => {
-    const o = l[n];
+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 u = await (await fetch(o)).blob(), c = window.URL.createObjectURL(u), r = document.createElement("a");
-      r.href = c, r.download = o.split("/").pop() || "image", document.body.appendChild(r), r.click(), window.URL.revokeObjectURL(c), document.body.removeChild(r);
+      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(
-    b,
+    N,
     {
-      isOpen: m,
+      isOpen: f,
       size: "full",
-      onClose: s,
+      onClose: i,
       className: "bg-black bg-opacity-70",
       hideCloseButton: !0,
       portalContainer: document.body,
-      children: /* @__PURE__ */ e(g, { className: "overflow-hidden", children: /* @__PURE__ */ i("div", { className: "w-screen h-screen relative flex flex-col", children: [
-        /* @__PURE__ */ i("div", { className: "absolute top-2 right-2 flex gap-4 z-10", children: [
-          h && /* @__PURE__ */ e(
-            w,
+      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: f
+              onClick: w
             }
           ),
           /* @__PURE__ */ e(
-            x,
+            I,
             {
               size: 24,
               className: "text-white cursor-pointer",
-              onClick: s
+              onClick: i
             }
           )
         ] }),
-        /* @__PURE__ */ e("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ e(v, { canRotate: !1, children: /* @__PURE__ */ e(
-          "img",
-          {
-            draggable: "false",
-            src: l[n],
-            alt: "",
-            className: "w-screen h-full object-contain pointer-events-none"
-          }
-        ) }) }),
-        l.length > 1 && /* @__PURE__ */ e("div", { className: "h-24 bg-black bg-opacity-50 shrink-0", children: /* @__PURE__ */ e("div", { className: "w-full h-full overflow-x-auto flex gap-2 p-2", children: l.map((o, a) => /* @__PURE__ */ e(
+        /* @__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",
           {
-            className: `h-full aspect-square flex-shrink-0 cursor-pointer border-2 ${a === n ? "border-white" : "border-transparent"}`,
-            onClick: () => p(a),
+            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",
               {
@@ -72,5 +84,5 @@ const I = (d) => {
   );
 };
 export {
-  I 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
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xiping/react-components",
   "private": false,
-  "version": "0.0.63",
+  "version": "0.0.64",
   "type": "module",
   "main": "./dist/cjs/index.js",
   "module": "./dist/es/index.js",
@@ -36,6 +36,7 @@
     "@nextui-org/button": "^2.2.9",
     "@nextui-org/modal": "^2.2.7",
     "@nextui-org/react": "^2.6.11",
+    "@nextui-org/spinner": "^2.2.6",
     "@nextui-org/system": "^2.4.6",
     "@nextui-org/theme": "^2.4.5",
     "@react-spring/web": "^9.7.5",
@@ -95,5 +96,5 @@
   "engines": {
     "node": ">=18"
   },
-  "gitHead": "d624dbba9ebc4cfafeddf2af148d5564a0e660bb"
+  "gitHead": "9c8a13d9074b79d663541dadce6e4ab6a4462443"
 }