@arcblock/ux 2.12.2 → 2.12.3

package/lib/Address/responsive-did-address.js

@@ -4,6 +4,7 @@ import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } f
 import { Box } from '@mui/material';
 import { styled } from '../Theme';
 import DidAddress from './did-address';
+import { getFontSize } from '../Util';
 
 /**
  * 根据父容器宽度自动切换 compact 模式
@@ -18,7 +19,7 @@ const ResponsiveDidAddress = /*#__PURE__*/forwardRef(({
   style,
   className,
   component = 'span',
-  size,
+  size = 0,
   ...rest
 }, ref) => {
   const [compact, setCompact] = useState(false);
@@ -79,6 +80,8 @@ const ResponsiveDidAddress = /*#__PURE__*/forwardRef(({
     ref: containerRef,
     style: style,
     className: className,
+    size: size,
+    inline: rest.inline,
     children: [/*#__PURE__*/_jsx(StyledDidAddress, {
       style: {
         position: loading ? 'absolute' : 'static',
@@ -99,10 +102,14 @@ const ResponsiveDidAddress = /*#__PURE__*/forwardRef(({
   });
 });
 export default ResponsiveDidAddress;
-const Root = styled(Box)`
+const Root = styled(Box, {
+  shouldForwardProp: prop => prop !== 'size'
+})`
   display: block;
   width: 100%; /* flex & column & align-items: flex-start 时, 块级元素不会自动铺满容器 */
-  font-size: 0;
+  font-size: ${({
+  size
+}) => getFontSize(size)};
   overflow: hidden;
   ${({
   inline

package/lib/Util/index.d.ts

@@ -58,7 +58,7 @@ export declare function openWebWallet({ webWalletUrl, action, locale, url, windo
 }): {
     type: string;
 };
-export declare const getFontSize: (size: string) => string;
+export declare const getFontSize: (size: string | number) => string;
 export declare const isEthereumDid: (did: string) => boolean;
 export declare const appendParams: (url: string, params: {
     imageFilter: "crop" | "resize";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.12.2",
+  "version": "2.12.3",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -68,12 +68,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "4dc132cab82765eef5194cf00075a13bd5d8e458",
+  "gitHead": "d0ad7fcbd9bbae010ad58235494150e3c0814d43",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.12.2",
-    "@arcblock/nft-display": "^2.12.2",
-    "@arcblock/react-hooks": "^2.12.2",
+    "@arcblock/icons": "^2.12.3",
+    "@arcblock/nft-display": "^2.12.3",
+    "@arcblock/react-hooks": "^2.12.3",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/Address/responsive-did-address.tsx

@@ -3,6 +3,7 @@ import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } f
 import { Box } from '@mui/material';
 import { styled } from '../Theme';
 import DidAddress, { HTMLDidAddressElement, IDidAddressProps } from './did-address';
+import { getFontSize } from '../Util';
 
 /**
  * 根据父容器宽度自动切换 compact 模式
@@ -14,7 +15,7 @@ import DidAddress, { HTMLDidAddressElement, IDidAddressProps } from './did-addre
  * - 监听容器宽度变化, 当容器宽度变化时, 对比容器宽度和 did address full-width, => 切换 compact 模式
  */
 const ResponsiveDidAddress = forwardRef<HTMLDidAddressElement, IResponsiveDidAddressProps>(
-  ({ style, className, component = 'span', size, ...rest }, ref) => {
+  ({ style, className, component = 'span', size = 0, ...rest }, ref) => {
     const [compact, setCompact] = useState(false);
     const isCompact = useLatest(compact);
     // did address 完整显示时的宽度
@@ -79,7 +80,7 @@ const ResponsiveDidAddress = forwardRef<HTMLDidAddressElement, IResponsiveDidAdd
     }, [containerWidth, addressFullWidth]);
 
     return (
-      <Root as={component} ref={containerRef} style={style} className={className}>
+      <Root as={component} ref={containerRef} style={style} className={className} size={size} inline={rest.inline}>
         <StyledDidAddress
           style={{
             position: loading ? 'absolute' : 'static',
@@ -107,12 +108,17 @@ export interface IResponsiveDidAddressProps extends IDidAddressProps {
   component?: React.ElementType;
 }
 
-const Root = styled(Box)`
+type RootProps = {
+  size: number;
+  inline?: boolean;
+};
+
+const Root = styled(Box, { shouldForwardProp: (prop) => prop !== 'size' })<RootProps>`
   display: block;
   width: 100%; /* flex & column & align-items: flex-start 时, 块级元素不会自动铺满容器 */
-  font-size: 0;
+  font-size: ${({ size }) => getFontSize(size)};
   overflow: hidden;
-  ${({ inline }: any) =>
+  ${({ inline }) =>
     inline &&
     `
     display: inline-block;

package/src/Util/index.ts

@@ -313,7 +313,7 @@ export function openWebWallet({
   return { type: 'web' };
 }
 
-export const getFontSize = (size: string) => {
+export const getFontSize = (size: string | number) => {
   // 12px 及以上的 size 有效, 否则返回 inherit
   if (size && Number(size) >= 12) {
     return `${Number(size)}px`;