@arcblock/ux 3.4.14 → 3.5.0

package/src/UserCard/Content/basic.tsx

@@ -1,330 +0,0 @@
-import { Typography, Box, Grid, useTheme } from '@mui/material';
-import { useCreation, useMemoizedFn } from 'ahooks';
-import styled from '@emotion/styled';
-import isArray from 'lodash/isArray';
-import { Icon as IconifyIcon } from '@iconify/react';
-import infoCircleIcon from '@iconify-icons/tabler/info-circle';
-import LinkIcon from '@arcblock/icons/lib/Link';
-import PhoneIcon from '@arcblock/icons/lib/Phone';
-import LocationIcon from '@arcblock/icons/lib/Location';
-import EmailIcon from '@arcblock/icons/lib/Email';
-import TimezoneIcon from '@arcblock/icons/lib/Timezone';
-import { withoutProtocol } from 'ufo';
-import { useMemo, useCallback } from 'react';
-
-import { User } from '../types';
-import Clock from './clock';
-
-const IconMap = {
-  timezone: TimezoneIcon,
-  email: EmailIcon,
-  phone: PhoneIcon,
-  location: LocationIcon,
-  link: LinkIcon,
-};
-
-/**
- * 格式化链接显示
- * 对于 http/https 协议只显示域名，其他协议显示完整链接
- */
-function formatLinkDisplay(link: string): string {
-  return withoutProtocol(link);
-}
-
-/**
- * dark mode 下，转换 icon 颜色
- */
-function convertIconColor(isDark: boolean) {
-  return isDark
-    ? {
-        filter: 'brightness(0) saturate(100%) invert(1)',
-      }
-    : {};
-}
-const iconSize = {
-  width: 16,
-  height: 16,
-};
-interface BasicContentProps {
-  user: User;
-  renderFields?: string[];
-}
-
-// 定义渲染项的类型
-interface RenderItem {
-  field: string;
-  value: string | any;
-  key: string;
-}
-
-function TimeZoneField({ value }: { value: string }) {
-  const theme = useTheme();
-  const isDark = theme.palette.mode === 'dark';
-  return (
-    <Box
-      className="user-card__timezone-field"
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 1,
-      }}>
-      <TimezoneIcon {...iconSize} style={convertIconColor(isDark)} />
-      <Clock value={value} variant="body2" color="grey.800" />
-    </Box>
-  );
-}
-
-function LinkField({ value }: { value: string }) {
-  const theme = useTheme();
-  const isDark = theme.palette.mode === 'dark';
-
-  return (
-    <Box display="flex" alignItems="center" gap={1} className="user-card__link-field">
-      <LinkIcon {...iconSize} style={convertIconColor(isDark)} />
-      <LineText variant="body2" color="grey.800">
-        <Typography
-          component="a"
-          href={value}
-          style={{ textDecoration: 'none', color: 'inherit', fontSize: 'inherit' }}
-          target="_blank"
-          variant="body2"
-          rel="noopener noreferrer"
-          sx={{
-            color: 'grey.800',
-          }}>
-          {formatLinkDisplay(value)}
-        </Typography>
-      </LineText>
-    </Box>
-  );
-}
-
-function BasicField({ field, value, children = null }: { field: string; value: string; children?: React.ReactNode }) {
-  const Icon = IconMap[field as keyof typeof IconMap];
-  const theme = useTheme();
-  const isDark = theme.palette.mode === 'dark';
-  const iconColor = convertIconColor(isDark);
-  return (
-    <Box
-      key={field}
-      className={`user-card__${field}-field`}
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 1,
-      }}>
-      {Icon ? (
-        <Icon {...iconSize} style={iconColor} />
-      ) : (
-        <IconifyIcon icon={infoCircleIcon} {...iconSize} {...iconColor} />
-      )}
-      <LineText variant="body2" color="grey.800">
-        {children ?? value}
-      </LineText>
-    </Box>
-  );
-}
-
-function BasicContent({ user, renderFields = undefined }: BasicContentProps) {
-  const fields = useCreation(() => {
-    return renderFields ?? ['bio', 'email', 'phone', 'location', 'timezone', 'link'];
-  }, [renderFields]);
-
-  const includeBio = useCreation(() => {
-    return fields.includes('bio');
-  }, [fields]);
-
-  const metadata = useCreation(() => {
-    return (
-      user.metadata ?? {
-        joinedAt: user?.createdAt,
-        email: user?.email,
-        phone: {
-          country: 'cn',
-          phoneNumber: user?.phone ?? '',
-        },
-      }
-    );
-  }, [user]);
-
-  const address = useCreation(() => {
-    return user.address;
-  }, [user.address]);
-
-  const getFieldValue = useCallback(
-    (field: string) => {
-      if (!field) return '';
-      switch (field) {
-        case 'bio':
-          return user.metadata?.bio || '';
-        case 'email':
-          return metadata.email || user.email || '';
-        case 'phone':
-          return metadata.phone?.phoneNumber || user.phone || '';
-        case 'location':
-          return address?.city || metadata.location || '';
-        case 'timezone':
-          return metadata.timezone || '';
-        case 'link':
-          return metadata.links?.map((link) => link.url).filter(Boolean) || [];
-        default:
-          return user[field as keyof User] || '';
-      }
-    },
-    [user, metadata, address]
-  );
-
-  // 计算实际可见的字段数量和渲染元素数量
-  const { effectiveRenderCount } = useMemo(() => {
-    const visible = fields.filter((field) => {
-      if (field === 'bio') return false; // bio field is handled separately
-      const value = getFieldValue(field);
-
-      if (value === undefined || value === null || value === '') return false;
-
-      if (isArray(value)) {
-        return value.length > 0;
-      }
-
-      return String(value).trim().length > 0;
-    });
-
-    // 计算实际渲染数量
-    const renderCount = visible.reduce((count, field) => {
-      const value = getFieldValue(field);
-      return count + (Array.isArray(value) ? value.filter((item) => item && String(item).trim()).length : 1);
-    }, 0);
-
-    return { visibleFields: visible, effectiveRenderCount: renderCount };
-  }, [fields, getFieldValue]);
-
-  // 判断是否需要使用两列布局
-  const useDoubleColumn = effectiveRenderCount > 4;
-
-  const isValidValue = useMemoizedFn(
-    (value: any) => value !== undefined && value !== null && String(value).trim().length > 0
-  );
-
-  // 准备要渲染的所有元素项
-  const renderItems = useMemo(() => {
-    const items: RenderItem[] = [];
-
-    // 遍历有效字段，展开数组字段为单独的渲染项
-    fields.forEach((field) => {
-      if (field === 'bio') return; // bio field is handled separately
-      const value = getFieldValue(field);
-
-      if (!value) return;
-
-      if (isArray(value)) {
-        // 数组类型字段，每个有效项生成一个渲染元素
-        value.forEach((item, index) => {
-          if (isValidValue(item)) {
-            items.push({
-              field,
-              value: item,
-              key: `${field}-${index}`,
-            });
-          }
-        });
-      } else if (isValidValue(value)) {
-        // 非数组类型字段，生成一个渲染元素
-        items.push({
-          field,
-          value,
-          key: field,
-        });
-      }
-    });
-
-    return items;
-  }, [fields, getFieldValue, isValidValue]);
-
-  if (fields.length === 0) {
-    return null;
-  }
-
-  const renderItem = (item: RenderItem) => {
-    const { field, value, key } = item;
-
-    switch (field) {
-      case 'link':
-        return <LinkField key={key} value={value as string} />;
-      case 'timezone':
-        return <TimeZoneField key={key} value={value as string} />;
-      case 'email':
-        return (
-          <BasicField
-            field={field}
-            value={value as string}
-            // eslint-disable-next-line react/no-children-prop
-            children={
-              <Typography
-                component="a"
-                href={`mailto:${value}`}
-                rel="noopener noreferrer"
-                referrerPolicy="no-referrer"
-                style={{
-                  color: 'inherit',
-                  textDecoration: 'none',
-                  fontSize: 'inherit',
-                }}>
-                {value}
-              </Typography>
-            }
-          />
-        );
-      default:
-        return <BasicField key={key} field={field} value={value as string} />;
-    }
-  };
-
-  return (
-    <Box
-      className="user-card__basic-content"
-      sx={{
-        mt: 1,
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 1.5,
-      }}>
-      {includeBio && user.metadata?.bio && (
-        <LineText variant="body2" color="grey.800" className="user-card__bio-field">
-          {user.metadata.bio}
-        </LineText>
-      )}
-      {/* 其他字段 */}
-      {useDoubleColumn ? (
-        <Grid container spacing={0.5}>
-          {renderItems.map((item) => (
-            <Grid key={item.key} size={6}>
-              {renderItem(item)}
-            </Grid>
-          ))}
-        </Grid>
-      ) : (
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 0.5,
-          }}>
-          {renderItems.map((item) => renderItem(item))}
-        </Box>
-      )}
-    </Box>
-  );
-}
-
-export default BasicContent;
-
-const LineText = styled(Typography)`
-  flex: 1;
-  display: -webkit-box;
-  line-height: 1.5;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-break: break-word;
-`;

