@blocklet/ui-react 2.9.17 → 2.9.18

package/es/Dashboard/index.js

@@ -33,7 +33,7 @@ function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessi
       (item) => ({
         title: item.title,
         url: item.link,
-        icon: item.icon ? /* @__PURE__ */ jsx("iconify-icon", { icon: item.icon }) : null,
+        icon: item.icon ? /* @__PURE__ */ jsx("iconify-icon", { height: "100%", width: "100%", icon: item.icon }) : null,
         // https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620
         external: true,
         children: item.items

package/es/UserCenter/components/user-basic-info.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import type { BoxProps } from '@mui/material';
 import type { User } from '../../@types';
-export default function UserBasicInfo({ user, isMyself, switchPassport, ...rest }: {
+export default function UserBasicInfo({ user, isMyself, switchPassport, switchProfile, openSettings, ...rest }: {
     user: User;
     isMyself: boolean;
     switchPassport: () => void;
+    switchProfile: () => void;
+    openSettings: () => void;
 } & BoxProps): import("react").JSX.Element;

package/es/UserCenter/components/user-basic-info.js

@@ -1,66 +1,153 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Chip, Typography } from "@mui/material";
+import { Box, Chip, IconButton, Typography } from "@mui/material";
 import { Icon } from "@iconify/react";
 import SwapHorizRoundedIcon from "@iconify-icons/material-symbols/swap-horiz-rounded";
+import SettingsOutlineRoundedIcon from "@iconify-icons/material-symbols/settings-outline-rounded";
+import Avatar from "@arcblock/ux/lib/Avatar";
 import { temp as colors } from "@arcblock/ux/lib/Colors";
+import { useTheme } from "@arcblock/ux/lib/Theme";
 import DID from "@arcblock/ux/lib/DID";
-import { useCreation } from "ahooks";
+import { useCreation, useMemoizedFn } from "ahooks";
+import { translate } from "@arcblock/ux/lib/Locale/util";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import noop from "lodash/noop";
+import { translations } from "../libs/locales.js";
 export default function UserBasicInfo({
   user,
   isMyself = true,
   switchPassport,
+  switchProfile,
+  openSettings,
   ...rest
 }) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, "en", data);
+  });
   const currentRole = useCreation(
     () => (user?.passports || [])?.find((item) => item.name === user.role),
     [user?.passports, user?.role]
   );
