@xiping/react-components 1.0.13 → 1.0.15

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

@@ -1 +1,9 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),m=require("@heroui/modal"),S=require("@heroui/spinner"),p=require("react-icons/io5"),z=require("../pinch-content/PinchContent.js"),L=require("@radix-ui/react-scroll-area"),f=require("react"),O=require("clsx");function q(t){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const s in t)if(s!=="default"){const a=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(o,s,a.get?a:{enumerable:!0,get:()=>t[s]})}}return o.default=t,Object.freeze(o)}const i=q(L),x=t=>{t.preventDefault()},I=t=>{const{isOpen:o,onClose:s,imgSrc:a,canDownload:g=!1,wrapperClassName:j}=t,c=Array.isArray(a)?a:[a],[d,w]=f.useState(0),[v,u]=f.useState(!0),h=()=>{u(!0),s()},N=async()=>{const r=c[d];try{const k=await(await fetch(r)).blob(),b=window.URL.createObjectURL(k),l=document.createElement("a");l.href=b,l.download=r.split("/").pop()||"image",document.body.appendChild(l),l.click(),window.URL.revokeObjectURL(b),document.body.removeChild(l)}catch(n){console.error("Error downloading image:",n)}},y=()=>{u(!1)},C=()=>{u(!1)};return f.useEffect(()=>{if(o)return document.addEventListener("touchmove",x,{passive:!1}),()=>{document.removeEventListener("touchmove",x)}},[o]),e.jsx(m.Modal,{isOpen:o,size:"full",onClose:h,classNames:{wrapper:O("",j)},className:"bg-black bg-opacity-70",hideCloseButton:!0,portalContainer:document.body,children:e.jsx(m.ModalContent,{className:"overflow-hidden",children:e.jsxs("div",{className:"w-screen h-screen relative flex flex-col pt-safe-offset-0",children:[e.jsxs("div",{className:"absolute top-2 right-2 flex gap-4 z-10",children:[g&&e.jsx(p.IoDownloadOutline,{size:24,className:"text-white cursor-pointer",onClick:N}),e.jsx(p.IoCloseSharp,{size:24,className:"text-white cursor-pointer",onClick:h})]}),e.jsxs("div",{className:"flex-1 min-h-0 relative flex items-center justify-center",children:[e.jsx(z.default,{canRotate:!1,className:"w-full h-full",children:e.jsx("img",{draggable:"false",src:c[d],alt:"",className:"w-screen h-full object-contain pointer-events-none",onLoad:y,onError:C})}),v&&e.jsx("div",{className:"absolute inset-0 flex items-center justify-center bg-black bg-opacity-50",children:e.jsx(S.Spinner,{color:"white",size:"lg"})})]}),c.length>1&&e.jsx("div",{className:"h-24 bg-black bg-opacity-50 shrink-0 z-10 pb-safe-offset-0 pl-safe-offset-0 pr-safe-offset-0",children:e.jsxs(i.Root,{className:"h-24 w-screen",type:"auto",children:[e.jsx(i.Viewport,{className:"pppp h-full w-full",children:e.jsx("div",{className:"flex gap-2 p-2 h-24",children:c.map((r,n)=>e.jsx("div",{className:`h-full aspect-square flex-shrink-0 cursor-pointer border-2 transition-all ${n===d?"border-white":"border-transparent"}`,onClick:()=>w(n),children:e.jsx("img",{src:r,alt:"",className:"w-full h-full object-contain",draggable:"false"})},r))})}),e.jsx(i.Scrollbar,{className:"flex select-none touch-none p-0.5 bg-black/50 transition-colors duration-150 ease-out hover:bg-black/80 data-[orientation=horizontal]:h-2.5 data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col",orientation:"horizontal",children:e.jsx(i.Thumb,{className:"flex-1 bg-white/50 rounded-[10px] relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]"})})]})})]})})})};exports.default=I;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),v=require("@heroui/modal"),O=require("@heroui/spinner"),x=require("react-icons/io5"),z=require("../pinch-content/PinchContent.js"),o=require("motion/react"),u=require("react"),D=require("clsx"),$=n=>{n.target.closest(".image-viewer-main-content")&&n.preventDefault()},j="0%",U="100%",y="20%",g="80%",i="#0000",s="#000";function P(n){const t=o.useMotionValue(`linear-gradient(90deg, ${s}, ${s} ${j}, ${s} ${g}, ${i})`);return o.useMotionValueEvent(n,"change",c=>{c===0?o.animate(t,`linear-gradient(90deg, ${s}, ${s} ${j}, ${s} ${g}, ${i})`):c===1?o.animate(t,`linear-gradient(90deg, ${i}, ${s} ${y}, ${s} ${U}, ${s})`):(n.getPrevious()===0||n.getPrevious()===1)&&o.animate(t,`linear-gradient(90deg, ${i}, ${s} ${y}, ${s} ${g}, ${i})`)}),t}const V=n=>{const{isOpen:t,onClose:c,imgSrc:m,canDownload:C=!1,wrapperClassName:N}=n,d=Array.isArray(m)?m:[m],[f,k]=u.useState(0),[I,h]=u.useState(!0),p=u.useRef(null),b=()=>{h(!0),c()},S=async()=>{const a=d[f];try{const M=await(await fetch(a)).blob(),w=window.URL.createObjectURL(M),l=document.createElement("a");l.href=w,l.download=a.split("/").pop()||"image",document.body.appendChild(l),l.click(),window.URL.revokeObjectURL(w),document.body.removeChild(l)}catch(r){console.error("Error downloading image:",r)}},q=()=>{h(!1)},E=()=>{h(!1)};u.useEffect(()=>{if(t)return document.addEventListener("touchmove",$,{passive:!1}),()=>{document.removeEventListener("touchmove",$)}},[t]);const{scrollXProgress:L}=o.useScroll({container:p}),R=P(L);return e.jsx(v.Modal,{isOpen:t,size:"full",onClose:b,classNames:{wrapper:D("",N)},className:"bg-black bg-opacity-70",hideCloseButton:!0,portalContainer:document.body,children:e.jsx(v.ModalContent,{className:"overflow-hidden",children:e.jsxs("div",{className:"w-screen h-screen relative flex flex-col pt-safe-offset-0",children:[e.jsxs("div",{className:"absolute top-2 right-2 flex gap-4 z-10",children:[C&&e.jsx(x.IoDownloadOutline,{size:24,className:"text-white cursor-pointer",onClick:S}),e.jsx(x.IoCloseSharp,{size:24,className:"text-white cursor-pointer",onClick:b})]}),e.jsxs("div",{className:"flex-1 min-h-0 relative flex items-center justify-center image-viewer-main-content",children:[e.jsx(z.default,{canRotate:!1,className:"w-full h-full",children:e.jsx("img",{draggable:"false",src:d[f],alt:"",className:"w-screen h-full object-contain pointer-events-none",onLoad:q,onError:E})}),I&&e.jsx("div",{className:"absolute inset-0 flex items-center justify-center bg-black bg-opacity-50",children:e.jsx(O.Spinner,{color:"white",size:"lg"})})]}),d.length>1&&e.jsx("div",{className:"h-24 bg-black bg-opacity-50 shrink-0 z-10 pb-safe-offset-0 pl-safe-offset-0 pr-safe-offset-0",children:e.jsx(o.motion.div,{ref:p,style:{maskImage:R,WebkitOverflowScrolling:"touch",scrollbarWidth:"none",msOverflowStyle:"none"},className:"h-24 w-screen overflow-x-auto overflow-y-hidden scrollbar-hide",children:e.jsx("div",{className:"flex gap-2 p-2 h-24 min-w-max",children:d.map((a,r)=>e.jsx("div",{className:`h-full aspect-square flex-shrink-0 cursor-pointer border-2 transition-all ${r===f?"border-white":"border-transparent"}`,onClick:()=>k(r),children:e.jsx("img",{src:a,alt:"",className:"w-full h-full object-contain",draggable:"false"})},a))})})})]})})})},_=`
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+`;if(typeof document<"u"){const n="image-viewer-scrollbar-hide";if(!document.getElementById(n)){const t=document.createElement("style");t.id=n,t.textContent=_,document.head.appendChild(t)}}exports.default=V;

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

