@blocklet/ui-react 2.12.8 → 2.12.10

package/src/UserCenter/components/user-info/link-preview-input.tsx

@@ -0,0 +1,227 @@
+import { Box, Button, FormControl, IconButton, TextField, Typography } from '@mui/material';
+import styled from '@emotion/styled';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import RemoveIcon from '@arcblock/icons/lib/Subtract';
+import AddIcon from '@mui/icons-material/Add';
+import { temp as colors } from '@arcblock/ux/lib/Colors';
+import { ChangeEvent, useEffect, useMemo, useState } from 'react';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { useMemoizedFn } from 'ahooks';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import LinkIcon from '@arcblock/icons/lib/Link';
+import { joinURL } from 'ufo';
+import { isValidUrl } from './utils';
+import { translations } from '../../libs/locales';
+
+/**
+ * 链接预览输入框
+ */
+function LinkInput({ value, onChange, error }: { value: string; onChange: (value: string) => void; error: boolean }) {
+  const handleUrlChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const inputValue = event.target.value;
+    onChange(inputValue);
+  };
+
+  return (
+    <FormControl fullWidth>
+      <TextField
+        variant="outlined"
+        value={value}
+        onChange={handleUrlChange}
+        fullWidth
+        error={error}
+        helperText={error ? 'Invalid URL' : ''}
+        sx={{
+          fieldset: {
+            borderColor: colors.dividerColor,
+          },
+        }}
+      />
+    </FormControl>
+  );
+}
+
+/**
+ * 动态链接输入框
+ */
+function DynamicLinkForm({ links = [], onChange }: { links: string[]; onChange: (links: string[]) => void }) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  const [errors, setErrors] = useState([false]); // 记录 URL 输入错误状态
+
+  const isLastError = useMemo(() => {
+    const lastLink = links[links.length - 1];
+    return !isValidUrl(lastLink) || (errors.length > 0 && errors[errors.length - 1]);
+  }, [errors, links]);
+
+  const handleAddLink = () => {
+    if (links.length < 5 || !isLastError) {
+      onChange([...links, '']);
+    }
+  };
+
+  // 删除指定索引的输入框
+  const handleRemoveLink = (index: number) => {
+    const updatedLinks = links.filter((_, i) => i !== index);
+    const updatedErrors = errors.filter((_, i) => i !== index);
+    setErrors(updatedErrors);
+    onChange(updatedLinks);
+  };
+
+  // 处理输入框变化
+  const handleInputChange = (index: number, value: string) => {
+    const updatedLinks = [...links];
+    updatedLinks[index] = value;
+
+    // 校验 URL 是否有效
+    const updatedErrors = [...errors];
+    updatedErrors[index] = !!(value && !isValidUrl(value)); // 如果有输入但格式错误，标记错误
+    setErrors(updatedErrors);
+    onChange(updatedLinks);
+  };
+
+  return (
+    <Box width="100%">
+      <Box display="flex" justifyContent="space-between" alignItems="center" gap={1}>
+        <Typography variant="subtitle1" gutterBottom sx={{ mb: 0, fontSize: '12px', color: '#4B5563' }}>
+          Social Media
+        </Typography>
+      </Box>
+      {links.map((link, index) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <Box key={index} display="flex" alignItems="flex-start" mb={1}>
+          <LinkInput value={link} onChange={(value) => handleInputChange(index, value)} error={errors[index]} />
+          <IconButton sx={{ color: colors.foregroundsFgMuted }} onClick={() => handleRemoveLink(index)}>
+            <RemoveIcon />
+          </IconButton>
+        </Box>
+      ))}
+      {links.length < 5 && (
+        <Button
+          fullWidth
+          variant="outlined"
+          disabled={isLastError}
+          onClick={handleAddLink}
+          size="small"
+          sx={{
+            height: '40px',
+            border: `1px dashed ${colors.dividerColor}`,
+            color: colors.textBase,
+            '&:hover': {
+              border: `1px dashed ${colors.backgroundsBgSubtileHover}`,
+              backgroundColor: colors.backgroundsBgSubtileHover,
+            },
+            '&.Mui-disabled': {
+              borderStyle: 'dashed',
+            },
+          }}>
+          <AddIcon /> <span>{t('profile.addLink')}</span>
+        </Button>
+      )}
+    </Box>
+  );
+}
+
+/**
+ * favicon 预览
+ */
+function FaviconPreview({ link }: { link: string }) {
+  const [favicon, setFavicon] = useState('');
+  const [iconError, setIconError] = useState(false); // 控制是否显示默认图标
+
+  useEffect(() => {
+    try {
+      if (link) {
+        const url = new URL(link);
+        const faviconUrl = joinURL(url.origin, 'favicon.ico');
+
+        // 尝试加载 Favicon
+        const img = new Image();
+        img.src = faviconUrl;
+        // TODO: CSP 导致解析失败
+        img.onload = () => {
+          setFavicon(faviconUrl);
+          setIconError(false);
+        };
+        img.onerror = () => {
+          setIconError(true);
+          setFavicon('');
+        };
+      } else {
+        setIconError(true);
+        setFavicon('');
+      }
+    } catch (error) {
+      setIconError(true); // URL 解析失败，直接回退到默认图标
+    }
+  }, [link]);
+
+  if (!link) {
+    return null;
+  }
+
+  if (iconError || !favicon) {
+    return <LinkIcon width={20} height={20} />;
+  }
+
+  return <img src={favicon} alt="Favicon" width={20} height={20} />;
+}
+
+export function LinkPreviewInput({
+  editable = false,
+  links = [],
+  onChange,
+}: {
+  editable?: boolean;
+  links: string[];
+  onChange: (links: string[]) => void;
+}) {
+  if (editable) {
+    return <DynamicLinkForm links={links} onChange={onChange} />;
+  }
+
+  return (
+    <Box width="100%" display="flex" flexDirection="column" gap={2}>
+      {links.map((link) => (
+        <Box
+          key={link}
+          display="flex"
+          alignItems="center"
+          gap={1}
+          sx={{
+            overflow: 'hidden',
+            width: '100%',
+          }}>
+          <FaviconPreview link={link} />
+          <LinkDiv>
+            <Box component="a" href={link} style={{ textDecoration: 'none' }} target="_blank" rel="noopener noreferrer">
+              {link}
+            </Box>
+          </LinkDiv>
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+const LinkDiv = styled.span`
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  &,
+  & > * {
+    color: #222;
+  }
+
+  & > * {
+    word-break: break-all;
+  }
+
+  .status {
+    margin-left: 8px;
+  }
+`;

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

@@ -0,0 +1,465 @@
+/* eslint-disable react/no-unstable-nested-components */
+/* eslint-disable import/no-extraneous-dependencies */
+
+import Box from '@mui/material/Box';
+import MenuItem from '@mui/material/MenuItem';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import SwipeableDrawer from '@mui/material/SwipeableDrawer';
+import Backdrop, { BackdropProps } from '@mui/material/Backdrop';
+import styled from '@emotion/styled';
+import { joinURL } from 'ufo';
+import Button from '@arcblock/ux/lib/Button';
+import cloneDeep from 'lodash/cloneDeep';
+import { temp as colors } from '@arcblock/ux/lib/Colors';
+import { useCreation, useMemoizedFn, useReactive } from 'ahooks';
+import { useMemo, useRef, useState, memo, forwardRef, useEffect, lazy } from 'react';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import isEmail from 'validator/lib/isEmail';
+import isMobilePhone from 'validator/lib/isMobilePhone';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+
+import { useBrowser } from '@arcblock/react-hooks';
+import { translations } from '../../libs/locales';
+import type { User, UserMetadata } from '../../../@types';
+import EditableField from '../editable-field';
+import { LinkPreviewInput } from './link-preview-input';
+import { getTimezones } from './utils';
+import Clock from './clock';
+
+const LocationIcon = lazy(() => import('@arcblock/icons/lib/Location'));
+const TimezoneIcon = lazy(() => import('@arcblock/icons/lib/Timezone'));
+const EmailIcon = lazy(() => import('@arcblock/icons/lib/Email'));
+const PhoneIcon = lazy(() => import('@arcblock/icons/lib/Phone'));
+const ArrowDownwardIcon = lazy(() => import('@arcblock/icons/lib/ArrowDown'));
+
+const defaultButtonStyle = {
+  color: colors.foregroundsFgBase,
+  borderColor: colors.strokeBorderBase,
+  backgroundColor: colors.buttonsButtonNeutral,
+  '&:hover': {
+    borderColor: colors.strokeBorderBase,
+    backgroundColor: colors.buttonsButtonNeutralHover,
+  },
+  py: 0.5,
+  borderRadius: 2,
+};
+
+const primaryButtonStyle = {
+  color: colors.buttonsButtonNeutral,
+  borderColor: colors.foregroundsFgInteractive,
+  backgroundColor: colors.foregroundsFgInteractive,
+  '&:hover': {
+    borderColor: colors.foregroundsFgInteractive,
+    backgroundColor: colors.foregroundsFgInteractive,
+  },
+  py: 0.5,
+  borderRadius: 2,
+};
+
+const iconSize = {
+  width: 20,
+  height: 20,
+};
+
+const bioMaxLength = 200;
+
+const BackdropWrap = memo(
+  forwardRef<HTMLDivElement, BackdropProps>(function BackdropWrap(backdropProps, ref) {
+    return (
+      <Backdrop
+        ref={ref}
+        component="div"
+        style={{
+          backgroundColor: 'rgba(0, 0, 0, 0.6)',
+          backdropFilter: 'blur(3px)',
+          touchAction: 'none',
+        }}
+        {...backdropProps}
+        key="background"
+      />
+    );
+  })
+);
+
+// 添加 displayName
+BackdropWrap.displayName = 'BackdropWrap';
+
+export default function UserMetadataComponent({
+  isMyself,
+  user,
+  onSave,
+}: {
+  isMyself: boolean;
+  user: User;
+  onSave: (v: UserMetadata) => void;
+  isMobile?: boolean;
+}) {
+  const [editable, setEditable] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const drawerDragger = useRef(null);
+  const browser = useBrowser();
+  const isMobileView = useMediaQuery('(max-width:640px)') || browser.mobile.any;
+  const validateMsg = useReactive<Record<string, string>>({
+    email: '',
+    phone: '',
+  });
+
+  useEffect(() => {
+    if (!isMobileView) {
+      setVisible(false);
+    }
+  }, [isMobileView]);
+
+  const phoneVerified = useCreation(() => {
+    return user?.phoneVerified ?? false;
+  }, [user?.phoneVerified]);
+
+  const emailVerified = useCreation(() => {
+    return user?.emailVerified ?? false;
+  }, [user?.emailVerified]);
+
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+
+  const metadata: UserMetadata = useReactive(
+    user?.metadata
+      ? cloneDeep(user.metadata)
+      : {
+          joinedAt: user?.createdAt,
+          email: user?.email,
+          phone: user?.phone,
+        }
+  );
+
+  const onChange = (v: any, field: keyof UserMetadata | 'email') => {
+    metadata[field] = v;
+  };
+
+  const timezones = getTimezones();
+
+  const onEdit = () => {
+    if (!isMobileView) {
+      setEditable(true);
+    } else {
+      setVisible(true);
+    }
+  };
+
+  const onCancel = () => {
+    const defaultMetadata: UserMetadata = cloneDeep(user?.metadata) ?? {};
+    if (defaultMetadata) {
+      Object.keys(metadata).forEach((key) => {
+        const k = key as keyof UserMetadata;
+        (metadata[k] as any) = defaultMetadata[k];
+      });
+    }
+    validateMsg.email = '';
+    validateMsg.phone = '';
+    if (!isMobileView) {
+      setEditable(false);
+    } else {
+      setVisible(false);
+    }
+  };
+
+  const links = useMemo(() => {
+    const defaultLinks = metadata?.links?.map((link) => link.url) || [''];
+    return defaultLinks.length > 0 ? defaultLinks : [''];
+  }, [metadata.links]);
+
+  const handleLinksChange = (values: string[]) => {
+    const newLinks = values.map((link) => {
+      if (!link) {
+        return {
+          url: link,
+        };
+      }
+      const targetLink = metadata.links?.find((l) => l.url === link);
+      if (targetLink) {
+        return {
+          ...targetLink,
+          url: link,
+        };
+      }
+      return {
+        url: link,
+        favicon: joinURL(link, 'favicon.ico'),
+      };
+    });
+    onChange(newLinks, 'links');
+  };
+
+  const handleSave = () => {
+    Object.keys(metadata).forEach((key) => {
+      const k = key as keyof UserMetadata;
+      const value = metadata[k];
+      if (value && typeof value === 'string') {
+        (metadata[k] as string) = value.trim();
+      }
+      if (k === 'bio') {
+        metadata[k] = metadata[k]?.slice(0, bioMaxLength);
+      }
+    });
+
+    onSave(metadata);
+    setEditable(false);
+    setVisible(false);
+  };
+
+  const renderEdit = (editing: boolean, mode: 'drawer' | 'self' = 'self') => {
+    return (
+      <MetadataInfo pt={2} display="flex" flexDirection="column">
+        <EditableField
+          value={metadata.bio ?? ''}
+          onChange={(value) => onChange(value, 'bio')}
+          editable={editing}
+          placeholder="Bio"
+          component="textarea"
+          inline={false}
+          rows={3}
+          maxLength={bioMaxLength}
+          style={{
+            ...(editing ? { marginBottom: 8 } : {}),
+          }}
+        />
+        {!editing && isMyself ? (
+          <Button
+            size="large"
+            variant="outlined"
+            sx={{
+              ...defaultButtonStyle,
+              mb: 2,
+              mt: 2,
+              height: '40px',
+            }}
+            onClick={onEdit}
+            fullWidth>
+            {t('profile.editProfile')}
+          </Button>
+        ) : null}
+        <EditableField
+          value={metadata.location ?? ''}
+          onChange={(value) => onChange(value, 'location')}
+          editable={editing}
+          placeholder="Location"
+          label={t('profile.location')}
+          icon={<LocationIcon {...iconSize} />}
+        />
+
+        <EditableField
+          value={metadata.timezone ?? ''}
+          onChange={(value) => onChange(value, 'timezone')}
+          editable={editing}
+          placeholder="timezone"
+          icon={<TimezoneIcon {...iconSize} />}
+          label={t('profile.timezone')}
+          tooltip={
+            <p style={{ display: 'flex', margin: 0 }}>
+              <span style={{ marginRight: '4px' }}>{t('profile.localTime')}</span>
+              <Clock timezone={metadata.timezone} locale={locale} />
+            </p>
+          }>
+          <Select
+            className={`timezone-select ${editing ? '' : 'disabled'}`}
+            value={metadata.timezone}
+            onChange={(e: SelectChangeEvent) => onChange(e.target.value, 'timezone')}
+            disabled={!editing}
+            displayEmpty
+            variant="outlined"
+            placeholder="Timezone"
+            IconComponent={(props) => <ArrowDownwardIcon {...props} width={20} height={20} />}
+            MenuProps={{
+              style: {
+                zIndex: mode === 'drawer' ? 9999 : 1300,
+              },
+            }}
+            sx={{
+              width: '100%',
+
+              '&:hover': {
+                'fieldset.MuiOutlinedInput-notchedOutline': {
+                  borderColor: colors.dividerColor,
+                },
+              },
+              fieldset: {
+                borderColor: colors.dividerColor,
+              },
+            }}>
+            {timezones.map((tz) => (
+              <MenuItem key={tz.value} value={tz.value}>
+                {tz.label}
+              </MenuItem>
+            ))}
+          </Select>
+        </EditableField>
+
+        <EditableField
+          value={metadata.email ?? user?.email ?? ''}
+          editable={editing && !emailVerified}
+          verified={emailVerified}
+          placeholder="Email"
+          icon={<EmailIcon {...iconSize} />}
+          label={t('profile.email')}
+          onChange={(value) => onChange(value, 'email')}
+          errorMsg={validateMsg.email}
+          onValueValidate={(value) => {
+            let msg = '';
+            if (!!value && !isEmail(value)) {
+              msg = t('profile.emailInvalid');
+            }
+            validateMsg.email = msg;
+          }}
+        />
+
+        <EditableField
+          value={metadata.phone ?? user?.phone ?? ''}
+          editable={editing && !phoneVerified}
+          verified={phoneVerified}
+          placeholder="Phone"
+          icon={<PhoneIcon {...iconSize} />}
+          onChange={(value) => onChange(value, 'phone')}
+          label={t('profile.phone')}
+          errorMsg={validateMsg.phone}
+          onValueValidate={(value) => {
+            let msg = '';
+            if (!!value && !isMobilePhone(value)) {
+              msg = t('profile.phoneInvalid');
+            }
+            validateMsg.phone = msg;
+          }}
+        />
+
+        <LinkPreviewInput editable={editing} links={links} onChange={handleLinksChange} />
+        {editing && isMyself ? (
+          <Box
+            display="flex"
+            gap={1}
+            style={{ width: '100%' }}
+            justifyContent="flex-end"
+            flexDirection={mode === 'drawer' ? 'column' : 'row'}>
+            <Button
+              fullWidth={mode === 'drawer'}
+              size="small"
+              variant="outlined"
+              sx={{ ...defaultButtonStyle, minWidth: '54px' }}
+              onClick={onCancel}>
+              {t('common.cancel')}
+            </Button>
+            <Button
+              fullWidth={mode === 'drawer'}
+              size="small"
+              disabled={!!validateMsg.email || !!validateMsg.phone}
+              variant="outlined"
+              sx={{
+                ...primaryButtonStyle,
+                minWidth: '54px',
+                '&.Mui-disabled': {
+                  backgroundColor: 'rgba(0, 0, 0, 0.12)',
+                },
+              }}
+              onClick={handleSave}>
+              {t('common.save')}
+            </Button>
+          </Box>
+        ) : null}
+      </MetadataInfo>
+    );
+  };
+
+  return (
+    <>
+      {renderEdit(editable)}
+      {isMobileView && (
+        <SwipeableDrawer
+          sx={{
+            zIndex: 9999,
+          }}
+          disableSwipeToOpen
+          onOpen={onEdit}
+          open={visible}
+          anchor="bottom"
+          onClose={onCancel}
+          slots={{
+            backdrop: BackdropWrap,
+          }}
+          PaperProps={{
+            sx: {
+              boxShadow: '0px -2px 16px 0px rgba(0, 0, 0, 0.08)',
+              borderRadius: 3, // 保持跟 DID Wallet 一致
+              borderBottomLeftRadius: 0,
+              borderBottomRightRadius: 0,
+            },
+          }}>
+          <Box
+            ref={drawerDragger}
+            sx={{
+              padding: '16px 32px',
+              margin: '-8px auto -16px',
+              zIndex: 1,
+            }}>
+            <Box
+              sx={{
+                width: '48px',
+                height: '4px',
+                borderRadius: '100vw',
+                backgroundColor: 'rgba(0, 0, 0, 0.2)',
+              }}
+            />
+          </Box>
+          <Box
+            p={2}
+            sx={{
+              maxHeight: '500px',
+              overflowY: 'auto',
+            }}>
+            {renderEdit(true, 'drawer')}
+          </Box>
+        </SwipeableDrawer>
+      )}
+    </>
+  );
+}
+const MetadataInfo = styled(Box)`
+  gap: 16px;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100%;
+
+  .MuiOutlinedInput-root {
+    padding: 8px;
+    .MuiOutlinedInput-input {
+      padding: 0;
+    }
+  }
+  .timezone-select {
+    min-width: 150px;
+    &.disabled {
+      padding: 4px 8px;
+      fieldset {
+        border: unset;
+      }
+      svg {
+        display: none;
+      }
+    }
+  }
+  .info-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    margin: 0;
+    p {
+      display: flex;
+      align-items: center;
+      margin: 0;
+      font-size: 16px;
+      font-weight: 400;
+      color: #666;
+    }
+  }
+`;

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

@@ -1,8 +1,8 @@
 import { memo } from 'react';
 import { Chip } from '@mui/material';
-import { Icon } from '@iconify/react';
 import { useCreation } from 'ahooks';
-import SwapHorizRoundedIcon from '@iconify-icons/material-symbols/swap-horiz-rounded';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import SwitchIcon from '@arcblock/icons/lib/Switch';
 import { temp as colors } from '@arcblock/ux/lib/Colors';
 import type { User } from '../../../@types';
 
@@ -34,7 +34,7 @@ function SwitchRole({ user, switchPassport }: { user: User; switchPassport: () =
         },
       }}
       clickable
-      deleteIcon={<Icon icon={SwapHorizRoundedIcon} color={colors.textBase} />}
+      deleteIcon={<SwitchIcon color={colors.textBase} width={20} height={20} />}
       onDelete={switchPassport}
       onClick={switchPassport}
     />