@arcblock/ux 2.11.14 → 2.11.16

package/lib/SessionUser/components/did-space.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
+import { useState } from 'react';
 import { useMemoizedFn } from 'ahooks';
 import { MenuItem, Divider } from '@mui/material';
 import { Icon } from '@iconify/react';
@@ -45,6 +46,7 @@ DIDSpaceIcon.defaultProps = {
 };
 import { DID_SPACE_URL } from '../../Util/constant';
 import { TBox } from '../../MuiWrap';
+import Typography from '../../Typography';
 export default function DidSpace({
   session,
   locale = 'en',
@@ -54,6 +56,13 @@ export default function DidSpace({
     return translate(translations, key, locale, 'en', data);
   });
   const didSpace = session.user?.didSpace ?? {};
+  const [offset, setOffset] = useState(0);
+  const onShrink = useMemoizedFn(({
+    fontSize,
+    initialSize
+  }) => {
+    setOffset(Math.ceil((initialSize - fontSize) / 4));
+  });
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(TBox, {
       component: "a",
@@ -68,26 +77,51 @@ export default function DidSpace({
         sx: {
           display: 'flex',
           alignItems: 'center',
-          gap: 1,
+          gap: 0.5,
           '&:hover': {
             backgroundColor: `${colors.surfacePrimarySubtitle} !important`
           },
           py: 1
         },
-        children: [/*#__PURE__*/_jsx(DIDSpaceIcon, {
+        children: [/*#__PURE__*/_jsx("div", {
+          style: {
+            display: 'flex',
+            alignItems: 'center'
+          },
+          children: /*#__PURE__*/_jsx(DIDSpaceIcon, {
+            style: {
+              height: '24px',
+              marginLeft: '-24px',
+              marginRight: '-28px'
+            }
+          })
+        }), /*#__PURE__*/_jsx("span", {
           style: {
-            height: '24px',
-            marginLeft: '-24px',
-            marginRight: '-24px'
-          }
-        }), /*#__PURE__*/_jsxs("span", {
+            color: colors.foregroundsFgSubtile
+          },
+          children: ":"
+        }), /*#__PURE__*/_jsx("div", {
           style: {
             flexGrow: 1,
             minWidth: 0,
-            color: didSpace.did ? colors.foregroundsFgSubtile : colors.textMuted
+            color: didSpace.did ? colors.foregroundsFgSubtile : colors.textMuted,
+            overflow: 'hidden',
+            whiteSpace: 'nowrap'
           },
-          children: [": ", didSpace.did ? didSpace.name : t('disconnected')]
+          children: /*#__PURE__*/_jsx(Typography, {
+            fontSize: "auto",
+            minFontSize: 1,
+            sx: {
+              marginTop: `${offset}px`
+            },
+            onShrink: onShrink,
+            children: didSpace.did ? didSpace.name : t('disconnected')
+          })
         }), /*#__PURE__*/_jsx(Icon, {
+          style: {
+            marginTop: `${offset}px`,
+            flexShrink: 0
+          },
           icon: LensIcon,
           fontSize: 8,
           color: didSpace.did ? colors.surfaceSuccess : colors.gray6

package/lib/Typography/index.d.ts

@@ -2,5 +2,9 @@ import { type TypographyProps as MuiTypographyProps } from '@mui/material';
 export interface TypographyProps extends MuiTypographyProps {
     fontSize?: string | number;
     minFontSize?: number;
+    onShrink?: ({ fontSize, initialSize }: {
+        fontSize: number;
+        initialSize: number;
+    }) => void;
 }
-export default function Typography({ children, minFontSize, fontSize, sx, ...rest }: TypographyProps): import("react/jsx-runtime").JSX.Element;
+export default function Typography({ children, minFontSize, fontSize, sx, onShrink, ...rest }: TypographyProps): import("react/jsx-runtime").JSX.Element;

package/lib/Typography/index.js

@@ -2,11 +2,28 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Typography as MuiTypography, Skeleton } from '@mui/material';
 import { useCreation, useReactive, useSize } from 'ahooks';
 import { useEffect, useRef } from 'react';
+const noop = (...args) => {};
+let minBrowserFontSize = -1;
+function detectMinimumFontSize() {
+  const testDiv = document.createElement('div');
+  Object.assign(testDiv.style, {
+    fontSize: '1px',
+    visibility: 'hidden',
+    position: 'absolute'
+  });
+  testDiv.textContent = 'Test';
+  document.body.appendChild(testDiv);
+  const size = parseFloat(getComputedStyle(testDiv).fontSize);
+  document.body.removeChild(testDiv);
+  return size;
+}
 export default function Typography({
   children = null,
   minFontSize = 12,
+  /* 设置为 auto 时字体会自动收缩，直到达到浏览器最小字体限制 */
   fontSize,
   sx,
+  onShrink = noop,
   ...rest
 }) {
   const refMock = useRef(null);
@@ -26,11 +43,26 @@ export default function Typography({
           state.initialSize = Number(styleSize.replace('px', ''));
           state.fontSize = state.initialSize;
         }
-        if (containerSize && mockSize) {
+        if (minBrowserFontSize < 0) {
+          minBrowserFontSize = detectMinimumFontSize();
+        }
+        // 达到浏览器最小字体限制，停止缩放
+        if (state.fontSize <= minBrowserFontSize) {
+          state.loading = false;
+          onShrink?.({
+            fontSize: state.fontSize,
+            initialSize: state.initialSize
+          });
+        } else if (containerSize && mockSize) {
+          // 超过容器宽度，尝试收缩
           if (containerSize.width < mockSize.width && state.fontSize > minFontSize) {
             state.fontSize--;
           } else {
             state.loading = false;
+            onShrink?.({
+              fontSize: state.fontSize,
+              initialSize: state.initialSize
+            });
           }
         }
       } else {

package/lib/Util/constant.d.ts

@@ -8,7 +8,7 @@ export declare const RELAY_SOCKET_PREFIX = "/.well-known/service";
 export declare const API_DID_PREFIX = "/api/did";
 export declare const DASHBOARD_URL = "/.well-known/service/admin";
 export declare const PROFILE_URL = "/.well-known/service/user";
-export declare const DID_SPACE_URL = "/.well-known/service/user/settings";
+export declare const DID_SPACE_URL = "/.well-known/service/user/settings#storage";
 export declare const NAVIGATION_URL = "/.well-known/service/admin/navigation";
 export declare const DID_PREFIX = "did:abt:";
 export declare const PASSPORT_STATUS: {

package/lib/Util/constant.js

@@ -8,7 +8,7 @@ export const RELAY_SOCKET_PREFIX = '/.well-known/service';
 export const API_DID_PREFIX = '/api/did';
 export const DASHBOARD_URL = `${AUTH_SERVICE_PREFIX}/admin`;
 export const PROFILE_URL = `${AUTH_SERVICE_PREFIX}/user`;
-export const DID_SPACE_URL = `${AUTH_SERVICE_PREFIX}/user/settings`;
+export const DID_SPACE_URL = `${AUTH_SERVICE_PREFIX}/user/settings#storage`;
 export const NAVIGATION_URL = `${AUTH_SERVICE_PREFIX}/admin/navigation`;
 export const DID_PREFIX = 'did:abt:';
 export const PASSPORT_STATUS = {

package/package.json

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

package/src/SessionUser/components/did-space.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useMemoizedFn } from 'ahooks';
 import { MenuItem, BoxProps, Divider } from '@mui/material';
 import { Icon } from '@iconify/react';
@@ -9,6 +10,7 @@ import { translations } from '../libs/translation';
 import DIDSpaceIcon from '../images/did-spaces.svg?react';
 import { DID_SPACE_URL } from '../../Util/constant';
 import { TBox } from '../../MuiWrap';
+import Typography from '../../Typography';
 
 export interface DidSpaceProps extends BoxProps {
   session: Session;
@@ -21,6 +23,10 @@ export default function DidSpace({ session, locale = 'en', ...rest }: DidSpacePr
   });
 
   const didSpace = session.user?.didSpace ?? {};
+  const [offset, setOffset] = useState(0);
+  const onShrink = useMemoizedFn(({ fontSize, initialSize }: { fontSize: number; initialSize: number }) => {
+    setOffset(Math.ceil((initialSize - fontSize) / 4));
+  });
 
   return (
     <>
@@ -29,22 +35,34 @@ export default function DidSpace({ session, locale = 'en', ...rest }: DidSpacePr
           sx={{
             display: 'flex',
             alignItems: 'center',
-            gap: 1,
+            gap: 0.5,
             '&:hover': {
               backgroundColor: `${colors.surfacePrimarySubtitle} !important`,
             },
             py: 1,
           }}>
-          <DIDSpaceIcon style={{ height: '24px', marginLeft: '-24px', marginRight: '-24px' }} />
-          <span
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <DIDSpaceIcon style={{ height: '24px', marginLeft: '-24px', marginRight: '-28px' }} />
+          </div>
+          <span style={{ color: colors.foregroundsFgSubtile }}>:</span>
+          <div
             style={{
               flexGrow: 1,
               minWidth: 0,
               color: didSpace.did ? colors.foregroundsFgSubtile : colors.textMuted,
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
             }}>
-            : {didSpace.did ? didSpace.name : t('disconnected')}
-          </span>
-          <Icon icon={LensIcon} fontSize={8} color={didSpace.did ? colors.surfaceSuccess : colors.gray6} />
+            <Typography fontSize="auto" minFontSize={1} sx={{ marginTop: `${offset}px` }} onShrink={onShrink}>
+              {didSpace.did ? didSpace.name : t('disconnected')}
+            </Typography>
+          </div>
+          <Icon
+            style={{ marginTop: `${offset}px`, flexShrink: 0 }}
+            icon={LensIcon}
+            fontSize={8}
+            color={didSpace.did ? colors.surfaceSuccess : colors.gray6}
+          />
         </MenuItem>
       </TBox>
       <Divider sx={{ m: '0!important', borderColor: colors.strokeSep }} />

package/src/Typography/index.tsx

@@ -5,9 +5,37 @@ import { useEffect, useRef } from 'react';
 export interface TypographyProps extends MuiTypographyProps {
   fontSize?: string | number;
   minFontSize?: number;
+  onShrink?: ({ fontSize, initialSize }: { fontSize: number; initialSize: number }) => void;
 }
 
-export default function Typography({ children = null, minFontSize = 12, fontSize, sx, ...rest }: TypographyProps) {
+const noop = (...args: any[]) => {};
+let minBrowserFontSize = -1;
+
+function detectMinimumFontSize() {
+  const testDiv = document.createElement('div');
+
+  Object.assign(testDiv.style, {
+    fontSize: '1px',
+    visibility: 'hidden',
+    position: 'absolute',
+  });
+  testDiv.textContent = 'Test';
+  document.body.appendChild(testDiv);
+
+  const size = parseFloat(getComputedStyle(testDiv).fontSize);
+  document.body.removeChild(testDiv);
+  return size;
+}
+
+export default function Typography({
+  children = null,
+  minFontSize = 12,
+  /* 设置为 auto 时字体会自动收缩，直到达到浏览器最小字体限制 */
+  fontSize,
+  sx,
+  onShrink = noop,
+  ...rest
+}: TypographyProps) {
   const refMock = useRef<HTMLSpanElement>(null);
   const refContainer = useRef<HTMLDivElement>(null);
   const state = useReactive<{
@@ -30,11 +58,20 @@ export default function Typography({ children = null, minFontSize = 12, fontSize
           state.initialSize = Number(styleSize.replace('px', ''));
           state.fontSize = state.initialSize;
         }
-        if (containerSize && mockSize) {
+        if (minBrowserFontSize < 0) {
+          minBrowserFontSize = detectMinimumFontSize();
+        }
+        // 达到浏览器最小字体限制，停止缩放
+        if (state.fontSize! <= minBrowserFontSize) {
+          state.loading = false;
+          onShrink?.({ fontSize: state.fontSize!, initialSize: state.initialSize! });
+        } else if (containerSize && mockSize) {
+          // 超过容器宽度，尝试收缩
           if (containerSize.width < mockSize.width && state.fontSize! > minFontSize) {
             state.fontSize!--;
           } else {
             state.loading = false;
+            onShrink?.({ fontSize: state.fontSize!, initialSize: state.initialSize! });
           }
         }
       } else {

package/src/Util/constant.ts

@@ -10,7 +10,7 @@ export const API_DID_PREFIX = '/api/did';
 
 export const DASHBOARD_URL = `${AUTH_SERVICE_PREFIX}/admin`;
 export const PROFILE_URL = `${AUTH_SERVICE_PREFIX}/user`;
-export const DID_SPACE_URL = `${AUTH_SERVICE_PREFIX}/user/settings`;
+export const DID_SPACE_URL = `${AUTH_SERVICE_PREFIX}/user/settings#storage`;
 export const NAVIGATION_URL = `${AUTH_SERVICE_PREFIX}/admin/navigation`;
 
 export const DID_PREFIX = 'did:abt:';