@arcblock/ux 2.1.1 → 2.1.2

package/lib/QRCode/index.js

@@ -54,8 +54,8 @@ function QRCode(_ref) {
 
   const ref = _react.default.useRef(null);
 
-  (0, _react.useEffect)(() => {
-    const qrCode = new _qrCodeStyling.default(_objectSpread(_objectSpread(_objectSpread({}, defaults), {}, {
+  const options = (0, _react.useMemo)(() => {
+    return _objectSpread(_objectSpread(_objectSpread({}, defaults), {}, {
       data,
       width: size,
       height: size
@@ -65,9 +65,18 @@ function QRCode(_ref) {
         crossOrigin: 'anonymous',
         margin: 0
       }
-    }), config));
-    qrCode.append(ref.current);
-  }, [data, size]);
+    }), config);
+  }, [data, size, image, config]);
+  const [qrCode] = (0, _react.useState)(new _qrCodeStyling.default(options));
+  (0, _react.useEffect)(() => {
+    if (ref.current) {
+      qrCode.append(ref.current);
+    }
+  }, [qrCode, ref]);
+  (0, _react.useEffect)(() => {
+    if (!qrCode) return;
+    qrCode.update(options);
+  }, [data, size, image, config]);
   return /*#__PURE__*/_react.default.createElement("div", Object.assign({
     ref: ref
   }, rest));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -52,10 +52,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "5820d19073c6a79aa1a9c8a56f324eda655930f3",
+  "gitHead": "a73064aaab5cde4fa378672c9c037cf427022123",
   "dependencies": {
-    "@arcblock/icons": "^2.1.1",
-    "@arcblock/react-hooks": "^2.1.1",
+    "@arcblock/icons": "^2.1.2",
+    "@arcblock/react-hooks": "^2.1.2",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",

package/src/QRCode/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import QRCodeStyling from '@solana/qr-code-styling';
 
@@ -19,8 +19,8 @@ const defaults = {
 // 注意: 依赖的 @solana/qr-code-styling 是一份 fork 版本, 原版本的 margin 配置存在 bug
 function QRCode({ data, size, image, config, ...rest }) {
   const ref = React.useRef(null);
-  useEffect(() => {
-    const qrCode = new QRCodeStyling({
+  const options = useMemo(() => {
+    return {
       ...defaults,
       data,
       width: size,
@@ -33,9 +33,22 @@ function QRCode({ data, size, image, config, ...rest }) {
         },
       }),
       ...config,
-    });
-    qrCode.append(ref.current);
-  }, [data, size]);
+    };
+  }, [data, size, image, config]);
+
+  const [qrCode] = useState(new QRCodeStyling(options));
+
+  useEffect(() => {
+    if (ref.current) {
+      qrCode.append(ref.current);
+    }
+  }, [qrCode, ref]);
+
+  useEffect(() => {
+    if (!qrCode) return;
+    qrCode.update(options);
+  }, [data, size, image, config]);
+
   return <div ref={ref} {...rest} />;
 }