@blocklet/ui-react 2.9.32 → 2.9.34

package/es/@types/index.d.ts

@@ -26,6 +26,7 @@ export type UserCenterTab = {
 };
 export type Session = {
     loading: boolean;
+    initialized: boolean;
     user: User;
     login: any;
     logout: any;

package/es/UserCenter/components/user-center.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { BoxProps } from '@mui/material';
-export default function UserCenter({ children, currentTab, contentProps, disableAutoRedirect, autoPopupSetting, hideFooter, headerProps, footerProps, userDid, }: {
+export default function UserCenter({ children, currentTab, contentProps, disableAutoRedirect, autoPopupSetting, hideFooter, headerProps, footerProps, userDid, stickySidebar, }: {
     readonly children: any;
     readonly currentTab: string;
     readonly contentProps?: BoxProps;
@@ -10,4 +10,5 @@ export default function UserCenter({ children, currentTab, contentProps, disable
     readonly headerProps?: object;
     readonly footerProps?: object;
     readonly userDid?: string;
+    readonly stickySidebar?: boolean;
 }): import("react").JSX.Element | null;

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

@@ -2,6 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import { Box, CircularProgress, Typography } from "@mui/material";
 import { useCreation, useMemoizedFn, useMount, useRequest } from "ahooks";
+import pWaitFor from "p-wait-for";
 import { SessionContext } from "@arcblock/did-connect/lib/Session";
 import Tabs from "@arcblock/ux/lib/Tabs";
 import Empty from "@arcblock/ux/lib/Empty";
@@ -29,7 +30,8 @@ export default function UserCenter({
   hideFooter = false,
   headerProps = {},
   footerProps = {},
-  userDid
+  userDid,
+  stickySidebar = false
 }) {
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
@@ -59,6 +61,7 @@ export default function UserCenter({
   }, [currentDid, session?.user?.did]);
   const userState = useRequest(
     async () => {
+      await pWaitFor(() => session.initialized);
       if (isMyself) {
         return session.user;
       }
@@ -175,7 +178,7 @@ export default function UserCenter({
       return /* @__PURE__ */ jsx(Box, { sx: { width: "100%" }, children: /* @__PURE__ */ jsx(ErrorFallback, { error: formatError }) });
     }
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(Box, { sx: { flex: 1 }, children: [
+      /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, overflow: "hidden" }, children: [
         userState?.data?.fullName ? /* @__PURE__ */ jsx(
           Typography,
           {
@@ -272,7 +275,7 @@ export default function UserCenter({
           }
         }
       ),
-      /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx(
         Box,
         {
           sx: {
@@ -283,40 +286,53 @@ export default function UserCenter({
             maxWidth: "100%",
             display: "flex",
             flexDirection: "column",
-            gap: 2.5
+            gap: 2.5,
+            position: "relative"
           },
-          children: [
-            /* @__PURE__ */ jsx(
-              UserBasicInfo,
-              {
-                isMyself,
-                switchPassport: session.switchPassport,
-                switchProfile: session.switchProfile,
-                openSettings,
-                user: userState.data,
-                sx: {
-                  display: {
-                    xs: "none",
-                    md: "block"
+          children: /* @__PURE__ */ jsxs(
+            Box,
+            {
+              sx: {
+                position: {
+                  xs: "static",
+                  md: stickySidebar ? "sticky" : "static"
+                },
+                top: (theme) => stickySidebar ? theme.spacing(3) : "unset"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  UserBasicInfo,
+                  {
+                    isMyself,
+                    switchPassport: session.switchPassport,
+                    switchProfile: session.switchProfile,
+                    openSettings,
+                    user: userState.data,
+                    sx: {
+                      display: {
+                        xs: "none",
+                        md: "block"
+                      }
+                    }
                   }
-                }
-              }
-            ),
-            isMyself ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsxs(Box, { children: [
-                /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, mb: 1.5 }, children: t("myInfo") }),
-                /* @__PURE__ */ jsx(UserInfo, { user: userState.data })
-              ] }),
-              /* @__PURE__ */ jsxs(Box, { children: [
-                /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, mb: 1.5 }, children: t("passport") }),
-                /* @__PURE__ */ jsx(Passport, { user: userState.data })
-              ] })
-            ] }) : null
-          ]
+                ),
+                isMyself ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsxs(Box, { children: [
+                    /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, mb: 1.5 }, children: t("myInfo") }),
+                    /* @__PURE__ */ jsx(UserInfo, { user: userState.data })
+                  ] }),
+                  /* @__PURE__ */ jsxs(Box, { children: [
+                    /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, mb: 1.5 }, children: t("passport") }),
+                    /* @__PURE__ */ jsx(Passport, { user: userState.data })
+                  ] })
+                ] }) : null
+              ]
+            }
+          )
         }
       )
     ] });
