@blocklet/ui-react 3.4.15 → 3.5.0

package/src/UserCenter/components/user-info/social-actions/follow.tsx

@@ -1,23 +0,0 @@
-import { Button } from '@mui/material';
-import { useMemoizedFn } from 'ahooks';
-import { translate } from '@arcblock/ux/lib/Locale/util';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-
-import { translations } from '../../../libs/locales';
-import { useUserFollowersContext } from '../../../../contexts/user-followers';
-
-function Follow() {
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  const { followed, followUser, unfollowUser } = useUserFollowersContext();
-
-  return (
-    <Button variant="contained" onClick={() => (followed ? unfollowUser() : followUser())} fullWidth>
-      {followed ? t('profile.unfollow') : t('profile.follow')}
-    </Button>
-  );
-}
-
-export default Follow;

package/src/UserCenter/components/user-info/social-actions/index.tsx

@@ -1,17 +0,0 @@
-import { Box } from '@mui/material';
-import Chat from './chat';
-import Follow from './follow';
-
-import { User } from '../../../../@types';
-
-// 进入这里肯定是他人的个人中心
-function SocialActions({ user }: { user: User }) {
-  return (
-    <Box sx={{ display: 'flex', gap: 1 }}>
-      <Chat user={user} />
-      <Follow />
-    </Box>
-  );
-}
-
-export default SocialActions;

package/src/UserCenter/components/user-info/switch-role.tsx

@@ -1,42 +0,0 @@
-import { memo } from 'react';
-import { Chip } from '@mui/material';
-import { Icon } from '@iconify/react';
-import SwapHorizRoundedIcon from '@iconify-icons/material-symbols/swap-horiz-rounded';
-import { useCreation } from 'ahooks';
-import type { User } from '../../../@types';
-
-function SwitchRole({ user, switchPassport }: { user: User; switchPassport: () => void }) {
-  const currentRole = useCreation(
-    // FIXME: @zhanghan 感觉应该把 name 的判断去掉？
-    () => (user?.passports || [])?.find((item) => item.name === user.role || item.role === user.role),
-    [user?.passports, user?.role]
-  );
-
-  return (
-    <Chip
-      label={currentRole?.title || user?.role || 'Guest'}
-      size="small"
-      variant="outlined"
-      sx={{
-        flexShrink: 0,
-        fontWeight: 'bold',
-        fontSize: '12px',
-        color: 'text.primary',
-        borderColor: 'grey.100',
-        backgroundColor: 'transparent',
-        textTransform: 'capitalize',
-        pr: 1,
-        pl: 0.5,
-        '&:active': {
-          boxShadow: 'none',
-        },
-      }}
-      clickable
-      deleteIcon={<Icon icon={SwapHorizRoundedIcon} color="inherit" />}
-      onDelete={switchPassport}
-      onClick={switchPassport}
-    />
-  );
-}
-
-export default memo(SwitchRole);

package/src/UserCenter/components/user-info/timezone-select.tsx

