ydb-components-material 0.1.20 → 0.1.21

package/es/components/qr-code/index.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import './index.scss';
 export interface QRCodeImgProps {
     /**
      * 类型

package/es/components/qr-code/index.js

@@ -1,11 +1,24 @@
 import * as React from 'react';
 import { useEffect, useRef } from 'react';
 import QRCode from 'qrcode';
+import "./index.scss";
 var QRCodeImg = function QRCodeImg(_ref) {
   var url = _ref.url,
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? {} : _ref$style;
   var canvasRef = useRef(null);
+
+  // 保存为PNG
+  var saveAsPNG = function saveAsPNG() {
+    var canvas = canvasRef.current;
+    if (!canvas) return;
+
+    // 创建临时链接
+    var link = document.createElement('a');
+    link.download = 'qrcode.png';
+    link.href = canvas.toDataURL('image/png');
+    link.click();
+  };
   useEffect(function () {
     if (canvasRef.current) {
       QRCode.toCanvas(canvasRef.current, url, function (error) {
@@ -13,10 +26,17 @@ var QRCodeImg = function QRCodeImg(_ref) {
       });
     }
   }, [url]);
-  return /*#__PURE__*/React.createElement("canvas", {
-    ref: canvasRef,
+  return /*#__PURE__*/React.createElement("div", {
+    className: "qrcode",
     style: style
-  });
+  }, /*#__PURE__*/React.createElement("canvas", {
+    ref: canvasRef
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "text"
+  }, "\u4F7F\u7528\u4E09\u664B\u901A\u5C0F\u7A0B\u5E8F\u626B\u7801\u67E5\u770B\u529E\u4EF6"), /*#__PURE__*/React.createElement("div", {
+    className: "btn",
+    onClick: saveAsPNG
+  }, "\u4FDD\u5B58\u4E8C\u7EF4\u7801"));
 };
 QRCodeImg.displayName = 'QRCodeImg';
 export default QRCodeImg;

package/es/components/qr-code/index.scss

@@ -0,0 +1,18 @@
+.qrcode {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .text {
+    width: 100%;
+    text-align: center;
+    color: #666666;
+    font-size: 14px;
+  }
+  .btn {
+    color: #1678FF;
+    margin-top: 8px;
+    font-size: 14px;
+  }
+}
+

package/lib/components/qr-code/index.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import './index.scss';
 export interface QRCodeImgProps {
     /**
      * 类型

package/lib/components/qr-code/index.js

@@ -6,12 +6,25 @@ exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _qrcode = _interopRequireDefault(require("qrcode"));
+require("./index.scss");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var QRCodeImg = function QRCodeImg(_ref) {
   var url = _ref.url,
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? {} : _ref$style;
   var canvasRef = (0, _react.useRef)(null);
+
+  // 保存为PNG
+  var saveAsPNG = function saveAsPNG() {
+    var canvas = canvasRef.current;
+    if (!canvas) return;
+
+    // 创建临时链接
+    var link = document.createElement('a');
+    link.download = 'qrcode.png';
+    link.href = canvas.toDataURL('image/png');
+    link.click();
+  };
   (0, _react.useEffect)(function () {
     if (canvasRef.current) {
       _qrcode["default"].toCanvas(canvasRef.current, url, function (error) {
@@ -19,10 +32,17 @@ var QRCodeImg = function QRCodeImg(_ref) {
       });
     }
   }, [url]);
-  return /*#__PURE__*/React.createElement("canvas", {
-    ref: canvasRef,
+  return /*#__PURE__*/React.createElement("div", {
+    className: "qrcode",
     style: style
-  });
+  }, /*#__PURE__*/React.createElement("canvas", {
+    ref: canvasRef
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "text"
+  }, "\u4F7F\u7528\u4E09\u664B\u901A\u5C0F\u7A0B\u5E8F\u626B\u7801\u67E5\u770B\u529E\u4EF6"), /*#__PURE__*/React.createElement("div", {
+    className: "btn",
+    onClick: saveAsPNG
+  }, "\u4FDD\u5B58\u4E8C\u7EF4\u7801"));
 };
 QRCodeImg.displayName = 'QRCodeImg';
 var _default = exports["default"] = QRCodeImg;

package/lib/components/qr-code/index.scss

@@ -0,0 +1,18 @@
+.qrcode {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .text {
+    width: 100%;
+    text-align: center;
+    color: #666666;
+    font-size: 14px;
+  }
+  .btn {
+    color: #1678FF;
+    margin-top: 8px;
+    font-size: 14px;
+  }
+}
+

package/lowcode_es/meta.js

@@ -89,7 +89,7 @@ function fillRealVersion(meta, packageName, version, basicLibraryVersion) {
     packageName = 'ydb-components-material';
   }
   if (version === void 0) {
-    version = '0.1.20';
+    version = '0.1.21';
   }
   if (basicLibraryVersion === void 0) {
     basicLibraryVersion = {

package/lowcode_lib/meta.js

@@ -94,7 +94,7 @@ function fillRealVersion(meta, packageName, version, basicLibraryVersion) {
     packageName = 'ydb-components-material';
   }
   if (version === void 0) {
-    version = '0.1.20';
+    version = '0.1.21';
   }
   if (basicLibraryVersion === void 0) {
     basicLibraryVersion = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-components-material",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "description": "ydb-components-material",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -95,10 +95,10 @@
   },
   "componentConfig": {
     "isComponentLibrary": true,
-    "materialSchema": "https://unpkg.com/ydb-components-material@0.1.20/build/lowcode/assets-prod.json"
+    "materialSchema": "https://unpkg.com/ydb-components-material@0.1.21/build/lowcode/assets-prod.json"
   },
   "lcMeta": {
     "type": "component"
   },
-  "homepage": "https://unpkg.com/ydb-components-material@0.1.20/build/index.html"
+  "homepage": "https://unpkg.com/ydb-components-material@0.1.21/build/index.html"
 }