@blocklet/ui-react 2.12.60 → 2.12.62

package/lib/@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/lib/Notifications/Snackbar.d.ts

@@ -0,0 +1,14 @@
+interface NotificationProps {
+    keyId: number;
+    notification: {
+        severity?: string;
+        title?: string;
+        description?: string;
+        activity?: any;
+        actorInfo?: any;
+    };
+    viewAllUrl: string;
+    content?: React.ReactNode;
+}
+declare const NotificationComponent: import("react").ForwardRefExoticComponent<NotificationProps & import("react").RefAttributes<HTMLDivElement>>;
+export default NotificationComponent;

package/lib/Notifications/Snackbar.js

@@ -0,0 +1,210 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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 } 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.js";
+import useActivityTitle from "./hooks/use-title.js";
+import { isIncludeActivity, toClickableSpan, sanitize } from "./utils.js";
+const variants = {
+  normal: InfoIcon,
+  success: CheckIcon,
+  info: InfoIcon,
+  warning: WarningIcon,
+  error: ErrorIcon
+};
+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;
+`;
+const breakpointsMap = {
+  xl: "400px",
+  lg: "400px",
+  md: "400px",
+  sm: "300px"
+};
+const StyledSnackbarContent = styled(SnackbarContent)`
+  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] || "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(
+  ({ 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) => {
+      e.stopPropagation();
+      closeSnackbar(key);
+      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 /* @__PURE__ */ jsxs(StyledSnackbarContent, { ref, severity: notification.severity, breakpoint, children: [
+      /* @__PURE__ */ jsxs(MessageDiv, { children: [
+        icon ? /* @__PURE__ */ jsx(Icon, { icon, fontSize: 24 }) : null,
+        /* @__PURE__ */ jsx(ClickableDiv, { onClick: onGoNotification, style: { width: "calc(100% - 30px)" }, children: /* @__PURE__ */ jsx(Box, { children: includeActivity ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "title", children: activityTitle }),
+          activityMeta ? /* @__PURE__ */ jsx(
+            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
+              },
+              children: activityMeta?.content
+            }
+          ) : null
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "title", children: notification.title }),
+          content || /* @__PURE__ */ jsx(
+            Typography,
+            {
+              component: "span",
+              className: "desc",
+              dangerouslySetInnerHTML: { __html: sanitize(description) }
+            }
+          )
+        ] }) }) })
+      ] }),
+      /* @__PURE__ */ jsx(ActionDiv, { children: /* @__PURE__ */ jsx(IconButton, { "aria-label": "close", color: "inherit", onClick: onClickDismiss, size: "large", children: /* @__PURE__ */ jsx(CloseIconStyled, {}) }, "close") })
+    ] });
+  }
+);
+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/lib/Notifications/hooks/use-title.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Activity types enum for type safety
+ * @readonly
+ * @enum {string}
+ */
+declare const ACTIVITY_TYPES: {
+    readonly COMMENT: "comment";
+    readonly LIKE: "like";
+    readonly FOLLOW: "follow";
+    readonly TIPS: "tips";
+    readonly MENTION: "mention";
+    readonly ASSIGN: "assign";
+};
+type ActivityTypeValues = (typeof ACTIVITY_TYPES)[keyof typeof ACTIVITY_TYPES];
+interface UserData {
+    did: string;
+    fullName: string;
+}
+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): JSX.Element | null;
+export {};

package/lib/Notifications/hooks/use-title.js

