@arcblock/ux 2.13.41 → 2.13.42

package/lib/DIDConnect/app-info-item.js

@@ -1,18 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, IconButton, Tooltip, useMediaQuery } from '@mui/material';
+import { Box, IconButton, Tooltip } from '@mui/material';
 import CheckIcon from '@iconify-icons/material-symbols/check';
 import { Icon } from '@iconify/react';
+import { useCreation, useSize } from 'ahooks';
+import { useRef } from 'react';
 import DID from '../DID';
 import { mergeSx } from '../Util/style';
 import AppIcon from './app-icon';
+import { DID_CONNECT_MEDIUM_WIDTH } from '../Util/constant';
 export default function AppInfoItem({
   appInfo,
   active = false,
   appLogo = null,
   sx
 }) {
-  const isTinyView = useMediaQuery('(max-width:400px)');
+  const rootRef = useRef(null);
+  const size = useSize(rootRef);
+  const isTinyView = useCreation(() => {
+    if (size) {
+      return size.width < DID_CONNECT_MEDIUM_WIDTH - 50;
+    }
+    return true;
+  }, [size, size?.width]);
   return /*#__PURE__*/_jsxs(Box, {
+    ref: rootRef,
     sx: mergeSx({
       display: 'flex',
       alignItems: 'center',

package/lib/DIDConnect/did-connect-footer.js

@@ -1,17 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, useMediaQuery } from '@mui/material';
+import { Box } from '@mui/material';
+import { useCreation, useSize } from 'ahooks';
+import { useRef } from 'react';
 import PoweredBy from './powered-by';
 import AppInfoItem from './app-info-item';
 import AppIcon from './app-icon';
 import { getDIDColor, hexToRgba } from '../Util';
 import { mergeSx } from '../Util/style';
+import { DID_CONNECT_MEDIUM_WIDTH } from '../Util/constant';
 export default function DIDConnectFooter({
   currentAppInfo = globalThis.blocklet,
   currentAppColor = globalThis.blocklet?.appPid ? getDIDColor(globalThis.blocklet?.appPid) : '#fff',
   sx
 }) {
-  const isSmallView = useMediaQuery('(max-width:640px)');
+  const rootRef = useRef(null);
+  const size = useSize(rootRef);
+  const isSmallView = useCreation(() => {
+    if (size) {
+      return size.width < DID_CONNECT_MEDIUM_WIDTH - 50;
+    }
+    return true;
+  }, [size, size?.width]);
   return /*#__PURE__*/_jsxs(Box, {
+    ref: rootRef,
     sx: mergeSx({
       display: 'flex',
       justifyContent: 'space-between',

package/lib/Util/constant.d.ts

@@ -34,3 +34,5 @@ export declare const OAUTH_PROVIDER: {
     github: string;
     google: string;
 };
+export declare const DID_CONNECT_SMALL_WIDTH = 360;
+export declare const DID_CONNECT_MEDIUM_WIDTH = 576;

package/lib/Util/constant.js

@@ -42,4 +42,6 @@ export const OAUTH_PROVIDER = {
   apple: 'Apple',
   github: 'Github',
   google: 'Google'
-};
+};
+export const DID_CONNECT_SMALL_WIDTH = 360;
+export const DID_CONNECT_MEDIUM_WIDTH = 576;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.41",
+  "version": "2.13.42",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -71,14 +71,14 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "333c9629e6d8ec6a25b85baf28ccf1899c135279",
+  "gitHead": "30e0b6eaccfe6847ba5404894e8ce76b352053e6",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.41",
-    "@arcblock/nft-display": "^2.13.41",
-    "@arcblock/react-hooks": "^2.13.41",
+    "@arcblock/icons": "^2.13.42",
+    "@arcblock/nft-display": "^2.13.42",
+    "@arcblock/react-hooks": "^2.13.42",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.41",
+    "@blocklet/theme": "^2.13.42",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",

package/src/DIDConnect/app-info-item.tsx

@@ -1,10 +1,13 @@
 import { Box, IconButton, SxProps, Tooltip, useMediaQuery } from '@mui/material';
 import CheckIcon from '@iconify-icons/material-symbols/check';
 import { Icon } from '@iconify/react';
+import { useCreation, useSize } from 'ahooks';
+import { useRef } from 'react';
 
 import DID from '../DID';
 import { mergeSx } from '../Util/style';
 import AppIcon from './app-icon';
+import { DID_CONNECT_MEDIUM_WIDTH } from '../Util/constant';
 
 export default function AppInfoItem({
   appInfo,
@@ -17,10 +20,18 @@ export default function AppInfoItem({
   appLogo?: React.ReactNode;
   sx?: SxProps;
 }) {
-  const isTinyView = useMediaQuery('(max-width:400px)');
+  const rootRef = useRef<HTMLDivElement>(null);
+  const size = useSize(rootRef);
+  const isTinyView = useCreation(() => {
+    if (size) {
+      return size.width < DID_CONNECT_MEDIUM_WIDTH - 50;
+    }
+    return true;
+  }, [size, size?.width]);
 
   return (
     <Box
+      ref={rootRef}
       sx={mergeSx(
         {
           display: 'flex',

package/src/DIDConnect/did-connect-footer.tsx

@@ -1,10 +1,13 @@
-import { Box, SxProps, useMediaQuery } from '@mui/material';
+import { Box, SxProps } from '@mui/material';
+import { useCreation, useSize } from 'ahooks';
+import { useRef } from 'react';
 
 import PoweredBy from './powered-by';
 import AppInfoItem from './app-info-item';
 import AppIcon from './app-icon';
 import { getDIDColor, hexToRgba } from '../Util';
 import { mergeSx } from '../Util/style';
+import { DID_CONNECT_MEDIUM_WIDTH } from '../Util/constant';
 
 export default function DIDConnectFooter({
   currentAppInfo = globalThis.blocklet,
@@ -15,10 +18,18 @@ export default function DIDConnectFooter({
   currentAppColor?: string;
   sx?: SxProps;
 }) {
-  const isSmallView = useMediaQuery('(max-width:640px)');
+  const rootRef = useRef<HTMLDivElement>(null);
+  const size = useSize(rootRef);
+  const isSmallView = useCreation(() => {
+    if (size) {
+      return size.width < DID_CONNECT_MEDIUM_WIDTH - 50;
+    }
+    return true;
+  }, [size, size?.width]);
 
   return (
     <Box
+      ref={rootRef}
       sx={mergeSx(
         {
           display: 'flex',

package/src/Util/constant.ts

@@ -49,3 +49,6 @@ export const OAUTH_PROVIDER = {
   github: 'Github',
   google: 'Google',
 };
+
+export const DID_CONNECT_SMALL_WIDTH = 360;
+export const DID_CONNECT_MEDIUM_WIDTH = 576;