@@ -1,119 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-import { MenuItem, Select, SelectChangeEvent, ListSubheader, TextField } from '@mui/material';
-import { useDebounce, useMemoizedFn } from 'ahooks';
-import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { translate } from '@arcblock/ux/lib/Locale/util';
-import Empty from '@arcblock/ux/lib/Empty';
-import { getTimezones } from './utils';
-import { translations } from '../../libs/locales';
-
-const timezones = getTimezones();
-
-interface TimezoneSelectProps {
-  value: string;
-  onChange: (value: string) => void;
-  disabled?: boolean;
-  mode?: 'drawer' | 'self';
-}
-
-export function TimezoneSelect({ value, onChange, disabled = false, mode = 'self' }: TimezoneSelectProps) {
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  const [timezoneData, setTimezoneData] = useState(timezones);
-  const [searchText, setSearchText] = useState('');
-  const debouncedValue = useDebounce(searchText, { wait: 500 });
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const searchTimezones = useMemoizedFn((v: string) =>
-    v ? timezones.filter((tz) => tz.value.toLowerCase().includes(v.toLowerCase())) : timezones
-  );
-
-  useEffect(() => {
-    const data = searchTimezones(debouncedValue);
-    setTimezoneData(data ?? timezones);
-    // 数据更新后重新聚焦到输入框
-    setTimeout(() => {
-      inputRef.current?.focus();
-    }, 0);
-  }, [debouncedValue, searchTimezones]);
-
-  return (
-    <Select
-      className={`timezone-select ${disabled ? 'disabled' : ''}`}
-      value={value}
-      onChange={(e: SelectChangeEvent) => onChange(e.target.value)}
-      disabled={disabled}
-      displayEmpty
-      variant="outlined"
-      // @ts-expect-error
-      placeholder={t('profile.timezone')}
-      // eslint-disable-next-line react/no-unstable-nested-components
-      IconComponent={(props) => (
-        <KeyboardArrowDownIcon
-          {...props}
-          sx={{ fontSize: 18, color: (theme) => `${theme.palette.text.secondary} !important` }}
-        />
-      )}
-      MenuProps={{
-        autoFocus: false,
-        PaperProps: {
-          style: {
-            maxHeight: '400px',
-          },
-        },
-        style: {
-          zIndex: mode === 'drawer' ? 9999 : 1300,
-        },
-      }}
-      sx={{
-        width: '100%',
-        '&:hover': {
-          'fieldset.MuiOutlinedInput-notchedOutline': {
-            borderColor: 'divider',
-          },
-        },
-        'fieldset.MuiOutlinedInput-notchedOutline': {
-          borderColor: 'divider',
-        },
-      }}>
-      <ListSubheader>
-        <TextField
-          inputRef={inputRef}
-          autoFocus
-          value={searchText}
-          placeholder={t('profile.timezone')}
-          variant="outlined"
-          size="small"
-          fullWidth
-          onChange={(event) => setSearchText(event.target.value)}
-          onClick={(e) => e.stopPropagation()}
-          onKeyDown={(e) => e.stopPropagation()}
-          sx={{
-            marginTop: '8px',
-            '& .MuiOutlinedInput-root': {
-              '& fieldset': {
-                borderColor: 'divider',
-                borderWidth: '1px',
-              },
-              '&:hover fieldset': {
-                borderColor: 'divider',
-              },
-              '&.Mui-focused fieldset': {
-                borderColor: 'divider',
-              },
-            },
-          }}
-        />
-      </ListSubheader>
-      {timezoneData.map((tz) => (
-        <MenuItem key={tz.value} value={tz.value}>
-          {tz.label}
-        </MenuItem>
-      ))}
-      {timezoneData.length > 0 ? null : <Empty>{t('emptyContent')}</Empty>}
-    </Select>
-  );
-}

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

