@arcblock/ux 2.1.43 → 2.1.46

package/lib/CodeBlock/index.js

@@ -148,7 +148,6 @@ function CodeBlock(_ref) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_IconButton.default, {
       className: "copy-button",
       onClick: onCopy,
-      tabIndex: "-1",
       color: "primary",
       disabled: copied,
       children: [!copied && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FileCopy.default, {
@@ -181,4 +180,4 @@ const fontFamily = 'source-code-pro, Menlo, Monaco, Consolas, Courier New, monos
 const Pre = _styledComponents.default.pre.withConfig({
   displayName: "CodeBlock__Pre",
   componentId: "sc-1bpapaq-0"
-})(["font-family:", ";display:block;font-size:14px;line-height:1.42857143;margin:0 0 32px;word-break:break-word;word-wrap:break-word;text-align:left;border-radius:5px;border:1px solid #dedede;background:#222;color:#fff;position:relative;.codeblock__inner{display:block;width:100%;max-height:46.25rem;overflow:scroll;}.copy-button{display:none;position:absolute;top:8px;right:24px;padding:4px;border-radius:4px;&,&:hover,&.Mui-disabled{background:", ";}}&:hover{.copy-button{display:block;}}code{counter-reset:line;counter-increment:line;padding:16px;font-family:", ";color:#fff;*{font-family:", ";}}.hljs *{white-space:normal;}"], fontFamily, _Colors.default.primary.main, fontFamily, fontFamily);
+})(["font-family:", ";display:block;font-size:14px;line-height:1.42857143;margin:0 0 32px;word-break:break-word;word-wrap:break-word;text-align:left;border-radius:5px;border:1px solid #dedede;background:#222;color:#fff;position:relative;.codeblock__inner{display:block;width:100%;max-height:46.25rem;overflow:scroll;}.copy-button{display:none;position:absolute;top:8px;right:24px;padding:4px;border-radius:4px;&,&:hover,&.Mui-disabled{background:", ";}}&:hover{.copy-button{display:flex;}}code{counter-reset:line;counter-increment:line;padding:16px;font-family:", ";color:#fff;*{font-family:", ";}}.hljs *{white-space:normal;}"], fontFamily, _Colors.default.primary.main, fontFamily, fontFamily);

package/lib/CountDown/index.js

@@ -83,8 +83,8 @@ function FixWidthNumber(_ref) {
 
 class CountDown extends _react.Component {
   constructor(props) {
+    super(props);
     const newProps = (0, _Util.mergeProps)(props, CountDown, ['dark', 'endTime', 'style']);
-    super(newProps);
     this.state = getRemaining(newProps.endTime);
     this.timer = null;
   }

package/lib/Footer/index.js

@@ -31,8 +31,9 @@ function Footer(props) {
     brand,
     dark
   } = newProps;
-  const endYear = new Date().getFullYear();
-  const copyYear = endYear === copyStart ? endYear : "".concat(copyStart, "-").concat(endYear);
+  const endYearString = "".concat(new Date().getFullYear());
+  const copyStartString = "".concat(copyStart);
+  const copyYear = endYearString === copyStartString ? endYearString : "".concat(copyStartString, "-").concat(endYearString);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
     className: className,
     style: style,
@@ -73,7 +74,7 @@ function Footer(props) {
 Footer.propTypes = {
   dark: _propTypes.default.bool,
   className: _propTypes.default.string,
-  copyStart: _propTypes.default.string,
+  copyStart: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   brand: _propTypes.default.string,
   style: _propTypes.default.object
 };

package/lib/InfoRow/index.js

@@ -74,7 +74,7 @@ InfoRow.defaultProps = {
     const resetName = name.split(' ').map(x => (0, _upperFirst.default)((0, _camelCase.default)(x))).join(' ');
     return typeof name === 'string' ? resetName : name;
   },
-  valueComponent: 'p',
+  valueComponent: 'div',
   layout: 'horizontal'
 };
 

package/lib/Locale/context.js

@@ -83,8 +83,13 @@ const create = () => {
 
     const [currentLocale, setCurrentLocale] = (0, _react.useState)(getLocale(locale));
     (0, _react.useEffect)(() => {
-      setLocale(currentLocale);
-    }, [currentLocale]);
+      const tmpLocale = getLocale(locale);
+
+      if (tmpLocale !== currentLocale) {
+        setCurrentLocale(tmpLocale);
+        setLocale(tmpLocale);
+      }
+    }, [currentLocale, locale]);
 
     const changeLocale = newLocale => {
       setCurrentLocale(newLocale);

package/lib/Metric/index.js

@@ -31,7 +31,7 @@ function Metric(_ref) {
       className: "metric__image",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_image.default, {
         name: icon,
-        alt: name,
+        alt: typeof name === 'string' ? name : '',
         size: 30,
         prefix: prefix,
         color: "#222222"
@@ -59,7 +59,7 @@ function Metric(_ref) {
 Metric.propTypes = {
   icon: _propTypes.default.string.isRequired,
   value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
-  name: _propTypes.default.string.isRequired,
+  name: _propTypes.default.node.isRequired,
   animated: _propTypes.default.bool,
   url: _propTypes.default.string,
   LinkComponent: _propTypes.default.any,

package/lib/NFTDisplay/index.js

@@ -114,9 +114,10 @@ function NFTDisplay(_ref) {
     children: children
   }));
 
-  try {
-    const parsed = (0, _react.useRef)(data); // 如果是 raw data 先解析
+  const parsed = (0, _react.useRef)(data);
 
+  try {
+    // 如果是 raw data 先解析
     if (typeof parsed.current === 'string') {
       parsed.current = JSON.parse(data); // console.log('[debug] parse data')
     }
@@ -208,7 +209,7 @@ function NFTDisplay(_ref) {
               const svg = _buffer.Buffer.from(buffer).toString('utf8');
 
               if (checkSvg && !(0, _isSvg.default)(svg)) {
-                throw new Error("Invalid SVG: ".concat(svg));
+                throw new Error('Invalid SVG of type svg_gzipped');
               }
 
               const Embedder = getSvgEmbedder(preferredSvgEmbedder);
@@ -220,7 +221,7 @@ function NFTDisplay(_ref) {
           case 'svg':
             {
               if (checkSvg && !(0, _isSvg.default)(content)) {
-                throw new Error("Invalid SVG: ".concat(content));
+                throw new Error('Invalid SVG of type svg');
               }
 
               const Embedder = getSvgEmbedder(preferredSvgEmbedder);
@@ -246,7 +247,12 @@ function NFTDisplay(_ref) {
       children: [(state.loading || !minimumLoadingReady) && (renderLoading ? renderLoading() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_loading.default, {})), renderNFT()]
     }));
   } catch (e) {
-    console.error(e);
+    var _parsed$current;
+
+    console.error(e === null || e === void 0 ? void 0 : e.message, {
+      nftId: address,
+      vcId: parsed === null || parsed === void 0 ? void 0 : (_parsed$current = parsed.current) === null || _parsed$current === void 0 ? void 0 : _parsed$current.vcId
+    });
     return wrapRoot(renderError ? renderError() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_broken.default, {}));
   }
 }

package/lib/PricingTable/PricingPlan.js

@@ -26,7 +26,7 @@ function PricingPlan(_ref) {
     plan
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PlanCard, {
-    shadow: true,
+    $shadow: true,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "card-header",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -77,4 +77,4 @@ PricingPlan.propTypes = {
 const PlanCard = (0, _styledComponents.default)(_Card.default).withConfig({
   displayName: "PricingPlan__PlanCard",
   componentId: "sc-11tuq1x-0"
-})(["height:500px;display:flex;flex-direction:column;@media (max-width:320px){margin-top:20px;}&&{", "}.card-header{height:80px;background-color:#f1fbfb;display:flex;flex-flow:column;align-items:center;justify-content:center;.title{font-size:18px;font-weight:600;text-align:center;color:#404040;margin:0;}}.card-content{display:flex;flex-direction:column;justify-content:space-between;align-items:center;flex-grow:1;}.plan-content{display:flex;flex-direction:column;flex-grow:1;.plan-pricing{display:flex;justify-content:center;align-items:baseline;margin-bottom:12px;color:#4e6af6;text-align:center;}.price-number{font-size:30px;font-weight:600;color:#4e6af6;}.plan-services strong{color:#4e6af6;font-weight:500;}}.plan-actions{width:100%;}"], props => props.shadow ? '' : 'box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1)');
+})(["height:500px;display:flex;flex-direction:column;@media (max-width:320px){margin-top:20px;}&&{", "}.card-header{height:80px;background-color:#f1fbfb;display:flex;flex-flow:column;align-items:center;justify-content:center;.title{font-size:18px;font-weight:600;text-align:center;color:#404040;margin:0;}}.card-content{display:flex;flex-direction:column;justify-content:space-between;align-items:center;flex-grow:1;}.plan-content{display:flex;flex-direction:column;flex-grow:1;.plan-pricing{display:flex;justify-content:center;align-items:baseline;margin-bottom:12px;color:#4e6af6;text-align:center;}.price-number{font-size:30px;font-weight:600;color:#4e6af6;}.plan-services strong{color:#4e6af6;font-weight:500;}}.plan-actions{width:100%;}"], props => props.$shadow ? '' : 'box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1)');

package/lib/PricingTable/index.js

@@ -29,7 +29,10 @@ function PricingTable(_ref) {
         container: true,
         spacing: 2,
         justifyContent: "center",
-        children: plans.map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+        children: plans.map((x, index) =>
+        /*#__PURE__*/
+        // eslint-disable-next-line react/no-array-index-key
+        (0, _jsxRuntime.jsx)(_Grid.default, {
           item: true,
           className: "plan-item",
           xs: 12,
@@ -38,7 +41,7 @@ function PricingTable(_ref) {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PricingPlan.default, {
             plan: x
           })
-        }, x.id))
+        }, index))
       })
     });
   }

