@arcblock/ux 2.11.35 → 2.11.36

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

@@ -4,6 +4,7 @@ import React, { ReactNode } from 'react';
 import type { Locale } from '../type';
 export interface HTMLDidAddressElement extends HTMLDivElement {
     copy: () => void;
+    getEl: () => HTMLDivElement;
 }
 export interface IDidAddressProps extends BoxProps {
     component?: React.ElementType;

package/lib/Address/did-address.js

@@ -69,7 +69,8 @@ const DidAddress = /*#__PURE__*/forwardRef((props, ref) => {
     handleCopy();
   };
   useImperativeHandle(ref, () => new Proxy({
-    copy: handleCopy
+    copy: handleCopy,
+    getEl: () => rootRef.current
   }, {
     get(target, key) {
       return target[key] || rootRef.current?.[key];

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useSize } from 'ahooks';
+import { useLatest, useSize } from 'ahooks';
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { Box } from '@mui/material';
 import { styled } from '../Theme';
@@ -22,6 +22,7 @@ const ResponsiveDidAddress = /*#__PURE__*/forwardRef(({
   ...rest
 }, ref) => {
   const [compact, setCompact] = useState(false);
+  const isCompact = useLatest(compact);
   // did address 完整显示时的宽度
   const [addressFullWidth, setAddressFullWidth] = useState(null);
   const containerRef = useRef(null);
@@ -36,9 +37,20 @@ const ResponsiveDidAddress = /*#__PURE__*/forwardRef(({
 
   // 存储完整显示时 address 组件的宽度
   useEffect(() => {
-    if (!compact && addressFullWidth === null) {
-      setAddressFullWidth(innerRef.current?.offsetWidth);
+    const innerWidth = innerRef.current?.offsetWidth || 0;
+    let resizeObserver = null;
+    setAddressFullWidth(innerWidth);
+
+    // 由于自定义字体的缘故，innerRef 的初始宽度可能发生二次改变，使用 observer 监听捕获
+    resizeObserver = new ResizeObserver(() => {
+      if (!isCompact.current && innerRef.current?.offsetWidth !== innerWidth) {
+        setAddressFullWidth(innerRef.current?.offsetWidth);
+      }
+    });
+    if (innerRef.current) {
+      resizeObserver.observe(innerRef.current.getEl());
     }
+    return () => resizeObserver.disconnect();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.11.35",
+  "version": "2.11.36",
   "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": "61ce1e356b37df6fafb6e9330deb217791005a7a",
+  "gitHead": "43e4b6ab36c25fa46a52befc364971fd25f45767",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.11.35",
-    "@arcblock/nft-display": "^2.11.35",
-    "@arcblock/react-hooks": "^2.11.35",
+    "@arcblock/icons": "^2.11.36",
+    "@arcblock/nft-display": "^2.11.36",
+    "@arcblock/react-hooks": "^2.11.36",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/Address/did-address.tsx

@@ -23,6 +23,7 @@ const translations: Translations = {
 
 export interface HTMLDidAddressElement extends HTMLDivElement {
   copy: () => void;
+  getEl: () => HTMLDivElement;
 }
 export interface IDidAddressProps extends BoxProps {
   component?: React.ElementType;
@@ -98,6 +99,7 @@ const DidAddress = forwardRef<HTMLDidAddressElement, IDidAddressProps>((props, r
       new Proxy(
         {
           copy: handleCopy,
+          getEl: () => rootRef.current,
         },
         {
           get(target: any, key: string) {

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

@@ -1,4 +1,4 @@
-import { useSize } from 'ahooks';
+import { useLatest, useSize } from 'ahooks';
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { Box } from '@mui/material';
 import { styled } from '../Theme';
@@ -17,6 +17,7 @@ import DidAddress, { HTMLDidAddressElement, IDidAddressProps } from './did-addre
 const ResponsiveDidAddress = forwardRef<HTMLDidAddressElement, IResponsiveDidAddressProps>(
   ({ style, className, component = 'span', ...rest }, ref) => {
     const [compact, setCompact] = useState(false);
+    const isCompact = useLatest(compact);
     // did address 完整显示时的宽度
     const [addressFullWidth, setAddressFullWidth] = useState<number | null | undefined>(null);
     const containerRef = useRef<HTMLDivElement>(null);
@@ -39,9 +40,23 @@ const ResponsiveDidAddress = forwardRef<HTMLDidAddressElement, IResponsiveDidAdd
 
     // 存储完整显示时 address 组件的宽度
     useEffect(() => {
-      if (!compact && addressFullWidth === null) {
-        setAddressFullWidth(innerRef.current?.offsetWidth);
+      const innerWidth = innerRef.current?.offsetWidth || 0;
+      let resizeObserver: ResizeObserver | null = null;
+
+      setAddressFullWidth(innerWidth);
+
+      // 由于自定义字体的缘故，innerRef 的初始宽度可能发生二次改变，使用 observer 监听捕获
+      resizeObserver = new ResizeObserver(() => {
+        if (!isCompact.current && innerRef.current?.offsetWidth !== innerWidth) {
+          setAddressFullWidth(innerRef.current?.offsetWidth);
+        }
+      });
+
+      if (innerRef.current) {
+        resizeObserver.observe(innerRef.current.getEl());
       }
+
+      return () => resizeObserver.disconnect();
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);