@blocklet/ui-react 3.4.15 → 3.5.0

package/src/UserCenter/components/user-info/user-status.tsx

@@ -1,234 +0,0 @@
-import { Box, Badge, Tooltip, type SvgIconProps } from '@mui/material';
-import styled from '@emotion/styled';
-import { lazy, Suspense, useCallback, useEffect, useMemo, useState } from 'react';
-import { useCreation, useMemoizedFn, useInterval, useUnmount } from 'ahooks';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { translate } from '@arcblock/ux/lib/Locale/util';
-import { formatToDatetime } from '@arcblock/ux/lib/Util';
-import type { UserMetadata } from '../../../@types';
-import { DurationEnum, StatusEnum } from '../../../@types';
-import StatusDialog from '../status-dialog';
-import { translations } from '../../libs/locales';
-import { getTimeRemaining, isNotClear, isWithinTimeRange } from './utils';
-import { StatusItem } from '../status-selector/menu-item';
-
-const MeetingIcon = lazy(() => import('@arcblock/icons/lib/Meeting'));
-const CommunityIcon = lazy(() => import('@arcblock/icons/lib/Community'));
-const HolidayIcon = lazy(() => import('@arcblock/icons/lib/Holiday'));
-const OffSickIcon = lazy(() => import('@arcblock/icons/lib/OffSick'));
-const WorkingRemotelyIcon = lazy(() => import('@arcblock/icons/lib/WorkingRemotely'));
-
-const StatusIconMap: Record<StatusEnum, React.FC<SvgIconProps> | undefined> = {
-  [StatusEnum.Meeting]: MeetingIcon,
-  [StatusEnum.Community]: CommunityIcon,
-  [StatusEnum.Holiday]: HolidayIcon,
-  [StatusEnum.OffSick]: OffSickIcon,
-  [StatusEnum.WorkingRemotely]: WorkingRemotelyIcon,
-};
-
-const QuickSettings = {
-  [StatusEnum.Meeting]: {
-    duration: DurationEnum.OneHour,
-    durationName: 'userStatus.duration.OneHour',
-  },
-  [StatusEnum.Community]: {
-    duration: DurationEnum.ThirtyMinutes,
-    durationName: 'userStatus.duration.ThirtyMinutes',
-  },
-  [StatusEnum.Holiday]: {
-    duration: DurationEnum.ThisWeek,
-    durationName: 'userStatus.duration.ThisWeek',
-  },
-  [StatusEnum.OffSick]: {
-    duration: DurationEnum.Today,
-    durationName: 'userStatus.duration.Today',
-  },
-  [StatusEnum.WorkingRemotely]: {
-    duration: DurationEnum.ThisWeek,
-    durationName: 'userStatus.duration.ThisWeek',
-  },
-};
-
-export default function UserStatus({
-  isMobile = undefined,
-  size,
-  isMyself,
-  status,
-  onChange,
-  timezone = undefined,
-}: {
-  isMobile?: boolean;
-  size: number;
-  isMyself: boolean;
-  status: UserMetadata['status'];
-  onChange: (v: UserMetadata['status']) => void;
-  timezone?: string;
-}) {
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-
-  const [interval, setInterval] = useState<number | undefined>(undefined);
-
-  const pauseInterval = useMemoizedFn(() => {
-    setInterval(undefined);
-  });
-
-  useEffect(() => {
-    setInterval(1000);
-  }, [status]);
-
-  const clear = useInterval(() => {
-    if (status?.value && status?.dateRange?.length === 2) {
-      const notClear = isNotClear(status);
-      if (notClear) {
-        return;
-      }
-      const isWithin = isWithinTimeRange(status.dateRange as [Date, Date]);
-      if (!isWithin) {
-        pauseInterval();
-        onChange(undefined);
-      } else {
-        // 根据距离结束时间长度，设置 interval
-        const timeRemaining = getTimeRemaining(status.dateRange[1]);
-        if (timeRemaining > 0) {
-          setInterval(timeRemaining);
-        } else {
-          pauseInterval();
-          onChange(undefined);
-        }
-      }
-    } else {
-      pauseInterval();
-    }
-  }, interval);
-
-  useUnmount(() => {
-    clear();
-  });
-
-  const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null);
-
-  const getDurationData = useCallback(() => {
-    const data = Object.keys(DurationEnum).map((key) => ({
-      id: DurationEnum[key as keyof typeof DurationEnum],
-      name: t(`userStatus.duration.${key}`),
-    }));
-    return data;
-  }, [t]);
-
-  const statusData = useCreation(() => {
-    const durationData = getDurationData();
-    return Object.keys(StatusEnum).map((key) => {
-      const quickSetting = QuickSettings[StatusEnum[key as keyof typeof StatusEnum]];
-
-      return {
-        id: StatusEnum[key as keyof typeof StatusEnum],
-        name: t(`userStatus.${key}`),
-        icon: StatusIconMap[StatusEnum[key as keyof typeof StatusEnum]],
-        ...(quickSetting ? { duration: quickSetting.duration, durationName: t(quickSetting.durationName) } : {}),
-        children: durationData,
-      };
-    });
-  }, [t, getDurationData, locale]);
-
-  const onOpenStatusSelector = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (!isMyself) {
-      return;
-    }
-    setAnchorEl(event.currentTarget);
-  };
-
-  const onCloseStatusSelector = () => {
-    setAnchorEl(null);
-  };
-
-  const onStatusChange = (v?: UserMetadata['status']) => {
-    if (!isMyself) {
-      return;
-    }
-    onChange(v);
-    onCloseStatusSelector();
-  };
-
-  const StatusIcon = StatusIconMap[status?.value as keyof typeof StatusIconMap];
-
-  const tooltipTitle = useMemo(() => {
-    const currentStatus = statusData.find((item) => item.id === status?.value);
-    if (currentStatus) {
-      const localeOption = locale === 'zh' ? 'zh-cn' : 'en-us';
-      let range;
-      const notClear = isNotClear(status);
-      if (!notClear) {
-        range = status?.dateRange?.map((item) => {
-          return formatToDatetime(item, { locale: localeOption });
-        });
-      }
-      if (range && range.length > 0) {
-        return `${currentStatus.name}: ${range.join('~')}`;
-      }
-      return currentStatus.name;
-    }
-    return null;
-  }, [status, statusData, locale]);
-
-  const open = Boolean(anchorEl);
-
-  return (
-    <StatusDiv size={size} isMobile={isMobile}>
-      <Tooltip title={tooltipTitle}>
-        <Box
-          className="status-icon"
-          onClick={onOpenStatusSelector}
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}>
-          {StatusIcon ? (
-            <Suspense fallback={null}>
-              <StatusIcon style={{ width: 16, height: 16 }} />
-            </Suspense>
-          ) : (
-            <Badge color="success" variant="dot" />
-          )}
-        </Box>
-      </Tooltip>
-      {open && (
-        <StatusDialog
-          selected={status}
-          data={statusData as StatusItem[]}
-          open={open}
-          onSelect={onStatusChange}
-          onClose={onCloseStatusSelector}
-          timezone={timezone}
-        />
-      )}
-    </StatusDiv>
-  );
-}
-
-const StatusDiv = styled('div')<{ size: number; isMobile?: boolean }>`
-  position: absolute;
-  left: ${({ size }) => `${(size * 3) / 4}px`};
-  top: ${({ size }) => `${size * 0.65}px`};
-  width: ${({ isMobile }) => (isMobile ? '22px' : '32px')};
-  height: ${({ isMobile }) => (isMobile ? '22px' : '32px')};
-  border-radius: ${({ isMobile }) => (isMobile ? '11px' : '16px')};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #ffffff;
-  overflow: hidden;
-  white-space: nowrap;
-  cursor: pointer;
-
-  .status-icon {
-    flex-shrink: 0;
-    width: ${({ isMobile }) => (isMobile ? '16px' : '26px')};
-    height: ${({ isMobile }) => (isMobile ? '16px' : '26px')};
-    border-radius: ${({ isMobile }) => (isMobile ? '8px' : '13px')};
-    background-color: #eff1f5;
-  }
-`;

