@blocklet/ui-react 3.4.15 → 3.5.0

package/src/Icon/index.tsx

@@ -1,87 +0,0 @@
-import 'iconify-icon';
-import { useState } from 'react';
-import { useAsyncEffect } from 'ahooks';
-import { Avatar } from '@mui/material';
-import type { AvatarProps, BoxProps } from '@mui/material';
-import { Icon as IconifyIcon, loadIcon } from '@iconify/react';
-import { isUrl } from '../utils';
-
-/**
- * Icon 组件, 基于 mui Avatar 组件扩展对 iconify 的支持
- */
-export default function Icon({
-  icon,
-  size = undefined,
-  sx = {},
-  ...rest
-}: {
-  icon: string;
-  size?: number;
-  sx?: BoxProps['sx'];
-} & AvatarProps) {
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  const _sx = [...(Array.isArray(sx) ? sx : [sx])];
-  if (size) {
-    _sx.push({ width: size, height: size });
-  }
-  const [isIconify, setIsIconify] = useState(false);
-  // NOTICE: 需要设置默认为 true，代表在判断 icon 是否为 iconify 时，需要等待 icon 加载完成
-  const [loading, setLoading] = useState(true);
-  useAsyncEffect(async () => {
-    setLoading(true);
-    try {
-      await loadIcon(icon);
-      setIsIconify(true);
-    } catch {
-      setIsIconify(false);
-    }
-    setLoading(false);
-  }, [icon]);
-  // 禁用默认的 circular variant 样式
-  if (!rest.variant) {
-    _sx.push({
-      '&.MuiAvatar-root': {
-        color: 'inherit',
-        fontWeight: 'bold',
-        backgroundColor: 'transparent',
-        borderRadius: 0,
-      },
-      // 无 icon 背景时, svg icon 尺寸与窗口尺寸一致
-      '&.MuiAvatar-root svg': {
-        width: '100%',
-        height: '100%',
-      },
-    });
-  }
-  if (isUrl(icon)) {
-    return <Avatar component="span" {...rest} src={icon} sx={_sx} />;
-  }
-  // y = 0.6 * x + 4
-  const height = size ? 0.6 * size + 4 : 0;
-
-  if (loading) {
-    return <IconifyIcon icon="codicon:blank" height={height || undefined} />;
-  }
-  if (isIconify) {
-    return (
-      <Avatar component="span" {...rest} sx={_sx}>
-        <IconifyIcon icon={icon} height={height || undefined} />
-      </Avatar>
-    );
-  }
-  // letter avatar
-  if (icon && typeof icon === 'string') {
-    _sx.push({
-      '&.MuiAvatar-root': {
-        display: 'inline-flex',
-        ...(size && { fontSize: size - 2 }),
-      },
-    });
-    return (
-      <Avatar component="span" {...rest} sx={_sx}>
-        {Array.from(icon)[0]}
-      </Avatar>
-    );
-  }
-  return null;
-}

package/src/Notifications/Snackbar.tsx

@@ -1,261 +0,0 @@
-import { useEffect, useState } from 'react';
-import styled from '@emotion/styled';
-
-import { amber, green, common } from '@mui/material/colors';
-import { Box, IconButton, Typography } from '@mui/material';
-import { useCreation } from 'ahooks';
-import { Close as CloseIcon } from '@mui/icons-material';
-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
-
-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};
-    }
-  }
-`;
-
-interface NotificationComponentProps {
-  viewAllUrl: string;
-  keyId: number;
-  notification?: {
-    severity?: string;
-    title?: string;
-    description?: string;
-    activity?: any;
-    actorInfo?: any;
-  };
-  // eslint-disable-next-line react/require-default-props
-  content?: React.ReactNode;
-}
-
-export default function NotificationComponent({
-  ref = undefined,
-  keyId: key,
-  notification = {},
-  viewAllUrl,
-  content = null,
-}: NotificationComponentProps & {
-  ref?: React.Ref<unknown>;
-}) {
-  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 onGoNotification = (e: any) => {
-    e.stopPropagation();
-    closeSnackbar(key);
-
-    // 已确认 viewAllUrl都是本地的相对地址
-    if (!e?.customPreventRedirect) {
-      window.open(viewAllUrl, '_blank');
-    }
-  };
-
-  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 as React.Ref<HTMLDivElement>}
-      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"
-                    component="p"
-                    sx={{
-                      fontSize: 16,
-                      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>
-  );
-}

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

@@ -1,254 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { MouseEvent } from 'react';
-import { useCreation, useMemoizedFn } from 'ahooks';
-import { useTheme, Link } from '@mui/material';
-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 = undefined }: UserLinkProps) {
-  const { palette } = useTheme();
-  const profileLink = withQuery(joinURL(WELLKNOWN_SERVICE_PATH_PREFIX, 'user'), { did: user.did });
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  const _color = color || palette.text.primary;
-
-  return (
-    <Link
-      href={profileLink}
-      color={_color}
-      target="_blank"
-      onClick={(e: CustomMouseEvent) => {
-        e.customPreventRedirect = true;
-      }}
-      sx={{
-        fontWeight: 600,
-        textDecoration: 'none',
-        '&:hover': { cursor: 'pointer' },
-      }}>
-      {user.fullName || 'System'}
-    </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 { palette } = useTheme();
-  const { type, target } = activity || {};
-  const { type: targetType } = target || {};
-  const { linkColor = palette.text.primary } = 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: 'System' };
-      })
-      .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

@@ -1,16 +0,0 @@
-import { useTheme } from '@arcblock/ux/lib/Theme';
-import { useMediaQuery } from '@mui/material';
-
-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;