package/src/UserCard/Content/clock.tsx

@@ -1,82 +0,0 @@
-import { Tooltip, Typography, Box, type SxProps } from '@mui/material';
-import { useMemoizedFn } from 'ahooks';
-import useClock from '../../hooks/use-clock';
-import { translate } from '../../Locale/util';
-import { useLocaleContext } from '../../Locale/context';
-
-const translations = {
-  en: {
-    localTime: 'Local Time',
-    timezonePhase: {
-      dawn: 'AM',
-      morning: 'AM',
-      afternoon: 'PM',
-      night: 'PM',
-    },
-  },
-  zh: {
-    localTime: '本地时间',
-    timezonePhase: {
-      dawn: '凌晨',
-      morning: '上午',
-      afternoon: '下午',
-      night: '晚上',
-    },
-  },
-};
-export default function Clock({ value, ...props }: { value: string; sx?: SxProps; [key: string]: any }) {
-  const { locale } = useLocaleContext() || { locale: 'en' };
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  const timeInfo = useClock(value, locale);
-
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 1,
-        flex: 1,
-        justifyContent: 'flex-start',
-        overflow: 'hidden',
-        width: '100%',
-      }}>
-      <Typography
-        {...props}
-        noWrap
-        component="span"
-        sx={{
-          flex: '0 1 auto',
-          minWidth: 0,
-          ...props.sx,
-        }}>
-        {value}
-      </Typography>
-      <Tooltip
-        enterDelay={200}
-        title={
-          <span>
-            {t('localTime')} {timeInfo.fullDateTime}
-          </span>
-        }
-        placement="top"
-        arrow>
-        <Typography
-          component="span"
-          noWrap
-          sx={{
-            fontSize: 14,
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            flex: '0 0 auto',
-            maxWidth: '100%',
-          }}>
-          ({locale === 'zh' ? `${t(`timezonePhase.${timeInfo.phase}`)} ` : ''}
-          {timeInfo.formattedTime})
-        </Typography>
-      </Tooltip>
-    </Box>
-  );
-}

