@arcblock/ux 2.12.1 → 2.12.3

package/lib/Address/responsive-did-address.d.ts

@@ -8,7 +8,6 @@ import { HTMLDidAddressElement, IDidAddressProps } from './did-address';
  * - DidAddress 本身以 inline 形式渲染 (方便探测 did-address 的 full-width)
  * - 组件 mounted 时记录 did address 的 full-width (非 compact 模式的宽度)
  * - 监听容器宽度变化, 当容器宽度变化时, 对比容器宽度和 did address full-width, => 切换 compact 模式
- * - TODO: 初始化时, 在确定是否应该以 compact 模式渲染前, 隐藏显示, 避免闪烁问题
  */
 declare const ResponsiveDidAddress: React.ForwardRefExoticComponent<Omit<IResponsiveDidAddressProps, "ref"> & React.RefAttributes<HTMLDidAddressElement>>;
 export default ResponsiveDidAddress;

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

@@ -1,9 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useLatest, useSize } from 'ahooks';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDebounceFn, useLatest } from 'ahooks';
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { Box } from '@mui/material';
 import { styled } from '../Theme';
 import DidAddress from './did-address';
+import { getFontSize } from '../Util';
 
 /**
  * 根据父容器宽度自动切换 compact 模式
@@ -13,22 +14,27 @@ import DidAddress from './did-address';
  * - DidAddress 本身以 inline 形式渲染 (方便探测 did-address 的 full-width)
  * - 组件 mounted 时记录 did address 的 full-width (非 compact 模式的宽度)
  * - 监听容器宽度变化, 当容器宽度变化时, 对比容器宽度和 did address full-width, => 切换 compact 模式
- * - TODO: 初始化时, 在确定是否应该以 compact 模式渲染前, 隐藏显示, 避免闪烁问题
  */
 const ResponsiveDidAddress = /*#__PURE__*/forwardRef(({
   style,
   className,
   component = 'span',
+  size = 0,
   ...rest
 }, ref) => {
   const [compact, setCompact] = useState(false);
   const isCompact = useLatest(compact);
   // did address 完整显示时的宽度
   const [addressFullWidth, setAddressFullWidth] = useState(null);
+  const [containerWidth, setContainerWidth] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const {
+    run: delaySetLoadingFalse
+  } = useDebounceFn(() => setLoading(false), {
+    wait: 50
+  });
   const containerRef = useRef(null);
   const innerRef = useRef(null);
-  const size = useSize(containerRef);
-  const containerWidth = size?.width || 0;
   useImperativeHandle(ref, () => new Proxy({}, {
     get(target, key) {
       return innerRef.current?.[key];
@@ -38,19 +44,30 @@ const ResponsiveDidAddress = /*#__PURE__*/forwardRef(({
   // 存储完整显示时 address 组件的宽度
   useEffect(() => {
     const innerWidth = innerRef.current?.offsetWidth || 0;
-    let resizeObserver = null;
+    let innerObserver = null;
+    let containerObserver = null;
+
+    // 初始化宽度
     setAddressFullWidth(innerWidth);
+    setContainerWidth(containerRef.current?.offsetWidth);
 
     // 由于自定义字体的缘故，innerRef 的初始宽度可能发生二次改变，使用 observer 监听捕获
-    resizeObserver = new ResizeObserver(() => {
+    innerObserver = new ResizeObserver(() => {
       if (!isCompact.current && innerRef.current?.offsetWidth !== innerWidth) {
         setAddressFullWidth(innerRef.current?.offsetWidth);
+        delaySetLoadingFalse();
       }
     });
-    if (innerRef.current) {
-      resizeObserver.observe(innerRef.current.getEl());
-    }
-    return () => resizeObserver.disconnect();
+    containerObserver = new ResizeObserver(() => {
+      setContainerWidth(containerRef.current?.offsetWidth);
+    });
+    innerObserver.observe(innerRef.current.getEl());
+    containerObserver.observe(containerRef.current);
+    delaySetLoadingFalse();
+    return () => {
+      innerObserver?.disconnect();
+      containerObserver?.disconnect();
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   useEffect(() => {
@@ -58,23 +75,41 @@ const ResponsiveDidAddress = /*#__PURE__*/forwardRef(({
       setCompact(containerWidth < addressFullWidth);
     }
   }, [containerWidth, addressFullWidth]);
-  return /*#__PURE__*/_jsx(Root, {
+  return /*#__PURE__*/_jsxs(Root, {
     as: component,
     ref: containerRef,
     style: style,
     className: className,
-    children: /*#__PURE__*/_jsx(StyledDidAddress, {
+    size: size,
+    inline: rest.inline,
+    children: [/*#__PURE__*/_jsx(StyledDidAddress, {
+      style: {
+        position: loading ? 'absolute' : 'static',
+        left: loading ? '-99999px' : 'auto'
+      },
       ...rest,
+      size: size,
       component: component,
       inline: true,
       compact: compact,
       ref: innerRef
-    })
+    }), loading && /*#__PURE__*/_jsx("div", {
+      style: {
+        width: '100%',
+        height: `${(size || 16) * 1.5}px`
+      }
+    })]
   });
 });
 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: ${({
+  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.1",
+  "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": "f354d93f7db5e2e0547b75a05b5e47fd9a9587ac",
+  "gitHead": "d0ad7fcbd9bbae010ad58235494150e3c0814d43",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.12.1",
-    "@arcblock/nft-display": "^2.12.1",
-    "@arcblock/react-hooks": "^2.12.1",
+    "@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

@@ -1,8 +1,9 @@
-import { useLatest, useSize } from 'ahooks';
+import { useDebounceFn, useLatest } from 'ahooks';
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { Box } from '@mui/material';
 import { styled } from '../Theme';
 import DidAddress, { HTMLDidAddressElement, IDidAddressProps } from './did-address';
+import { getFontSize } from '../Util';
 
 /**
  * 根据父容器宽度自动切换 compact 模式
@@ -12,18 +13,20 @@ import DidAddress, { HTMLDidAddressElement, IDidAddressProps } from './did-addre
  * - DidAddress 本身以 inline 形式渲染 (方便探测 did-address 的 full-width)
  * - 组件 mounted 时记录 did address 的 full-width (非 compact 模式的宽度)
  * - 监听容器宽度变化, 当容器宽度变化时, 对比容器宽度和 did address full-width, => 切换 compact 模式
- * - TODO: 初始化时, 在确定是否应该以 compact 模式渲染前, 隐藏显示, 避免闪烁问题
  */
 const ResponsiveDidAddress = forwardRef<HTMLDidAddressElement, IResponsiveDidAddressProps>(
-  ({ style, className, component = 'span', ...rest }, ref) => {
+  ({ style, className, component = 'span', size = 0, ...rest }, ref) => {
     const [compact, setCompact] = useState(false);
     const isCompact = useLatest(compact);
     // did address 完整显示时的宽度
     const [addressFullWidth, setAddressFullWidth] = useState<number | null | undefined>(null);
+    const [containerWidth, setContainerWidth] = useState<number | null | undefined>(null);
+    const [loading, setLoading] = useState(true);
+    const { run: delaySetLoadingFalse } = useDebounceFn(() => setLoading(false), {
+      wait: 50,
+    });
     const containerRef = useRef<HTMLDivElement>(null);
     const innerRef = useRef<HTMLDidAddressElement>(null);
-    const size = useSize(containerRef);
-    const containerWidth = size?.width || 0;
 
     useImperativeHandle(
       ref,
@@ -41,22 +44,32 @@ const ResponsiveDidAddress = forwardRef<HTMLDidAddressElement, IResponsiveDidAdd
     // 存储完整显示时 address 组件的宽度
     useEffect(() => {
       const innerWidth = innerRef.current?.offsetWidth || 0;
-      let resizeObserver: ResizeObserver | null = null;
+      let innerObserver: ResizeObserver | null = null;
+      let containerObserver: ResizeObserver | null = null;
 
+      // 初始化宽度
       setAddressFullWidth(innerWidth);
+      setContainerWidth(containerRef.current?.offsetWidth);
 
       // 由于自定义字体的缘故，innerRef 的初始宽度可能发生二次改变，使用 observer 监听捕获
-      resizeObserver = new ResizeObserver(() => {
+      innerObserver = new ResizeObserver(() => {
         if (!isCompact.current && innerRef.current?.offsetWidth !== innerWidth) {
           setAddressFullWidth(innerRef.current?.offsetWidth);
+          delaySetLoadingFalse();
         }
       });
+      containerObserver = new ResizeObserver(() => {
+        setContainerWidth(containerRef.current?.offsetWidth);
+      });
 
-      if (innerRef.current) {
-        resizeObserver.observe(innerRef.current.getEl());
-      }
+      innerObserver.observe(innerRef.current!.getEl());
+      containerObserver.observe(containerRef.current!);
+      delaySetLoadingFalse();
 
-      return () => resizeObserver.disconnect();
+      return () => {
+        innerObserver?.disconnect();
+        containerObserver?.disconnect();
+      };
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
@@ -65,9 +78,23 @@ const ResponsiveDidAddress = forwardRef<HTMLDidAddressElement, IResponsiveDidAdd
         setCompact(containerWidth < addressFullWidth);
       }
     }, [containerWidth, addressFullWidth]);
+
     return (
-      <Root as={component} ref={containerRef} style={style} className={className}>
-        <StyledDidAddress {...rest} component={component} inline compact={compact} ref={innerRef} />
+      <Root as={component} ref={containerRef} style={style} className={className} size={size} inline={rest.inline}>
+        <StyledDidAddress
+          style={{
+            position: loading ? 'absolute' : 'static',
+            left: loading ? '-99999px' : 'auto',
+          }}
+          {...rest}
+          size={size}
+          component={component}
+          inline
+          compact={compact}
+          ref={innerRef}
+        />
+        {/* placeholder */}
+        {loading && <div style={{ width: '100%', height: `${(size || 16) * 1.5}px` }} />}
       </Root>
     );
   }
@@ -81,10 +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: ${({ 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`;