@arcblock/ux 2.1.0 → 2.1.3

package/lib/Blocklet/utils.js

@@ -12,7 +12,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const ActionButton = _styledComponents.default.div.withConfig({
   displayName: "utils__ActionButton",
   componentId: "sc-1po1ir-0"
-})(["background-color:transparent !important;& >:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;transition:opacity 0.3s;}&:hover::before{opacity:0;}&::after{content:'';position:absolute;height:100%;width:100%;border-radius:2px;background-color:", ";transform:scale(0.1);opacity:0;z-index:-1;transition:transform 0.3s,opacity 0.3s,background-color 0.3s;}&:hover::after{opacity:1;transform-origin:center;transform:scale(1);}}& >:not(.Mui-disabled){background-color:transparent !important;color:", "!important;}& >:not(.Mui-disabled){&:hover{color:", "!important;}}"], props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white);
+})(["background-color:transparent !important;& >:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;transition:opacity 0.3s;}&:hover::before{opacity:0;}&::after{content:'';position:absolute;height:100%;width:100%;top:0;left:0;border-radius:2px;background-color:", ";transform:scale(0.1);opacity:0;z-index:-1;transition:transform 0.3s,opacity 0.3s,background-color 0.3s;}&:hover::after{opacity:1;transform-origin:center;transform:scale(1);}}& >:not(.Mui-disabled){background-color:transparent !important;color:", "!important;}& >:not(.Mui-disabled){&:hover{color:", "!important;}}"], props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white);
 
 var _default = ActionButton;
 exports.default = _default;

package/lib/BlockletNFT/index.js

