@blocklet/ui-react 2.11.14 → 2.11.16

package/lib/UserCenter/components/settings.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
 import { Box, Divider, Typography } from "@mui/material";
 import { useCreation, useMemoizedFn } from "ahooks";
 import { translate } from "@arcblock/ux/lib/Locale/util";
@@ -63,10 +64,17 @@ export default function Settings({
       {
         label: t("sessionManagement"),
         value: "session",
-        content: /* @__PURE__ */ jsx(UserSessions, { user })
+        content: /* @__PURE__ */ jsx(UserSessions, { user, showUser: false })
       }
     ].filter(Boolean);
   }, [user, privacyConfigList]);
+  useEffect(() => {
+    const id = window.location.hash.slice(1);
+    if (id) {
+      const element = document.getElementById(id);
+      element?.scrollIntoView({ behavior: "smooth" });
+    }
+  }, []);
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -78,7 +86,7 @@ export default function Settings({
         },
         maxWidth: "100%"
       },
-      children: tabs.map((tab, index) => /* @__PURE__ */ jsxs(Box, { children: [
+      children: tabs.map((tab, index) => /* @__PURE__ */ jsxs(Box, { id: tab.value, children: [
         /* @__PURE__ */ jsx(
           Typography,
           {

package/lib/UserCenter/components/user-center.js

@@ -40,7 +40,7 @@ export default function UserCenter({
   stickySidebar = false
 }) {
   const { locale } = useLocaleContext();
-  const isMobile = useMobile({});
+  const isMobile = useMobile({ key: "md" });
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, "en", data);
   });

package/lib/UserSessions/components/user-sessions.js

@@ -10,9 +10,10 @@ import { getVisitorId } from "@arcblock/ux/lib/Util";
 import { useConfirm } from "@arcblock/ux/lib/Dialog";
 import pAll from "p-all";
 import PQueue from "p-queue";
-import { Box, Button, CircularProgress, Tooltip, Typography } from "@mui/material";
+import { Box, Button, CircularProgress, Tooltip, Typography, useMediaQuery } from "@mui/material";
 import { memo, useContext, useEffect } from "react";
 import { SessionContext } from "@arcblock/did-connect/lib/Session";
+import useMobile from "../../hooks/use-mobile.js";
 import UserSessionInfo from "./user-session-info.js";
 import { client } from "../../libs/client.js";
 import { translations } from "../libs/locales.js";
@@ -57,6 +58,8 @@ export default function UserSessions({
   const { session } = useContext(SessionContext);
   const currentVisitorId = getVisitorId();
   const { locale } = useLocaleContext();
+  const isMobile = useMobile({ key: "md" });
+  const isLg = useMediaQuery((theme) => theme.breakpoints.down("lg"));
   const { confirmApi, confirmHolder } = useConfirm();
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, "en", data);
@@ -257,7 +260,7 @@ export default function UserSessions({
     Box,
     {
       sx: {
-        maxWidth: 920,
+        maxWidth: isMobile ? "unset" : isLg ? "calc(100vw - 300px)" : "920px",
         ".MuiTableCell-head": {
           whiteSpace: "nowrap",
           fontWeight: "bold"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.11.14",
+  "version": "2.11.16",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -32,8 +32,8 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/bridge": "^2.11.14",
-    "@arcblock/react-hooks": "^2.11.14",
+    "@arcblock/bridge": "^2.11.16",
+    "@arcblock/react-hooks": "^2.11.16",
     "@blocklet/did-space-react": "^0.6.0",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
@@ -81,5 +81,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "6e1596d1a8ab9b74fd0588be21beb80eaeb68e35"
+  "gitHead": "1216fcd112e02c4135f5d748fe002cafaaebcfd9"
 }

package/src/UserCenter/components/settings.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { Box, Divider, Typography } from '@mui/material';
 import type { BoxProps } from '@mui/material';
 import { useCreation, useMemoizedFn } from 'ahooks';
@@ -76,11 +77,20 @@ export default function Settings({
       {
         label: t('sessionManagement'),
         value: 'session',
-        content: <UserSessions user={user} />,
+        content: <UserSessions user={user} showUser={false} />,
       },
     ].filter(Boolean);
   }, [user, privacyConfigList]);
 
+  // 支持 hash 锚点定位
+  useEffect(() => {
+    const id = window.location.hash.slice(1);
+    if (id) {
+      const element = document.getElementById(id);
+      element?.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, []);
+
   return (
     <Box
       {...rest}
@@ -92,7 +102,7 @@ export default function Settings({
         maxWidth: '100%',
       }}>
       {tabs.map((tab, index) => (
-        <Box key={tab.value}>
+        <Box id={tab.value} key={tab.value}>
           <Typography
             sx={{
               color: colors.foregroundsFgBase,

package/src/UserCenter/components/user-center.tsx

@@ -61,7 +61,7 @@ export default function UserCenter({
   readonly stickySidebar?: boolean;
 }) {
   const { locale } = useLocaleContext();
-  const isMobile = useMobile({});
+  const isMobile = useMobile({ key: 'md' });
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });

package/src/UserSessions/components/user-sessions.tsx

@@ -11,11 +11,12 @@ import { getVisitorId } from '@arcblock/ux/lib/Util';
 import { useConfirm } from '@arcblock/ux/lib/Dialog';
 import pAll from 'p-all';
 import PQueue from 'p-queue';
-import { Box, Button, CircularProgress, Tooltip, Typography } from '@mui/material';
+import { Box, Button, CircularProgress, Tooltip, Typography, useMediaQuery } from '@mui/material';
 import { memo, ReactElement, useContext, useEffect } from 'react';
 import { UserSession } from '@blocklet/js-sdk';
 import { SessionContext } from '@arcblock/did-connect/lib/Session';
 
+import useMobile from '../../hooks/use-mobile';
 import UserSessionInfo from './user-session-info';
 import { User, SessionContext as TSessionContext } from '../../@types';
 import { client } from '../../libs/client';
@@ -88,6 +89,8 @@ export default function UserSessions({
   const { session } = useContext<TSessionContext>(SessionContext);
   const currentVisitorId = getVisitorId();
   const { locale } = useLocaleContext();
+  const isMobile = useMobile({ key: 'md' });
+  const isLg = useMediaQuery((theme: any) => theme.breakpoints.down('lg'));
   const { confirmApi, confirmHolder } = useConfirm();
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
@@ -308,7 +311,7 @@ export default function UserSessions({
   return (
     <Box
       sx={{
-        maxWidth: 920,
+        maxWidth: isMobile ? 'unset' : isLg ? 'calc(100vw - 300px)' : '920px',
         '.MuiTableCell-head': {
           whiteSpace: 'nowrap',
           fontWeight: 'bold',