@arcblock/ux 3.4.14 → 3.5.0

package/src/Typography/index.tsx

@@ -1,124 +0,0 @@
-import { Box, Typography as MuiTypography, Skeleton, type TypographyProps as MuiTypographyProps } from '@mui/material';
-import { useCreation, useReactive, useSize } from 'ahooks';
-import noop from 'lodash/noop';
-import { useEffect, useRef } from 'react';
-
-export interface TypographyProps extends MuiTypographyProps {
-  fontSize?: string | number;
-  minFontSize?: number;
-  onShrink?: ({ fontSize, initialSize }: { fontSize: number; initialSize: number }) => void;
-}
-
-let minBrowserFontSize = -1;
-
-function detectMinimumFontSize() {
-  const testDiv = document.createElement('div');
-
-  Object.assign(testDiv.style, {
-    fontSize: '1px',
-    visibility: 'hidden',
-    position: 'absolute',
-  });
-  testDiv.textContent = 'Test';
-  document.body.appendChild(testDiv);
-
-  const size = parseFloat(getComputedStyle(testDiv).fontSize);
-  document.body.removeChild(testDiv);
-  return size;
-}
-
-export default function Typography({
-  children = null,
-  minFontSize = 12,
-  /* 设置为 auto 时字体会自动收缩，直到达到浏览器最小字体限制 */
-  fontSize = undefined,
-  sx,
-  onShrink = noop,
-  ...rest
-}: TypographyProps) {
-  const refMock = useRef<HTMLSpanElement>(null);
-  const refContainer = useRef<HTMLDivElement>(null);
-  const state = useReactive<{
-    fontSize?: number;
-    loading: boolean;
-    initialSize?: number;
-  }>({
-    // @ts-expect-error
-    fontSize,
-    loading: true,
-  });
-  const mockSize = useSize(refMock.current);
-  const containerSize = useSize(refContainer.current);
-
-  useEffect(() => {
-    if (state.loading) {
-      if (fontSize === 'auto') {
-        if (mockSize && !state.initialSize) {
-          const styleSize = getComputedStyle(refMock.current!).fontSize;
-          state.initialSize = Number(styleSize.replace('px', ''));
-          state.fontSize = state.initialSize;
-        }
-        if (minBrowserFontSize < 0) {
-          minBrowserFontSize = detectMinimumFontSize();
-        }
-        // 达到浏览器最小字体限制，停止缩放
-        if (state.fontSize! <= minBrowserFontSize) {
-          state.loading = false;
-          onShrink?.({ fontSize: state.fontSize!, initialSize: state.initialSize! });
-        } else if (containerSize && mockSize) {
-          // 超过容器宽度，尝试收缩
-          if (containerSize.width < mockSize.width && state.fontSize! > minFontSize) {
-            state.fontSize!--;
-          } else {
-            state.loading = false;
-            onShrink?.({ fontSize: state.fontSize!, initialSize: state.initialSize! });
-          }
-        }
-      } else {
-        state.loading = false;
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fontSize, mockSize?.width, containerSize?.width]);
-
-  const loading = useCreation(() => {
-    if (fontSize === 'auto') {
-      return state.loading;
-    }
-    return false;
-  }, [fontSize, state.loading]);
-
-  return loading ? (
-    <Box
-      ref={refContainer}
-      sx={{
-        flex: 1,
-      }}>
-      <MuiTypography {...rest} sx={sx} noWrap>
-        <Skeleton variant="text" sx={{ fontSize: '1rem' }} />
-      </MuiTypography>
-      <MuiTypography
-        ref={refMock}
-        {...rest}
-        sx={{
-          ...sx,
-          ...(state.fontSize ? { fontSize: `${state.fontSize}px !important` } : {}),
-          position: 'fixed',
-          top: -1000,
-          left: -1000,
-        }}
-        noWrap>
-        {children}
-      </MuiTypography>
-    </Box>
-  ) : (
-    <MuiTypography
-      {...rest}
-      sx={{
-        ...sx,
-        ...(state.fontSize ? { fontSize: `${state.fontSize}px !important` } : {}),
-      }}>
-      {children}
-    </MuiTypography>
-  );
-}

package/src/UserCard/Cards/avatar-only.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { UserCardProps, User } from '../types';
-import TooltipAvatar from '../Content/tooltip-avatar';
-
-interface AvatarOnlyCardProps extends Omit<UserCardProps, 'user'> {
-  user: User;
-  renderCardContent: () => React.ReactNode;
-  shouldShowHoverCard: boolean;
-}
-
-// AvatarOnly卡片组件，处理仅头像模式的渲染
-function AvatarOnlyCard(props: AvatarOnlyCardProps) {
-  const { user, infoType, avatarSize = 48, shouldShowHoverCard = false, renderCardContent, ...rest } = props;
-
-  // 其他类型使用自定义Tooltip或无Tooltip
-  return (
-    <TooltipAvatar
-      user={user}
-      avatarSize={avatarSize}
-      shouldShowHoverCard={shouldShowHoverCard}
-      renderCardContent={renderCardContent}
-      {...rest}
-    />
-  );
-}
-
-export default AvatarOnlyCard;

package/src/UserCard/Cards/basic-info.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import { Box } from '@mui/material';
-import { InfoType, UserCardProps, User } from '../types';
-import MinimalContent from '../Content/minimal';
-import BasicContent from '../Content/basic';
-
-interface BasicCardProps extends Omit<UserCardProps, 'user'> {
-  user: User;
-  shouldShowHoverCard: boolean;
-  renderCardContent?: () => React.ReactNode | null;
-}
-
-// 详细卡片模式下的Basic渲染组件
-function BasicCard({ ...props }: BasicCardProps) {
-  const {
-    user,
-    avatarSize = 40,
-    renderCustomContent,
-    infoType = InfoType.Minimal,
-    renderFields,
-    popupRenderFields,
-    ...rest
-  } = props;
-
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        width: '100%',
-        flex: 1,
-        height: '100%',
-      }}>
-      <MinimalContent user={user} avatarSize={avatarSize} {...rest} />
-      {infoType === InfoType.Basic && <BasicContent user={user} renderFields={renderFields} />}
-      <Box className="user-card__footer">
-        {renderCustomContent && <Box sx={{ mt: 1.5 }}>{renderCustomContent()}</Box>}
-      </Box>
-    </Box>
-  );
-}
-
-export default BasicCard;

