@blocklet/ui-react 2.10.90 → 2.11.0

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

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { Chip } from "@mui/material";
+import { Icon } from "@iconify/react";
+import { useCreation } from "ahooks";
+import SwapHorizRoundedIcon from "@iconify-icons/material-symbols/swap-horiz-rounded";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
+function SwitchRole({ user, switchPassport }) {
+  const currentRole = useCreation(
+    () => (user?.passports || [])?.find((item) => item.name === user.role),
+    [user?.passports, user?.role]
+  );
+  return /* @__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: "transparent",
+        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
+    }
+  );
+}
+export default memo(SwitchRole);

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

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

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

@@ -1,13 +1,9 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Box, Chip, CircularProgress, IconButton, Tooltip, 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 { Box, CircularProgress, Tooltip, Typography } from "@mui/material";
 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, useMemoizedFn } from "ahooks";
+import { useMemoizedFn } from "ahooks";
 import { translate } from "@arcblock/ux/lib/Locale/util";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import noop from "lodash/noop";
@@ -18,13 +14,13 @@ import Toast from "@arcblock/ux/lib/Toast";
 import isEmpty from "lodash/isEmpty";
 import { translations } from "../../libs/locales.js";
 import { formatAxiosError } from "../../libs/utils.js";
+import SwitchRole from "./switch-role.js";
 export default function UserBasicInfo({
   user,
   isMyself = true,
   showFullDid = true,
   switchPassport,
   switchProfile,
-  openSettings,
   ...rest
 }) {
   const { locale } = useLocaleContext();
@@ -33,10 +29,6 @@ export default function UserBasicInfo({
   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");
   if (!user) {
@@ -77,7 +69,6 @@ export default function UserBasicInfo({
               backgroundColor: "#fff",
               position: "relative",
               overflow: "hidden",
-              mb: 1.5,
               ...isMyself ? {
                 cursor: "pointer",
                 "&::after": {
@@ -99,79 +90,36 @@ export default function UserBasicInfo({
             onClick: isMyself ? switchProfile : noop
           }
         ),
-        /* @__PURE__ */ jsxs(
-          Typography,
-          {
-            variant: "h6",
-            sx: {
-              fontWeight: "bold",
-              display: "flex",
-              alignItems: "center",
-              gap: 1,
-              fontSize: "24px !important"
-            },
-            children: [
-              user?.fullName,
-              isMyself ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__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: "transparent",
-                      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
-                  }
-                ),
-                !isEmpty(user.url) && /* @__PURE__ */ jsx(
-                  Tooltip,
-                  {
-                    title: !loading && translate(translations, "refreshProfile.title", locale),
-                    sx: { display: "flex", alignItems: "center" },
-                    children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: "16px", sx: { color: theme?.colors?.primary, ml: 0.5 } }) : /* @__PURE__ */ jsx(RefreshOutlinedIcon, { onClick: refreshProfile })
-                  }
-                )
-              ] }) : null
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(DID, { did: user.did, showQrcode: true, copyable: true, compact: !showFullDid, responsive: !showFullDid, locale }),
-        isMyself ? /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            sx: {
-              borderRadius: 2,
-              color: colors.textBase,
-              backgroundColor: "white",
-              border: `1px solid ${colors.strokeBorderBase}`,
-              position: "absolute",
-              top: 0,
-              right: 0
-            },
-            disableFocusRipple: true,
-            onClick: openSettings,
-            children: /* @__PURE__ */ jsx(Icon, { icon: SettingsOutlineRoundedIcon })
-          }
-        ) : null
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsxs(
+            Typography,
+            {
+              variant: "h6",
+              sx: {
+                fontWeight: "bold",
+                display: "flex",
+                alignItems: "center",
+                gap: 1,
+                fontSize: "24px !important"
+              },
+              children: [
+                user?.fullName,
+                isMyself ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(SwitchRole, { user, switchPassport }),
+                  !isEmpty(user.url) && /* @__PURE__ */ jsx(
+                    Tooltip,
+                    {
+                      title: !loading && translate(translations, "refreshProfile.title", locale),
+                      sx: { display: "flex", alignItems: "center" },
+                      children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: "16px", sx: { color: theme?.colors?.primary, ml: 0.5 } }) : /* @__PURE__ */ jsx(RefreshOutlinedIcon, { onClick: refreshProfile })
+                    }
+                  )
+                ] }) : null
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(DID, { did: user.did, showQrcode: true, copyable: true, compact: !showFullDid, responsive: !showFullDid, locale })
+        ] })
       ]
     }
   );

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

