@blocklet/ui-react 2.11.31 → 2.11.33

package/lib/UserCenter/components/storage/connected.js

@@ -21,6 +21,7 @@ function Connected({ spaceGateway }) {
         endpoint: spaceGateway.endpoint,
         deps: [spaceGateway],
         selected: true,
+        footer: true,
         action: (props) => /* @__PURE__ */ jsx(Action, { session, ...props })
       },
       spaceGateway.endpoint

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

@@ -1,5 +1,5 @@
 import type { BoxProps } from '@mui/material';
-export default function UserCenter({ children, notLoginContent, currentTab, contentProps, disableAutoRedirect, hideFooter, headerProps, footerProps, userDid, stickySidebar, }: {
+export default function UserCenter({ children, notLoginContent, currentTab, contentProps, disableAutoRedirect, hideFooter, headerProps, footerProps, userDid, stickySidebar, embed, }: {
     readonly children: any;
     readonly notLoginContent: any;
     readonly currentTab: string;
@@ -11,4 +11,5 @@ export default function UserCenter({ children, notLoginContent, currentTab, cont
     readonly footerProps?: any;
     readonly userDid?: string;
     readonly stickySidebar?: boolean;
+    readonly embed?: boolean;
 }): import("react").JSX.Element | null;

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

@@ -13,6 +13,7 @@ import { useConfirm } from "@arcblock/ux/lib/Dialog";
 import { translate } from "@arcblock/ux/lib/Locale/util";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { ErrorFallback } from "@arcblock/ux/lib/ErrorBoundary";
+import { styled } from "@arcblock/ux/lib/Theme";
 import cloneDeep from "lodash/cloneDeep";
 import { getQuery, withQuery, joinURL, withoutTrailingSlash } from "ufo";
 import { PROFILE_URL } from "@arcblock/ux/lib/Util/constant";
@@ -30,6 +31,27 @@ import DidSpace from "./storage/index.js";
 const profileLink = joinURL(PROFILE_URL, "/profile");
 const settingsLink = joinURL(PROFILE_URL, "/settings");
 const didSpacesLink = joinURL(PROFILE_URL, "/did-spaces");
+const Main = styled(Box)(({ theme }) => ({
+  flex: 1,
+  width: "100%",
+  maxWidth: 1200,
+  margin: "0 auto",
+  p: 3,
+  display: "flex",
+  alignItems: "stretch",
+  gap: 2.5,
+  flexDirection: "column",
+  [theme.breakpoints.up("md")]: {
+    flexDirection: "row"
+  }
+}));
+const ContentWrapper = styled(Box)(({ theme }) => ({
+  overflow: "hidden",
+  flex: "revert",
+  [theme.breakpoints.up("md")]: {
+    flex: 1
+  }
+}));
 export default function UserCenter({
   children,
   notLoginContent = null,
@@ -40,7 +62,8 @@ export default function UserCenter({
   headerProps = {},
   footerProps = {},
   userDid = void 0,
-  stickySidebar = false
+  stickySidebar = false,
+  embed = false
 }) {
   const { locale } = useLocaleContext();
   const isMobile = useMobile({ key: "md" });
@@ -279,6 +302,47 @@ export default function UserCenter({
     }
     return null;
   }, [isSettingTab, isProfileTab, userState, isMyself, stickySidebar, settingContent]);
+  const emptyContent = useCreation(() => {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          display: {
+            xs: isMyself ? "none" : "block",
+            md: "block"
+          },
+          py: 3
+        },
+        children: /* @__PURE__ */ jsx(Empty, { children: t("emptyContent") })
+      }
+    );
+  }, [isMyself, locale]);
+  const tabContent = useCreation(() => {
+    if (!privacyState.data || privacyState.loading) {
+      return /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            height: "100%",
+            minWidth: "160px",
+            minHeight: "160px",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            flex: 1
+          },
+          children: /* @__PURE__ */ jsx(CircularProgress, { sx: { color: colors.primary100 } })
+        }
+      );
+    }
+    return (
+      // eslint-disable-next-line react/jsx-no-useless-fragment
+      /* @__PURE__ */ jsx(Box, { sx: { flex: 1 }, children: currentActiveTab?.protected && !isMyself ? /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Empty, { children: t("underProtected") }) }) : (
+        // eslint-disable-next-line react/jsx-no-useless-fragment
+        /* @__PURE__ */ jsx(Fragment, { children: children ? /* @__PURE__ */ jsx(Box, { ...contentProps, children }) : /* @__PURE__ */ jsx(Fragment, { children: renderDefaultTab }) })
+      ) })
+    );
+  }, [privacyState, currentActiveTab, isMyself, children, contentProps, renderDefaultTab, locale]);
   const content = useCreation(() => {
     if (userState.loading || session.loading) {
       return null;
@@ -315,113 +379,84 @@ export default function UserCenter({
         }
       ) });
     }