-  }, [userState, userCenterTabs]);
+  }, [userState, userCenterTabs, isMyself, currentActiveTab, privacyState, currentTab, stickySidebar]);
   if (!disableAutoRedirect && !currentTab && formattedBlocklet?.navigation?.userCenter?.length > 0) {
     window.location.replace(formattedBlocklet?.navigation?.userCenter[0]?.link);
     return null;

package/lib/@types/index.d.ts

@@ -26,6 +26,7 @@ export type UserCenterTab = {
 };
 export type Session = {
     loading: boolean;
+    initialized: boolean;
     user: User;
     login: any;
     logout: any;

package/lib/UserCenter/components/user-center.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { BoxProps } from '@mui/material';
-export default function UserCenter({ children, currentTab, contentProps, disableAutoRedirect, autoPopupSetting, hideFooter, headerProps, footerProps, userDid, }: {
+export default function UserCenter({ children, currentTab, contentProps, disableAutoRedirect, autoPopupSetting, hideFooter, headerProps, footerProps, userDid, stickySidebar, }: {
     readonly children: any;
     readonly currentTab: string;
     readonly contentProps?: BoxProps;
@@ -10,4 +10,5 @@ export default function UserCenter({ children, currentTab, contentProps, disable
     readonly headerProps?: object;
     readonly footerProps?: object;
     readonly userDid?: string;
+    readonly stickySidebar?: boolean;
 }): import("react").JSX.Element | null;

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

@@ -8,6 +8,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
 var _material = require("@mui/material");
 var _ahooks = require("ahooks");
+var _pWaitFor = _interopRequireDefault(require("p-wait-for"));
 var _Session = require("@arcblock/did-connect/lib/Session");
 var _Tabs = _interopRequireDefault(require("@arcblock/ux/lib/Tabs"));
 var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
@@ -36,7 +37,8 @@ function UserCenter({
   hideFooter = false,
   headerProps = {},
   footerProps = {},
-  userDid
+  userDid,
+  stickySidebar = false
 }) {
   const {
     locale
@@ -67,6 +69,7 @@ function UserCenter({
     return false;
   }, [currentDid, session?.user?.did]);
   const userState = (0, _ahooks.useRequest)(async () => {
+    await (0, _pWaitFor.default)(() => session.initialized);
     if (isMyself) {
       return session.user;
     }
@@ -191,7 +194,8 @@ function UserCenter({
     return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {
-          flex: 1
+          flex: 1,
+          overflow: "hidden"
         },
         children: [userState?.data?.fullName ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           variant: "h4",
@@ -279,7 +283,7 @@ function UserCenter({
           my: -3,
           backgroundColor: _Colors.temp.strokeSep
         }
-      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
         sx: {
           width: {
             sx: "100%",
@@ -288,46 +292,56 @@ function UserCenter({
           maxWidth: "100%",
           display: "flex",
           flexDirection: "column",
-          gap: 2.5
+          gap: 2.5,
+          position: "relative"
         },
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_userBasicInfo.default, {
-          isMyself,
-          switchPassport: session.switchPassport,
-          switchProfile: session.switchProfile,
-          openSettings,
-          user: userState.data,
+        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
           sx: {
-            display: {
-              xs: "none",
-              md: "block"
+            position: {
+              xs: "static",
+              md: stickySidebar ? "sticky" : "static"
+            },
+            top: theme => stickySidebar ? theme.spacing(3) : "unset"
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_userBasicInfo.default, {
+            isMyself,
+            switchPassport: session.switchPassport,
+            switchProfile: session.switchProfile,
+            openSettings,
+            user: userState.data,
+            sx: {
+              display: {
+                xs: "none",
+                md: "block"
+              }
             }
-          }
-        }), isMyself ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-              sx: {
-                fontWeight: 600,
-                mb: 1.5
-              },
-              children: t("myInfo")
-            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_userInfo.default, {
-              user: userState.data
+          }), isMyself ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                sx: {
+                  fontWeight: 600,
+                  mb: 1.5
+                },
+                children: t("myInfo")
+              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_userInfo.default, {
+                user: userState.data
+              })]
+            }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                sx: {
+                  fontWeight: 600,
+                  mb: 1.5
+                },
+                children: t("passport")
+              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_passport.default, {
+                user: userState.data
+              })]
             })]
-          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-              sx: {
-                fontWeight: 600,
-                mb: 1.5
-              },
-              children: t("passport")
-            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_passport.default, {
-              user: userState.data
-            })]
-          })]
-        }) : null]
+          }) : null]
+        })
       })]
     });
