@blocklet/ui-react 2.12.60 → 2.12.62

package/lib/common/notification-addon.js

@@ -4,18 +4,29 @@ import PropTypes from "prop-types";
 import { useCallback, useEffect } from "react";
 import { temp as colors } from "@arcblock/ux/lib/Colors";
 import { IconButton } from "@mui/material";
+import { useSnackbar } from "notistack";
 import NotificationsOutlinedIcon from "@arcblock/icons/lib/Notification";
 import { useCreation } from "ahooks";
-import { EVENTS } from "@abtnode/constant";
+import { EVENTS, WELLKNOWN_SERVICE_PATH_PREFIX } from "@abtnode/constant";
+import { joinURL, withQuery } from "ufo";
 import { useListenWsClient } from "./ws.js";
+import NotificationSnackbar from "../Notifications/Snackbar.js";
+import { compareVersions } from "../utils.js";
+const viewAllUrl = joinURL(WELLKNOWN_SERVICE_PATH_PREFIX, "user", "notifications");
+const getNotificationLink = (notification) => {
+  return withQuery(viewAllUrl, {
+    id: notification.id,
+    severity: notification.severity || "all",
+    componentDid: notification.source === "system" ? "system" : notification.componentDid || "all"
+  });
+};
 export default function NotificationAddon({ session = {} }) {
   const { unReadCount, user, setUnReadCount } = session;
   const userDid = useCreation(() => user?.did, [user]);
-  const viewAllUrl = useCreation(() => {
-    const { navigation } = window.blocklet ?? {};
-    const notification = navigation?.find((x) => x.id === "/userCenter/notification");
-    return notification?.link;
-  });
+  const { enqueueSnackbar } = useSnackbar();
+  const serverVersion = useCreation(() => {
+    return window.blocklet?.serverVersion;
+  }, []);
   const wsClient = useListenWsClient("user");
   const listenEvent = useCreation(
     () => `${window.blocklet.did}/${userDid}/${EVENTS.NOTIFICATION_BLOCKLET_CREATE}`,
@@ -31,15 +42,27 @@ export default function NotificationAddon({ session = {} }) {
       const { receiver: notificationReceiver } = receivers[0] ?? {};
       if (notificationReceiver === userDid) {
         setUnReadCount((x) => x + 1);
+        const isCompatible = compareVersions(serverVersion, "1.16.42-beta-20250407");
+        if (notification.source === "component" && isCompatible) {
+          const link = getNotificationLink(notification);
+          const { severity, description } = notification || {};
+          const disableAutoHide = ["error", "warning"].includes(severity) || notification.sticky;
+          enqueueSnackbar(description, {
+            variant: severity,
+            autoHideDuration: disableAutoHide ? null : 5e3,
+            // eslint-disable-next-line react/no-unstable-nested-components
+            content: (key) => /* @__PURE__ */ jsx(NotificationSnackbar, { viewAllUrl: link, keyId: key, notification })
+          });
+        }
       }
     },
-    [userDid, setUnReadCount]
+    [userDid, setUnReadCount, enqueueSnackbar, serverVersion]
   );
   const readListenCallback = useCallback(
     (data) => {
       const { receiver, readCount } = data ?? {};
       if (receiver === userDid) {
-        setUnReadCount((x) => x - readCount <= 0 ? 0 : x - readCount);
+        setUnReadCount((x) => Math.max(x - readCount, 0));
       }
     },
     [userDid, setUnReadCount]

package/lib/utils.d.ts

@@ -7,3 +7,4 @@ export function isIconifyString(str: any): boolean;
 export function matchPath(path: any): any;
 export function matchPaths(paths?: any[]): number;
 export function splitNavColumns(items: any, options?: {}): never[][];
+export function compareVersions(version1: any, version2: any): any;

package/lib/utils.js

@@ -1,3 +1,5 @@
+import semver from 'semver';
+
 export const mapRecursive = (array, fn, childrenKey = 'children') => {
   return array.map((item) => {
     if (Array.isArray(item[childrenKey])) {
@@ -151,3 +153,27 @@ export const splitNavColumns = (items, options = {}) => {
 
   return result;
 };
+
+/**
+ * 比较两个版本号，用于判断版本号是否兼容
+ * @param {*} version1
+ * @param {*} version2
+ * @returns 0: 版本相同, -1: version1 < version2, 1: version1 > version2
+ */
+export const compareVersions = (version1, version2) => {
+  const getDateVersion = (version) => {
+    const match = version.match(/^(\d+\.\d+\.\d+(?:-[^-]+?-\d{8}))/);
+    return match ? match[1] : version;
+  };
+
+  const dateVersion1 = getDateVersion(version1);
+  const dateVersion2 = getDateVersion(version2);
+
+  // 如果基础版本相同，但完整版本不同（意味着有额外部分），返回false
+  if (dateVersion1 === dateVersion2 && version1 !== version2) {
+    return false;
+  }
+
+  // 其他情况正常比较
+  return semver.gte(dateVersion1, dateVersion2);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.12.60",
+  "version": "2.12.62",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -33,30 +33,35 @@
   },
   "dependencies": {
     "@abtnode/constant": "^1.16.41",
-    "@arcblock/bridge": "^2.12.60",
-    "@arcblock/react-hooks": "^2.12.60",
+    "@abtnode/util": "^1.16.41",
+    "@arcblock/bridge": "^2.12.62",
+    "@arcblock/react-hooks": "^2.12.62",
     "@arcblock/ws": "^1.19.18",
     "@blocklet/did-space-react": "^1.0.41",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
+    "@iconify-icons/tabler": "^1.2.95",
     "@iconify/react": "^5.2.0",
     "ahooks": "^3.7.10",
     "axios": "^1.7.5",
     "clsx": "^2.1.0",
     "core-js": "^3.25.5",
     "dayjs": "^1.11.5",
+    "dompurify": "^3.2.1",
     "iconify-icon": "^1.0.8",
     "iconify-icons-material-symbols-400": "^0.0.1",
     "is-url": "^1.2.4",
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.21",
     "moment-timezone": "^0.5.37",
+    "notistack": "^2.0.5",
     "p-all": "^5.0.0",
     "p-queue": "^6.6.2",
     "p-wait-for": "^5.0.2",
     "prop-types": "^15.8.1",
     "react-error-boundary": "^3.1.4",
     "react-placeholder": "^4.1.0",
+    "semver": "^7.6.3",
     "type-fest": "^4.22.0",
     "ua-parser-js": "^1.0.37",
     "ufo": "^1.5.3",
@@ -81,11 +86,12 @@
     "@babel/core": "^7.19.3",
     "@babel/preset-env": "^7.19.3",
     "@babel/preset-react": "^7.18.6",
+    "@types/dompurify": "^3.2.0",
     "@types/ua-parser-js": "^0.7.39",
     "eslint-plugin-react-hooks": "^4.6.0",
     "glob": "^10.3.3",
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "c850736bd234c93fdc218bc61cfd70fa90384c26"
+  "gitHead": "30267c6d2ad1fdc5ce8c13c6d2323c8b7c58ee65"
 }

package/src/@types/shims.d.ts

@@ -7,6 +7,7 @@ declare module '@arcblock/ux/lib/ErrorBoundary';
 declare module '@arcblock/did-connect/*';
 declare module '@arcblock/did-connect/lib/Session';
 declare module '@abtnode/constant';
+declare module '@abtnode/util/lib/notification-preview/*';
 
 declare module 'is-url';
 

package/src/Notifications/Snackbar.tsx

@@ -0,0 +1,270 @@
+import { forwardRef, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+
+import { amber, green, common } from '@mui/material/colors';
+import IconButton from '@mui/material/IconButton';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { useCreation } from 'ahooks';
+import CloseIcon from '@mui/icons-material/Close';
+import { useNavigate } from 'react-router-dom';
+import { Icon, IconifyIcon } from '@iconify/react';
+import CheckIcon from '@iconify-icons/tabler/circle-check';
+import WarningIcon from '@iconify-icons/tabler/exclamation-circle';
+import InfoIcon from '@iconify-icons/tabler/info-circle';
+import ErrorIcon from '@iconify-icons/tabler/xbox-x';
+
+import { useSnackbar, SnackbarContent } from 'notistack';
+
+import useWidth from './hooks/use-width';
+import useActivityTitle from './hooks/use-title';
+import { isIncludeActivity, toClickableSpan, sanitize } from './utils';
+
+// Define type for breakpoints
+type BreakpointType = 'xl' | 'lg' | 'md' | 'sm';
+
+// Define types for notification component
+interface NotificationProps {
+  keyId: number;
+  notification: {
+    severity?: string;
+    title?: string;
+    description?: string;
+    activity?: any;
+    actorInfo?: any;
+  };
+  viewAllUrl: string;
+  content?: React.ReactNode;
+}
+
+const variants: Record<string, IconifyIcon> = {
+  normal: InfoIcon,
+  success: CheckIcon,
+  info: InfoIcon,
+  warning: WarningIcon,
+  error: ErrorIcon,
+};
+
+// Styled components
+const CloseIconStyled = styled(CloseIcon)`
+  font-size: 20px;
+`;
+
+const MessageDiv = styled.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  flex: 1;
+  width: 0;
+`;
+
+const ActionDiv = styled.div`
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  margin-right: -8px;
+  width: 44px;
+`;
+
+// Define breakpoints map
+const breakpointsMap: Record<BreakpointType, string> = {
+  xl: '400px',
+  lg: '400px',
+  md: '400px',
+  sm: '300px',
+};
+
+const StyledSnackbarContent = styled(SnackbarContent)<{ severity?: string; breakpoint: string }>`
+  display: flex;
+  color: #fff;
+  align-items: center;
+  padding: 12px 16px;
+  border-radius: 4px;
+  box-shadow:
+    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+
+  ${({ severity, breakpoint }) => {
+    const width = breakpointsMap[breakpoint as BreakpointType] || '400px';
+
+    if (severity === 'success') {
+      return `
+        background-color: ${green[600]} !important;
+        width: ${width};
+      `;
+    }
+
+    if (severity === 'error') {
+      return `
+        background-color: #d32f2f !important;
+        width: ${width};
+      `;
+    }
+
+    if (severity === 'info') {
+      return `
+        background-color: #1976d2 !important;
+        width: ${width};
+      `;
+    }
+
+    if (severity === 'warning') {
+      return `
+        background-color: ${amber[700]} !important;
+        width: ${width};
+      `;
+    }
+
+    return `
+      background-color: #333;
+      width: ${width};
+    `;
+  }}
+`;
+
+const ClickableDiv = styled.div`
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  .title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    font-weight: bold;
+  }
+  .desc {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    word-break: break-word;
+    line-height: 1.2;
+    .link,
+    .dapp,
+    .common {
+      color: ${common.white};
+    }
+  }
+`;
+
+const NotificationComponent = forwardRef<HTMLDivElement, NotificationProps>(
+  ({ keyId: key, notification = {}, viewAllUrl, content }, ref) => {
+    const breakpoint = useWidth();
+    const [description, setDescription] = useState(notification.description || '');
+    const icon = variants[notification.severity || ''];
+
+    const { closeSnackbar } = useSnackbar();
+    const onClickDismiss = () => closeSnackbar(key);
+
+    useEffect(() => {
+      toClickableSpan(notification.description || '', 'en').then((res) => {
+        setDescription(res);
+      });
+    }, [notification.description]);
+
+    const navigate = useNavigate();
+    const onGoNotification = (e: any) => {
+      e.stopPropagation();
+      closeSnackbar(key);
+
+      // 已确认 viewAllUrl都是本地的相对地址
+      if (!e?.customPreventRedirect) {
+        navigate(viewAllUrl);
+      }
+    };
+
+    const includeActivity = useCreation(() => {
+      return isIncludeActivity(notification);
+    }, [notification]);
+    const activity = useCreation(() => {
+      return notification?.activity;
+    }, [notification]);
+
+    const activityMeta = useCreation(() => {
+      if (!activity || activity.type === 'tips') {
+        return null;
+      }
+
+      return activity?.meta;
+    }, [activity]);
+
+    const activityTitle = useActivityTitle({
+      activity,
+      users: [notification?.actorInfo],
+      actors: [notification?.activity?.actor],
+      extra: {
+        linkColor: common.white,
+      },
+    });
+
+    return (
+      <StyledSnackbarContent ref={ref} severity={notification.severity} breakpoint={breakpoint}>
+        <MessageDiv>
+          {icon ? <Icon icon={icon} fontSize={24} /> : null}
+          <ClickableDiv onClick={onGoNotification} style={{ width: 'calc(100% - 30px)' }}>
+            <Box>
+              {includeActivity ? (
+                <>
+                  <span className="title">{activityTitle}</span>
+                  {activityMeta ? (
+                    <Typography
+                      variant="subtitle2"
+                      fontSize={16}
+                      component="p"
+                      sx={{
+                        display: '-webkit-box',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        WebkitLineClamp: 3,
+                        WebkitBoxOrient: 'vertical',
+                        color: common.white,
+                        lineHeight: 1.2,
+                      }}>
+                      {activityMeta?.content}
+                    </Typography>
+                  ) : null}
+                </>
+              ) : (
+                <>
+                  <span className="title">{notification.title}</span>
+                  {content || (
+                    <Typography
+                      component="span"
+                      className="desc"
+                      dangerouslySetInnerHTML={{ __html: sanitize(description) }}
+                    />
+                  )}
+                </>
+              )}
+            </Box>
+          </ClickableDiv>
+        </MessageDiv>
+        <ActionDiv>
+          <IconButton key="close" aria-label="close" color="inherit" onClick={onClickDismiss} size="large">
+            <CloseIconStyled />
+          </IconButton>
+        </ActionDiv>
+      </StyledSnackbarContent>
+    );
+  }
+);
+
+NotificationComponent.displayName = 'NotificationComponent';
+
+NotificationComponent.propTypes = {
+  viewAllUrl: PropTypes.string.isRequired,
+  keyId: PropTypes.number.isRequired,
+  notification: PropTypes.object.isRequired,
+  content: PropTypes.node,
+};
+
+NotificationComponent.defaultProps = {
+  content: null,
+};
+
+export default NotificationComponent;

package/src/Notifications/hooks/use-title.tsx

@@ -0,0 +1,248 @@
+/* eslint-disable react/prop-types */
+import React, { MouseEvent } from 'react';
+import { useCreation, useMemoizedFn } from 'ahooks';
+import { temp as colors } from '@arcblock/ux/lib/Colors';
+import Link from '@mui/material/Link';
+import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
+import { joinURL, withQuery } from 'ufo';
+import isEmpty from 'lodash/isEmpty';
+import { getActivityLink } from '../utils';
+
+/**
+ * Activity types enum for type safety
+ * @readonly
+ * @enum {string}
+ */
+const ACTIVITY_TYPES = {
+  COMMENT: 'comment',
+  LIKE: 'like',
+  FOLLOW: 'follow',
+  TIPS: 'tips',
+  MENTION: 'mention',
+  ASSIGN: 'assign',
+} as const;
+
+type ActivityTypeValues = (typeof ACTIVITY_TYPES)[keyof typeof ACTIVITY_TYPES];
+
+/**
+ * Activity descriptions mapping
+ * @type {Object.<string, React.ReactNode>}
+ */
+const ACTIVITY_DESCRIPTIONS: Record<ActivityTypeValues, (targetType: string, count?: number) => React.ReactNode> = {
+  comment: (targetType: string, count?: number) =>
+    count && count > 1 ? (
+      <>
+        left {count} comments on your {targetType}
+      </>
+    ) : (
+      <>commented on your {targetType}</>
+    ),
+  like: (targetType: string) => <>liked your {targetType}</>,
+  follow: () => <>followed you</>,
+  tips: (targetType: string) => <>gave tips to your {targetType}</>,
+  mention: (targetType: string) => <>mentioned you in {targetType}</>,
+  assign: () => <>assigned you a task</>,
+};
+
+interface UserData {
+  did: string;
+  fullName: string;
+}
+
+interface UserLinkProps {
+  user: UserData;
+  color?: string;
+}
+
+interface CustomMouseEvent extends MouseEvent<HTMLAnchorElement> {
+  customPreventRedirect?: boolean;
+}
+
+/**
+ * UserLink component for rendering a user's name as a profile link
+ * Memoized to prevent unnecessary re-renders
+ */
+function UserLink({ user, color = colors.textBase }: UserLinkProps) {
+  const profileLink = withQuery(joinURL(WELLKNOWN_SERVICE_PATH_PREFIX, 'user'), { did: user.did });
+
+  return (
+    <Link
+      href={profileLink}
+      color={color}
+      fontWeight={600}
+      target="_blank"
+      sx={{ textDecoration: 'none', '&:hover': { cursor: 'pointer' } }}
+      onClick={(e: CustomMouseEvent) => {
+        e.customPreventRedirect = true;
+      }}>
+      {user.fullName}
+    </Link>
+  );
+}
+
+UserLink.displayName = 'UserLink';
+
+interface ActivityTarget {
+  type: string;
+  name: string;
+}
+
+interface Activity {
+  type: ActivityTypeValues;
+  target: ActivityTarget;
+}
+
+interface ExtraParams {
+  linkColor?: string;
+  [key: string]: any;
+}
+
+interface ActivityTitleProps {
+  activity: Activity;
+  users: UserData[];
+  actors: string[];
+  extra?: ExtraParams;
+  mountPoint?: string;
+}
+
+/**
+ * A hook that returns a formatted activity title with linked usernames
+ * @param {Object} params - The parameters object
+ * @param {keyof typeof ACTIVITY_TYPES} params.type - The activity type
+ * @param {Object} params.target - The target object
+ * @param {Array<{did: string, fullName: string}>} params.users - Array of user objects
+ * @param {Object} params.extra - Extra parameters
+ * @returns {React.ReactNode} Formatted title with linked usernames
+ */
+export default function useActivityTitle({ activity, users, actors, extra = {}, mountPoint = '' }: ActivityTitleProps) {
+  const { type, target } = activity || {};
+  const { type: targetType } = target || {};
+  const { linkColor = colors.textBase } = extra || {};
+
+  // Create a map of users by their DID for efficient lookup
+  const usersMap = useCreation(() => {
+    if (!Array.isArray(users)) return new Map<string, UserData>();
+    const map = new Map<string, UserData>();
+    users.forEach((user) => {
+      if (user?.did && !map.has(user.did)) {
+        map.set(user.did, user);
+      }
+    });
+    return map;
+  }, [users]);
+
+  // Get unique users from actors, using the map and providing fallback for missing users
+  const uniqueUsers = useCreation(() => {
+    if (!Array.isArray(actors)) return [];
+
+    return actors
+      .map((actorId) => {
+        if (!actorId) return null;
+        // If user exists in map, return the user object, otherwise create a basic object with DID
+        return usersMap.get(actorId) || { did: actorId, fullName: actorId?.substring(0, 8) };
+      })
+      .filter(Boolean) as UserData[];
+  }, [actors, usersMap]);
+
+  // Memoized function to format user names with links
+  const formatLinkedUserNames = useMemoizedFn(() => {
+    if (!Array.isArray(uniqueUsers) || uniqueUsers.length === 0) {
+      return null;
+    }
+
+    // Early return for single user case
+    if (uniqueUsers.length === 1) {
+      return <UserLink user={uniqueUsers[0]} color={linkColor} />;
+    }
+
+    // Get all users except the last one for multi-user cases
+    const initialUsers = uniqueUsers.slice(0, -1);
+    const lastUser = uniqueUsers[uniqueUsers.length - 1];
+
+    // Early return for two users case
+    if (uniqueUsers.length === 2) {
+      return (
+        <>
+          <UserLink user={initialUsers[0]} color={linkColor} />
+          {' and '}
+          <UserLink user={lastUser} color={linkColor} />
+        </>
+      );
+    }
+
+    // Handle three or more users
+    const isMoreThanThree = uniqueUsers.length > 3;
+    const displayUsers = isMoreThanThree ? uniqueUsers.slice(0, 2) : initialUsers;
+
+    return (
+      <>
+        {displayUsers.map((user, index) => (
+          <React.Fragment key={user.did}>
+            <UserLink user={user} color={linkColor} />
+            {index < displayUsers.length - 1 ? ', ' : ''}
+          </React.Fragment>
+        ))}
+        {isMoreThanThree ? (
+          `, and ${uniqueUsers.length - 2} others`
+        ) : (
+          <>
+            , and <UserLink user={lastUser} color={linkColor} />
+          </>
+        )}
+      </>
+    );
+  });
+
+  // Memoized function to get activity description
+  const getActivityDescription = useMemoizedFn(() => {
+    const descriptionFn = type ? ACTIVITY_DESCRIPTIONS[type] : null;
+    return descriptionFn ? descriptionFn(targetType, users.length) : null;
+  });
+
+  // Create the final title using memoization
+  const title = useCreation(() => {
+    const linkedNames = formatLinkedUserNames();
+    const description = getActivityDescription();
+
+    if (!linkedNames || !description) {
+      return null;
+    }
+
+    return (
+      <>
+        {linkedNames} {description}
+      </>
+    );
+  }, [type, targetType, uniqueUsers, formatLinkedUserNames, getActivityDescription]);
+
+  const targetLink = useCreation(() => {
+    if (!activity) return null;
+    const link = getActivityLink(activity);
+    if (link?.targetLink) {
+      return joinURL(mountPoint, link.targetLink);
+    }
+    return null;
+  }, [activity, mountPoint]);
+
+  if (!type || isEmpty(target)) {
+    return null;
+  }
+
+  return (
+    <>
+      {title}{' '}
+      {targetLink && (
+        <Link
+          href={targetLink}
+          color={linkColor}
+          target="_blank"
+          sx={{ textDecoration: 'none' }}
+          onClick={(e: CustomMouseEvent) => {
+            e.customPreventRedirect = true;
+          }}>
+          {target.name}
+        </Link>
+      )}
+    </>
+  );
+}