@blocklet/ui-react 2.13.58 → 2.13.59

package/lib/UserCenter/components/notification.js

@@ -21,34 +21,31 @@ function NotificationItem({
   onChange,
   isMobile
 }) {
-  return /* @__PURE__ */ jsx(
-    Switch,
-    {
-      checked: value,
-      labelProps: {
-        label: /* @__PURE__ */ jsxs(
-          Typography,
-          {
-            color: "text.primary",
-            sx: {
-              fontSize: 14,
-              display: "flex",
-              flexWrap: isMobile ? "wrap" : "nowrap",
-              columnGap: 1,
-              flex: 1,
-              whiteSpace: isMobile ? "normal" : "nowrap"
-            },
-            children: [
-              title,
-              description
-            ]
-          }
-        )
-      },
-      size: "small",
-      onChange
-    }
-  );
+  const handleClick = useMemoizedFn((event) => {
+    event.stopPropagation();
+  });
+  return /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [
+    /* @__PURE__ */ jsx(Switch, { checked: value, size: "small", onChange }),
+    /* @__PURE__ */ jsxs(
+      Typography,
+      {
+        color: "text.primary",
+        sx: {
+          fontSize: 14,
+          display: "flex",
+          flexWrap: isMobile ? "wrap" : "nowrap",
+          columnGap: 1,
+          flex: 1,
+          whiteSpace: isMobile ? "normal" : "nowrap"
+        },
+        onClick: handleClick,
+        children: [
+          title,
+          description
+        ]
+      }
+    )
+  ] });
 }
 export default function Notification({ user, isMobile }) {
   const { locale } = useLocaleContext();

package/lib/common/notification-addon.js

@@ -1,12 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import Badge from "@mui/material/Badge";
 import PropTypes from "prop-types";
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import { IconButton } from "@mui/material";
 import { useSnackbar } from "notistack";
 import NotificationsOutlinedIcon from "@arcblock/icons/lib/Notification";
 import { useCreation } from "ahooks";
 import { EVENTS, WELLKNOWN_SERVICE_PATH_PREFIX } from "@abtnode/constant";
+import useBrowser from "@arcblock/react-hooks/lib/useBrowser";
 import { joinURL, withQuery } from "ufo";
 import { useListenWsClient } from "./ws.js";
 import NotificationSnackbar from "../Notifications/Snackbar.js";
@@ -23,6 +24,10 @@ export default function NotificationAddon({ session = {} }) {
   const { unReadCount, user, setUnReadCount } = session;
   const userDid = useCreation(() => user?.did, [user]);
   const { enqueueSnackbar } = useSnackbar();
+  const browser = useBrowser();
+  const hiddenNotificationToast = useMemo(() => {
+    return browser.arcSphere || browser.wallet;
+  }, [browser]);
   const serverVersion = useCreation(() => {
     return window.blocklet?.serverVersion;
   }, []);
@@ -42,7 +47,7 @@ export default function NotificationAddon({ session = {} }) {
       if (notificationReceiver === userDid) {
         setUnReadCount((x) => x + 1);
         const isCompatible = compareVersions(serverVersion, "1.16.42-beta-20250407");
-        if (notification.source === "component" && isCompatible) {
+        if (!hiddenNotificationToast && notification.source === "component" && isCompatible) {
           const link = getNotificationLink(notification);
           const { severity, description } = notification || {};
           const disableAutoHide = ["error", "warning"].includes(severity) || notification.sticky;
@@ -55,7 +60,7 @@ export default function NotificationAddon({ session = {} }) {
         }
       }
     },
-    [userDid, setUnReadCount, enqueueSnackbar, serverVersion]
+    [userDid, setUnReadCount, enqueueSnackbar, serverVersion, hiddenNotificationToast]
   );
   const readListenCallback = useCallback(
     (data) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.13.58",
+  "version": "2.13.59",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -34,8 +34,8 @@
   "dependencies": {
     "@abtnode/constant": "^1.16.43",
     "@abtnode/util": "^1.16.43",
-    "@arcblock/bridge": "^2.13.58",
-    "@arcblock/react-hooks": "^2.13.58",
+    "@arcblock/bridge": "^2.13.59",
+    "@arcblock/react-hooks": "^2.13.59",
     "@arcblock/ws": "^1.20.11",
     "@blocklet/constant": "^1.16.43",
     "@blocklet/did-space-react": "^1.0.56",
@@ -94,5 +94,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "a1251dcb82603ceef7a4a4ab58efb3f53b103a4e"
+  "gitHead": "e00efa251020006bdc76353ef6c64212529ebddd"
 }

package/src/UserCenter/components/notification.tsx

@@ -31,29 +31,28 @@ function NotificationItem({
   onChange: (event: ChangeEvent<HTMLInputElement>) => void;
   isMobile: boolean;
 }) {
+  const handleClick = useMemoizedFn((event: React.MouseEvent) => {
+    event.stopPropagation();
+  });
+
   return (
-    <Switch
-      checked={value}
-      labelProps={{
-        label: (
-          <Typography
-            color="text.primary"
-            sx={{
-              fontSize: 14,
-              display: 'flex',
-              flexWrap: isMobile ? 'wrap' : 'nowrap',
-              columnGap: 1,
-              flex: 1,
-              whiteSpace: isMobile ? 'normal' : 'nowrap',
-            }}>
-            {title}
-            {description}
-          </Typography>
-        ),
-      }}
-      size="small"
-      onChange={onChange}
-    />
+    <Box display="flex" alignItems="center" gap={1}>
+      <Switch checked={value} size="small" onChange={onChange} />
+      <Typography
+        color="text.primary"
+        sx={{
+          fontSize: 14,
+          display: 'flex',
+          flexWrap: isMobile ? 'wrap' : 'nowrap',
+          columnGap: 1,
+          flex: 1,
+          whiteSpace: isMobile ? 'normal' : 'nowrap',
+        }}
+        onClick={handleClick}>
+        {title}
+        {description}
+      </Typography>
+    </Box>
   );
 }
 

package/src/common/notification-addon.jsx

@@ -1,12 +1,13 @@
 import Badge from '@mui/material/Badge';
 import PropTypes from 'prop-types';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { IconButton } from '@mui/material';
 import { useSnackbar } from 'notistack';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import NotificationsOutlinedIcon from '@arcblock/icons/lib/Notification';
 import { useCreation } from 'ahooks';
 import { EVENTS, WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
+import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
 import { joinURL, withQuery } from 'ufo';
 import { useListenWsClient } from './ws';
 import NotificationSnackbar from '../Notifications/Snackbar';
@@ -27,6 +28,12 @@ export default function NotificationAddon({ session = {} }) {
   const userDid = useCreation(() => user?.did, [user]);
 
   const { enqueueSnackbar } = useSnackbar();
+  const browser = useBrowser();
+
+  // 在 ArcSphere 和 Wallet 端隐藏， 消息的 toast 提示，因为有 native 的通知
+  const hiddenNotificationToast = useMemo(() => {
+    return browser.arcSphere || browser.wallet;
+  }, [browser]);
 
   const serverVersion = useCreation(() => {
     return window.blocklet?.serverVersion;
@@ -51,10 +58,10 @@ export default function NotificationAddon({ session = {} }) {
 
       if (notificationReceiver === userDid) {
         setUnReadCount((x) => x + 1);
-        // 显示通知, 如果是系统通知则不需要显示
+        // 显示通知, 如果是系统通知则不需要显示, 如果是移动端不需要显示
         // 兼容代码，如果 server 没有升级那么不需要提示
         const isCompatible = compareVersions(serverVersion, '1.16.42-beta-20250407');
-        if (notification.source === 'component' && isCompatible) {
+        if (!hiddenNotificationToast && notification.source === 'component' && isCompatible) {
           const link = getNotificationLink(notification);
           const { severity, description } = notification || {};
           const disableAutoHide = ['error', 'warning'].includes(severity) || notification.sticky;
@@ -67,7 +74,7 @@ export default function NotificationAddon({ session = {} }) {
         }
       }
     },
-    [userDid, setUnReadCount, enqueueSnackbar, serverVersion]
+    [userDid, setUnReadCount, enqueueSnackbar, serverVersion, hiddenNotificationToast]
   );
 
   const readListenCallback = useCallback(