package/src/UserCard/Cards/index.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { UserCardProps, User } from '../types';
-import BasicCard from './basic-info';
-
-interface DetailedCardProps extends Omit<UserCardProps, 'user'> {
-  user: User;
-  shouldShowHoverCard: boolean;
-  renderCardContent?: () => React.ReactNode | null;
-}
-
-// DetailedCard组件，根据infoType选择不同的卡片组件进行渲染
-function DetailedCard({ ...props }: DetailedCardProps) {
-  return <BasicCard {...props} />;
-}
-
-export default DetailedCard;

package/src/UserCard/Cards/social-actions.tsx

@@ -1,196 +0,0 @@
-import { useMemo } from 'react';
-import { Box, Button, styled } from '@mui/material';
-import { useMemoizedFn } from 'ahooks';
-import { joinURL } from 'ufo';
-import noop from 'lodash/noop';
-import { Icon } from '@iconify/react';
-
-import useFollow from '../use-follow';
-import { User, UserCardProps } from '../types';
-import { useLocaleContext } from '../../Locale/context';
-import { translate } from '../../Locale/util';
-import { isSupportFollow } from '../../Util';
-
-type SocialActionsProps = Pick<UserCardProps, 'showSocialActions' | 'session' | 'onFollowClick'> & {
-  user: User; // 当前卡片显示的用户，要与 session.user 区分开
-};
-
-const translations = {
-  zh: {
-    chat: '聊天',
-    follow: '关注',
-    unfollow: '取消关注',
-    follow_success: '关注成功',
-    unfollow_success: '取消关注成功',
-  },
-  en: {
-    chat: 'Chat',
-    follow: 'Follow',
-    unfollow: 'Unfollow',
-    follow_success: 'Follow success',
-    unfollow_success: 'Unfollow success',
-  },
-};
-
-const getDiscussKitMountPoint = () => {
-  const { componentMountPoints = [] } = window.blocklet || {};
-  const component = componentMountPoints.find((c: any) => c.name === 'did-comments');
-  return component?.mountPoint;
-};
-
-// chat: 1. showSocialActions.chat 为 true，2. 必须安装了 discuss kit
-function Chat({
-  user,
-  showSocialActions,
-  session,
-}: {
-  user: SocialActionsProps['user'];
-  showSocialActions: SocialActionsProps['showSocialActions'];
-  session: SocialActionsProps['session'];
-}) {
-  const { locale } = useLocaleContext() || { locale: 'en' };
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-
-  const isLogin = useMemo(() => {
-    return !!session?.user?.did;
-  }, [session?.user?.did]);
-
-  // 获取 discuss kit 的挂载点
-  const discussKitMountPoint = useMemo(() => getDiscussKitMountPoint(), []);
-
-  const onNavigateToChat = useMemoizedFn(() => {
-    if (!isLogin) {
-      session?.login(noop, {
-        openMode: 'redirect',
-        redirect: window.location.href,
-      });
-      return;
-    }
-    window.open(joinURL(discussKitMountPoint, `/chat/dm/${user?.did}`), '_blank');
-  });
-
-  const showChat = useMemo(() => {
-    // boolean：直接使用原值；对象：取对应属性值
-    const chatEnabled = typeof showSocialActions === 'boolean' ? !!showSocialActions : showSocialActions?.chat;
-
-    return chatEnabled && !!discussKitMountPoint;
-  }, [showSocialActions, discussKitMountPoint]);
-
-  if (!showChat) {
-    return null;
-  }
-  return (
-    <ButtonWrapper
-      className="user-card__social-actions-chat"
-      variant="outlined"
-      color="primary"
-      size="small"
-      onClick={onNavigateToChat}>
-      <Icon icon="tabler:message-dots" style={{ marginRight: 4 }} />
-      {t('chat')}
-    </ButtonWrapper>
-  );
-}
-
-// follow: 1. showSocialActions.follow 为 true
-function Follow({
-  user,
-  showSocialActions,
-  session,
-  onFollowClick,
-}: {
-  user: SocialActionsProps['user'];
-  showSocialActions: SocialActionsProps['showSocialActions'];
-  session: SocialActionsProps['session'];
-  onFollowClick: SocialActionsProps['onFollowClick'];
-}) {
-  const { locale } = useLocaleContext() || { locale: 'en' };
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-
-  const isLogin = useMemo(() => {
-    return !!session?.user?.did;
-  }, [session?.user?.did]);
-
-  const showFollow = useMemo(() => {
-    // boolean：直接使用原值；对象：取对应属性值
-    return typeof showSocialActions === 'boolean' ? !!showSocialActions : showSocialActions?.follow;
-  }, [showSocialActions]);
-
-  const { followed, followUser, unfollowUser } = useFollow({
-    user,
-    t,
-    isMySelf: false,
-    visible: !!showFollow,
-  });
-  const handleFollowAction = useMemoizedFn(async (e) => {
-    if (!isLogin) {
-      session?.login(noop, {
-        openMode: 'redirect',
-        redirect: window.location.href,
-      });
-      return;
-    }
-    if (followed) {
-      await unfollowUser(user.did);
-    } else {
-      await followUser(user.did);
-    }
-    if (onFollowClick && typeof onFollowClick === 'function') {
-      onFollowClick(user, e);
-    }
-  });
-
-  if (!showFollow) {
-    return null;
-  }
-
-  return (
-    <ButtonWrapper
-      className="user-card__social-actions-follow"
-      variant="outlined"
-      color="primary"
-      size="small"
-      onClick={handleFollowAction}>
-      {followed ? t('unfollow') : t('follow')}
-    </ButtonWrapper>
-  );
-}
-
-// 社交操作组件
-// 按钮的显示逻辑
-// 通用逻辑： 1. user 和 session.user 不能是同一个用户, 2. 相关依赖支持，3. showSocialActions 为 true 或 为 object
-// 其他逻辑： 1. 如果 session 中没有用户信息，点击后需要重定向到登录页面
-function SocialActions({ showSocialActions, session, user, onFollowClick = undefined }: SocialActionsProps) {
-  const isSameUser = useMemo(() => {
-    return session?.user?.did === user?.did;
-  }, [session?.user?.did, user?.did]);
-
-  const isSupportSocialActions = useMemo(() => {
-    return isSupportFollow();
-  }, []);
-
-  // 如果 session 中没有用户信息，或者 user 和 session.user 是同一个用户，则不显示社交操作
-  if (isSameUser || !isSupportSocialActions || !showSocialActions) {
-    return null;
-  }
-
-  return (
-    <Box className="user-card__social-actions" sx={{ display: 'flex', gap: 1 }}>
-      <Chat session={session} user={user} showSocialActions={showSocialActions} />
-      <Follow onFollowClick={onFollowClick} session={session} user={user} showSocialActions={showSocialActions} />
-    </Box>
-  );
-}
-
-export default SocialActions;
-
-export const ButtonWrapper = styled(Button)`
-  color: ${({ theme }) => theme.palette.text.primary};
-  font-weight: 500;
-  border-color: ${({ theme }) => theme.palette.grey[300]};
-  line-height: 1.5;
-`;