@@ -64,7 +64,7 @@ function prettySize(_size) {
 const Div = _styledComponents.default.div.withConfig({
   displayName: "BlockletNFT__Div",
   componentId: "sc-19lczgp-0"
-})(["&.arcblock-blocklet{padding:0 16px;background:", ";overflow:hidden;box-shadow:0px 0px 8px #f0f0f0;&:hover{box-shadow:0px 2px 12px #f0f0f0;}}.arcblock-blocklet__content{padding:16px 0 0 0;}.arcblock-blocklet__content--main{display:flex;align-items:center;cursor:pointer;}.arcblock-blocklet__content--body{overflow:hidden;flex:1;display:flex;align-items:flex-start;}.arcblock-blocklet__addons{padding:16px 0;}.arcblock-blocklet__cover{width:80px;height:80px;margin-right:12px;overflow:hidden;border-radius:12px;transform:translateZ(0);}.arcblock-blocklet__button--hover{&:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;transition:opacity 0.3s;}&:hover::before{opacity:0;}&::after{content:'';position:absolute;height:100%;width:100%;background-color:", ";transform:scale(0.1);opacity:0;z-index:-1;transition:transform 0.3s,opacity 0.3s,background-color 0.3s;}&:hover::after{opacity:1;transform-origin:center;transform:scale(1);}}&:not(.Mui-disabled){background-color:transparent !important;color:", ";}&:not(.Mui-disabled){&:hover{color:", ";}}}.arcblock-blocklet__info{flex:1;overflow:hidden;.arcblock-blocklet__button{margin-top:16px;display:inline-block;}}.arcblock-blocklet__title{margin:0;font-size:18px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__describe{margin:0 0 2px 0;color:#999;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__addons{display:flex;justify-content:space-between;color:#999;font-size:14px;position:relative;}.arcblock-blocklet__addons--item{white-space:nowrap;}&.arcblock-blocklet--size-md{&:hover{position:relative;}.arcblock-blocklet__title{height:2.3em;margin-bottom:3px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:initial;white-space:initial;word-break:break-all;}.arcblock-blocklet__describe{white-space:normal;height:2.86em;}.arcblock-blocklet__button{margin-top:5px;}}&.arcblock-blocklet--size-sm,&.arcblock-blocklet--size-xs{.arcblock-blocklet__cover{width:40px;height:40px;border-radius:6px;}.arcblock-blocklet__content{padding:16px 0;}.arcblock-blocklet__addons{padding:8px 0;.arcblock-blocklet__addons--item{font-size:12px;}}}&.arcblock-blocklet--size-xs{.arcblock-blocklet__addons{display:none !important;}}"], props => props.theme.palette.common.white, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white);
+})(["&.arcblock-blocklet{padding:0 16px;background:", ";overflow:hidden;box-shadow:0px 0px 8px #f0f0f0;&:hover{box-shadow:0px 2px 12px #f0f0f0;}}.arcblock-blocklet__content{padding:16px 0 0 0;}.arcblock-blocklet__content--main{display:flex;align-items:center;cursor:pointer;}.arcblock-blocklet__content--body{overflow:hidden;flex:1;display:flex;align-items:flex-start;}.arcblock-blocklet__addons{padding:16px 0;}.arcblock-blocklet__cover{width:80px;height:80px;margin-right:12px;overflow:hidden;border-radius:12px;transform:translateZ(0);}.arcblock-blocklet__button--hover{&:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;transition:opacity 0.3s;}&:hover::before{opacity:0;}&::after{content:'';position:absolute;height:100%;width:100%;top:0;left:0;background-color:", ";transform:scale(0.1);opacity:0;z-index:-1;transition:transform 0.3s,opacity 0.3s,background-color 0.3s;}&:hover::after{opacity:1;transform-origin:center;transform:scale(1);}}&:not(.Mui-disabled){background-color:transparent !important;color:", ";}&:not(.Mui-disabled){&:hover{color:", ";}}}.arcblock-blocklet__info{flex:1;overflow:hidden;.arcblock-blocklet__button{margin-top:16px;display:inline-block;}}.arcblock-blocklet__title{margin:0;font-size:18px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__describe{margin:0 0 2px 0;color:#999;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__addons{display:flex;justify-content:space-between;color:#999;font-size:14px;position:relative;}.arcblock-blocklet__addons--item{white-space:nowrap;}&.arcblock-blocklet--size-md{&:hover{position:relative;}.arcblock-blocklet__title{height:2.3em;margin-bottom:3px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:initial;white-space:initial;word-break:break-all;}.arcblock-blocklet__describe{white-space:normal;height:2.86em;}.arcblock-blocklet__button{margin-top:5px;}}&.arcblock-blocklet--size-sm,&.arcblock-blocklet--size-xs{.arcblock-blocklet__cover{width:40px;height:40px;border-radius:6px;}.arcblock-blocklet__content{padding:16px 0;}.arcblock-blocklet__addons{padding:8px 0;.arcblock-blocklet__addons--item{font-size:12px;}}}&.arcblock-blocklet--size-xs{.arcblock-blocklet__addons{display:none !important;}}"], props => props.theme.palette.common.white, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white);
 
 function BlockletIcon(_ref) {
   let {

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/lib/Util/index.js

@@ -15,6 +15,7 @@ exports.openWebWallet = openWebWallet;
 exports.parseQuery = parseQuery;
 exports.setDateTool = setDateTool;
 exports.str2color = void 0;
+exports.stringifyQuery = stringifyQuery;
 
 var _padStart = _interopRequireDefault(require("lodash/padStart"));
 
@@ -34,6 +35,11 @@ function parseQuery(str) {
     return memo;
   }, {});
 }
+
+function stringifyQuery() {
+  let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return new URLSearchParams(params).toString();
+}
 /**
  * @param {number} opts.expireInDays
  * @param {string} opts.path

package/package.json

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

package/src/Blocklet/utils.js

@@ -22,6 +22,8 @@ const ActionButton = styled.div`
       position: absolute;
       height: 100%;
       width: 100%;
+      top: 0;
+      left: 0;
       border-radius: 2px;
       background-color: ${props => props.theme.palette.primary.main};
       transform: scale(0.1);

package/src/BlockletNFT/index.js

@@ -86,6 +86,8 @@ const Div = styled.div`
         position: absolute;
         height: 100%;
         width: 100%;
+        top: 0;
+        left: 0;
         background-color: ${props => props.theme.palette.primary.main};
         transform: scale(0.1);
         opacity: 0;

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} />;
 }
 

package/src/Util/index.js

@@ -17,6 +17,10 @@ export function parseQuery(str) {
     }, {});
 }
 
+export function stringifyQuery(params = {}) {
+  return new URLSearchParams(params).toString();
+}
+
 /**
  * @param {number} opts.expireInDays
  * @param {string} opts.path