@blocklet/ui-react 2.9.17 → 2.9.18

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

@@ -8,27 +8,82 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _material = require("@mui/material");
 var _react = require("@iconify/react");
 var _swapHorizRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/swap-horiz-rounded"));
+var _settingsOutlineRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/settings-outline-rounded"));
+var _Avatar = _interopRequireDefault(require("@arcblock/ux/lib/Avatar"));
 var _Colors = require("@arcblock/ux/lib/Colors");
+var _Theme = require("@arcblock/ux/lib/Theme");
 var _DID = _interopRequireDefault(require("@arcblock/ux/lib/DID"));
 var _ahooks = require("ahooks");
+var _util = require("@arcblock/ux/lib/Locale/util");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _noop = _interopRequireDefault(require("lodash/noop"));
+var _locales = require("../libs/locales");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function UserBasicInfo({
   user,
   isMyself = true,
   switchPassport,
+  switchProfile,
+  openSettings,
   ...rest
 }) {
+  const {
+    locale
+  } = (0, _context.useLocaleContext)();
+  const t = (0, _ahooks.useMemoizedFn)((key, data = {}) => {
+    return (0, _util.translate)(_locales.translations, key, locale, "en", data);
+  });
   const currentRole = (0, _ahooks.useCreation)(() => (user?.passports || [])?.find(item => item.name === user.role), [user?.passports, user?.role]);
+  const theme = (0, _Theme.useTheme)();
+  const isSmallView = theme.breakpoints.down("md");
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
     ...rest,
-    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
-      variant: "h4",
+    sx: {
+      position: "relative",
+      ...rest.sx
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Avatar.default, {
+      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": {
+            "&::after": {
+              content: `"${t("switchProfile")}"`
+            }
+          },
+          "&::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.default
+    }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+      variant: "h5",
       sx: {
         fontWeight: "bold",
         display: "flex",
         alignItems: "center",
         gap: 1,
-        mb: 1
+        fontSize: "24px !important"
       },
       children: [user?.fullName, isMyself ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
         label: currentRole?.title || user?.role || "Guest",
@@ -62,6 +117,28 @@ function UserBasicInfo({
     }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_DID.default, {
       did: user.did,
       copyable: false
-    })]
+    }), isMyself ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
+      sx: {
+        borderRadius: 2,
+        color: _Colors.temp.textBase,
+        backgroundColor: "white",
+        border: `1px solid ${_Colors.temp.strokeBorderBase}`,
+        position: "absolute",
+        bottom: {
+          xs: "unset",
+          md: 0
+        },
+        top: {
+          xs: 0,
+          md: "unset"
+        },
+        right: 0
+      },
+      disableFocusRipple: true,
+      onClick: openSettings,
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_react.Icon, {
+        icon: _settingsOutlineRounded.default
+      })
+    }) : null]
   });
 }

package/lib/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/lib/UserCenter/components/user-center.js

@@ -8,10 +8,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
 var _material = require("@mui/material");
 var _ahooks = require("ahooks");
-var _react2 = require("@iconify/react");
-var _settingsOutlineRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/settings-outline-rounded"));
 var _Session = require("@arcblock/did-connect/lib/Session");
-var _Avatar = _interopRequireDefault(require("@arcblock/ux/lib/Avatar"));
 var _Tabs = _interopRequireDefault(require("@arcblock/ux/lib/Tabs"));
 var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
 var _Colors = require("@arcblock/ux/lib/Colors");
@@ -21,9 +18,8 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _ErrorBoundary = require("@arcblock/ux/lib/ErrorBoundary");
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 var _ufo = require("ufo");
-var _Header = _interopRequireDefault(require("../../Header"));
+var _ = require("../../");
 var _locales = require("../libs/locales");
-var _banner = _interopRequireDefault(require("../assets/banner.png"));
 var _userInfo = _interopRequireDefault(require("./user-info"));
 var _userBasicInfo = _interopRequireDefault(require("./user-basic-info"));
 var _blocklets = require("../../blocklets");