@@ -1,292 +0,0 @@
-import { Box, Divider, Typography, IconButton, Collapse } from '@mui/material';
-import type { BoxProps } from '@mui/material';
-import Avatar from '@arcblock/ux/lib/Avatar';
-import DID from '@arcblock/ux/lib/DID';
-import { useMemoizedFn } from 'ahooks';
-import { translate } from '@arcblock/ux/lib/Locale/util';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import noop from 'lodash/noop';
-import { lazy, useEffect, useState } from 'react';
-import Toast from '@arcblock/ux/lib/Toast';
-import type { AxiosError } from 'axios';
-import { parseURL, joinURL } from 'ufo';
-import {
-  KeyboardArrowDown as KeyboardArrowDownIcon,
-  KeyboardArrowUp as KeyboardArrowUpIcon,
-} from '@mui/icons-material';
-import { getBlockletSDK } from '@blocklet/js-sdk';
-
-import { translations } from '../../libs/locales';
-import type { User, UserAddress, UserMetadata } from '../../../@types';
-import { formatAxiosError } from '../../libs/utils';
-import { currentTimezone, getStatusDuration, isValidUrl, isDuplicateUrl } from './utils';
-import SwitchRole from './switch-role';
-
-import UserStatus from './user-status';
-import UserInfo from './user-info';
-import SocialActions from './social-actions';
-
-const UserMetadataComponent = lazy(() => import('./metadata'));
-
-export default function UserBasicInfo({
-  user,
-  isMyself = true,
-  showFullDid = true,
-  switchPassport,
-  switchProfile,
-  isMobile = false,
-  onlyProfile = false,
-  refreshProfile,
-  isShowSocialActions = false,
-  ...rest
-}: {
-  user: User;
-  isMyself?: boolean;
-  showFullDid?: boolean;
-  switchPassport: () => void;
-  switchProfile: () => void;
-  size?: number;
-  isMobile?: boolean;
-  onlyProfile?: boolean;
-  refreshProfile: () => void;
-  isShowSocialActions?: boolean;
-} & BoxProps) {
-  const client = getBlockletSDK();
-  const { locale } = useLocaleContext();
-  const [userStatus, setUserStatus] = useState<UserMetadata['status']>(undefined);
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-
-  const [expanded, setExpanded] = useState(!isMobile || onlyProfile);
-
-  useEffect(() => {
-    setUserStatus(user?.metadata?.status);
-  }, [user]);
-
-  // Add effect to handle mobile state changes
-  useEffect(() => {
-    setExpanded(!isMobile || onlyProfile);
-  }, [isMobile, onlyProfile]);
-
-  const onUpdateUserStatus = async (v: UserMetadata['status']) => {
-    if (!isMyself) {
-      return;
-    }
-    try {
-      if (v) {
-        const dateRange = getStatusDuration(v);
-        v.dateRange = dateRange.length > 0 ? dateRange : (userStatus?.dateRange ?? []);
-      }
-      setUserStatus(v);
-      await client.user.saveProfile({
-        // @ts-ignore
-        metadata: {
-          ...(user?.metadata ?? { joinedAt: user?.createdAt, email: user?.email, phone: user?.phone }),
-          status: v || {},
-        },
-      });
-      refreshProfile();
-    } catch (err) {
-      console.error(err);
-      Toast.error(formatAxiosError(err as AxiosError));
-    }
-  };
-
-  const toggleExpand = () => {
-    setExpanded(!expanded);
-  };
-
-  const onSave = async (v: { metadata: UserMetadata; address: UserAddress }) => {
-    if (!isMyself) {
-      return;
-    }
-    const { metadata, address } = v;
-    try {
-      const newLinks =
-        metadata?.links
-          ?.map((link, index) => {
-            if (!link.url || !isValidUrl(link.url)) return null;
-
-            // 去重：如果 URL 相同则跳过（忽略协议和大  小写）
-            if (index > 0) {
-              const prevLinks = metadata.links?.slice(0, index);
-              if (prevLinks?.some((l) => isDuplicateUrl(l.url, link.url))) {
-                return null;
-              }
-            }
-
-            try {
-              const parsedUrl = parseURL(link.url);
-              // 如果没有协议，添加 https
-              if (!parsedUrl.protocol) {
-                link.url = joinURL('https://', link.url);
-              }
-              return link;
-            } catch (e) {
-              console.error('Invalid URL:', link.url);
-              return null;
-            }
-          })
-          .filter((l) => !!l) || [];
-      metadata.links = newLinks;
-      // @ts-ignore
-      await client.user.saveProfile({ metadata, address });
-      refreshProfile();
-    } catch (err) {
-      console.error(err);
-      Toast.error(formatAxiosError(err as AxiosError));
-    }
-  };
-
-  return (
-    <Box
-      {...rest}
-      sx={{
-        position: 'relative',
-        ...(rest.sx ?? {}),
-      }}>
-      <Box
-        className="user-info"
-        sx={{
-          display: 'flex',
-          flexDirection: isMobile ? 'row' : 'column',
-          gap: 2,
-        }}>
-        <Box
-          className="user-avatar"
-          sx={{
-            position: 'relative',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}>
-          <Avatar
-            //  @ts-ignore
-            src={user?.avatar}
-            did={user?.did}
-            size={rest.size || (isMobile ? 64 : 100)}
-            variant="circle"
-            shape="circle"
-            sx={{
-              borderRadius: '100%',
-              backgroundColor: '#fff',
-              position: 'relative',
-              overflow: 'hidden',
-              flexShrink: 0,
-              ...(isMyself
-                ? {
-                    cursor: 'pointer',
-                    '&::after': {
-                      content: `"${t('switchProfile')}"`,
-                      color: 'white',
-                      position: 'absolute',
-                      fontSize: '12px',
-                      bottom: 0,
-                      left: 0,
-                      right: 0,
-                      height: '25%',
-                      backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                      display: 'flex',
-                      justifyContent: 'center',
-                      alignItems: 'center',
-                    },
-                  }
-                : {}),
-            }}
-            onClick={isMyself ? switchProfile : noop}
-          />
-          <UserStatus
-            isMobile={isMobile}
-            size={rest.size || (isMobile ? 64 : 100)}
-            isMyself={isMyself}
-            timezone={user?.metadata?.timezone || currentTimezone}
-            status={userStatus}
-            onChange={onUpdateUserStatus}
-          />
-        </Box>
-        <Box
-          sx={{
-            flex: 1,
-            overflow: 'hidden',
-          }}>
-          <Typography
-            variant="h6"
-            component="div"
-            sx={{
-              flex: 1,
-              fontWeight: 600,
-              display: 'flex',
-              alignItems: 'center',
-              gap: 1,
-              fontSize: '24px !important',
-              flexWrap: 'wrap',
-            }}>
-            <span
-              style={{
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-              }}>
-              {user?.fullName}
-            </span>
-            {isMyself ? <SwitchRole user={user} switchPassport={switchPassport} /> : null}
-          </Typography>
-          <DID
-            did={user.did}
-            size={16}
-            showQrcode
-            copyable
-            compact={!showFullDid}
-            responsive={!showFullDid}
-            locale={locale}
-          />
-        </Box>
-      </Box>
-      {!isMyself && isShowSocialActions ? (
-        <Box sx={{ mt: 2 }}>
-          <SocialActions user={user} />
-        </Box>
-      ) : null}
-      <UserMetadataComponent isMobile={isMobile} isMyself={isMyself} user={user} onSave={onSave} />
-      {isMyself ? (
-        <>
-          <Divider sx={{ my: isMobile ? 1 : 3 }} />
-          {isMobile && !onlyProfile ? (
-            <Box
-              sx={{
-                display: 'flex',
-                justifyContent: 'center',
-                mb: 0,
-              }}>
-              <IconButton
-                size="small"
-                onClick={toggleExpand}
-                sx={{
-                  backgroundColor: 'grey.50',
-                  '&:hover': {
-                    backgroundColor: 'grey.50',
-                    opacity: 0.8,
-                  },
-                }}>
-                {expanded ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
-              </IconButton>
-            </Box>
-          ) : null}
-          <Collapse in={expanded} timeout="auto">
-            <Typography
-              component="p"
-              sx={{
-                color: 'text.secondary',
-                fontSize: '14px',
-                mb: 2,
-              }}>
-              {t('profile.justForYou')}
-            </Typography>
-            <UserInfo user={user} isMySelf={isMyself} />
-          </Collapse>
-        </>
-      ) : null}
-    </Box>
-  );
-}

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

@@ -1,54 +0,0 @@
-import { Box, BoxProps, Typography } from '@mui/material';
-import { Verified as VerifiedIcon } from '@mui/icons-material';
-
-type TUserInfoItemProps = {
-  data: {
-    icon: any;
-    title: string;
-    content: any;
-  };
-  verified?: boolean;
-};
-
-export default function UserInfoItem({ data, verified = false, ...rest }: TUserInfoItemProps & BoxProps) {
-  return (
-    <Box
-      {...rest}
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        ...rest.sx,
-      }}>
-      <Typography
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          color: 'text.primary',
-          fontSize: '14px',
-          gap: 1,
-          fontWeight: 500,
-        }}>
-        {data.icon}
-        {data.title}
-      </Typography>
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-        }}>
-        <Typography
-          component="div"
-          sx={{
-            color: 'text.secondary',
-            whiteSpace: 'pre-wrap',
-            fontSize: '14px',
-          }}>
-          {data.content}
-        </Typography>
-        {verified && <VerifiedIcon color="success" style={{ fontSize: 16, marginLeft: 4 }} />}
-      </Box>
-    </Box>
-  );
-}

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