@@ -1,15 +1,18 @@
-import { ReactNode } from 'react';
+import { ReactNode, CSSProperties } from 'react';
 export interface PinchContentProps {
     className?: string;
     children?: ReactNode;
     canDrag?: boolean;
     canPinch?: boolean;
     canRotate?: boolean;
+    pinchWithoutMove?: boolean;
     scaleBounds?: {
         min: number;
         max: number;
     };
     wheelZoomFactor?: number;
+    rubberband?: boolean;
+    style?: CSSProperties;
 }
 declare const PinchContent: (props: PinchContentProps) => import("react/jsx-runtime").JSX.Element;
 export default PinchContent;

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

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

package/dist/cjs/components/qr-code/index.d.ts

@@ -44,71 +44,58 @@ type ImageSettings = {
      * the attribute behaves differently than the empty string.
      */
     crossOrigin?: CrossOrigin;
+    /**
+     * 图片渲染质量
+     * @defaultValue 'high'
+     */
+    imageQuality?: 'low' | 'medium' | 'high';
 };
 export interface QRCodeProps {
     /**
-     * The value to encode into the QR Code. An array of strings can be passed in
-     * to represent multiple segments to further optimize the QR Code.
+     * 要编码到二维码中的值
      */
-    value: string | string[];
+    value: string;
     /**
-     * The size, in pixels, to render the QR Code.
+     * 二维码的渲染尺寸（像素）
      * @defaultValue 128
      */
     size?: number;
     /**
-     * The Error Correction Level to use.
-     * @see https://www.qrcode.com/en/about/error_correction.html
-     * @defaultValue L
+     * 错误纠正级别
+     * @defaultValue M
      */
     level?: ErrorCorrectionLevel;
     /**
-     * The background color used to render the QR Code.
-     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+     * 二维码的背景颜色
      * @defaultValue #FFFFFF
      */
     bgColor?: string;
     /**
-     * The foregtound color used to render the QR Code.
-     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+     * 二维码的前景颜色
      * @defaultValue #000000
      */
     fgColor?: string;
     /**
-     * Whether or not a margin of 4 modules should be rendered as a part of the
-     * QR Code.
-     * @deprecated Use `marginSize` instead.
-     * @defaultValue false
-     */
-    includeMargin?: boolean;
-    /**
-     * The number of _modules_ to use for margin. The QR Code specification
-     * requires `4`, however you can specify any number. Values will be turned to
-     * integers with `Math.floor`. Overrides `includeMargin` when both are specified.
-     * @defaultValue 0
+     * 二维码边距的模块数量
+     * @defaultValue 4
      */
     marginSize?: number;
     /**
-     * The title to assign to the QR Code. Used for accessibility reasons.
+     * 二维码的标题（用于无障碍访问）
      */
     title?: string;
     /**
-     * The minimum version used when encoding the QR Code. Valid values are 1-40
-     * with higher values resulting in more complex QR Codes. The optimal
-     * (lowest) version is determined for the `value` provided, using `minVersion`
-     * as the lower bound.
+     * 编码二维码时使用的最小版本（1-40）
      * @defaultValue 1
      */
     minVersion?: number;
     /**
-     * If enabled, the Error Correction Level of the result may be higher than
-     * the specified Error Correction Level option if it can be done without
-     * increasing the version.
+     * 是否允许在可能的情况下提高错误纠正级别
      * @defaultValue true
      */
     boostLevel?: boolean;
     /**
-     * The settings for the embedded image.
+     * 嵌入图片的设置
      */
     imageSettings?: ImageSettings;
 }