-  }, [userState, userCenterTabs]);
+  }, [userState, userCenterTabs, isMyself, currentActiveTab, privacyState, currentTab, stickySidebar]);
   if (!disableAutoRedirect && !currentTab && formattedBlocklet?.navigation?.userCenter?.length > 0) {
     window.location.replace(formattedBlocklet?.navigation?.userCenter[0]?.link);
     return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.9.32",
+  "version": "2.9.34",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -63,8 +63,8 @@
   },
   "dependencies": {
     "@abtnode/constant": "1.16.23",
-    "@arcblock/did-connect": "^2.9.32",
-    "@arcblock/ux": "^2.9.32",
+    "@arcblock/did-connect": "^2.9.34",
+    "@arcblock/ux": "^2.9.34",
     "@blocklet/js-sdk": "1.16.23",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
@@ -78,6 +78,7 @@
     "iconify-icons-material-symbols-400": "^0.0.1",
     "is-url": "^1.2.4",
     "lodash": "^4.17.21",
+    "p-wait-for": "^5.0.2",
     "react-error-boundary": "^3.1.4",
     "react-placeholder": "^4.1.0",
     "ufo": "^1.3.2",
@@ -99,5 +100,5 @@
     "jest": "^28.1.3",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "9280bafaac2e33e4ca9af411a9cfae6021148704"
+  "gitHead": "a52271c4640fd0a418208eddccd4147a82eddbf5"
 }

package/src/@types/index.ts

@@ -30,6 +30,7 @@ export type UserCenterTab = {
 
 export type Session = {
   loading: boolean;
+  initialized: boolean;
   user: User;
   login: any;
   logout: any;

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

@@ -2,6 +2,7 @@ import { useContext } from 'react';
 import { Box, CircularProgress, Typography } from '@mui/material';
 import type { BoxProps } from '@mui/material';
 import { useCreation, useMemoizedFn, useMount, useRequest } from 'ahooks';
+import pWaitFor from 'p-wait-for';
 
 import { SessionContext } from '@arcblock/did-connect/lib/Session';
 import Tabs from '@arcblock/ux/lib/Tabs';
@@ -36,6 +37,7 @@ export default function UserCenter({
   headerProps = {},
   footerProps = {},
   userDid,
+  stickySidebar = false,
 }: {
   readonly children: any;
   readonly currentTab: string;
@@ -46,6 +48,7 @@ export default function UserCenter({
   readonly headerProps?: object;
   readonly footerProps?: object;
   readonly userDid?: string;
+  readonly stickySidebar?: boolean;
 }) {
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
@@ -79,6 +82,7 @@ export default function UserCenter({
 
   const userState = useRequest(
     async () => {
+      await pWaitFor(() => session.initialized);
       if (isMyself) {
         return session.user;
       }
@@ -215,7 +219,7 @@ export default function UserCenter({
 
     return (
       <>
-        <Box sx={{ flex: 1 }}>
+        <Box sx={{ flex: 1, overflow: 'hidden' }}>
           {userState?.data?.fullName ? (
             <Typography
               variant="h4"
@@ -317,37 +321,47 @@ export default function UserCenter({
             display: 'flex',
             flexDirection: 'column',
             gap: 2.5,
+            position: 'relative',
           }}>
-          <UserBasicInfo
-            isMyself={isMyself}
-            switchPassport={session.switchPassport}
-            switchProfile={session.switchProfile}
-            openSettings={openSettings}
-            user={userState.data}
+          <Box
             sx={{
-              display: {
-                xs: 'none',
-                md: 'block',
+              position: {
+                xs: 'static',
+                md: stickySidebar ? 'sticky' : 'static',
               },
-            }}
-          />
+              top: (theme) => (stickySidebar ? theme.spacing(3) : 'unset'),
+            }}>
+            <UserBasicInfo
+              isMyself={isMyself}
+              switchPassport={session.switchPassport}
+              switchProfile={session.switchProfile}
+              openSettings={openSettings}
+              user={userState.data}
+              sx={{
+                display: {
+                  xs: 'none',
+                  md: 'block',
+                },
+              }}
+            />
 
-          {isMyself ? (
-            <>
-              <Box>
-                <Typography sx={{ fontWeight: 600, mb: 1.5 }}>{t('myInfo')}</Typography>
-                <UserInfo user={userState.data} />
-              </Box>
-              <Box>
-                <Typography sx={{ fontWeight: 600, mb: 1.5 }}>{t('passport')}</Typography>
-                <Passport user={userState.data} />
-              </Box>
-            </>
-          ) : null}
+            {isMyself ? (
+              <>
+                <Box>
+                  <Typography sx={{ fontWeight: 600, mb: 1.5 }}>{t('myInfo')}</Typography>
+                  <UserInfo user={userState.data} />
+                </Box>
+                <Box>
+                  <Typography sx={{ fontWeight: 600, mb: 1.5 }}>{t('passport')}</Typography>
+                  <Passport user={userState.data} />
+                </Box>
+              </>
+            ) : null}
+          </Box>
         </Box>
       </>
     );
-  }, [userState, userCenterTabs]);
+  }, [userState, userCenterTabs, isMyself, currentActiveTab, privacyState, currentTab, stickySidebar]);
 
   if (!disableAutoRedirect && !currentTab && formattedBlocklet?.navigation?.userCenter?.length > 0) {
     window.location.replace(formattedBlocklet?.navigation?.userCenter[0]?.link);