@xiping/react-components 1.0.13 → 1.0.14

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;
 }

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

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

package/dist/es/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;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xiping/react-components",
   "private": false,
-  "version": "1.0.13",
+  "version": "1.0.14",
   "type": "module",
   "main": "./dist/cjs/index.js",
   "module": "./dist/es/index.js",
@@ -48,7 +48,8 @@
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "lodash-es": "^4.17.21",
-    "motion": "^12.17.0",
+    "motion": "^12.18.1",
+    "qrcode": "^1.5.4",
     "qrcode.react": "^4.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -64,10 +65,11 @@
     "@eslint/js": "^9.29.0",
     "@faker-js/faker": "^9.8.0",
     "@storybook/addon-docs": "^9.0.10",
-    "@storybook/addon-onboarding": "^9.0.9",
-    "@storybook/react-vite": "^9.0.9",
+    "@storybook/addon-onboarding": "^9.0.10",
+    "@storybook/react-vite": "^9.0.10",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.15.31",
+    "@types/node": "^22.15.32",
+    "@types/qrcode": "^1.5.5",
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
     "@vitejs/plugin-react": "^4.5.2",
@@ -75,19 +77,19 @@
     "eslint": "^9.29.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
-    "eslint-plugin-storybook": "^9.0.10",
+    "eslint-plugin-storybook": "^9.0.11",
     "globals": "^16.2.0",
-    "postcss": "^8.5.5",
+    "postcss": "^8.5.6",
     "rollup-preserve-directives": "^1.1.3",
     "sharp": "^0.34.2",
-    "storybook": "^9.0.9",
+    "storybook": "^9.0.10",
     "svgo": "^3.3.2",
     "tailwind-merge": "^2.6.0",
     "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "^3.4.17",
     "tailwindcss-safe-area": "^0.6.0",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.34.0",
+    "typescript-eslint": "^8.34.1",
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-image-optimizer": "^1.1.8",
@@ -102,5 +104,5 @@
   "engines": {
     "node": ">=20"
   },
-  "gitHead": "2241fd579443d54339afba75c192a73d68f9043e"
+  "gitHead": "762cae9539bf1baba146a43651393fc3140bd4ad"
 }