@@ -36,7 +32,10 @@ function UserCenter({
   currentTab,
   contentProps = {},
   disableAutoRedirect = false,
-  autoPopupSetting = false
+  autoPopupSetting = false,
+  hideFooter = false,
+  headerProps = {},
+  footerProps = {}
 }) {
   const {
     locale
@@ -144,15 +143,6 @@ function UserCenter({
       });
     }
   });
-  const xsGridTemplateAreas = (0, _ahooks.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 = (0, _ahooks.useCreation)(() => {
-    if (!isMyself) {
-      return ['"avatar"', '"basicInfo"', '"tabs"'];
-    }
-    return ['"avatar settings"', '"basicInfo extraInfo"', userCenterTabs.length > 0 ? '"tabs extraInfo"' : null, '"passport extraInfo"'];
-  }, [userCenterTabs, isMyself]);
   const openSettings = (0, _ahooks.useMemoizedFn)(() => {
     confirmApi.open({
       title: t("settings"),
@@ -194,67 +184,19 @@ function UserCenter({
     }
     return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.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__ */(0, _jsxRuntime.jsx)(_material.Box, {
-        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Avatar.default, {
-          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__ */(0, _jsxRuntime.jsx)(_material.Box, {
-        sx: {
-          gridArea: "settings",
-          display: "flex",
-          justifyContent: "flex-end",
-          alignItems: "center"
-        },
-        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
-          sx: {
-            borderRadius: 2,
-            color: _Colors.temp.textBase,
-            backgroundColor: "white",
-            border: `1px solid ${_Colors.temp.strokeBorderBase}`
-          },
-          disableFocusRipple: true,
-          onClick: openSettings,
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_react2.Icon, {
-            icon: _settingsOutlineRounded.default
-          })
-        })
-      }) : null, /* @__PURE__ */(0, _jsxRuntime.jsx)(_userBasicInfo.default, {
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_userBasicInfo.default, {
         isMyself,
         switchPassport: session.switchPassport,
-        user: userState.data,
-        sx: {
-          gridArea: "basicInfo"
-        }
+        switchProfile: session.switchProfile,
+        openSettings,
+        user: userState.data
       }), userCenterTabs.length > 0 && currentTab ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {
           gridArea: "tabs",
@@ -323,34 +265,35 @@ function UserCenter({
         })
       }) : null, isMyself ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-          sx: {
-            gridArea: "passport"
-          },
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
             variant: "h5",
             sx: {
               fontWeight: "bold",
               mb: 1.5
             },
-            children: "Passport"
+            children: t("passport")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_passport.default, {
             user: userState.data
           })]
-        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-          sx: {
-            gridArea: "extraInfo"
-          },
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_userInfo.default, {
+        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            variant: "h5",
+            sx: {
+              fontWeight: "bold",
+              mb: 1.5
+            },
+            children: t("userInfo")
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_userInfo.default, {
             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;
@@ -358,19 +301,17 @@ function UserCenter({
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
     sx: {
       backgroundColor: _Colors.temp.backgroundsBgSubtitle,
-      minHeight: "100vh"
+      minHeight: "100vh",
+      display: "flex",
+      flexDirection: "column"
     },
-    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Header.default, {}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-      sx: {
-        pt: {
-          xs: `${400 / 1280 * 100}%`,
-          sm: `${300 / 1280 * 100}%`,
-          md: `${200 / 1280 * 100}%`
-        },
-        backgroundImage: `url(${_banner.default})`,
-        backgroundSize: "cover",
-        minHeight: "60px"
-      }
-    }), content, confirmHolder]
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_.Header, {
+      ...headerProps
+    }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      flex: 1,
+      children: [content, confirmHolder]
+    }), hideFooter ? null : /* @__PURE__ */(0, _jsxRuntime.jsx)(_.Footer, {
+      ...footerProps
+    })]
   });
 }

