@itera-web/react-ui-qrcode 1.7.0

package/README.md

@@ -0,0 +1 @@
+### [使用文档](http://iterative.keyboardecho.com/)

package/es/QRCode.d.ts

@@ -0,0 +1,39 @@
+import React, { CSSProperties, ReactNode } from 'react';
+export type QRCodeRenderAs = 'canvas' | 'img' | 'svg';
+export type QRCodeLevel = 'L' | 'M' | 'Q' | 'H';
+export interface QRCodeProps {
+    /** 要编码的字符串（必需） */
+    value: string;
+    /** 二维码像素尺寸（默认 160） */
+    size?: number;
+    /** 容错等级 */
+    level?: QRCodeLevel;
+    /** 背景色 */
+    bgColor?: string;
+    /** 前景色 */
+    fgColor?: string;
+    /** 渲染方式 */
+    renderAs?: QRCodeRenderAs;
+    /** 是否包含外部白边 */
+    includeMargin?: boolean;
+    /** className */
+    className?: string;
+    /** style */
+    style?: CSSProperties;
+    /** alt */
+    alt?: string;
+    /** 渲染完成回调 */
+    onLoad?: () => void;
+    /** 中间的图标，可以是图片 URL 或 ReactNode */
+    icon?: string | ReactNode;
+    /** 图标大小（像素，默认 size 的 20%） */
+    iconSize?: number;
+}
+export interface QRCodeRef {
+    /** 获取二维码 DataURL */
+    toDataURL: () => Promise<string | null>;
+    /** 下载二维码 */
+    download: (filename?: string) => Promise<void>;
+}
+declare const QRCode: React.ForwardRefExoticComponent<QRCodeProps & React.RefAttributes<QRCodeRef>>;
+export { QRCode };

package/es/index.d.ts

@@ -0,0 +1 @@
+export { QRCode } from './QRCode';

package/es/index.js