package/src/UserCard/Content/minimal.tsx

@@ -1,113 +0,0 @@
-import React, { memo } from 'react';
-import { Typography, Box, useMediaQuery, Divider } from '@mui/material';
-import { DID } from '../../DID';
-import { User, UserCardProps } from '../types';
-import TooltipAvatar from './tooltip-avatar';
-import { renderTopRight } from '../components';
-import ShortenLabel from './shorten-label';
-import SocialActions from '../Cards/social-actions';
-
-interface MinimalContentProps extends UserCardProps {
-  user: User;
-  avatarSize: number;
-  shouldShowHoverCard: boolean;
-  renderCardContent?: () => React.ReactNode | null;
-  avatarProps?: UserCardProps['avatarProps'];
-  shortenLabelProps?: UserCardProps['shortenLabelProps'];
-}
-
-function MinimalContent({ ...props }: MinimalContentProps) {
-  const {
-    user,
-    showDid,
-    didProps,
-    avatarSize,
-    shouldShowHoverCard,
-    renderCardContent,
-    renderTopRightContent,
-    topRightMaxWidth,
-    avatarProps,
-    shortenLabelProps,
-    renderName,
-    ...rest
-  } = props;
-  const isSmallScreen = useMediaQuery('(max-width:500px)');
-  return (
-    <Box
-      className="user-card__avatar-content"
-      sx={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-      }}>
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          flexDirection: isSmallScreen ? 'column' : 'row',
-          alignItems: isSmallScreen ? 'flex-start' : 'center',
-          gap: isSmallScreen ? 2 : 1,
-          flex: 1,
-          minWidth: 0,
-          flexWrap: 'wrap',
-        }}>
-        <Box
-          sx={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center', gap: 1, flex: 1, width: '100%' }}>
-          <TooltipAvatar
-            user={user}
-            avatarSize={avatarSize}
-            shouldShowHoverCard={shouldShowHoverCard}
-            renderCardContent={renderCardContent}
-            avatarProps={avatarProps}
-            {...rest}
-          />
-          <Box sx={{ width: '100%' }}>
-            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1, width: '100%' }}>
-              <Typography
-                variant="subtitle1"
-                className="user-card__full-name-label"
-                noWrap
-                sx={{
-                  fontWeight: 500,
-                  color: 'text.primary',
-                  fontSize: 18,
-                  lineHeight: 1.1,
-                }}>
-                {renderName ? (
-                  renderName(user)
-                ) : (
-                  <ShortenLabel sx={{ fontWeight: 500 }} {...shortenLabelProps}>
-                    {user.fullName || user.email || user.did}
-                  </ShortenLabel>
-                )}
-              </Typography>
-              {renderTopRight(renderTopRightContent, topRightMaxWidth)}
-            </Box>
-
-            {showDid && user.did ? (
-              <DID
-                did={user.did}
-                size={14}
-                copyable
-                compact
-                locale="en"
-                sx={{ lineHeight: 1.5 }}
-                {...(didProps ?? {})}
-              />
-            ) : null}
-          </Box>
-        </Box>
-        {isSmallScreen && !renderTopRightContent && rest.showSocialActions ? <Divider sx={{ width: '100%' }} /> : null}
-        {!renderTopRightContent ? (
-          <SocialActions
-            onFollowClick={rest.onFollowClick}
-            showSocialActions={rest.showSocialActions}
-            user={user!}
-            session={rest.session}
-          />
-        ) : null}
-      </Box>
-    </Box>
-  );
-}
-export default memo(MinimalContent);