package/src/UserCenter/components/user-info/utils.ts

@@ -1,320 +0,0 @@
-import isUrl from 'is-url';
-import { withHttps } from 'ufo';
-import dayjs from 'dayjs';
-import timezone from 'dayjs/plugin/timezone';
-import utc from 'dayjs/plugin/utc';
-import { DurationEnum, UserMetadata } from '../../../@types';
-
-// 扩展 dayjs 插件
-dayjs.extend(utc);
-dayjs.extend(timezone);
-
-const HOUR = 3600;
-const MINUTES_30 = 1800;
-const MINUTES_10 = 600;
-const MINUTES_5 = 300;
-const MINUTES_1 = 60;
-const SECOND = 1;
-
-export const currentTimezone = dayjs.tz.guess();
-
-// 常用时区列表，作为兼容性 fallback
-const COMMON_TIMEZONES = [
-  'America/New_York',
-  'America/Chicago',
-  'America/Denver',
-  'America/Los_Angeles',
-  'Europe/London',
-  'Europe/Paris',
-  'Europe/Berlin',
-  'Europe/Rome',
-  'Asia/Tokyo',
-  'Asia/Shanghai',
-  'Asia/Hong_Kong',
-  'Asia/Singapore',
-  'Asia/Seoul',
-  'Asia/Kolkata',
-  'Australia/Sydney',
-  'Australia/Melbourne',
-  'Pacific/Auckland',
-  'America/Sao_Paulo',
-  'America/Mexico_City',
-  'Africa/Cairo',
-  'UTC',
-];
-
-// 获取时区列表的兼容性函数
-const getTimezoneList = () => {
-  // 优先使用现代 API
-  if (typeof Intl !== 'undefined' && Intl.supportedValuesOf) {
-    try {
-      return Intl.supportedValuesOf('timeZone');
-    } catch (error) {
-      console.warn('Intl.supportedValuesOf not supported, falling back to common timezones');
-    }
-  }
-
-  // 尝试使用 Intl.DateTimeFormat 获取时区
-  if (typeof Intl !== 'undefined' && Intl.DateTimeFormat) {
-    try {
-      // 使用 resolvedOptions 检测当前时区是否可用
-      const formatter = new Intl.DateTimeFormat('en', { timeZone: 'UTC' });
-      if (formatter.resolvedOptions().timeZone) {
-        return COMMON_TIMEZONES;
-      }
-    } catch (error) {
-      console.warn('Intl.DateTimeFormat timezone support limited');
-    }
-  }
-
-  // 最后的 fallback
-  return COMMON_TIMEZONES;
-};
-
-export const getTimezones = () => {
-  const timezones = getTimezoneList();
-
-  const formattedTimezones = timezones
-    .map((tz) => {
-      try {
-        const offset = dayjs.tz(dayjs(), tz).utcOffset() / 60; // 计算 UTC 偏移 (小时)
-        const hours = Math.floor(offset);
-        const minutes = (offset % 1) * 60;
-        const label = `GMT${hours >= 0 ? '+' : ''}${hours}:${minutes === 30 ? '30' : '00'}`;
-
-        return { label, value: tz };
-      } catch (error) {
-        // 如果时区不支持，跳过
-        console.warn(`Timezone ${tz} not supported, skipping`);
-        return null;
-      }
-    })
-    .filter((tz): tz is { label: string; value: string } => tz !== null); // 类型守卫
-
-  return formattedTimezones
-    .sort((a, b) => {
-      const [hoursA, minutesA] = a.label.replace('GMT', '').split(':').map(Number);
-      const [hoursB, minutesB] = b.label.replace('GMT', '').split(':').map(Number);
-      const totalOffsetA = hoursA * 60 + minutesA; // 统一为分钟数
-      const totalOffsetB = hoursB * 60 + minutesB;
-      return totalOffsetB - totalOffsetA; // **降序排列**
-    })
-    .map((tz) => ({
-      label: `(${tz.label}) ${tz.value}`,
-      value: tz.value,
-    }));
-};
-
-export const isValidUrl = (url: string) => {
-  return isUrl(withHttps(url)); // 补充协议后在进行验证是否是合法的url
-};
-
-export const isDuplicateUrl = (url1: string, url2: string) => {
-  if (!url1 || !url2) {
-    return false;
-  }
-  if (!isValidUrl(url1) || !isValidUrl(url2)) {
-    return false;
-  }
-
-  const parsedUrl1 = withHttps(url1.trim());
-  const parsedUrl2 = withHttps(url2.trim());
-  return parsedUrl1.toLowerCase() === parsedUrl2.toLowerCase();
-};
-
-/**
- * 根据 duration 类型，计算出date range
- * @param status
- * @returns
- */
-export const getStatusDuration = (status: UserMetadata['status']) => {
-  let dateRange: dayjs.Dayjs[] = status?.dateRange?.map((d) => dayjs(d)) ?? [];
-  const current = dayjs();
-  switch (status?.duration) {
-    case DurationEnum.ThirtyMinutes:
-      dateRange = [current, current.add(30, 'minutes')];
-      break;
-    case DurationEnum.OneHour:
-      dateRange = [current, current.add(1, 'hour')];
-      break;
-    case DurationEnum.FourHours:
-      dateRange = [current, current.add(4, 'hours')];
-      break;
-    case DurationEnum.Today:
-      dateRange = [current, current.endOf('day')];
-      break;
-    case DurationEnum.ThisWeek:
-      dateRange = [current, current.endOf('week')];
-      break;
-    case DurationEnum.NoClear:
-      dateRange = [current, current];
-      break;
-    default:
-      break;
-  }
-  return dateRange.map((d) => d.toDate());
-};
-
-/**
- * 根据状态的 duration，判断是否在时间范围内
- * @param status
- * @returns
- */
-export const isWithinTimeRange = (dateRange: [Date, Date]) => {
-  const current = dayjs();
-  return current.isAfter(dayjs(dateRange[0])) && current.isBefore(dayjs(dateRange[1]));
-};
-
-/**
- * 判断状态持续时间是否为不可清除
- * @param status
- * @returns
- */
-export const isNotClear = (status: UserMetadata['status']) => {
-  const { duration, dateRange } = status ?? {};
-  if (!duration || !dateRange) {
-    return false;
-  }
-  return duration === DurationEnum.NoClear || dayjs(dateRange?.[0]).isSame(dayjs(dateRange?.[1]));
-};
-
-/**
- * 获取当前时间距离结束时间还有多久
- */
-export const getTimeRemaining = (date: Date) => {
-  const now = dayjs();
-  const end = dayjs(date);
-  const diffSeconds = end.diff(now, 'seconds');
-
-  // 转换为毫秒
-  const toMilliseconds = (seconds: number) => seconds * 1000;
-
-  if (diffSeconds >= HOUR) {
-    return toMilliseconds(HOUR); // 1小时 = 3600000ms
-  }
-  if (diffSeconds >= MINUTES_30) {
-    return toMilliseconds(MINUTES_30); // 30分钟 = 1800000ms
-  }
-  if (diffSeconds >= MINUTES_10) {
-    return toMilliseconds(MINUTES_10); // 10分钟 = 600000ms
-  }
-  if (diffSeconds >= MINUTES_5) {
-    return toMilliseconds(MINUTES_5); // 5分钟 = 300000ms
-  }
-  if (diffSeconds >= MINUTES_1) {
-    return toMilliseconds(MINUTES_1); // 1分钟 = 60000ms
-  }
-  if (diffSeconds >= SECOND) {
-    return toMilliseconds(SECOND); // 1秒 = 1000ms
-  }
-
-  return 0; // 如果时间已过期，返回0
-};
-
-// 只支持在 sx 中使用
-export const defaultButtonStyle = {
-  color: 'text.primary',
-  borderColor: 'grey.100',
-  backgroundColor: 'background.default',
-  '&:hover': {
-    borderColor: 'grey.100',
-    backgroundColor: 'action.hover',
-  },
-  py: 0.5,
-  borderRadius: 1,
-};
-
-export const primaryButtonStyle = {
-  color: 'primary.contrastText',
-  borderColor: 'primary.main',
-  backgroundColor: 'primary.main',
-  '&:hover': {
-    borderColor: 'primary.main',
-    backgroundColor: 'primary.main',
-  },
-  py: 0.5,
-  borderRadius: 1,
-};
-
-// 域名关键词到平台标识符的映射表
-const DOMAIN_PLATFORM_MAP: Record<string, { domains: string[]; options?: Record<string, any> }> = {
-  x: {
-    domains: ['twitter.com', 'x.com'],
-  },
-  facebook: {
-    domains: ['facebook.com', 'fb.com'],
-    options: { skipDarkInvert: true },
-  },
-  'linkedin-icon': {
-    domains: ['linkedin.com'],
-    options: { skipDarkInvert: true },
-  },
-  'github-icon': {
-    domains: ['github.com'],
-  },
-  'instagram-icon': {
-    domains: ['instagram.com'],
-  },
-  'youtube-icon': {
-    domains: ['youtube.com', 'youtu.be'],
-    options: { skipDarkInvert: true },
-  },
-  'tiktok-icon': {
-    domains: ['tiktok.com'],
-  },
-  'reddit-icon': {
-    domains: ['reddit.com'],
-    options: { skipDarkInvert: true },
-  },
-  'medium-icon': {
-    domains: ['medium.com'],
-  },
-  'discord-icon': {
-    domains: ['discord.com', 'discord.gg'],
-    options: { skipDarkInvert: true },
-  },
-  telegram: {
-    domains: ['telegram.org', 't.me'],
-    options: { skipDarkInvert: true },
-  },
-  'whatsapp-monochrome-icon': {
-    domains: ['whatsapp.com'],
-  },
-  producthunt: {
-    domains: ['producthunt.com'],
-    options: { skipDarkInvert: true },
-  },
-  ycombinator: {
-    domains: ['ycombinator.com', 'news.ycombinator.com'],
-    options: { skipDarkInvert: true },
-  },
-};
-
-export const getLogoByUrl = (url: string): { icon: string; options?: Record<string, any> } | undefined => {
-  try {
-    // 添加协议（如果没有）
-    const fullUrl = withHttps(url);
-
-    // 解析 URL
-    const urlObj = new URL(fullUrl);
-    const hostname = urlObj.hostname.toLowerCase();
-
-    // 移除 www. 前缀
-    const domain = hostname.replace(/^www\./, '');
-
-    // 根据域名返回对应的平台标识符
-    for (const [platform, { domains, options }] of Object.entries(DOMAIN_PLATFORM_MAP)) {
-      if (domains.some((d) => domain === d || domain.endsWith(`.${d}`))) {
-        return {
-          icon: `logos:${platform}`,
-          options,
-        };
-      }
-    }
-
-    // 对于未匹配的域名，返回空字符串
-    return undefined;
-  } catch {
-    return undefined;
-  }
-};