-  return /* @__PURE__ */ jsxs(Box, { ...rest, children: [
-    /* @__PURE__ */ jsxs(
-      Typography,
-      {
-        variant: "h4",
-        sx: {
-          fontWeight: "bold",
-          display: "flex",
-          alignItems: "center",
-          gap: 1,
-          mb: 1
-        },
-        children: [
-          user?.fullName,
-          isMyself ? /* @__PURE__ */ jsx(
-            Chip,
-            {
-              label: currentRole?.title || user?.role || "Guest",
-              size: "small",
-              variant: "outlined",
-              sx: {
-                flexShrink: 0,
-                fontWeight: "bold",
-                fontSize: "12px",
-                color: colors.textBase,
-                borderColor: colors.strokeBorderStrong,
-                backgroundColor: "white",
-                textTransform: "capitalize",
-                pr: 1,
-                pl: 0.5,
+  const theme = useTheme();
+  const isSmallView = theme.breakpoints.down("md");
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ...rest,
+      sx: {
+        position: "relative",
+        ...rest.sx
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Avatar,
+          {
+            src: user?.avatar,
+            did: user?.did,
+            size: isSmallView ? 64 : 80,
+            variant: "circle",
+            shape: "circle",
+            sx: {
+              borderRadius: "100%",
+              backgroundColor: "#fff",
+              position: "relative",
+              overflow: "hidden",
+              ...isMyself ? {
+                cursor: "pointer",
                 "&:hover": {
-                  backgroundColor: "rgba(0, 0, 0, 0.04)"
+                  "&::after": {
+                    content: `"${t("switchProfile")}"`
+                  }
                 },
-                "&:active": {
-                  boxShadow: "none"
+                "&::after": {
+                  color: "white",
+                  position: "absolute",
+                  fontSize: "12px",
+                  bottom: 0,
+                  left: 0,
+                  right: 0,
+                  height: "50%",
+                  backgroundColor: "rgba(0, 0, 0, 0.3)",
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center"
                 }
+              } : {}
+            },
+            onClick: isMyself ? switchProfile : noop
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Typography,
+          {
+            variant: "h5",
+            sx: {
+              fontWeight: "bold",
+              display: "flex",
+              alignItems: "center",
+              gap: 1,
+              fontSize: "24px !important"
+            },
+            children: [
+              user?.fullName,
+              isMyself ? /* @__PURE__ */ jsx(
+                Chip,
+                {
+                  label: currentRole?.title || user?.role || "Guest",
+                  size: "small",
+                  variant: "outlined",
+                  sx: {
+                    flexShrink: 0,
+                    fontWeight: "bold",
+                    fontSize: "12px",
+                    color: colors.textBase,
+                    borderColor: colors.strokeBorderStrong,
+                    backgroundColor: "white",
+                    textTransform: "capitalize",
+                    pr: 1,
+                    pl: 0.5,
+                    "&:hover": {
+                      backgroundColor: "rgba(0, 0, 0, 0.04)"
+                    },
+                    "&:active": {
+                      boxShadow: "none"
+                    }
+                  },
+                  clickable: true,
+                  deleteIcon: /* @__PURE__ */ jsx(Icon, { icon: SwapHorizRoundedIcon, color: colors.textBase }),
+                  onDelete: switchPassport,
+                  onClick: switchPassport
+                }
+              ) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(DID, { did: user.did, copyable: false }),
+        isMyself ? /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            sx: {
+              borderRadius: 2,
+              color: colors.textBase,
+              backgroundColor: "white",
+              border: `1px solid ${colors.strokeBorderBase}`,
+              position: "absolute",
+              bottom: {
+                xs: "unset",
+                md: 0
+              },
+              top: {
+                xs: 0,
+                md: "unset"
               },
-              clickable: true,
-              deleteIcon: /* @__PURE__ */ jsx(Icon, { icon: SwapHorizRoundedIcon, color: colors.textBase }),
-              onDelete: switchPassport,
-              onClick: switchPassport
-            }
-          ) : null
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(DID, { did: user.did, copyable: false })
-  ] });
+              right: 0
+            },
+            disableFocusRipple: true,
+            onClick: openSettings,
+            children: /* @__PURE__ */ jsx(Icon, { icon: SettingsOutlineRoundedIcon })
+          }
+        ) : null
+      ]
+    }
+  );
 }

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

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

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

@@ -1,11 +1,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
-import { Box, CircularProgress, IconButton, Paper, Typography } from "@mui/material";
+import { Box, CircularProgress, Paper, Typography } from "@mui/material";
 import { useCreation, useMemoizedFn, useMount, useRequest } from "ahooks";
-import { Icon } from "@iconify/react";
-import SettingsOutlineRoundedIcon from "@iconify-icons/material-symbols/settings-outline-rounded";
 import { SessionContext } from "@arcblock/did-connect/lib/Session";
-import Avatar from "@arcblock/ux/lib/Avatar";
 import Tabs from "@arcblock/ux/lib/Tabs";
 import Empty from "@arcblock/ux/lib/Empty";
 import { temp as colors } from "@arcblock/ux/lib/Colors";
@@ -15,9 +12,8 @@ import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { ErrorFallback } from "@arcblock/ux/lib/ErrorBoundary";
 import cloneDeep from "lodash/cloneDeep";
 import { getQuery, withQuery } from "ufo";
-import Header from "../../Header/index.js";
+import { Header, Footer } from "../..//index.js";
 import { translations } from "../libs/locales.js";
-import banner from "../assets/banner.png";
 import UserInfo from "./user-info.js";
 import UserBasicInfo from "./user-basic-info.js";
 import { formatBlockletInfo, getLocalizedNavigation } from "../../blocklets.js";
@@ -29,7 +25,10 @@ export default function UserCenter({
   currentTab,
   contentProps = {},
   disableAutoRedirect = false,
-  autoPopupSetting = false
+  autoPopupSetting = false,
+  hideFooter = false,
+  headerProps = {},
+  footerProps = {}
 }) {
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
@@ -134,26 +133,6 @@ export default function UserCenter({
       });
     }
   });
-  const xsGridTemplateAreas = useCreation(() => {
-    return [
-      '"avatar settings"',
-      '"basicInfo basicInfo"',
-      userCenterTabs.length > 0 || !isMyself ? '"tabs tabs"' : null,
-      isMyself ? '"passport passport"' : null,
-      isMyself ? '"extraInfo extraInfo"' : null
-    ];
-  }, [userCenterTabs, isMyself]);
-  const mdGridTemplateAreas = useCreation(() => {
-    if (!isMyself) {
-      return ['"avatar"', '"basicInfo"', '"tabs"'];
-    }
-    return [
-      '"avatar settings"',
-      '"basicInfo extraInfo"',
-      userCenterTabs.length > 0 ? '"tabs extraInfo"' : null,
-      '"passport extraInfo"'
-    ];
-  }, [userCenterTabs, isMyself]);
   const openSettings = useMemoizedFn(() => {
     confirmApi.open({
       title: t("settings"),
@@ -196,77 +175,22 @@ export default function UserCenter({
       Box,
       {
         sx: {
-          maxWidth: 1200,
+          maxWidth: 880,
           margin: "0 auto",
-          px: 3,
-          pb: 3,
-          display: "grid",
+          p: 3,
+          display: "flex",
           gap: 2.5,
-          gridTemplateAreas: {
-            xs: xsGridTemplateAreas.filter(Boolean).join(" "),
-            md: mdGridTemplateAreas.filter(Boolean).join(" ")
-          },
-          gridTemplateRows: {
-            xs: "64px auto auto auto",
-            md: "64px auto 1fr"
-          },
-          gridTemplateColumns: {
-            xs: "1fr",
-            md: isMyself ? "1fr 300px" : "1fr"
-          }
+          flexDirection: "column"
         },
         children: [
-          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
-            Avatar,
-            {
-              src: userState.data?.avatar,
-              did: userState.data?.did,
-              size: 120,
-              variant: "circle",
-              shape: "circle",
-              style: {
-                border: "4px solid #fff",
-                transform: "translateY(-50%)",
-                borderRadius: "100%",
-                gridArea: "avatar",
-                backgroundColor: "#fff"
-              }
-            }
-          ) }),
-          isMyself ? /* @__PURE__ */ jsx(
-            Box,
-            {
-              sx: {
-                gridArea: "settings",
-                display: "flex",
-                justifyContent: "flex-end",
-                alignItems: "center"
-              },
-              children: /* @__PURE__ */ jsx(
-                IconButton,
-                {
-                  sx: {
-                    borderRadius: 2,
-                    color: colors.textBase,
-                    backgroundColor: "white",
-                    border: `1px solid ${colors.strokeBorderBase}`
-                  },
-                  disableFocusRipple: true,
-                  onClick: openSettings,
-                  children: /* @__PURE__ */ jsx(Icon, { icon: SettingsOutlineRoundedIcon })
-                }
-              )
-            }
-          ) : null,
           /* @__PURE__ */ jsx(
             UserBasicInfo,
             {
               isMyself,
               switchPassport: session.switchPassport,
-              user: userState.data,
-              sx: {
-                gridArea: "basicInfo"
-              }
+              switchProfile: session.switchProfile,
+              openSettings,
+              user: userState.data
             }
           ),
           userCenterTabs.length > 0 && currentTab ? /* @__PURE__ */ jsxs(
@@ -326,41 +250,28 @@ export default function UserCenter({
             }
           ) : null,
           isMyself ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs(
-              Box,
-              {
-                sx: {
-                  gridArea: "passport"
-                },
-                children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "h5", sx: { fontWeight: "bold", mb: 1.5 }, children: "Passport" }),
-                  /* @__PURE__ */ jsx(Passport, { user: userState.data })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Box,
-              {
-                sx: {
-                  gridArea: "extraInfo"
-                },
-                children: /* @__PURE__ */ jsx(
-                  UserInfo,
-                  {
-                    user: userState.data,
-                    sx: {
-                      padding: 3,
-                      borderRadius: 3
-                    }
+            /* @__PURE__ */ jsxs(Box, { children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "h5", sx: { fontWeight: "bold", mb: 1.5 }, children: t("passport") }),
+              /* @__PURE__ */ jsx(Passport, { user: userState.data })
+            ] }),
+            /* @__PURE__ */ jsxs(Box, { children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "h5", sx: { fontWeight: "bold", mb: 1.5 }, children: t("userInfo") }),
+              /* @__PURE__ */ jsx(
+                UserInfo,
+                {
+                  user: userState.data,
+                  sx: {
+                    padding: 3,
+                    borderRadius: 3
                   }
-                )
-              }
-            )
+                }
+              )
+            ] })
           ] }) : null
         ]
       }
     );
