@blocklet/ui-react 3.2.2 → 3.2.3

package/lib/common/notification-addon.js

@@ -1,73 +1,73 @@
-import { jsx as i } from "react/jsx-runtime";
-import O from "prop-types";
-import { useMemo as _, useCallback as h, useEffect as $ } from "react";
+import { jsx as s } from "react/jsx-runtime";
+import U from "prop-types";
+import { useMemo as y, useCallback as I, useEffect as $ } from "react";
 import { IconButton as g, Badge as B } from "@mui/material";
 import { useSnackbar as D } from "notistack";
-import S from "@arcblock/icons/lib/Notification";
-import { useCreation as s } from "ahooks";
-import { WELLKNOWN_SERVICE_PATH_PREFIX as V, EVENTS as y } from "@abtnode/constant";
-import x from "@arcblock/react-hooks/lib/useBrowser";
-import { compareVersions as U } from "@arcblock/ux/lib/Util";
-import { joinURL as j, withQuery as I } from "ufo";
+import P from "@arcblock/icons/lib/Notification";
+import { useCreation as c } from "ahooks";
+import { WELLKNOWN_SERVICE_PATH_PREFIX as S, EVENTS as L } from "@abtnode/constant";
+import V from "@arcblock/react-hooks/lib/useBrowser";
+import { compareVersions as x } from "@arcblock/ux/lib/Util";
+import { joinURL as j, withQuery as A } from "ufo";
 import { useListenWsClient as F } from "./ws.js";
 import H from "../Notifications/Snackbar.js";
