@blocklet/ui-react/lib/common/notification-addon.js

Some useful front-end web components that can be used in Blocklets.

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