@blocklet/ui-react 2.9.16 → 2.9.18

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

@@ -2,10 +2,9 @@ import { useContext } from 'react';
 import { Box, CircularProgress, IconButton, Paper, Typography } from '@mui/material';
 import type { PaperProps } 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';
@@ -17,10 +16,8 @@ import cloneDeep from 'lodash/cloneDeep';
 import { getQuery, withQuery } from 'ufo';
 import type { AxiosError } from 'axios';
 
-// @ts-ignore
-import Header from '../../Header';
+import { Header, Footer } from '../../';
 import { translations } from '../libs/locales';
-import banner from '../assets/banner.png';
 import UserInfo from './user-info';
 import UserBasicInfo from './user-basic-info';
 import type { SessionContext as TSessionContext, UserCenterTab } from '../../@types';
@@ -36,12 +33,18 @@ export default function UserCenter({
   contentProps = {},
   disableAutoRedirect = false,
   autoPopupSetting = false,
+  hideFooter = false,
+  headerProps = {},
+  footerProps = {},
 }: {
-  children: any;
-  currentTab: string;
-  contentProps?: PaperProps;
-  disableAutoRedirect?: boolean;
-  autoPopupSetting?: boolean;
+  readonly children: any;
+  readonly currentTab: string;
+  readonly contentProps?: PaperProps;
+  readonly disableAutoRedirect?: boolean;
+  readonly autoPopupSetting?: boolean;
+  readonly hideFooter?: boolean;
+  readonly headerProps?: object;
+  readonly footerProps?: object;
 }) {
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
@@ -157,27 +160,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({
@@ -226,69 +208,19 @@ export default function UserCenter({
     return (
       <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',
         }}>
-        <Box>
-          <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',
-            }}
-          />
-        </Box>
-        {isMyself ? (
-          <Box
-            sx={{
-              gridArea: 'settings',
-              display: 'flex',
-              justifyContent: 'flex-end',
-              alignItems: 'center',
-            }}>
-            <IconButton
-              sx={{
-                borderRadius: 2,
-                color: colors.textBase,
-                backgroundColor: 'white',
-                border: `1px solid ${colors.strokeBorderBase}`,
-              }}
-              disableFocusRipple
-              onClick={openSettings}>
-              <Icon icon={SettingsOutlineRoundedIcon} />
-            </IconButton>
-          </Box>
-        ) : null}
         <UserBasicInfo
           isMyself={isMyself}
           switchPassport={session.switchPassport}
+          switchProfile={session.switchProfile}
+          openSettings={openSettings}
           user={userState.data}
-          sx={{
-            gridArea: 'basicInfo',
-          }}
         />
         {userCenterTabs.length > 0 && currentTab ? (
           <Box
@@ -351,19 +283,16 @@ export default function UserCenter({
         ) : null}
         {isMyself ? (
           <>
-            <Box
-              sx={{
-                gridArea: 'passport',
-              }}>
+            <Box>
               <Typography variant="h5" sx={{ fontWeight: 'bold', mb: 1.5 }}>
-                Passport
+                {t('passport')}
               </Typography>
               <Passport user={userState.data} />
             </Box>
-            <Box
-              sx={{
-                gridArea: 'extraInfo',
-              }}>
+            <Box>
+              <Typography variant="h5" sx={{ fontWeight: 'bold', mb: 1.5 }}>
+                {t('userInfo')}
+              </Typography>
               <UserInfo
                 user={userState.data}
                 sx={{
@@ -376,7 +305,7 @@ export default function UserCenter({
         ) : null}
       </Box>
     );
-  }, [userState, userCenterTabs, mdGridTemplateAreas, xsGridTemplateAreas]);
+  }, [userState, userCenterTabs]);
 
   if (!disableAutoRedirect && !currentTab && formattedBlocklet?.navigation?.userCenter?.length > 0) {
     window.location.replace(formattedBlocklet?.navigation?.userCenter[0]?.link);
@@ -388,23 +317,15 @@ export default function UserCenter({
       sx={{
         backgroundColor: colors.backgroundsBgSubtitle,
         minHeight: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
       }}>
-      <Header />
-      <Box
-        sx={{
-          pt: {
-            xs: `${(400 / 1280) * 100}%`,
-            sm: `${(300 / 1280) * 100}%`,
-            md: `${(200 / 1280) * 100}%`,
-          },
-          backgroundImage: `url(${banner})`,
-          backgroundSize: 'cover',
-          minHeight: '60px',
-        }}
-      />
-      {}
-      {content}
-      {confirmHolder}
+      <Header {...headerProps} />
+      <Box flex={1}>
+        {content}
+        {confirmHolder}
+      </Box>
+      {hideFooter ? null : <Footer {...footerProps} />}
     </Box>
   );
 }

package/src/UserCenter/components/user-info-item.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography } from '@mui/material';
+import { Box, BoxProps, Typography } from '@mui/material';
 import { temp as colors } from '@arcblock/ux/lib/Colors';
 
 type TUserInfoItemProps = {
@@ -9,9 +9,10 @@ type TUserInfoItemProps = {
   };
 };
 
-export default function UserInfoItem({ data }: TUserInfoItemProps) {
+export default function UserInfoItem({ data, ...rest }: TUserInfoItemProps & BoxProps) {
   return (
     <Box
+      {...rest}
       sx={{
         display: 'grid',
         gridTemplateColumns: 'auto 1fr',
@@ -19,6 +20,7 @@ export default function UserInfoItem({ data }: TUserInfoItemProps) {
         alignItems: 'center',
         rowGap: 0.75,
         columnGap: 1,
+        ...rest.sx,
       }}>
       <Box
         sx={{

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

@@ -73,12 +73,16 @@ export default function UserInfo({
       {...rest}
       sx={{
         display: 'flex',
-        flexDirection: 'column',
+        flexDirection: {
+          xs: 'column',
+          md: 'row',
+        },
+        alignItems: 'flex-start',
         gap: 3,
         ...rest?.sx,
       }}>
       {userInfoListData.map((item) => (
-        <UserInfoItem key={item.title} data={item} />
+        <UserInfoItem key={item.title} data={item} sx={{ flex: 1 }} />
       ))}
     </Paper>
   );

package/src/UserCenter/libs/locales.ts

@@ -33,6 +33,8 @@ export const translations = {
     },
     toPublic: '公开 “{name}” 页面',
     currentPassport: '当前使用的通行证',
+    switchProfile: '切换',
+    userInfo: '个人信息',
   },
   en: {
     settings: 'Settings',
@@ -68,5 +70,7 @@ export const translations = {
     },
     toPublic: 'Public "{name}" page',
     currentPassport: 'Passport currently in use',
+    switchProfile: 'Switch',
+    userInfo: 'User Info',
   },
 };

package/src/index.ts

@@ -9,5 +9,5 @@ export { default as Icon } from './Icon';
 // @ts-ignore
 export { default as ComponentInstaller } from './ComponentInstaller';
 // @ts-ignore
-export { default as useComponentInstaller } from './ComponentInstaller/use-component-installer';
+export { default as useComponentInstaller } from './ComponentInstaller/use-component-installed';
 export * from './UserCenter';

package/babel.config.es.js

@@ -1,8 +0,0 @@
-module.exports = {
-  presets: [
-    ['@babel/preset-env', { modules: false, targets: 'chrome 114' }],
-    ['@babel/preset-react', { useBuiltIns: true, runtime: 'automatic' }],
-  ],
-  plugins: ['babel-plugin-inline-react-svg'],
-  ignore: ['src/**/*.stories.js', 'src/**/demo'],
-};