@@ -1,91 +0,0 @@
-import { Box } from '@mui/material';
-import type { BoxProps } from '@mui/material';
-import { Icon } from '@iconify/react';
-import { useMemoizedFn, useCreation } from 'ahooks';
-import DID from '@arcblock/ux/lib/DID';
-import ScheduleOutlineRoundedIcon from '@iconify-icons/material-symbols/schedule-outline-rounded';
-import MoreTimeRoundedIcon from '@iconify-icons/material-symbols/more-time-rounded';
-import CaptivePortalRoundedIcon from '@iconify-icons/material-symbols/captive-portal-rounded';
-import SettingsInputAntennaRoundedIcon from '@iconify-icons/material-symbols/settings-input-antenna-rounded';
-import RelativeTime from '@arcblock/ux/lib/RelativeTime';
-import { translate } from '@arcblock/ux/lib/Locale/util';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { LOGIN_PROVIDER_NAME } from '@arcblock/ux/lib/Util/constant';
-import ShortenLabel from '@arcblock/ux/lib/UserCard/Content/shorten-label';
-import { translations } from '../../libs/locales';
-import UserInfoItem from './user-info-item';
-import type { User } from '../../../@types';
-
-export default function UserInfo({
-  user,
-  isMySelf = false,
-  ...rest
-}: {
-  user: User;
-  isMySelf?: boolean;
-} & BoxProps) {
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-
-  const readableProvider = useCreation(() => {
-    return (user?.sourceProvider && LOGIN_PROVIDER_NAME[user.sourceProvider]) || t('unknown');
-  }, [user?.sourceProvider]);
-
-  const userInfoListData = [];
-  if (isMySelf) {
-    userInfoListData.push({
-      icon: <Icon fontSize={16} icon={ScheduleOutlineRoundedIcon} />,
-      title: t('lastLoginAt'),
-      content: user?.lastLoginAt ? (
-        // @ts-ignore
-        <RelativeTime locale={locale} value={user?.lastLoginAt} relativeRange={3 * 86400 * 1000} />
-      ) : (
-        t('unknown')
-      ),
-    });
-    userInfoListData.push({
-      icon: <Icon fontSize={16} icon={SettingsInputAntennaRoundedIcon} />,
-      title: t('lastLoginIp'),
-      content: user?.lastLoginIp ? <ShortenLabel maxLength={20}>{user?.lastLoginIp}</ShortenLabel> : t('unknown'),
-    });
-  }
-  userInfoListData.push({
-    icon: <Icon fontSize={16} icon={MoreTimeRoundedIcon} />,
-    title: t('createdAt'),
-    // @ts-ignore
-    content: user?.createdAt ? <RelativeTime locale={locale} value={user?.createdAt} /> : t('unknown'),
-  });
-  if (isMySelf) {
-    userInfoListData.push({
-      icon: <Icon fontSize={16} icon={CaptivePortalRoundedIcon} />,
-      title: t('registerFrom'),
-      content: readableProvider,
-    });
-    if (user?.inviter) {
-      userInfoListData.push({
-        icon: <Icon fontSize={16} icon={CaptivePortalRoundedIcon} />,
-        title: t('invitedBy'),
-        content: (
-          <DID style={{ maxWidth: 260 }} did={user.inviter} showQrcode copyable compact responsive locale={locale} />
-        ),
-      });
-    }
-  }
-
-  return (
-    <Box
-      {...rest}
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 1.5,
-        ...rest?.sx,
-      }}>
-      {userInfoListData.map((item) => (
-        <UserInfoItem key={item.title} data={item} sx={{ flex: 1 }} />
-      ))}
-    </Box>
-  );
-}