package/src/UserCard/Container/card.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import { Box, Paper, SxProps } from '@mui/material';
-import { UserCardProps, CardType } from '../types';
-import { mergeSx } from '../../Util/style';
-
-interface CardContainerProps {
-  children: React.ReactNode;
-  cardType?: UserCardProps['cardType'];
-  variant?: 'paper' | 'box';
-  containerRef?: React.Ref<unknown>;
-  sx?: UserCardProps['sx'];
-}
-
-/**
- * 统一的卡片容器组件，处理常见的布局容器样式
- */
-function CardContainer({
-  children,
-  cardType = CardType.Detailed,
-  variant = 'box',
-  containerRef = undefined,
-  sx = {},
-}: CardContainerProps) {
-  const commonStyles = {
-    minWidth: 320,
-    p: 2,
-    borderRadius: 1,
-    ...(cardType === CardType.Detailed
-      ? {
-          border: '1px solid',
-          borderColor: 'divider',
-        }
-      : {}),
-  };
-
-  // Paper变体，用于Basic和Full类型卡片
-  if (variant === 'paper') {
-    return (
-      <Paper ref={containerRef as React.Ref<HTMLDivElement>} elevation={0} sx={commonStyles}>
-        {children}
-      </Paper>
-    );
-  }
-
-  // Box变体，用于Minimal和NameOnly类型卡片
-  return (
-    <Box
-      ref={containerRef}
-      sx={mergeSx(
-        commonStyles,
-        {
-          display: 'flex',
-          alignItems: cardType === CardType.AvatarOnly ? 'center' : 'flex-start',
-          gap: 2,
-        },
-        sx ? (sx as SxProps) : null
-      )}>
-      {children}
-    </Box>
-  );
-}
-
-export default CardContainer;

package/src/UserCard/Container/dialog.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { Box, SxProps, useTheme } from '@mui/material';
-import { UserCardProps } from '../types';
-import { mergeSx } from '../../Util/style';
-
-interface DialogContainerProps {
-  children: React.ReactNode;
-  sx?: UserCardProps['sx'];
-}
-
-/**
- * 统一的卡片容器组件，处理常见的布局容器样式
- */
-function DialogContainer({ children, sx = {} }: DialogContainerProps) {
-  // Box变体，用于Minimal和NameOnly类型卡片
-  const theme = useTheme();
-  return (
-    <Box
-      sx={mergeSx(
-        {
-          p: 2,
-          backgroundColor: theme.palette.background.paper,
-          border: '1px solid',
-          borderColor: 'divider',
-          borderRadius: 1,
-          maxWidth: 500,
-          minWidth: 320,
-          display: 'flex',
-        },
-        sx ? (sx as SxProps) : null
-      )}>
-      {children}
-    </Box>
-  );
-}
-
-export default DialogContainer;