@@ -38,6 +38,8 @@ export declare const translations: {
             cancel: string;
             required: string;
             invalid: string;
+            setting: string;
+            profile: string;
         };
         toPublic: string;
         currentPassport: string;
@@ -130,6 +132,8 @@ export declare const translations: {
             cancel: string;
             required: string;
             invalid: string;
+            setting: string;
+            profile: string;
         };
         toPublic: string;
         currentPassport: string;

package/lib/UserCenter/libs/locales.js

@@ -37,7 +37,9 @@ export const translations = {
       confirm: "\u786E\u8BA4",
       cancel: "\u53D6\u6D88",
       required: "\u5FC5\u586B\u7684",
-      invalid: "\u65E0\u6548"
+      invalid: "\u65E0\u6548",
+      setting: "\u8BBE\u7F6E",
+      profile: "\u4FE1\u606F"
     },
     toPublic: "\u516C\u5F00 \u201C{name}\u201D \u9875\u9762",
     currentPassport: "\u5F53\u524D\u4F7F\u7528\u7684\u901A\u884C\u8BC1",
@@ -129,7 +131,9 @@ export const translations = {
       confirm: "Confirm",
       cancel: "Cancel",
       required: "Required",
-      invalid: "Invalid"
+      invalid: "Invalid",
+      setting: "Settings",
+      profile: "Profile"
     },
     toPublic: 'Public "{name}" page',
     currentPassport: "Passport currently in use",

package/lib/common/header-addons.js

@@ -10,6 +10,11 @@ import LocaleSelector from "@arcblock/ux/lib/Locale/selector";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { SessionManagerProps } from "../types.js";
 import { getLocalizedNavigation, filterNavByRole } from "../blocklets.js";