-  }, [userState, userCenterTabs, mdGridTemplateAreas, xsGridTemplateAreas]);
+  }, [userState, userCenterTabs]);
   if (!disableAutoRedirect && !currentTab && formattedBlocklet?.navigation?.userCenter?.length > 0) {
     window.location.replace(formattedBlocklet?.navigation?.userCenter[0]?.link);
     return null;
@@ -370,27 +281,17 @@ export default function UserCenter({
     {
       sx: {
         backgroundColor: colors.backgroundsBgSubtitle,
-        minHeight: "100vh"
+        minHeight: "100vh",
+        display: "flex",
+        flexDirection: "column"
       },
       children: [
-        /* @__PURE__ */ jsx(Header, {}),
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            sx: {
-              pt: {
-                xs: `${400 / 1280 * 100}%`,
-                sm: `${300 / 1280 * 100}%`,
-                md: `${200 / 1280 * 100}%`
-              },
-              backgroundImage: `url(${banner})`,
-              backgroundSize: "cover",
-              minHeight: "60px"
-            }
-          }
-        ),
-        content,
-        confirmHolder
+        /* @__PURE__ */ jsx(Header, { ...headerProps }),
+        /* @__PURE__ */ jsxs(Box, { flex: 1, children: [
+          content,
+          confirmHolder
+        ] }),
+        hideFooter ? null : /* @__PURE__ */ jsx(Footer, { ...footerProps })
       ]
     }
   );