@@ -0,0 +1 @@
+import*as e from"qrcode";import*as t from"react";var r={d:(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},n={};r.d(n,{s:()=>s});const a=(e=>{var t={};return r.d(t,e),t})({default:()=>e.default});const o=(e=>{var t={};return r.d(t,e),t})({default:()=>t.default,forwardRef:()=>t.forwardRef,useEffect:()=>t.useEffect,useImperativeHandle:()=>t.useImperativeHandle,useRef:()=>t.useRef,useState:()=>t.useState});var i=function(){return i=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var a in t=arguments[r])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e},i.apply(this,arguments)},c=function(e,t,r,n){return new(r||(r=Promise))(function(a,o){function i(e){try{l(n.next(e))}catch(e){o(e)}}function c(e){try{l(n.throw(e))}catch(e){o(e)}}function l(e){var t;e.done?a(e.value):(t=e.value,t instanceof r?t:new r(function(e){e(t)})).then(i,c)}l((n=n.apply(e,t||[])).next())})},l=function(e,t){var r,n,a,o={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]},i=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return i.next=c(0),i.throw=c(1),i.return=c(2),"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function c(c){return function(l){return function(c){if(r)throw new TypeError("Generator is already executing.");for(;i&&(i=0,c[0]&&(o=0)),o;)try{if(r=1,n&&(a=2&c[0]?n.return:c[0]?n.throw||((a=n.return)&&a.call(n),0):n.next)&&!(a=a.call(n,c[1])).done)return a;switch(n=0,a&&(c=[2&c[0],a.value]),c[0]){case 0:case 1:a=c;break;case 4:return o.label++,{value:c[1],done:!1};case 5:o.label++,n=c[1],c=[0];continue;case 7:c=o.ops.pop(),o.trys.pop();continue;default:if(!(a=o.trys,(a=a.length>0&&a[a.length-1])||6!==c[0]&&2!==c[0])){o=0;continue}if(3===c[0]&&(!a||c[1]>a[0]&&c[1]<a[3])){o.label=c[1];break}if(6===c[0]&&o.label<a[1]){o.label=a[1],a=c;break}if(a&&o.label<a[2]){o.label=a[2],o.ops.push(c);break}a[2]&&o.ops.pop(),o.trys.pop();continue}c=t.call(e,o)}catch(e){c=[6,e],n=0}finally{r=a=0}if(5&c[0])throw c[1];return{value:c[0]?c[1]:void 0,done:!0}}([c,l])}}},u=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)t.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(r[n[a]]=e[n[a]])}return r},s=(0,o.forwardRef)(function(e,t){var r=e.value,n=e.size,s=void 0===n?160:n,f=e.level,d=void 0===f?"M":f,v=e.bgColor,h=void 0===v?"#fff":v,p=e.fgColor,b=void 0===p?"#000":p,y=e.renderAs,g=void 0===y?"canvas":y,m=e.includeMargin,w=void 0!==m&&m,R=e.className,O=e.style,L=e.alt,j=void 0===L?"qrcode":L,U=e.onLoad,k=e.icon,E=e.iconSize,S=u(e,["value","size","level","bgColor","fgColor","renderAs","includeMargin","className","style","alt","onLoad","icon","iconSize"]),x=(0,o.useRef)(null),C=(0,o.useRef)(null),I=(0,o.useRef)(null),P=(0,o.useState)(null),D=P[0],H=P[1],M={errorCorrectionLevel:d,margin:w?4:0,color:{dark:b,light:h},width:s};(0,o.useEffect)(function(){if(r){var e=!1;return function(){c(this,void 0,void 0,function(){var t,n,o,c,u,s;return l(this,function(l){switch(l.label){case 0:return l.trys.push([0,7,,8]),"canvas"!==g?[3,2]:(t=x.current)?[4,a.default.toCanvas(t,r,M)]:[2];case 1:return l.sent(),e||(n=t.toDataURL("image/png"),H(n),null==U||U()),[3,6];case 2:return"img"!==g?[3,4]:[4,a.default.toDataURL(r,M)];case 3:return o=l.sent(),!e&&C.current&&(C.current.src=o,H(o),null==U||U()),[3,6];case 4:return"svg"!==g?[3,6]:[4,a.default.toString(r,i(i({},M),{type:"svg"}))];case 5:c=l.sent(),!e&&I.current&&(I.current.innerHTML=c,u=new Blob([c],{type:"image/svg+xml"}),s=URL.createObjectURL(u),H(s),null==U||U()),l.label=6;case 6:return[3,8];case 7:return l.sent(),[3,8];case 8:return[2]}})})}(),function(){if(e=!0,D&&"svg"===g)try{URL.revokeObjectURL(D)}catch(e){}}}},[r,s,d,b,h,g,w]),(0,o.useImperativeHandle)(t,function(){return{toDataURL:function(){return c(this,void 0,void 0,function(){var e,t;return l(this,function(n){switch(n.label){case 0:return r?"img"===g&&(null===(t=C.current)||void 0===t?void 0:t.src)?[2,C.current.src]:"canvas"===g&&x.current?[2,x.current.toDataURL("image/png")]:"svg"!==g?[3,2]:[4,a.default.toString(r,i(i({},M),{type:"svg"}))]:[2,null];case 1:return e=n.sent(),[2,"data:image/svg+xml;base64,".concat(btoa(unescape(encodeURIComponent(e))))];case 2:return[2,a.default.toDataURL(r,M)]}})})},download:function(){return c(this,arguments,void 0,function(e){var t,r,n,a;return void 0===e&&(e="qrcode.png"),l(this,function(o){switch(o.label){case 0:return[4,this.toDataURL()];case 1:if(!(t=o.sent()))return[2];if(!t.startsWith("blob:"))return[3,7];o.label=2;case 2:return o.trys.push([2,5,,6]),[4,fetch(t)];case 3:return[4,o.sent().blob()];case 4:return r=o.sent(),(n=document.createElement("a")).href=URL.createObjectURL(r),n.download=e,document.body.appendChild(n),n.click(),n.remove(),URL.revokeObjectURL(n.href),[3,6];case 5:return o.sent(),[3,6];case 6:return[2];case 7:return(a=document.createElement("a")).href=t,a.download=e,document.body.appendChild(a),a.click(),a.remove(),[2]}})})}}});return o.default.createElement("div",i({className:R,style:i({display:"inline-block",width:s,height:s,lineHeight:0,position:"relative"},O)},S),"canvas"===g&&o.default.createElement("canvas",{"aria-label":j,height:s,ref:x,style:{width:s,height:s,display:"block"},width:s}),"img"===g&&o.default.createElement("img",{alt:j,height:s,ref:C,style:{display:"block",width:s,height:s},width:s}),"svg"===g&&o.default.createElement("div",{"aria-hidden":"true",ref:I,style:{width:s,height:s,display:"inline-block"}}),function(){if(!k)return null;var e=function(e){switch(e){case"L":return.15;case"M":default:return.2;case"Q":return.25;case"H":return.3}}(d),t=s*e,r=Math.min(null!=E?E:.25*s,t),n={width:r,height:r,position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",objectFit:"contain",borderRadius:4};return"string"==typeof k?o.default.createElement("img",{alt:"qrcode-icon",src:k,style:n}):o.default.createElement("div",{style:n},k)}())}),f=n.s;export{f as QRCode};

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@itera-web/react-ui-qrcode",
+  "description": "基于 qrcode 的 二维码",
+  "version": "1.7.0",
+  "main": "es/index.js",
+  "types": "es/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "itera-cli package",
+    "up": "npm publish"
+  },
+  "dependencies": {
+    "@itera-web/utils-cn": "^1.20.0",
+    "qrcode": "^1.5.4"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@itera-web/cli": "^1.1.45"
+  },
+  "gitHead": "691b2592db8668e5d52c9712bb906484b92cb79b"
+}