+import NotificationAddon from "./notification-addon.js";
+const hasNotification = () => {
+  const navigations = window?.blocklet?.navigation ?? [];
+  return !!navigations.find((n) => n.id === "/userCenter/notification");
+};
 export default function HeaderAddons({ formattedBlocklet, addons, sessionManagerProps }) {
   const sessionCtx = useContext(SessionContext);
   const { locale } = useLocaleContext() || {};
@@ -22,6 +27,9 @@ export default function HeaderAddons({ formattedBlocklet, addons, sessionManager
       return Array.isArray(addons) ? addons : [addons];
     }
     let addonsArray = [];
+    if (hasNotification()) {
+      addonsArray.push(/* @__PURE__ */ jsx(NotificationAddon, { session: sessionCtx.session }, "notification-addon"));
+    }
     if (enableLocale && locale) {
       addonsArray.push(/* @__PURE__ */ jsx(LocaleSelector, { showText: false }, "locale-selector"));
     }

package/lib/common/notification-addon.d.ts

@@ -0,0 +1,13 @@
+declare function NotificationAddon({ session }: {
+    session?: {} | undefined;
+}): import("react").JSX.Element | null;
+declare namespace NotificationAddon {
+    namespace propTypes {
+        let session: any;
+    }
+    namespace defaultProps {
+        let session_1: {};
+        export { session_1 as session };
+    }
+}
+export default NotificationAddon;

package/lib/common/notification-addon.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import Badge from "@mui/material/Badge";
+import PropTypes from "prop-types";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
+import { IconButton } from "@mui/material";
+import NotificationsOutlinedIcon from "@arcblock/icons/lib/Notification";
+import { useCreation } from "ahooks";
+export default function NotificationAddon({ session = {} }) {
+  const { unReadCount } = session;
+  const viewAllUrl = useCreation(() => {
+    const { navigation } = window.blocklet ?? {};
+    const notification = navigation?.find((x) => x.id === "/userCenter/notification");
+    return notification?.link;
+  });
+  if (!session.user || !viewAllUrl) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      size: "medium",
+      variant: "outlined",
+      href: viewAllUrl,
+      sx: {
+        borderRadius: 2,
+        color: "rgba(0, 0, 0, 0.6)",
+        borderColor: colors.lineBorderStrong,
+        "&:hover": {
+          borderRadius: "50%"
+        }
+      },
+      children: /* @__PURE__ */ jsx(Badge, { variant: "dot", color: "error", invisible: unReadCount === 0, children: /* @__PURE__ */ jsx(NotificationsOutlinedIcon, { style: { width: "auto", height: 24 } }) })
+    }
+  );
+}
+NotificationAddon.propTypes = {
+  session: PropTypes.object
+};
+NotificationAddon.defaultProps = {
+  session: {}
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.10.90",
+  "version": "2.11.0",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -32,8 +32,8 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/bridge": "^2.10.90",
-    "@arcblock/react-hooks": "^2.10.90",
+    "@arcblock/bridge": "^2.11.0",
+    "@arcblock/react-hooks": "^2.11.0",
     "@blocklet/did-space-react": "^0.5.81",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
@@ -80,5 +80,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "435dd00e8c7987da0293e31cf1496ff3e9c82bc2"
+  "gitHead": "c07858fa8f3721cc7ba060e70e1577ae6a509bbb"
 }

package/src/@types/index.ts