-const b = j(V, "user", "notifications"), K = (r) => I(b, {
-  id: r.id,
-  severity: r.severity || "all",
-  componentDid: r.source === "system" ? "system" : r.componentDid || "all"
+const E = j(S, "user", "notifications"), K = (o) => A(E, {
+  id: o.id,
+  severity: o.severity || "all",
+  componentDid: o.source === "system" ? "system" : o.componentDid || "all"
 });
-function P({ session: r = {} }) {
-  const { unReadCount: c, user: w, setUnReadCount: n } = r, e = s(() => w?.did, [w]), { enqueueSnackbar: E } = D(), l = x(), k = _(() => l.arcSphere || l.wallet, [l]), N = s(() => window.blocklet?.serverVersion, []), t = F("user"), d = s(
-    () => `${window.blocklet.did}/${e}/${y.NOTIFICATION_BLOCKLET_CREATE}`,
+function W({ session: o = {} }) {
+  const { unReadCount: l, user: n, setUnReadCount: i } = o, e = c(() => n?.did, [n]), { enqueueSnackbar: k } = D(), d = V(), u = y(() => !e || n?.isPreviewUser || e === window.blocklet.did, [e, n]), N = y(() => d.arcSphere || d.wallet, [d]), T = c(() => window.blocklet?.serverVersion, []), t = F("user"), a = c(
+    () => `${window.blocklet.did}/${e}/${L.NOTIFICATION_BLOCKLET_CREATE}`,
     [e]
-  ), u = s(
-    () => `${window.blocklet.did}/${e}/${y.NOTIFICATION_BLOCKLET_READ}`,
+  ), m = c(
+    () => `${window.blocklet.did}/${e}/${L.NOTIFICATION_BLOCKLET_READ}`,
     [e]
-  ), a = h(
-    (o) => {
-      const { receivers: f } = o ?? {}, { receiver: p } = f[0] ?? {};
-      if (p === e) {
-        n((v) => v + 1);
-        const C = U(N, "1.16.42-beta-20250407");
-        if (!k && o.source === "component" && C) {
-          const v = K(o), { severity: T, description: L } = o || {}, A = ["error", "warning"].includes(T) || o.sticky;
-          E(L, {
-            variant: T,
-            autoHideDuration: A ? null : 5e3,
+  ), f = I(
+    (r) => {
+      const { receivers: v } = r ?? {}, { receiver: w } = v[0] ?? {};
+      if (w === e) {
+        i((b) => b + 1);
+        const C = x(T, "1.16.42-beta-20250407");
+        if (!N && r.source === "component" && C) {
+          const b = K(r), { severity: h, description: R } = r || {}, O = ["error", "warning"].includes(h) || r.sticky;
+          k(R, {
+            variant: h,
+            autoHideDuration: O ? null : 5e3,
             // eslint-disable-next-line react/no-unstable-nested-components
-            content: (R) => /* @__PURE__ */ i(H, { viewAllUrl: v, keyId: R, notification: o })
+            content: (_) => /* @__PURE__ */ s(H, { viewAllUrl: b, keyId: _, notification: r })
           });
         }
       }
     },
-    [e, n, E, N, k]
-  ), m = h(
-    (o) => {
-      const { receiver: f, readCount: p } = o ?? {};
-      f === e && n((C) => Math.max(C - p, 0));
+    [e, i, k, T, N]
+  ), p = I(
+    (r) => {
+      const { receiver: v, readCount: w } = r ?? {};
+      v === e && i((C) => Math.max(C - w, 0));
     },
-    [e, n]
+    [e, i]
   );
-  return $(() => (t && (t.on(d, a), t.on(u, m)), () => {
-    t && (t.off(d, a), t.off(u, m));
-  }), [t, n, a, d, m, u]), !r.user || !b ? null : /* @__PURE__ */ i(
+  return $(() => (t && !u && (t.on(a, f), t.on(m, p)), () => {
+    t && !u && (t.off(a, f), t.off(m, p));
+  }), [t, i, f, a, p, m, u]), !o.user || !E ? null : /* @__PURE__ */ s(
     g,
     {
       size: "medium",
       variant: "outlined",
-      href: I(b, { read: c <= 0 }),
+      href: A(E, { read: l <= 0 }),
       sx: {
         "&:hover": {
           borderRadius: "50%"
         }
       },
-      children: /* @__PURE__ */ i(B, { badgeContent: c, color: "error", invisible: c === 0, children: /* @__PURE__ */ i(S, { style: { width: "auto", height: 24 } }) })
+      children: /* @__PURE__ */ s(B, { badgeContent: l, color: "error", invisible: l === 0, children: /* @__PURE__ */ s(P, { style: { width: "auto", height: 24 } }) })
     }
   );
 }
-P.propTypes = {
-  session: O.object
+W.propTypes = {
+  session: U.object
 };
 export {
-  P as default
+  W as default
 };

package/lib/common/ws.js

@@ -1,26 +1,33 @@
-import { use as s } from "react";
-import { WsClient as o } from "@arcblock/ws";
-import { SessionContext as n } from "@arcblock/did-connect-react/lib/Session";
-import { joinURL as f } from "ufo";
-import { BLOCKLET_SERVICE_PATH_PREFIX as m } from "@arcblock/ux/lib/Util/constant";
+import { use as c } from "react";
+import { WsClient as f } from "@arcblock/ws";
+import { useCreation as u, usePrevious as m, useUnmount as a } from "ahooks";
+import { SessionContext as l } from "@arcblock/did-connect-react/lib/Session";
+import { joinURL as C } from "ufo";
+import { BLOCKLET_SERVICE_PATH_PREFIX as d } from "@arcblock/ux/lib/Util/constant";
 const e = {};
-function a(t = "admin") {
+function w(t = "admin") {
   let r = "/";
   !window?.blocklet && window?.env?.apiPrefix && (r = window.env.apiPrefix);
-  const i = f(r, m, t);
-  return new o(i, {
+  const s = C(r, d, t);
+  return new f(s, {
     heartbeatIntervalMs: 100 * 1e3
   });
 }
-function c(t = "admin") {
-  return e[t] || (e[t] = a(t)), e[t];
+function x(t = "admin") {
+  return e[t] || (e[t] = w(t)), e[t];
 }
-const P = (t = "admin") => {
-  const r = s(n), { session: i } = r ?? {};
-  return !e[t] && i.user && (e[t] = c(t), e[t].connect()), e[t];
+const L = (t = "admin") => {
+  const r = c(l), { session: s } = r ?? {}, n = u(() => s.user?.did, [s.user]), o = m(n);
+  return a(() => {
+    Object.keys(e).forEach((i) => {
+      e[i]?.isConnected() && e[i]?.disconnect(), delete e[i];
+    });
+  }), n ? (o && o !== n && Object.keys(e).forEach((i) => {
+    e[i] && (e[i].isConnected() && e[i].disconnect(), e[i].connect());
+  }), !e[t] && s.user && (e[t] = x(t), e[t].connect()), e[t]) : null;
 };
 export {
-  a as create,
-  c as default,
-  P as useListenWsClient
+  w as create,
+  x as default,
+  L as useListenWsClient
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -35,9 +35,9 @@
   "dependencies": {
     "@abtnode/constant": "1.17.1",
     "@abtnode/util": "1.17.1",
-    "@arcblock/bridge": "3.2.2",
-    "@arcblock/icons": "3.2.2",
-    "@arcblock/react-hooks": "3.2.2",
+    "@arcblock/bridge": "3.2.3",
+    "@arcblock/icons": "3.2.3",
+    "@arcblock/react-hooks": "3.2.3",
     "@arcblock/ws": "^1.27.3",
     "@blocklet/constant": "1.17.1",
     "@blocklet/did-space-react": "^1.2.1",
@@ -83,7 +83,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@arcblock/did-connect-react": "3.2.2",
+    "@arcblock/did-connect-react": "3.2.3",
     "@types/dompurify": "^3.2.0",
     "@types/ua-parser-js": "^0.7.39",
     "@types/validator": "^13.15.2",
@@ -91,5 +91,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "d6da30f57d7f5f855462aa75b4189fb8be48fecc"
+  "gitHead": "bbd2b3c8caecf454ee738676f1ca5fe0e71fdb6a"
 }

package/src/common/notification-addon.jsx

@@ -28,6 +28,10 @@ export default function NotificationAddon({ session = {} }) {
   const { enqueueSnackbar } = useSnackbar();
   const browser = useBrowser();
 
+  const isPreviewUser = useMemo(() => {
+    return !userDid || user?.isPreviewUser || userDid === window.blocklet.did;
+  }, [userDid, user]);
+
   // 在 ArcSphere 和 Wallet 端隐藏， 消息的 toast 提示，因为有 native 的通知
   const hiddenNotificationToast = useMemo(() => {
     return browser.arcSphere || browser.wallet;
@@ -87,17 +91,17 @@ export default function NotificationAddon({ session = {} }) {
   );
 
   useEffect(() => {
-    if (wsClient) {
+    if (wsClient && !isPreviewUser) {
       wsClient.on(listenEvent, listenCallback);
       wsClient.on(readListenEvent, readListenCallback);
     }
     return () => {
-      if (wsClient) {
+      if (wsClient && !isPreviewUser) {
         wsClient.off(listenEvent, listenCallback);
         wsClient.off(readListenEvent, readListenCallback);
       }
     };
-  }, [wsClient, setUnReadCount, listenCallback, listenEvent, readListenCallback, readListenEvent]);
+  }, [wsClient, setUnReadCount, listenCallback, listenEvent, readListenCallback, readListenEvent, isPreviewUser]);
 
   if (!session.user || !viewAllUrl) {
     return null;

package/src/common/ws.js

@@ -1,5 +1,6 @@
 import { use } from 'react';
 import { WsClient } from '@arcblock/ws';
+import { useCreation, usePrevious, useUnmount } from 'ahooks';
 import { SessionContext } from '@arcblock/did-connect-react/lib/Session';
 import { joinURL } from 'ufo';
 import { BLOCKLET_SERVICE_PATH_PREFIX } from '@arcblock/ux/lib/Util/constant';
@@ -29,6 +30,35 @@ export const useListenWsClient = (endpoint = 'admin') => {
   const sessionCtx = use(SessionContext);
   const { session } = sessionCtx ?? {};
 
+  const userDid = useCreation(() => session.user?.did, [session.user]);
+
+  const previousUserDid = usePrevious(userDid);
+
+  useUnmount(() => {
+    Object.keys(client).forEach((key) => {
+      if (client[key]?.isConnected()) {
+        client[key]?.disconnect();
+      }
+      delete client[key];
+    });
+  });
+
+  if (!userDid) {
+    return null;
+  }
+
+  // 同步检查：如果用户切换了，断开并重新连接所有客户端
+  if (previousUserDid && previousUserDid !== userDid) {
+    Object.keys(client).forEach((key) => {
+      if (client[key]) {
+        if (client[key].isConnected()) {
+          client[key].disconnect();
+        }
+        // 重新连接
+        client[key].connect();
+      }
+    });
+  }
   if (!client[endpoint] && session.user) {
     client[endpoint] = getWsClient(endpoint);
     client[endpoint].connect();