ydb-components-material 0.1.19 → 0.1.21

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import './index.scss';
+export interface QRCodeImgProps {
+    /**
+     * 类型
+     */
+    url?: string;
+    style?: object;
+}
+declare const QRCodeImg: React.FC<QRCodeImgProps>;
+export default QRCodeImg;

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

@@ -0,0 +1,42 @@
+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) {
+        if (error) console.error(error);
+      });
+    }
+  }, [url]);
+  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/es/index.d.ts

@@ -33,5 +33,7 @@ export type { FormProps } from './components/form';
 export { default as Form } from './components/form';
 export type { SceneTreeProps } from './components/scene-tree';
 export { default as SceneTree } from './components/scene-tree';
+export type { QRCodeImgProps } from './components/qr-code';
+export { default as QRCodeImg } from './components/qr-code';
 declare const bizCssPrefix = "bizpack";
 export { bizCssPrefix };

package/es/index.js

@@ -16,5 +16,6 @@ export { default as CheckDetailPc } from "./components/check-detail-pc";
 export { default as IconCustom } from "./components/icon-custom";
 export { default as Form } from "./components/form";
 export { default as SceneTree } from "./components/scene-tree";
+export { default as QRCodeImg } from "./components/qr-code";
 var bizCssPrefix = 'bizpack';
 export { bizCssPrefix };

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import './index.scss';
+export interface QRCodeImgProps {
+    /**
+     * 类型
+     */
+    url?: string;
+    style?: object;
+}
+declare const QRCodeImg: React.FC<QRCodeImgProps>;
+export default QRCodeImg;

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

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+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) {
+        if (error) console.error(error);
+      });
+    }
+  }, [url]);
+  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/lib/index.d.ts

@@ -33,5 +33,7 @@ export type { FormProps } from './components/form';
 export { default as Form } from './components/form';
 export type { SceneTreeProps } from './components/scene-tree';
 export { default as SceneTree } from './components/scene-tree';
+export type { QRCodeImgProps } from './components/qr-code';
+export { default as QRCodeImg } from './components/qr-code';
 declare const bizCssPrefix = "bizpack";
 export { bizCssPrefix };

package/lib/index.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.bizCssPrefix = exports.Tips = exports.SuccessPrompt = exports.Statstic = exports.SceneTree = exports.PreCheckResPC = exports.Message = exports.MaterialCheckRes = exports.IconCustom = exports.Form = exports.FilePC = exports.FileItem = exports.ColorfulInput = exports.ColorfulButton = exports.CheckRes = exports.CheckLoading = exports.CheckDetailPc = exports.CheckDetail = exports.CardTitle = void 0;
+exports.bizCssPrefix = exports.Tips = exports.SuccessPrompt = exports.Statstic = exports.SceneTree = exports.QRCodeImg = exports.PreCheckResPC = exports.Message = exports.MaterialCheckRes = exports.IconCustom = exports.Form = exports.FilePC = exports.FileItem = exports.ColorfulInput = exports.ColorfulButton = exports.CheckRes = exports.CheckLoading = exports.CheckDetailPc = exports.CheckDetail = exports.CardTitle = void 0;
 var _colorfulButton = _interopRequireDefault(require("./components/colorful-button"));
 exports.ColorfulButton = _colorfulButton["default"];
 var _colorfulInput = _interopRequireDefault(require("./components/colorful-input"));
@@ -39,4 +39,6 @@ var _form = _interopRequireDefault(require("./components/form"));
 exports.Form = _form["default"];
 var _sceneTree = _interopRequireDefault(require("./components/scene-tree"));
 exports.SceneTree = _sceneTree["default"];
+var _qrCode = _interopRequireDefault(require("./components/qr-code"));
+exports.QRCodeImg = _qrCode["default"];
 var bizCssPrefix = exports.bizCssPrefix = 'bizpack';

package/lowcode/q-r-code-img/meta.ts

