@arcblock/ux 1.16.58 → 1.16.60

package/lib/QRCode/index.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _qrCodeStyling = _interopRequireDefault(require("@solana/qr-code-styling"));
+
+const _excluded = ["data", "size", "image", "config"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+const defaults = {
+  margin: 0,
+  dotsOptions: {
+    type: 'dots'
+  },
+  cornersSquareOptions: {
+    type: 'extra-rounded'
+  },
+  cornersDotOptions: {
+    type: 'dot'
+  }
+}; // 该组件用于生成与 android wallet 样式风格相似的 qrcode
+// 注意: 依赖的 @solana/qr-code-styling 是一份 fork 版本, 原版本的 margin 配置存在 bug
+
+function QRCode(_ref) {
+  let {
+    data,
+    size,
+    image,
+    config
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const ref = _react.default.useRef(null);
+
+  (0, _react.useEffect)(() => {
+    const qrCode = new _qrCodeStyling.default(_objectSpread(_objectSpread(_objectSpread({}, defaults), {}, {
+      data,
+      width: size,
+      height: size
+    }, image && {
+      image,
+      imageOptions: {
+        crossOrigin: 'anonymous',
+        margin: 0
+      }
+    }), config));
+    qrCode.append(ref.current);
+  }, [data, size]);
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({
+    ref: ref
+  }, rest));
+}
+
+QRCode.propTypes = {
+  // 一般情况下仅使用 data/size/image 即可
+  data: _propTypes.default.string.isRequired,
+  size: _propTypes.default.number.isRequired,
+  image: _propTypes.default.string,
+  // 覆盖 qr-code-styling 配置
+  config: _propTypes.default.object
+};
+QRCode.defaultProps = {
+  image: null,
+  config: {}
+};
+var _default = QRCode;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "1.16.58",
+  "version": "1.16.60",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -53,14 +53,15 @@
     "react": ">=16.12.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "db781df0d54be03940dffc673ed5020b204f2f01",
+  "gitHead": "7747d27c27d53c64a05209031851e02d70f3dae0",
   "dependencies": {
-    "@arcblock/icons": "^1.16.58",
-    "@arcblock/react-hooks": "^1.16.58",
+    "@arcblock/icons": "^1.16.60",
+    "@arcblock/react-hooks": "^1.16.60",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/lato": "^4.5.3",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "4.11.2",
+    "@solana/qr-code-styling": "^1.6.0-beta.0",
     "axios": "^0.21.1",
     "base64-url": "^2.3.3",
     "copy-to-clipboard": "^3.2.0",

package/src/QRCode/index.js

@@ -0,0 +1,56 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import QRCodeStyling from '@solana/qr-code-styling';
+
+const defaults = {
+  margin: 0,
+  dotsOptions: {
+    type: 'dots',
+  },
+  cornersSquareOptions: {
+    type: 'extra-rounded',
+  },
+  cornersDotOptions: {
+    type: 'dot',
+  },
+};
+
+// 该组件用于生成与 android wallet 样式风格相似的 qrcode
+// 注意: 依赖的 @solana/qr-code-styling 是一份 fork 版本, 原版本的 margin 配置存在 bug
+function QRCode({ data, size, image, config, ...rest }) {
+  const ref = React.useRef(null);
+  useEffect(() => {
+    const qrCode = new QRCodeStyling({
+      ...defaults,
+      data,
+      width: size,
+      height: size,
+      ...(image && {
+        image,
+        imageOptions: {
+          crossOrigin: 'anonymous',
+          margin: 0,
+        },
+      }),
+      ...config,
+    });
+    qrCode.append(ref.current);
+  }, [data, size]);
+  return <div ref={ref} {...rest} />;
+}
+
+QRCode.propTypes = {
+  // 一般情况下仅使用 data/size/image 即可
+  data: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
+  image: PropTypes.string,
+  // 覆盖 qr-code-styling 配置
+  config: PropTypes.object,
+};
+
+QRCode.defaultProps = {
+  image: null,
+  config: {},
+};
+
+export default QRCode;