package/src/UserCard/Content/shorten-label.tsx

@@ -1,32 +0,0 @@
-import { Tooltip, Typography, TypographyProps } from '@mui/material';
-import { useMemo } from 'react';
-
-function shortenString(str: string | undefined, maxLength: number = 10): string {
-  if (!str) return '';
-  if (str.length <= maxLength) return str;
-  return `${str.slice(0, maxLength - 1)}...${str.slice(-2)}`;
-}
-
-export interface ShortenLabelProps {
-  children: string;
-  maxLength?: number;
-  sx?: TypographyProps['sx'];
-  hiddenTip?: boolean;
-}
-
-function ShortenLabel({ children, maxLength = 10, sx = undefined, hiddenTip = false }: ShortenLabelProps) {
-  const shortenedText = useMemo(() => shortenString(children, maxLength), [children, maxLength]);
-  if (children?.length <= maxLength) {
-    return <Typography sx={sx}>{children}</Typography>;
-  }
-  if (hiddenTip) {
-    return <Typography sx={sx}>{shortenedText}</Typography>;
-  }
-  return (
-    <Tooltip title={children} placement="top">
-      <Typography sx={sx}>{shortenedText}</Typography>
-    </Tooltip>
-  );
-}
-
-export default ShortenLabel;

package/src/UserCard/Content/tooltip-avatar.tsx

@@ -1,80 +0,0 @@
-import React from 'react';
-import { Zoom, Tooltip } from '@mui/material';
-
-import { User, UserCardProps } from '../types';
-import { renderAvatar } from '../components';
-
-interface TooltipAvatarProps extends UserCardProps {
-  user: User;
-  avatarSize: number;
-  shouldShowHoverCard: boolean;
-  renderCardContent?: () => React.ReactNode | null;
-  tooltipTitle?: string;
-  tooltipProps?: UserCardProps['tooltipProps'];
-  avatarProps?: UserCardProps['avatarProps'];
-}
-
-/**
- * 统一处理头像的Tooltip显示组件
- * 根据条件显示普通Tooltip、自定义Tooltip内容或无Tooltip的头像
- */
-function TooltipAvatar({
-  user,
-  avatarSize,
-  shouldShowHoverCard,
-  renderCardContent = undefined,
-  tooltipTitle = undefined,
-  tooltipProps = undefined,
-  avatarProps = undefined,
-  onAvatarClick,
-}: TooltipAvatarProps) {
-  const avatarElement = renderAvatar(
-    user,
-    avatarSize,
-    avatarProps,
-    onAvatarClick,
-    shouldShowHoverCard || !!tooltipTitle
-  );
-  // 使用普通文本Tooltip
-  if (tooltipTitle) {
-    return (
-      <Tooltip enterDelay={200} title={tooltipTitle} placement="bottom" {...(tooltipProps ?? {})}>
-        {avatarElement}
-      </Tooltip>
-    );
-  }
-
-  // 使用自定义内容Tooltip
-  if (shouldShowHoverCard) {
-    return (
-      <Tooltip
-        enterDelay={200}
-        title={renderCardContent ? renderCardContent() : null}
-        placement="bottom"
-        arrow={false}
-        {...(tooltipProps ?? {})}
-        slotProps={{
-          popper: {
-            sx: {
-              '& .MuiTooltip-tooltip': {
-                backgroundColor: 'transparent',
-                p: 0,
-                maxWidth: 500,
-                zIndex: 1000,
-              },
-            },
-          },
-        }}
-        slots={{
-          transition: Zoom,
-        }}>
-        {avatarElement}
-      </Tooltip>
-    );
-  }
-
-  // 无Tooltip
-  return avatarElement;
-}
-
-export default TooltipAvatar;

package/src/UserCard/UserCard.stories.jsx

@@ -1,19 +0,0 @@
-export { default as Basic } from './demo/basic';
-export { default as AvatarWithHover } from './demo/avatarWithHover';
-export { default as DetailedCard } from './demo/detailedCard';
-export { default as DidControl } from './demo/didControl';
-export { default as TopRightContent } from './demo/topRightContent';
-export { default as CustomFooter } from './demo/customFooter';
-export { default as DidOnlyAvatar } from './demo/did-only-avatar';
-export { default as SocialActions } from './demo/socialActions';
-
-export default {
-  title: 'Data Display/UserCard',
-  parameters: {
-    docs: {
-      description: {
-        component: 'Used to display user information.',
-      },
-    },
-  },
-};