@@ -0,0 +1,58 @@
+
+import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
+
+const QRCodeImgMeta: IPublicTypeComponentMetadata = {
+  "componentName": "QRCodeImg",
+  "title": "QRCodeImg",
+  "docUrl": "",
+  "screenshot": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "ydb-components-material",
+    "version": "0.1.19",
+    "exportName": "QRCodeImg",
+    "main": "src/index.tsx",
+    "destructuring": true,
+    "subName": ""
+  },
+  "configure": {
+    "props": [
+      {
+        "title": {
+          "label": {
+            "type": "i18n",
+            "en-US": "url",
+            "zh-CN": "类型"
+          },
+          "tip": "url | 类型"
+        },
+        "name": "url",
+        "description": "类型",
+        "setter": {
+          "componentName": "StringSetter",
+          "isRequired": false,
+          "initialValue": ""
+        }
+      }
+    ],
+    "supports": {
+      "style": true
+    },
+    "component": {}
+  }
+};
+const snippets: IPublicTypeSnippet[] = [
+  {
+    "title": "QRCodeImg",
+    "screenshot": "",
+    "schema": {
+      "componentName": "QRCodeImg",
+      "props": {}
+    }
+  }
+];
+
+export default {
+  ...QRCodeImgMeta,
+  snippets
+};

package/lowcode_es/meta.js

@@ -13,6 +13,7 @@ import IconCustomMeta from "./icon-custom/meta";
 import MaterialCheckResMeta from "./material-check-res/meta";
 import MessageMeta from "./message/meta";
 import PreCheckResPCMeta from "./pre-check-res-p-c/meta";
+import QRCodeImgMeta from "./q-r-code-img/meta";
 import SceneTreeMeta from "./scene-tree/meta";
 import StatsticMeta from "./statstic/meta";
 import SuccessPromptMeta from "./success-prompt/meta";