-    return /* @__PURE__ */ jsxs(
-      Box,
-      {
-        sx: [
+    if (embed) {
+      return /* @__PURE__ */ jsxs(ContentWrapper, { children: [
+        userCenterTabs.length > 0 && currentTab ? /* @__PURE__ */ jsx(
+          Box,
           {
-            flex: {
-              xs: "revert",
-              md: 1
+            sx: {
+              display: isMobile ? "block" : "flex",
+              height: "100%",
+              overflow: "auto",
+              padding: "1px"
             },
-            overflow: "hidden"
+            children: tabContent
           }
-        ],
-        children: [
-          /* @__PURE__ */ jsx(
-            UserBasicInfo,
-            {
-              isMyself,
-              switchPassport: handleSwitchPassport,
-              switchProfile: session.switchProfile,
-              user: userState.data,
-              showFullDid: false,
-              sx: {
-                display: "flex",
-                gap: 3,
-                mt: 2
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(Divider, { sx: { mt: 3, mb: 3, borderColor: colors.dividerColor } }),
-          userCenterTabs.length > 0 && currentTab ? /* @__PURE__ */ jsxs(
-            Box,
-            {
-              display: isMobile ? "block" : "flex",
-              sx: {
-                height: "100%",
-                overflow: "auto",
-                padding: "1px"
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  Tabs,
-                  {
-                    orientation: isMobile ? "horizontal" : "vertical",
-                    variant: "line",
-                    tabs: userCenterTabs,
-                    current: currentActiveTab?.value ?? currentTab,
-                    onChange: handleChangeTab,
-                    sx: {
-                      width: isMobile ? "100%" : 160,
-                      marginBottom: isMobile ? "8px" : 0,
-                      flexShrink: 0,
-                      ".MuiTabs-flexContainer": {
-                        gap: 1.5,
-                        ".MuiButtonBase-root": {
-                          fontSize: 16
-                        },
-                        ".MuiTab-root": {
-                          display: "block",
-                          textAlign: "left",
-                          alignItems: "flex-start",
-                          justifyContent: "flex-start"
-                        }
-                      }
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(Divider, { orientation: "vertical", sx: { height: "100%", mr: 3, borderColor: colors.dividerColor } }),
-                !privacyState.data || privacyState.loading ? /* @__PURE__ */ jsx(
-                  Box,
-                  {
-                    sx: {
-                      height: "100%",
-                      minWidth: "160px",
-                      minHeight: "160px",
-                      display: "flex",
-                      justifyContent: "center",
-                      alignItems: "center",
-                      flex: 1
+        ) : null,
+        userCenterTabs.length === 0 && emptyContent
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(ContentWrapper, { children: [
+      /* @__PURE__ */ jsx(
+        UserBasicInfo,
+        {
+          isMyself,
+          switchPassport: handleSwitchPassport,
+          switchProfile: session.switchProfile,
+          user: userState.data,
+          showFullDid: false,
+          sx: {
+            display: "flex",
+            gap: 3,
+            mt: 2
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(Divider, { sx: { mt: 3, mb: 3, borderColor: colors.dividerColor } }),
+      userCenterTabs.length > 0 && currentTab ? /* @__PURE__ */ jsxs(
+        Box,
+        {
+          display: isMobile ? "block" : "flex",
+          sx: {
+            height: "100%",
+            overflow: "auto",
+            padding: "1px"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              Tabs,
+              {
+                orientation: isMobile ? "horizontal" : "vertical",
+                variant: "line",
+                tabs: userCenterTabs,
+                current: currentActiveTab?.value ?? currentTab,
+                onChange: handleChangeTab,
+                sx: {
+                  width: isMobile ? "100%" : 160,
+                  marginBottom: isMobile ? "8px" : 0,
+                  flexShrink: 0,
+                  ".MuiTabs-flexContainer": {
+                    gap: 1.5,
+                    ".MuiButtonBase-root": {
+                      fontSize: 16
                     },
-                    children: /* @__PURE__ */ jsx(CircularProgress, { sx: { color: colors.primary100 } })
+                    ".MuiTab-root": {
+                      display: "block",
+                      textAlign: "left",
+                      alignItems: "flex-start",
+                      justifyContent: "flex-start"
+                    }
                   }
-                ) : (
-                  // eslint-disable-next-line react/jsx-no-useless-fragment
-                  /* @__PURE__ */ jsx(Box, { sx: { flex: 1 }, children: currentActiveTab?.protected && !isMyself ? /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Empty, { children: t("underProtected") }) }) : (
-                    // eslint-disable-next-line react/jsx-no-useless-fragment
-                    /* @__PURE__ */ jsx(Fragment, { children: children ? /* @__PURE__ */ jsx(Box, { ...contentProps, children }) : /* @__PURE__ */ jsx(Fragment, { children: renderDefaultTab }) })
-                  ) })
-                )
-              ]
-            }
-          ) : null,
-          userCenterTabs.length === 0 ? /* @__PURE__ */ jsx(
-            Box,
-            {
-              sx: {
-                display: {
-                  xs: isMyself ? "none" : "block",
-                  md: "block"
-                },
-                py: 3
-              },
-              children: /* @__PURE__ */ jsx(Empty, { children: t("emptyContent") })
-            }
-          ) : null
-        ]
-      }
-    );
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(Divider, { orientation: "vertical", sx: { height: "100%", mr: 3, borderColor: colors.dividerColor } }),
+            tabContent
+          ]
+        }
+      ) : null,
+      userCenterTabs.length === 0 && emptyContent
+    ] });
   }, [
     userState,
     userCenterTabs,
@@ -450,6 +485,12 @@ export default function UserCenter({
     }
     return null;
   }
+  if (embed) {
+    return /* @__PURE__ */ jsxs(Main, { children: [
+      content,
+      confirmHolder
+    ] });
+  }
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -460,29 +501,10 @@ export default function UserCenter({
       },
       children: [
         /* @__PURE__ */ jsx(Header, { bordered: true, ...headerProps, maxWidth: "100%" }),
-        /* @__PURE__ */ jsxs(
-          Box,
-          {
-            flex: 1,
-            sx: {
-              width: "100%",
-              maxWidth: 1200,
-              margin: "0 auto",
-              p: 3,
-              display: "flex",
-              alignItems: "stretch",
-              flexDirection: {
-                xs: "column",
-                md: "row"
-              },
-              gap: 2.5
-            },
-            children: [
-              content,
-              confirmHolder
-            ]
-          }
-        ),
+        /* @__PURE__ */ jsxs(Main, { children: [
+          content,
+          confirmHolder
+        ] }),
         hideFooter ? null : /* @__PURE__ */ jsx(Footer, { bordered: true, ...footerProps })
       ]
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.11.31",
+  "version": "2.11.33",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -33,10 +33,10 @@
   },
   "dependencies": {
     "@abtnode/constant": "^1.16.38",
-    "@arcblock/bridge": "^2.11.31",
-    "@arcblock/react-hooks": "^2.11.31",
+    "@arcblock/bridge": "^2.11.33",
+    "@arcblock/react-hooks": "^2.11.33",
     "@arcblock/ws": "^1.19.9",
-    "@blocklet/did-space-react": "^1.0.9",
+    "@blocklet/did-space-react": "^1.0.11",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
     "@iconify/react": "^4.1.1",
@@ -84,5 +84,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "31368d3bf32245481ff96e7946ade7062df01e6e"
+  "gitHead": "96db26b284912b24165e233da62fb5e50091bf41"
 }

package/src/UserCenter/components/storage/connected.tsx

@@ -28,6 +28,7 @@ function Connected({ spaceGateway }: { spaceGateway: SpaceGateway | undefined })
             endpoint={spaceGateway.endpoint}
             deps={[spaceGateway]}
             selected
+            footer
             // eslint-disable-next-line react/no-unstable-nested-components
             action={(props) => <Action session={session} {...props} />}
           />

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

@@ -14,6 +14,7 @@ import { useConfirm } from '@arcblock/ux/lib/Dialog';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
+import { styled } from '@arcblock/ux/lib/Theme';
 import cloneDeep from 'lodash/cloneDeep';
 import { getQuery, withQuery, joinURL, withoutTrailingSlash } from 'ufo';
 import type { AxiosError } from 'axios';
@@ -38,6 +39,29 @@ const profileLink = joinURL(PROFILE_URL, '/profile');
 const settingsLink = joinURL(PROFILE_URL, '/settings');
 const didSpacesLink = joinURL(PROFILE_URL, '/did-spaces');
 
+const Main = styled(Box)(({ theme }) => ({
+  flex: 1,
+  width: '100%',
+  maxWidth: 1200,
+  margin: '0 auto',
+  p: 3,
+  display: 'flex',
+  alignItems: 'stretch',
+  gap: 2.5,
+  flexDirection: 'column',
+  [theme.breakpoints.up('md')]: {
+    flexDirection: 'row',
+  },
+}));
+
+const ContentWrapper = styled(Box)(({ theme }) => ({
+  overflow: 'hidden',
+  flex: 'revert',
+  [theme.breakpoints.up('md')]: {
+    flex: 1,
+  },
+}));
+
 export default function UserCenter({
   children,
   notLoginContent = null,
@@ -49,6 +73,7 @@ export default function UserCenter({
   footerProps = {},
   userDid = undefined,
   stickySidebar = false,
+  embed = false,
 }: {
   readonly children: any;
   readonly notLoginContent: any;
@@ -62,6 +87,7 @@ export default function UserCenter({
   readonly footerProps?: any;
   readonly userDid?: string;
   readonly stickySidebar?: boolean;
+  readonly embed?: boolean;
 }) {
   const { locale } = useLocaleContext();
   const isMobile = useMobile({ key: 'md' });
@@ -316,6 +342,54 @@ export default function UserCenter({
     return null;
   }, [isSettingTab, isProfileTab, userState, isMyself, stickySidebar, settingContent]);
 
+  const emptyContent = useCreation(() => {
+    return (
+      <Box
+        sx={{
+          display: {
+            xs: isMyself ? 'none' : 'block',
+            md: 'block',
+          },
+          py: 3,
+        }}>
+        <Empty>{t('emptyContent')}</Empty>
+      </Box>
+    );
+  }, [isMyself, locale]);
+
+  const tabContent = useCreation(() => {
+    if (!privacyState.data || privacyState.loading) {
+      return (
+        <Box
+          sx={{
+            height: '100%',
+            minWidth: '160px',
+            minHeight: '160px',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flex: 1,
+          }}>
+          <CircularProgress sx={{ color: colors.primary100 }} />
+        </Box>
+      );
+    }
+
+    return (
+      // eslint-disable-next-line react/jsx-no-useless-fragment
+      <Box sx={{ flex: 1 }}>
+        {currentActiveTab?.protected && !isMyself ? (
+          <Box>
+            <Empty>{t('underProtected')}</Empty>
+          </Box>
+        ) : (
+          // eslint-disable-next-line react/jsx-no-useless-fragment
+          <>{children ? <Box {...contentProps}>{children}</Box> : <>{renderDefaultTab}</>}</>
+        )}
+      </Box>
+    );
+  }, [privacyState, currentActiveTab, isMyself, children, contentProps, renderDefaultTab, locale]);
+
   const content = useCreation(() => {
     if (userState.loading || session.loading) {
       return null;
@@ -368,17 +442,28 @@ export default function UserCenter({
       );
     }
 
+    // 嵌入时，只显示 tabContent
+    if (embed) {
+      return (
+        <ContentWrapper>
+          {userCenterTabs.length > 0 && currentTab ? (
+            <Box
+              sx={{
+                display: isMobile ? 'block' : 'flex',
+                height: '100%',
+                overflow: 'auto',
+                padding: '1px',
+              }}>
+              {tabContent}
+            </Box>
+          ) : null}
+          {userCenterTabs.length === 0 && emptyContent}
+        </ContentWrapper>
+      );
+    }
+
     return (
-      <Box
-        sx={[
-          {
-            flex: {
-              xs: 'revert',
-              md: 1,
-            },
-            overflow: 'hidden',
-          },
-        ]}>
+      <ContentWrapper>
         <UserBasicInfo
           isMyself={isMyself}
           switchPassport={handleSwitchPassport}
@@ -425,47 +510,11 @@ export default function UserCenter({
               }}
             />
             <Divider orientation="vertical" sx={{ height: '100%', mr: 3, borderColor: colors.dividerColor }} />
-            {!privacyState.data || privacyState.loading ? (
-              <Box
-                sx={{
-                  height: '100%',
-                  minWidth: '160px',
-                  minHeight: '160px',
-                  display: 'flex',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  flex: 1,
-                }}>
-                <CircularProgress sx={{ color: colors.primary100 }} />
-              </Box>
-            ) : (
-              // eslint-disable-next-line react/jsx-no-useless-fragment
-              <Box sx={{ flex: 1 }}>
-                {currentActiveTab?.protected && !isMyself ? (
-                  <Box>
-                    <Empty>{t('underProtected')}</Empty>
-                  </Box>
-                ) : (
-                  // eslint-disable-next-line react/jsx-no-useless-fragment
-                  <>{children ? <Box {...contentProps}>{children}</Box> : <>{renderDefaultTab}</>}</>
-                )}
-              </Box>
-            )}
+            {tabContent}
           </Box>
         ) : null}
-        {userCenterTabs.length === 0 ? (
-          <Box
-            sx={{
-              display: {
-                xs: isMyself ? 'none' : 'block',
-                md: 'block',
-              },
-              py: 3,
-            }}>
-            <Empty>{t('emptyContent')}</Empty>
-          </Box>
-        ) : null}
-      </Box>
+        {userCenterTabs.length === 0 && emptyContent}
+      </ContentWrapper>
     );
   }, [
     userState,
@@ -500,6 +549,16 @@ export default function UserCenter({
     return null;
   }
 
+  // 嵌入其它页面内时，只展示 content
+  if (embed) {
+    return (
+      <Main>
+        {content}
+        {confirmHolder}
+      </Main>
+    );
+  }
+
   return (
     <Box
       sx={{
@@ -508,24 +567,10 @@ export default function UserCenter({
         flexDirection: 'column',
       }}>
       <Header bordered {...headerProps} maxWidth="100%" />
-      <Box
-        flex={1}
-        sx={{
-          width: '100%',
-          maxWidth: 1200,
-          margin: '0 auto',
-          p: 3,
-          display: 'flex',
-          alignItems: 'stretch',
-          flexDirection: {
-            xs: 'column',
-            md: 'row',
-          },
-          gap: 2.5,
-        }}>
+      <Main>
         {content}
         {confirmHolder}
-      </Box>
+      </Main>
       {hideFooter ? null : <Footer bordered {...footerProps} />}
     </Box>
   );