package/es/UserCenter/components/user-info-item.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { BoxProps } from '@mui/material';
 type TUserInfoItemProps = {
     data: {
         icon: any;
@@ -6,5 +7,5 @@ type TUserInfoItemProps = {
         content: any;
     };
 };
-export default function UserInfoItem({ data }: TUserInfoItemProps): import("react").JSX.Element;
+export default function UserInfoItem({ data, ...rest }: TUserInfoItemProps & BoxProps): import("react").JSX.Element;
 export {};

package/es/UserCenter/components/user-info-item.js

@@ -1,17 +1,19 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Box, Typography } from "@mui/material";
 import { temp as colors } from "@arcblock/ux/lib/Colors";
-export default function UserInfoItem({ data }) {
+export default function UserInfoItem({ data, ...rest }) {
   return /* @__PURE__ */ jsxs(
     Box,
     {
+      ...rest,
       sx: {
         display: "grid",
         gridTemplateColumns: "auto 1fr",
         gridTemplateAreas: `"icon title" ". content"`,
         alignItems: "center",
         rowGap: 0.75,
-        columnGap: 1
+        columnGap: 1,
+        ...rest.sx
       },
       children: [
         /* @__PURE__ */ jsx(

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

@@ -58,11 +58,15 @@ export default function UserInfo({
       ...rest,
       sx: {
         display: "flex",
-        flexDirection: "column",
+        flexDirection: {
+          xs: "column",
+          md: "row"
+        },
+        alignItems: "flex-start",
         gap: 3,
         ...rest?.sx
       },
-      children: userInfoListData.map((item) => /* @__PURE__ */ jsx(UserInfoItem, { data: item }, item.title))
+      children: userInfoListData.map((item) => /* @__PURE__ */ jsx(UserInfoItem, { data: item, sx: { flex: 1 } }, item.title))
     }
   );
 }

package/es/UserCenter/libs/locales.d.ts

@@ -33,6 +33,8 @@ export declare const translations: {
         };
         toPublic: string;
         currentPassport: string;
+        switchProfile: string;
+        userInfo: string;
     };
     en: {
         settings: string;
@@ -68,5 +70,7 @@ export declare const translations: {
         };
         toPublic: string;
         currentPassport: string;
+        switchProfile: string;
+        userInfo: string;
     };
 };

package/es/UserCenter/libs/locales.js

@@ -32,7 +32,9 @@ export const translations = {
       invalid: "\u65E0\u6548"
     },
     toPublic: "\u516C\u5F00 \u201C{name}\u201D \u9875\u9762",
-    currentPassport: "\u5F53\u524D\u4F7F\u7528\u7684\u901A\u884C\u8BC1"
+    currentPassport: "\u5F53\u524D\u4F7F\u7528\u7684\u901A\u884C\u8BC1",
+    switchProfile: "\u5207\u6362",
+    userInfo: "\u4E2A\u4EBA\u4FE1\u606F"
   },
   en: {
     settings: "Settings",
@@ -67,6 +69,8 @@ export const translations = {
       invalid: "Invalid"
     },
     toPublic: 'Public "{name}" page',
-    currentPassport: "Passport currently in use"
+    currentPassport: "Passport currently in use",
+    switchProfile: "Switch",
+    userInfo: "User Info"
   }
 };

package/lib/Dashboard/index.js

@@ -53,6 +53,8 @@ function Dashboard({
       title: item.title,
       url: item.link,
       icon: item.icon ? /* @__PURE__ */(0, _jsxRuntime.jsx)("iconify-icon", {
+        height: "100%",
+        width: "100%",
         icon: item.icon
       }) : null,
       // https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620

package/lib/UserCenter/components/user-basic-info.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import type { BoxProps } from '@mui/material';
 import type { User } from '../../@types';
-export default function UserBasicInfo({ user, isMyself, switchPassport, ...rest }: {
+export default function UserBasicInfo({ user, isMyself, switchPassport, switchProfile, openSettings, ...rest }: {
     user: User;
     isMyself: boolean;
     switchPassport: () => void;
+    switchProfile: () => void;
+    openSettings: () => void;
 } & BoxProps): import("react").JSX.Element;