package/lib/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/lib/UserCenter/components/user-info-item.js

@@ -8,16 +8,19 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _material = require("@mui/material");
 var _Colors = require("@arcblock/ux/lib/Colors");
 function UserInfoItem({
-  data
+  data,
+  ...rest
 }) {
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.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__ */(0, _jsxRuntime.jsx)(_material.Box, {
       sx: {

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

@@ -83,12 +83,19 @@ 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__ */(0, _jsxRuntime.jsx)(_userInfoItem.default, {
-      data: item
+      data: item,
+      sx: {
+        flex: 1
+      }
     }, item.title))
   });
 }

package/lib/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/lib/UserCenter/libs/locales.js

@@ -38,7 +38,9 @@ const translations = exports.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",
@@ -73,6 +75,8 @@ const translations = exports.translations = {
       invalid: "Invalid"
     },
     toPublic: 'Public "{name}" page',
-    currentPassport: "Passport currently in use"
+    currentPassport: "Passport currently in use",
+    switchProfile: "Switch",
+    userInfo: "User Info"
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.9.17",
+  "version": "2.9.18",
   "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-beta-aeb9f5bd",
-    "@arcblock/did-connect": "^2.9.17",
-    "@arcblock/ux": "^2.9.17",
+    "@arcblock/did-connect": "^2.9.18",
+    "@arcblock/ux": "^2.9.18",
     "@blocklet/js-sdk": "1.16.23-beta-aeb9f5bd",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
@@ -96,5 +96,5 @@
     "jest": "^28.1.3",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "73c46d89b7ae8bb79b14adc26611f3e0046508d4"
+  "gitHead": "435fbdda42f68b81af5b09ce49fc874142d17e74"
 }

package/src/Dashboard/index.jsx

@@ -41,7 +41,7 @@ function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessi
       (item) => ({
         title: item.title,
         url: item.link,
-        icon: item.icon ? <iconify-icon icon={item.icon} /> : null,
+        icon: item.icon ? <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/src/UserCenter/components/user-basic-info.tsx

@@ -1,38 +1,98 @@
-import { Box, Chip, Typography } from '@mui/material';
+import { Box, Chip, IconButton, Typography } from '@mui/material';
 import type { BoxProps } 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';
 import type { User } from '../../@types';
 
 export default function UserBasicInfo({
   user,
   isMyself = true,
   switchPassport,
+  switchProfile,
+  openSettings,
   ...rest
 }: {
   user: User;
   isMyself: boolean;
   switchPassport: () => void;
+  switchProfile: () => void;
+  openSettings: () => void;
 } & BoxProps) {
+  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]
   );
+  const theme = useTheme();
+
+  const isSmallView = theme.breakpoints.down('md');
 
   return (
-    <Box {...rest}>
+    <Box
+      {...rest}
+      sx={{
+        position: 'relative',
+        ...rest.sx,
+      }}>
+      <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': {
+                  '&::after': {
+                    content: `"${t('switchProfile')}"`,
+                  },
+                },
+                '&::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}
+      />
       <Typography
-        variant="h4"
+        variant="h5"
         sx={{
           fontWeight: 'bold',
           display: 'flex',
           alignItems: 'center',
           gap: 1,
-          mb: 1,
+          fontSize: '24px !important',
         }}>
         {user?.fullName}
         {isMyself ? (
@@ -65,6 +125,29 @@ export default function UserBasicInfo({
         ) : null}
       </Typography>
       <DID did={user.did} copyable={false} />
+      {isMyself ? (
+        <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',
+            },
+            right: 0,
+          }}
+          disableFocusRipple
+          onClick={openSettings}>
+          <Icon icon={SettingsOutlineRoundedIcon} />
+        </IconButton>
+      ) : null}
     </Box>
   );
 }