@blocklet/ui-react 2.12.61 → 2.12.63

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>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,16 @@
+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<string | null>((output, key) => {
+      // eslint-disable-next-line
+      const matches = useMediaQuery(theme.breakpoints.up(key));
+      return !output && matches ? key : output;
+    }, null) || 'xs'
+  );
+}
+
+export default useWidth;