package/lib/Screenshot/index.js

@@ -166,7 +166,9 @@ function Screenshot(props) {
       className: "device-frame",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "device-content",
-        children: findChildren(_react.Children.toArray(children))
+        children: findChildren(_react.Children.toArray(children)).map((item, index) => /*#__PURE__*/(0, _react.cloneElement)(item, {
+          key: index
+        }))
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "device-stripe"

package/lib/Tabs/index.js

@@ -58,7 +58,7 @@ function Tabs(_ref2) {
       rest = _objectWithoutProperties(_ref2, _excluded);
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledMuiTabs, _objectSpread(_objectSpread({
-    scrollButtons: "on",
+    scrollButtons: "auto",
     variant: "scrollable",
     value: current,
     onChange: (_, newValue) => _onChange(newValue),

package/lib/Video/index.js

@@ -63,7 +63,7 @@ function Video(props) {
         style: styles,
         src: url,
         onLoad: () => setLoaded(true),
-        allowFullScreen: "true"
+        allowFullScreen: true
       }), !loaded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
         className: "loading-indicator",
         color: "primary"

package/lib/Wallet/Action.js

@@ -84,7 +84,7 @@ function WalletAction(props) {
 
 WalletAction.propTypes = {
   action: _propTypes.default.string,
-  size: _propTypes.default.oneOf(['large', 'medium', 'small']),
+  size: _propTypes.default.oneOf(['xlarge', 'large', 'medium', 'small']),
   textLayout: _propTypes.default.oneOf(['vertical', 'horizontal']),
   style: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string])
 };

package/package.json

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

package/src/CodeBlock/index.js

@@ -74,7 +74,7 @@ export default function CodeBlock({ code, language, children, ...rest }) {
           dangerouslySetInnerHTML={{ __html: hljs.highlightAuto(source, [language]).value }}
         />
       </span>
-      <Button className="copy-button" onClick={onCopy} tabIndex="-1" color="primary" disabled={copied}>
+      <Button className="copy-button" onClick={onCopy} color="primary" disabled={copied}>
         {!copied && <CopyIcon style={{ color: '#fff', fontSize: 16 }} />}
         {copied && <CheckIcon style={{ color: '#fff', fontSize: 16 }} />}
       </Button>
@@ -134,7 +134,7 @@ const Pre = styled.pre`
 
   &:hover {
     .copy-button {
-      display: block;
+      display: flex;
     }
   }
 

package/src/CountDown/index.js

@@ -43,8 +43,8 @@ function FixWidthNumber({ number, label, length = 2 }) {
 
 export default class CountDown extends Component {
   constructor(props) {
+    super(props);
     const newProps = mergeProps(props, CountDown, ['dark', 'endTime', 'style']);
-    super(newProps);
     this.state = getRemaining(newProps.endTime);
     this.timer = null;
   }

package/src/Footer/index.js

@@ -11,8 +11,9 @@ export default function Footer(props) {
   const newProps = mergeProps(props, Footer, ['dark', 'style']);
   const { className, copyStart, style, brand, dark } = newProps;
 
-  const endYear = new Date().getFullYear();
-  const copyYear = endYear === copyStart ? endYear : `${copyStart}-${endYear}`;
+  const endYearString = `${new Date().getFullYear()}`;
+  const copyStartString = `${copyStart}`;
+  const copyYear = endYearString === copyStartString ? endYearString : `${copyStartString}-${endYearString}`;
 
   return (
     <Container className={className} style={style} dark={dark}>
@@ -35,7 +36,7 @@ export default function Footer(props) {
 Footer.propTypes = {
   dark: PropTypes.bool,
   className: PropTypes.string,
-  copyStart: PropTypes.string,
+  copyStart: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   brand: PropTypes.string,
   style: PropTypes.object,
 };

package/src/InfoRow/index.js

@@ -40,7 +40,7 @@ InfoRow.defaultProps = {
 
     return typeof name === 'string' ? resetName : name;
   },
-  valueComponent: 'p',
+  valueComponent: 'div',
   layout: 'horizontal',
 };
 

package/src/Locale/context.js

@@ -39,8 +39,12 @@ const create = () => {
     const [currentLocale, setCurrentLocale] = useState(getLocale(locale));
 
     useEffect(() => {
-      setLocale(currentLocale);
-    }, [currentLocale]);
+      const tmpLocale = getLocale(locale);
+      if (tmpLocale !== currentLocale) {
+        setCurrentLocale(tmpLocale);
+        setLocale(tmpLocale);
+      }
+    }, [currentLocale, locale]);
 
     const changeLocale = (newLocale) => {
       setCurrentLocale(newLocale);

package/src/Metric/index.js

@@ -8,7 +8,7 @@ export default function Metric({ icon, value, name, url, animated, LinkComponent
   const metric = (
     <>
       <div className="metric__image">
-        <ImageIcon name={icon} alt={name} size={30} prefix={prefix} color="#222222" />
+        <ImageIcon name={icon} alt={typeof name === 'string' ? name : ''} size={30} prefix={prefix} color="#222222" />
       </div>
       <div>
         <div
@@ -26,7 +26,7 @@ export default function Metric({ icon, value, name, url, animated, LinkComponent
 Metric.propTypes = {
   icon: PropTypes.string.isRequired,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  name: PropTypes.string.isRequired,
+  name: PropTypes.node.isRequired,
   animated: PropTypes.bool,
   url: PropTypes.string,
   LinkComponent: PropTypes.any,

package/src/NFTDisplay/index.js

@@ -69,13 +69,15 @@ function NFTDisplay({
     </Root>
   );
 
+  const parsed = useRef(data);
+
   try {
-    const parsed = useRef(data);
     // 如果是 raw data 先解析
     if (typeof parsed.current === 'string') {
       parsed.current = JSON.parse(data);
       // console.log('[debug] parse data')
     }
+
     const { vcId } = parsed.current;
     // 需要兼容新旧两种类型的数据结构, nft data 有 credentialSubject 属性, 说明是旧 nft data, 否则是新 nft data
     const display = parsed.current.credentialSubject
@@ -147,14 +149,14 @@ function NFTDisplay({
             const buffer = pako.ungzip(fromBase64(content), {});
             const svg = Buffer.from(buffer).toString('utf8');
             if (checkSvg && !isSvg(svg)) {
-              throw new Error(`Invalid SVG: ${svg}`);
+              throw new Error('Invalid SVG of type svg_gzipped');
             }
             const Embedder = getSvgEmbedder(preferredSvgEmbedder);
             return <Embedder svg={svg} />;
           }
           case 'svg': {
             if (checkSvg && !isSvg(content)) {
-              throw new Error(`Invalid SVG: ${content}`);
+              throw new Error('Invalid SVG of type svg');
             }
             const Embedder = getSvgEmbedder(preferredSvgEmbedder);
             return <Embedder svg={content} />;
@@ -176,7 +178,10 @@ function NFTDisplay({
       </>
     );
   } catch (e) {
-    console.error(e);
+    console.error(e?.message, {
+      nftId: address,
+      vcId: parsed?.current?.vcId,
+    });
     return wrapRoot(renderError ? renderError() : <DefaultBrokenImage />);
   }
 }

package/src/PricingTable/PricingPlan.js

@@ -8,7 +8,7 @@ import Typography from '@mui/material/Typography';
 
 function PricingPlan({ plan }) {
   return (
-    <PlanCard shadow>
+    <PlanCard $shadow>
       <div className="card-header">
         <div className="title">{plan.name}</div>
       </div>
@@ -54,7 +54,7 @@ const PlanCard = styled(Card)`
   }
 
   && {
-    ${(props) => (props.shadow ? '' : 'box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1)')}
+    ${(props) => (props.$shadow ? '' : 'box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1)')}
   }
 
   .card-header {

package/src/PricingTable/index.js

@@ -9,8 +9,9 @@ function PricingTable({ plans }) {
     return (
       <Div variant="even">
         <Grid container spacing={2} justifyContent="center">
-          {plans.map((x) => (
-            <Grid item className="plan-item" key={x.id} xs={12} sm={6} md={3}>
+          {plans.map((x, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <Grid item className="plan-item" key={index} xs={12} sm={6} md={3}>
               <PricingPlan plan={x} />
             </Grid>
           ))}

package/src/Screenshot/index.js

@@ -1,4 +1,4 @@
-import { createElement, Children } from 'react';
+import { createElement, Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
@@ -130,7 +130,10 @@ function Screenshot(props) {
       contentRadius={borderRadius}
       contentZIndex={zIndex}>
       <div className="device-frame">
-        <div className="device-content">{findChildren(Children.toArray(children))}</div>
+        <div className="device-content">
+          {/* eslint-disable-next-line react/no-array-index-key */}
+          {findChildren(Children.toArray(children)).map((item, index) => cloneElement(item, { key: index }))}
+        </div>
       </div>
       <div className="device-stripe" />
       <div className="device-header" />

package/src/Tabs/index.js

@@ -24,7 +24,7 @@ const StyledMuiTabs = styled(MuiTabs)(({ theme }) => ({
 export default function Tabs({ tabs, current, onChange, ...rest }) {
   return (
     <StyledMuiTabs
-      scrollButtons="on"
+      scrollButtons="auto"
       variant="scrollable"
       value={current}
       onChange={(_, newValue) => onChange(newValue)}

package/src/Video/index.js

@@ -23,7 +23,7 @@ export default function Video(props) {
   if (url.indexOf('v.qq.com') > 0) {
     return (
       <Placeholder style={{ width, height }}>
-        <iframe title={url} style={styles} src={url} onLoad={() => setLoaded(true)} allowFullScreen="true" />
+        <iframe title={url} style={styles} src={url} onLoad={() => setLoaded(true)} allowFullScreen />
         {!loaded && <CircularProgress className="loading-indicator" color="primary" />}
       </Placeholder>
     );

package/src/Wallet/Action.js

@@ -35,7 +35,7 @@ export default function WalletAction(props) {
 
 WalletAction.propTypes = {
   action: PropTypes.string,
-  size: PropTypes.oneOf(['large', 'medium', 'small']),
+  size: PropTypes.oneOf(['xlarge', 'large', 'medium', 'small']),
   textLayout: PropTypes.oneOf(['vertical', 'horizontal']),
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
 };