@@ -69,6 +69,7 @@ export type UserCenterTab = {
   url: string;
   protected: boolean;
   icon?: string;
+  isPrivate?: boolean; // 如果为 true 则不应该出现在隐私设置中
 };
 
 export type Session = {

package/src/UserCenter/components/config-profile.tsx

@@ -62,7 +62,9 @@ export default function ConfigProfile({ user, onSave }: { user: User; onSave: (t
         />
         <Select fullWidth value={currentState.locale} onChange={handleChange} size="small">
           {(window.blocklet.languages || languages).map((x: { name: string; code: string }) => (
-            <MenuItem value={x.code}>{x.name}</MenuItem>
+            <MenuItem value={x.code} key={x.code}>
+              {x.name}
+            </MenuItem>
           ))}
         </Select>
       </Box>

package/src/UserCenter/components/notification.tsx

@@ -1,5 +1,5 @@
 import { ChangeEvent } from 'react';
-import { Alert, Box, CircularProgress, Divider, Stack, Typography } from '@mui/material';
+import { Alert, Box, CircularProgress, Stack, Typography } from '@mui/material';
 import { useCreation, useMemoizedFn, useReactive, useRequest } from 'ahooks';
 import { Icon } from '@iconify/react';
 import AddRoundedIcon from '@iconify-icons/material-symbols/add-rounded';
@@ -240,7 +240,6 @@ export default function Notification({ user }: { user: User }) {
           onChange={(event: ChangeEvent<HTMLInputElement>) => handleChangeSwitch('phone', event.target.checked)}
         /> */}
       </Box>
-      <Divider />
       <Stack spacing={1.5} useFlexGap direction="column" alignItems="start">
         {webhooks.map((item: WebhookItemData, index: number) => (
           <WebhookItem

package/src/UserCenter/components/privacy.tsx

@@ -15,6 +15,7 @@ type PrivacyConfig = {
   key: string;
   name: string;
   value: boolean;
+  isPrivate?: boolean;
 };
 
 export default function Privacy({
@@ -86,6 +87,9 @@ export default function Privacy({
         },
       }}>
       {dataList.map((item) => {
+        if (item.isPrivate) {
+          return null;
+        }
         return (
           <Switch
             key={item.key}

package/src/UserCenter/components/settings.tsx

@@ -1,10 +1,10 @@
-import Tabs from '@arcblock/ux/lib/Tabs';
-import { Box } from '@mui/material';
+import { Box, Divider, Typography } from '@mui/material';
 import type { BoxProps } from '@mui/material';
-import { useCreation, useMemoizedFn, useReactive } from 'ahooks';
+import { useCreation, useMemoizedFn } from 'ahooks';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 
+import colors from '@arcblock/ux/lib/Colors/themes/temp';
 import { ConfigUserSpaceProvider } from '../../contexts/config-user-space';
 import { translations } from '../libs/locales';
 import Notification from './notification';
@@ -38,6 +38,7 @@ export default function Settings({
         key: item.value,
         name: item.label,
         value: item.protected,
+        isPrivate: item.isPrivate,
       };
     });
   }, [settings?.userCenterTabs]);
@@ -82,31 +83,30 @@ export default function Settings({
       },
     ].filter(Boolean);
   }, [user, privacyConfigList]);
-  const currentState = useReactive({
-    tab: tabs[0].value,
-  });
-
-  const currentTab = useCreation(() => {
-    return tabs.find((x) => x.value === currentState.tab);
-  }, [currentState.tab, tabs]);
-  const handleChangeTab = useMemoizedFn((value) => {
-    currentState.tab = value;
-  });
 
   return (
-    currentTab && (
-      <Box
-        {...rest}
-        sx={{
-          ...rest?.sx,
-          minWidth: {
-            md: 500,
-          },
-          maxWidth: '100%',
-        }}>
-        <Tabs variant="card" tabs={tabs} current={currentTab.value} onChange={handleChangeTab} />
-        <Box mt={2.5}>{currentTab.content}</Box>
-      </Box>
-    )
+    <Box
+      {...rest}
+      sx={{
+        ...rest?.sx,
+        minWidth: {
+          md: 500,
+        },
+        maxWidth: '100%',
+      }}>
+      {tabs.map((tab, index) => (
+        <Box key={tab.value}>
+          <Typography
+            sx={{
+              color: colors.foregroundsFgBase,
+              fontWeight: 600,
+            }}>
+            {tab.label}
+          </Typography>
+          <Box mt={2.5}>{tab.content}</Box>
+          {index < tabs.length - 1 ? <Divider sx={{ mt: 2.5, mb: 2.5 }} /> : null}
+        </Box>
+      ))}
+    </Box>
   );
 }

package/src/UserCenter/components/third-party-login/index.tsx

@@ -5,6 +5,7 @@ import { getConnectedAccounts, getSourceProvider } from '@arcblock/ux/lib/Sessio
 import { LOGIN_PROVIDER } from '@arcblock/ux/lib/Util/constant';
 import { SessionContext } from '@arcblock/did-connect/lib/Session';
 
+import Empty from '@arcblock/ux/lib/Empty';
 import type { ConnectedAccount, OAuthAccount, User, SessionContext as TSessionContext } from '../../../@types';
 import ThirdPartyItem from './third-party-item';
 
@@ -124,9 +125,15 @@ export default function ThirdPartyLogin({ user }: { user: User }) {
         display: 'grid',
         gridTemplateColumns: '1fr min-content',
       }}>
-      {normalizedAccounts.map((account) => {
-        return <ThirdPartyItem key={account?.provider} item={account as OAuthAccount} />;
-      })}
+      {!normalizedAccounts.length ? (
+        <Empty />
+      ) : (
+        <>
+          {normalizedAccounts.map((account) => {
+            return <ThirdPartyItem key={account?.provider} item={account as OAuthAccount} />;
+          })}
+        </>
+      )}
     </Box>
   );
 }