@@ -88,7 +89,7 @@ function fillRealVersion(meta, packageName, version, basicLibraryVersion) {
     packageName = 'ydb-components-material';
   }
   if (version === void 0) {
-    version = '0.1.19';
+    version = '0.1.21';
   }
   if (basicLibraryVersion === void 0) {
     basicLibraryVersion = {
@@ -115,7 +116,7 @@ function fillRealVersion(meta, packageName, version, basicLibraryVersion) {
   }
   return meta;
 }
-var componentMetas = [CardTitleMeta, CheckDetailPcMeta, CheckDetailMeta, CheckLoadingMeta, CheckResMeta, ColorfulButtonMeta, ColorfulInputMeta, FileItemMeta, FilePCMeta, FormMeta, IconCustomMeta, MaterialCheckResMeta, MessageMeta, PreCheckResPCMeta, SceneTreeMeta, StatsticMeta, SuccessPromptMeta, TipsMeta];
+var componentMetas = [CardTitleMeta, CheckDetailPcMeta, CheckDetailMeta, CheckLoadingMeta, CheckResMeta, ColorfulButtonMeta, ColorfulInputMeta, FileItemMeta, FilePCMeta, FormMeta, IconCustomMeta, MaterialCheckResMeta, MessageMeta, PreCheckResPCMeta, QRCodeImgMeta, SceneTreeMeta, StatsticMeta, SuccessPromptMeta, TipsMeta];
 var components = [];
 var npmInfo = {};
 componentMetas.forEach(function (meta) {

package/lowcode_es/q-r-code-img/meta.d.ts

@@ -0,0 +1,22 @@
+import { IPublicTypeSnippet } from '@alilc/lowcode-types';
+declare const _default: {
+    snippets: IPublicTypeSnippet[];
+    componentName: string;
+    uri?: string;
+    title?: import("@alilc/lowcode-types").IPublicTypeTitleContent;
+    icon?: import("@alilc/lowcode-types").IPublicTypeIconType;
+    tags?: string[];
+    description?: string;
+    docUrl?: string;
+    screenshot?: string;
+    devMode?: "proCode" | "lowCode";
+    npm?: import("@alilc/lowcode-types").IPublicTypeNpmInfo;
+    props?: import("@alilc/lowcode-types").IPublicTypePropConfig[];
+    configure?: import("@alilc/lowcode-types").IPublicTypeFieldConfig[] | import("@alilc/lowcode-types").IPublicTypeConfigure;
+    experimental?: import("@alilc/lowcode-types").IPublicTypeAdvanced;
+    schema?: import("@alilc/lowcode-types").IPublicTypeComponentSchema;
+    group?: string | import("@alilc/lowcode-types").IPublicTypeI18nData;
+    category?: string | import("@alilc/lowcode-types").IPublicTypeI18nData;
+    priority?: number;
+};
+export default _default;

package/lowcode_es/q-r-code-img/meta.js

@@ -0,0 +1,50 @@
+import _extends from "@babel/runtime/helpers/extends";
+var QRCodeImgMeta = {
+  "componentName": "QRCodeImg",
+  "title": "QRCodeImg",
+  "docUrl": "",
+  "screenshot": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "ydb-components-material",
+    "version": "0.1.19",
+    "exportName": "QRCodeImg",
+    "main": "src/index.tsx",
+    "destructuring": true,
+    "subName": ""
+  },
+  "configure": {
+    "props": [{
+      "title": {
+        "label": {
+          "type": "i18n",
+          "en-US": "url",
+          "zh-CN": "类型"
+        },
+        "tip": "url | 类型"
+      },
+      "name": "url",
+      "description": "类型",
+      "setter": {
+        "componentName": "StringSetter",
+        "isRequired": false,
+        "initialValue": ""
+      }
+    }],
+    "supports": {
+      "style": true
+    },
+    "component": {}
+  }
+};
+var snippets = [{
+  "title": "QRCodeImg",
+  "screenshot": "",
+  "schema": {
+    "componentName": "QRCodeImg",
+    "props": {}
+  }
+}];
+export default _extends({}, QRCodeImgMeta, {
+  snippets: snippets
+});

package/lowcode_lib/meta.js

@@ -18,10 +18,11 @@ var _meta1 = _interopRequireDefault(require("./icon-custom/meta"));
 var _meta10 = _interopRequireDefault(require("./material-check-res/meta"));
 var _meta11 = _interopRequireDefault(require("./message/meta"));
 var _meta12 = _interopRequireDefault(require("./pre-check-res-p-c/meta"));
-var _meta13 = _interopRequireDefault(require("./scene-tree/meta"));
-var _meta14 = _interopRequireDefault(require("./statstic/meta"));
-var _meta15 = _interopRequireDefault(require("./success-prompt/meta"));
-var _meta16 = _interopRequireDefault(require("./tips/meta"));
+var _meta13 = _interopRequireDefault(require("./q-r-code-img/meta"));
+var _meta14 = _interopRequireDefault(require("./scene-tree/meta"));
+var _meta15 = _interopRequireDefault(require("./statstic/meta"));
+var _meta16 = _interopRequireDefault(require("./success-prompt/meta"));
+var _meta17 = _interopRequireDefault(require("./tips/meta"));
 var componentCategorySort = {};
 ["基础元素", "布局容器类", "表格类", "表单详情类", "帮助类", "对话框类", "业务类", "通用", "引导", "信息输入", "信息展示", "信息反馈"].reverse().forEach(function (item, index) {
   componentCategorySort[item] = ++index;
@@ -93,7 +94,7 @@ function fillRealVersion(meta, packageName, version, basicLibraryVersion) {
     packageName = 'ydb-components-material';
   }
   if (version === void 0) {
-    version = '0.1.19';
+    version = '0.1.21';
   }
   if (basicLibraryVersion === void 0) {
     basicLibraryVersion = {
@@ -120,7 +121,7 @@ function fillRealVersion(meta, packageName, version, basicLibraryVersion) {
   }
   return meta;
 }
-var componentMetas = [_meta["default"], _meta2["default"], _meta3["default"], _meta4["default"], _meta5["default"], _meta6["default"], _meta7["default"], _meta8["default"], _meta9["default"], _meta0["default"], _meta1["default"], _meta10["default"], _meta11["default"], _meta12["default"], _meta13["default"], _meta14["default"], _meta15["default"], _meta16["default"]];
+var componentMetas = [_meta["default"], _meta2["default"], _meta3["default"], _meta4["default"], _meta5["default"], _meta6["default"], _meta7["default"], _meta8["default"], _meta9["default"], _meta0["default"], _meta1["default"], _meta10["default"], _meta11["default"], _meta12["default"], _meta13["default"], _meta14["default"], _meta15["default"], _meta16["default"], _meta17["default"]];
 var components = exports.components = [];
 var npmInfo = {};
 componentMetas.forEach(function (meta) {

package/lowcode_lib/q-r-code-img/meta.d.ts

@@ -0,0 +1,22 @@
+import { IPublicTypeSnippet } from '@alilc/lowcode-types';
+declare const _default: {
+    snippets: IPublicTypeSnippet[];
+    componentName: string;
+    uri?: string;
+    title?: import("@alilc/lowcode-types").IPublicTypeTitleContent;
+    icon?: import("@alilc/lowcode-types").IPublicTypeIconType;
+    tags?: string[];
+    description?: string;
+    docUrl?: string;
+    screenshot?: string;
+    devMode?: "proCode" | "lowCode";
+    npm?: import("@alilc/lowcode-types").IPublicTypeNpmInfo;
+    props?: import("@alilc/lowcode-types").IPublicTypePropConfig[];
+    configure?: import("@alilc/lowcode-types").IPublicTypeFieldConfig[] | import("@alilc/lowcode-types").IPublicTypeConfigure;
+    experimental?: import("@alilc/lowcode-types").IPublicTypeAdvanced;
+    schema?: import("@alilc/lowcode-types").IPublicTypeComponentSchema;
+    group?: string | import("@alilc/lowcode-types").IPublicTypeI18nData;
+    category?: string | import("@alilc/lowcode-types").IPublicTypeI18nData;
+    priority?: number;
+};
+export default _default;

package/lowcode_lib/q-r-code-img/meta.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var QRCodeImgMeta = {
+  "componentName": "QRCodeImg",
+  "title": "QRCodeImg",
+  "docUrl": "",
+  "screenshot": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "ydb-components-material",
+    "version": "0.1.19",
+    "exportName": "QRCodeImg",
+    "main": "src/index.tsx",
+    "destructuring": true,
+    "subName": ""
+  },
+  "configure": {
+    "props": [{
+      "title": {
+        "label": {
+          "type": "i18n",
+          "en-US": "url",
+          "zh-CN": "类型"
+        },
+        "tip": "url | 类型"
+      },
+      "name": "url",
+      "description": "类型",
+      "setter": {
+        "componentName": "StringSetter",
+        "isRequired": false,
+        "initialValue": ""
+      }
+    }],
+    "supports": {
+      "style": true
+    },
+    "component": {}
+  }
+};
+var snippets = [{
+  "title": "QRCodeImg",
+  "screenshot": "",
+  "schema": {
+    "componentName": "QRCodeImg",
+    "props": {}
+  }
+}];
+var _default = exports["default"] = (0, _extends2["default"])({}, QRCodeImgMeta, {
+  snippets: snippets
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-components-material",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "description": "ydb-components-material",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -83,6 +83,7 @@
     "@babel/runtime": "^7.0.0",
     "moment": "latest",
     "prop-types": "^15.5.8",
+    "qrcode": "^1.5.4",
     "react": "^16.x",
     "react-dom": "^16.x"
   },
@@ -94,10 +95,10 @@
   },
   "componentConfig": {
     "isComponentLibrary": true,
-    "materialSchema": "https://unpkg.com/ydb-components-material@0.1.19/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.19/build/index.html"
+  "homepage": "https://unpkg.com/ydb-components-material@0.1.21/build/index.html"
 }