@arcblock/ux 2.1.1 → 2.1.4

package/lib/Header/header.js

@@ -94,7 +94,7 @@ Header.defaultProps = {
 const Root = _styledComponents.default.div.withConfig({
   displayName: "header__Root",
   componentId: "sc-15qnwg1-0"
-})(["position:relative;z-index:", ";font-size:14px;background:", ";.header-container{display:flex;align-items:center;height:64px;padding:8px 0;}.header-logo{display:inline-flex;justify-content:center;position:relative;height:40px;margin-right:16px;img,svg{width:auto;height:100%;}> a{height:100%;line-height:1;}> a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.header-brand{display:flex;flex-direction:column;flex-shrink:0;margin-right:16px;.header-brand-title{display:flex;align-items:center;h2{font-size:16px;}.header-brand-addon{margin-left:8px;}}.header-brand-desc{color:#9397a1;}}.header-addons{display:flex;align-items:center;}", "{.header-brand{margin-right:12px;.header-brand-title{h2{font-size:14px;}}}}", "{.header-container{height:56px;}.header-menu{display:inline-block;}.header-logo{height:32px;}.header-brand{display:none;}}"], props => props.$theme.zIndex.drawer + 1, props => props.$theme.palette.common.white, props => props.$theme.breakpoints.down('lg'), props => props.$theme.breakpoints.down('md'));
+})(["position:relative;z-index:", ";font-size:14px;background:", ";.header-container{display:flex;align-items:center;height:64px;padding:0 16px;", "{padding:0;}}.header-logo{display:inline-flex;justify-content:center;position:relative;height:40px;margin-right:16px;img,svg{width:auto;height:100%;}> a{height:100%;line-height:1;}> a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.header-brand{display:flex;flex-direction:column;flex-shrink:0;margin-right:16px;.header-brand-title{display:flex;align-items:center;h2{font-size:16px;}.header-brand-addon{margin-left:8px;}}.header-brand-desc{color:#9397a1;}}.header-addons{display:flex;align-items:center;}", "{.header-brand{margin-right:12px;.header-brand-title{h2{font-size:14px;}}}}", "{.header-container{height:56px;}.header-menu{display:inline-block;}.header-logo{height:32px;}.header-brand{display:none;}}"], props => props.$theme.zIndex.drawer + 1, props => props.$theme.palette.common.white, props => props.$theme.breakpoints.up('lg'), props => props.$theme.breakpoints.down('lg'), props => props.$theme.breakpoints.down('md'));
 
 var _default = Header;
 exports.default = _default;

package/lib/NavMenu/nav-menu.js

@@ -74,7 +74,7 @@ function NavMenu(_ref) {
   children = filterItems(children);
 
   if (!(items !== null && items !== void 0 && items.length) && !((_children = children) !== null && _children !== void 0 && _children.length)) {
-    return new Error("One of 'items' or 'children' is required by NavMenu component.");
+    throw new Error("One of 'items' or 'children' is required by NavMenu component.");
   }
 
   const [state, setState] = (0, _react.useState)({

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.1",
+  "version": "2.1.4",
   "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": "5a92264deb34d879813be444bc26fa3f0cef0672",
   "dependencies": {
-    "@arcblock/icons": "^2.1.1",
-    "@arcblock/react-hooks": "^2.1.1",
+    "@arcblock/icons": "^2.1.4",
+    "@arcblock/react-hooks": "^2.1.4",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",

package/src/Header/header.js

@@ -78,7 +78,11 @@ const Root = styled.div`
     display: flex;
     align-items: center;
     height: 64px;
-    padding: 8px 0;
+    /* mui container 左右 padding 控制, 宽屏下不需要 padding (与 content 对齐), 窄屏下设置 16px padding */
+    padding: 0 16px;
+    ${props => props.$theme.breakpoints.up('lg')} {
+      padding: 0;
+    }
   }
   .header-logo {
     display: inline-flex;

package/src/NavMenu/nav-menu.js

@@ -38,7 +38,7 @@ function NavMenu({
   // eslint-disable-next-line no-param-reassign
   children = filterItems(children);
   if (!items?.length && !children?.length) {
-    return new Error("One of 'items' or 'children' is required by NavMenu component.");
+    throw new Error("One of 'items' or 'children' is required by NavMenu component.");
   }
   const [state, setState] = useState({ activeId: defaultActiveId, openedIds: [] });
   const contextValue = useMemo(() => {

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