@@ -0,0 +1,159 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React 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.js";
+const ACTIVITY_TYPES = {
+  COMMENT: "comment",
+  LIKE: "like",
+  FOLLOW: "follow",
+  TIPS: "tips",
+  MENTION: "mention",
+  ASSIGN: "assign"
+};
+const ACTIVITY_DESCRIPTIONS = {
+  comment: (targetType, count) => count && count > 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    "left ",
+    count,
+    " comments on your ",
+    targetType
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    "commented on your ",
+    targetType
+  ] }),
+  like: (targetType) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    "liked your ",
+    targetType
+  ] }),
+  follow: () => /* @__PURE__ */ jsx(Fragment, { children: "followed you" }),
+  tips: (targetType) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    "gave tips to your ",
+    targetType
+  ] }),
+  mention: (targetType) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    "mentioned you in ",
+    targetType
+  ] }),
+  assign: () => /* @__PURE__ */ jsx(Fragment, { children: "assigned you a task" })
+};
+function UserLink({ user, color = colors.textBase }) {
+  const profileLink = withQuery(joinURL(WELLKNOWN_SERVICE_PATH_PREFIX, "user"), { did: user.did });
+  return /* @__PURE__ */ jsx(
+    Link,
+    {
+      href: profileLink,
+      color,
+      fontWeight: 600,
+      target: "_blank",
+      sx: { textDecoration: "none", "&:hover": { cursor: "pointer" } },
+      onClick: (e) => {
+        e.customPreventRedirect = true;
+      },
+      children: user.fullName
+    }
+  );
+}
+UserLink.displayName = "UserLink";
+export default function useActivityTitle({ activity, users, actors, extra = {}, mountPoint = "" }) {
+  const { type, target } = activity || {};
+  const { type: targetType } = target || {};
+  const { linkColor = colors.textBase } = extra || {};
+  const usersMap = useCreation(() => {
+    if (!Array.isArray(users))
+      return /* @__PURE__ */ new Map();
+    const map = /* @__PURE__ */ new Map();
+    users.forEach((user) => {
+      if (user?.did && !map.has(user.did)) {
+        map.set(user.did, user);
+      }
+    });
+    return map;
+  }, [users]);
+  const uniqueUsers = useCreation(() => {
+    if (!Array.isArray(actors))
+      return [];
+    return actors.map((actorId) => {
+      if (!actorId)
+        return null;
+      return usersMap.get(actorId) || { did: actorId, fullName: actorId?.substring(0, 8) };
+    }).filter(Boolean);
+  }, [actors, usersMap]);
+  const formatLinkedUserNames = useMemoizedFn(() => {
+    if (!Array.isArray(uniqueUsers) || uniqueUsers.length === 0) {
+      return null;
+    }
+    if (uniqueUsers.length === 1) {
+      return /* @__PURE__ */ jsx(UserLink, { user: uniqueUsers[0], color: linkColor });
+    }
+    const initialUsers = uniqueUsers.slice(0, -1);
+    const lastUser = uniqueUsers[uniqueUsers.length - 1];
+    if (uniqueUsers.length === 2) {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(UserLink, { user: initialUsers[0], color: linkColor }),
+        " and ",
+        /* @__PURE__ */ jsx(UserLink, { user: lastUser, color: linkColor })
+      ] });
+    }
+    const isMoreThanThree = uniqueUsers.length > 3;
+    const displayUsers = isMoreThanThree ? uniqueUsers.slice(0, 2) : initialUsers;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      displayUsers.map((user, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsx(UserLink, { user, color: linkColor }),
+        index < displayUsers.length - 1 ? ", " : ""
+      ] }, user.did)),
+      isMoreThanThree ? `, and ${uniqueUsers.length - 2} others` : /* @__PURE__ */ jsxs(Fragment, { children: [
+        ", and ",
+        /* @__PURE__ */ jsx(UserLink, { user: lastUser, color: linkColor })
+      ] })
+    ] });
+  });
+  const getActivityDescription = useMemoizedFn(() => {
+    const descriptionFn = type ? ACTIVITY_DESCRIPTIONS[type] : null;
+    return descriptionFn ? descriptionFn(targetType, users.length) : null;
+  });
+  const title = useCreation(() => {
+    const linkedNames = formatLinkedUserNames();
+    const description = getActivityDescription();
+    if (!linkedNames || !description) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      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 /* @__PURE__ */ jsxs(Fragment, { children: [
+    title,
+    " ",
+    targetLink && /* @__PURE__ */ jsx(
+      Link,
+      {
+        href: targetLink,
+        color: linkColor,
+        target: "_blank",
+        sx: { textDecoration: "none" },
+        onClick: (e) => {
+          e.customPreventRedirect = true;
+        },
+        children: target.name
+      }
+    )
+  ] });
+}

package/lib/Notifications/hooks/use-width.d.ts

@@ -0,0 +1,2 @@
+declare function useWidth(): string;
+export default useWidth;

package/lib/Notifications/hooks/use-width.js

@@ -0,0 +1,11 @@
+import { useTheme } from "@arcblock/ux/lib/Theme";
+import useMediaQuery from "@mui/material/useMediaQuery";
+function useWidth() {
+  const theme = useTheme();
+  const keys = [...theme.breakpoints.keys].reverse();
+  return keys.reduce((output, key) => {
+    const matches = useMediaQuery(theme.breakpoints.up(key));
+    return !output && matches ? key : output;
+  }, null) || "xs";
+}
+export default useWidth;

package/lib/Notifications/utils.d.ts

@@ -0,0 +1,70 @@
+/**
+ * 通知对象的活动目标接口
+ */
+interface ActivityTarget {
+    type?: string;
+    id?: string;
+}
+/**
+ * 通知对象的活动元数据接口
+ */
+interface ActivityMeta {
+    id?: string;
+}
+/**
+ * 活动对象接口
+ */
+interface Activity {
+    type?: string;
+    actor?: string;
+    target?: ActivityTarget;
+    meta?: ActivityMeta;
+}
+/**
+ * 通知对象接口
+ */
+interface Notification {
+    activity?: Activity;
+    actorInfo?: any;
+    severity?: string;
+    title?: string;
+    description?: string;
+    items?: Notification[];
+}
+/**
+ * 合并相邻的通知数据
+ * 合并条件:
+ * 1. 数据必须是相邻的
+ * 2. activity.type 必须相同且不为 null 或 undefined
+ * 3. 如果存在target对象，activity.target.type和activity.target.id都必须相同
+ * 4. 如果相邻数据的 activity.type 相同但没有 activity.target 对象，则需要合并
+ *
+ * @param {Notification[]} notifications - 需要处理的通知数据
+ * @returns {Notification[]} - 合并后的通知数组
+ */
+export declare const mergeAdjacentNotifications: (notifications: Notification[]) => Notification[];
+/**
+ * 判断通知是否包含activity
+ * @param {Notification} notification - 通知对象
+ * @returns {boolean} - 是否包含activity
+ */
+export declare const isIncludeActivity: (notification: Notification) => boolean;
+/**
+ * 是否可以自动已读
+ */
+export declare const canAutoRead: (notification: Notification | null | undefined) => boolean;
+/**
+ * 获取 activity 的链接
+ * 链接的来源有两种
+ * 1. activity.meta.id
+ * 2. activity.target.id
+ * @param {Activity} activity - 活动对象
+ * @returns {Object | null} - 活动的链接
+ */
+export declare const getActivityLink: (activity: Activity | null | undefined) => {
+    metaLink?: string | null;
+    targetLink?: string | null;
+} | null;
+export declare const toClickableSpan: (str: string, locale: string, isHighLight?: boolean) => Promise<any>;
+export declare const sanitize: (innerHtml: string) => any;
+export {};

package/lib/Notifications/utils.js

@@ -0,0 +1,130 @@
+import isEmpty from "lodash/isEmpty";
+import DOMPurify from "dompurify";
+import { Link, toTextList, getLink as getLinkUtil } from "@abtnode/util/lib/notification-preview/highlight";
+import { isSameAddr } from "@abtnode/util/lib/notification-preview/func";
+import { client } from "../libs/client.js";
+export const mergeAdjacentNotifications = (notifications) => {
+  if (!notifications || !notifications.length) {
+    return [];
+  }
+  const result = [];
+  let currentGroup = null;
+  let groupItems = [];
+  notifications.forEach((notification) => {
+    if (!notification.activity || !notification.activity.type || !currentGroup) {
+      if (currentGroup) {
+        if (groupItems.length === 1) {
+          result.push(groupItems[0]);
+        } else {
+          currentGroup.items = groupItems;
+          result.push(currentGroup);
+        }
+      }
+      if (notification.activity && notification.activity.type) {
+        currentGroup = notification;
+        groupItems = [notification];
+      } else {
+        result.push(notification);
+        currentGroup = null;
+        groupItems = [];
+      }
+      return;
+    }
+    const currentActivity = groupItems[0].activity;
+    const currentType = currentActivity?.type;
+    const currentTargetType = currentActivity?.target?.type;
+    const currentTargetId = currentActivity?.target?.id;
+    const newType = notification.activity.type;
+    const newTargetType = notification.activity.target?.type;
+    const newTargetId = notification.activity.target?.id;
+    const shouldMerge = (
+      // activity.type 必须相同且不为null或undefined
+      currentType && newType && currentType === newType && // 如果都没有target，可以合并
+      (!currentActivity?.target && !notification.activity.target || // 如果都有target，则target.type和target.id都必须相同
+      currentActivity?.target && notification.activity.target && currentTargetType === newTargetType && currentTargetId === newTargetId)
+    );
+    if (shouldMerge) {
+      groupItems.push(notification);
+    } else {
+      if (groupItems.length === 1) {
+        result.push(groupItems[0]);
+      } else {
+        const groupToAdd = Object.assign({}, currentGroup, { items: groupItems });
+        result.push(groupToAdd);
+      }
+      currentGroup = notification;
+      groupItems = [notification];
+    }
+  });
+  if (currentGroup) {
+    if (groupItems.length === 1) {
+      result.push(groupItems[0]);
+    } else {
+      const groupToAdd = Object.assign({}, currentGroup, { items: groupItems });
+      result.push(groupToAdd);
+    }
+  }
+  return result;
+};
+export const isIncludeActivity = (notification) => {
+  return !isEmpty(notification.activity) && !!notification.activity?.type && !!notification.activity?.actor;
+};
+export const canAutoRead = (notification) => {
+  const { severity } = notification || {};
+  return !!severity && ["normal", "success", "info"].includes(severity);
+};
+export const getActivityLink = (activity) => {
+  if (!activity) {
+    return null;
+  }
+  const { meta, target } = activity;
+  return {
+    metaLink: meta?.id,
+    targetLink: target?.id
+  };
+};
+const getUserProfileUrl = async (did, locale) => {
+  try {
+    const profileUrl = await client.user.getProfileUrl({ did, locale });
+    return profileUrl;
+  } catch (error) {
+    console.error(error);
+    return void 0;
+  }
+};
+const getLink = async (item, locale) => {
+  const { type, did } = item;
+  if (isSameAddr(type, "did")) {
+    const profileUrl = await getUserProfileUrl(did, locale);
+    return profileUrl || getLinkUtil(item);
+  }
+  return getLinkUtil(item);
+};
+export const toClickableSpan = async (str, locale, isHighLight = true) => {
+  const textList = toTextList(str);
+  const result = await Promise.all(
+    textList.map(async (item) => {
+      if (item instanceof Link) {
+        if (isHighLight) {
+          const url = await getLink(item, locale);
+          const { type, chainId, did } = item;
+          if (isSameAddr(type, "dapp")) {
+            return `<em class="dapp" data-type="${type}" data-chain-id="${chainId}" data-did="${did}">${item.text}</em>`;
+          }
+          if (url) {
+            return `<a target="_blank" rel="noopener noreferrer" class="link" href="${url}">${item.text}</a>`;
+          }
+          return `<em class="common" data-type="${type}" data-chain-id="${chainId}" data-did="${did}">${item.text}</em>`;
+        }
+        return item.text;
+      }
+      return item;
+    })
+  ).then((results) => results.join(""));
+  return result;
+};
+export const sanitize = (innerHtml) => {
+  return DOMPurify.sanitize(innerHtml, {
+    ALLOWED_ATTR: ["href", "target", "rel", "class", "id", "style"]
+  });
+};

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

@@ -143,7 +143,7 @@ export default function UserBasicInfo({
                           bottom: 0,
                           left: 0,
                           right: 0,
-                          height: "50%",
+                          height: "25%",
                           backgroundColor: "rgba(0, 0, 0, 0.3)",
                           display: "flex",
                           justifyContent: "center",