@blocklet/ui-react 3.4.15 → 3.5.0

package/src/UserCenter/components/editable-field.tsx

@@ -1,273 +0,0 @@
-import React, { useState } from 'react';
-import { useCreation, useMemoizedFn } from 'ahooks';
-import { Box, TextField, Typography, Tooltip, type TooltipProps, useTheme } from '@mui/material';
-import { Verified as VerifiedIcon } from '@mui/icons-material';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { translate } from '@arcblock/ux/lib/Locale/util';
-import { mergeSx } from '@arcblock/ux/lib/Util/style';
-import { translations } from '../libs/locales';
-
-interface EditableFieldProps {
-  value: string;
-  onChange?: (value: string) => void;
-  onValueValidate?: (value: string) => void;
-  editable?: boolean;
-  disabled?: boolean;
-  component?: 'input' | 'textarea';
-  placeholder?: string;
-  rows?: number;
-  maxLength?: number; // 最大字符数
-  icon?: React.ReactNode;
-  label?: string | React.ReactNode;
-  children?: React.ReactNode;
-  tooltip?: TooltipProps['title'];
-  inline?: boolean;
-  style?: React.CSSProperties;
-  verified?: boolean;
-  errorMsg?: string;
-  canEdit?: boolean;
-  hidePreview?: boolean;
-  renderValue?: (value: string) => React.ReactNode;
-}
-
-/** only for sx */
-export const commonInputStyle = {
-  '.MuiOutlinedInput-root': {
-    '&:hover': {
-      fieldset: {
-        borderColor: 'divider',
-      },
-    },
-    '&.Mui-focused': {
-      fieldset: {
-        borderColor: 'divider',
-      },
-    },
-  },
-};
-
-/** only for sx */
-export const inputFieldStyle = {
-  width: '100%',
-  '& .MuiFormHelperText-root': {
-    position: 'relative',
-    bottom: 0,
-    left: 0,
-    margin: 0,
-  },
-  fieldset: {
-    borderColor: 'divider',
-  },
-};
-
-function EditableField({
-  value,
-  onChange = () => {},
-  onValueValidate = () => {},
-  errorMsg = '',
-  editable = false,
-  component = 'input',
-  placeholder = '',
-  rows = 2,
-  maxLength = undefined,
-  icon = undefined,
-  label = '',
-  children = undefined,
-  tooltip = undefined,
-  inline = true,
-  style = {},
-  verified = false,
-  canEdit = true,
-  renderValue = undefined,
-  disabled = false,
-  hidePreview = false,
-}: EditableFieldProps) {
-  const { locale } = useLocaleContext();
-  const theme = useTheme();
-  const isDark = theme.palette.mode === 'dark';
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-
-  // 存储鼠标位置的状态
-  const [mousePosition, setMousePosition] = useState<{
-    mouseX: number;
-    mouseY: number;
-  } | null>(null);
-
-  // 处理鼠标移动事件，更新鼠标位置
-  const handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {
-    setMousePosition({
-      mouseX: event.clientX,
-      mouseY: event.clientY,
-    });
-  };
-
-  // 处理鼠标离开事件，清除鼠标位置
-  const handleMouseLeave = () => {
-    setMousePosition(null);
-  };
-
-  const handleChange = useMemoizedFn((v: string) => {
-    if (onChange) {
-      onChange(v);
-    }
-    if (onValueValidate) {
-      onValueValidate(v);
-    }
-  });
-
-  const content = useCreation(() => {
-    if (children) {
-      return children;
-    }
-    if (component === 'input') {
-      return (
-        <TextField
-          variant="outlined"
-          className="editable-field"
-          value={value}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChange(e.target.value)}
-          sx={mergeSx(inputFieldStyle, !errorMsg ? commonInputStyle : {})}
-          error={Boolean(errorMsg)}
-          helperText={errorMsg}
-          disabled={disabled}
-          slotProps={{
-            input: {
-              sx: { backgroundColor: 'transparent' },
-              placeholder,
-            },
-          }}
-        />
-      );
-    }
-
-    const isTooLong = value.length > (maxLength || 300);
-    return (
-      <Box position="relative">
-        <TextField
-          variant="outlined"
-          sx={mergeSx(inputFieldStyle, !errorMsg ? commonInputStyle : {})}
-          value={value}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChange(e.target.value)}
-          error={Boolean(errorMsg)}
-          helperText={errorMsg}
-          disabled={disabled}
-          slotProps={{
-            input: {
-              multiline: true,
-              minRows: rows,
-              placeholder,
-            },
-          }}
-        />
-        {maxLength && maxLength > 0 ? (
-          <Typography
-            position="absolute"
-            bottom={-22}
-            right={2}
-            variant="caption"
-            fontSize="12px"
-            component="span"
-            color={isTooLong ? 'error' : 'text.secondary'}>
-            {isTooLong ? `(${t('profile.maxInputLength')} ${maxLength}) ` : ''}
-            {value.length} / {maxLength}
-          </Typography>
-        ) : null}
-      </Box>
-    );
-  }, [value, handleChange, component, placeholder, rows, children]);
-
-  if (!canEdit && editable) {
-    return null;
-  }
-
-  if (!editable) {
-    return value && !hidePreview ? (
-      <Tooltip
-        open={Boolean(mousePosition)}
-        title={tooltip}
-        placement="top"
-        arrow
-        slotProps={{
-          popper: {
-            // 使用虚拟锚点元素，基于鼠标位置
-            anchorEl: mousePosition
-              ? {
-                  getBoundingClientRect: () => ({
-                    top: mousePosition.mouseY,
-                    left: mousePosition.mouseX,
-                    right: mousePosition.mouseX,
-                    bottom: mousePosition.mouseY,
-                    width: 0,
-                    height: 0,
-                    x: mousePosition.mouseX,
-                    y: mousePosition.mouseY,
-                    toJSON: () => {},
-                  }),
-                }
-              : null,
-            // 设置偏移，使tooltip显示在鼠标上方
-            modifiers: [
-              {
-                name: 'offset',
-                options: {
-                  offset: [0, 10],
-                },
-              },
-            ],
-          },
-        }}>
-        <Typography
-          variant="subtitle1"
-          component="div"
-          gutterBottom
-          sx={{
-            width: '100%',
-            mb: 0,
-            lineHeight: 1.4,
-            overflow: 'hidden',
-          }}
-          display="flex"
-          alignItems="center"
-          gap={1}>
-          {icon
-            ? React.cloneElement(icon as React.ReactElement<any>, {
-                style: {
-                  filter: isDark ? 'brightness(0) saturate(100%) invert(1)' : 'none',
-                },
-              })
-            : null}
-          <Box display="flex" flexDirection="row" alignItems="center" width="90%">
-            <Typography
-              sx={{
-                whiteSpace: 'pre-wrap',
-                ...(inline ? { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } : {}),
-              }}
-              component="div"
-              onMouseEnter={handleMouseEnter}
-              onMouseLeave={handleMouseLeave}>
-              {renderValue ? renderValue(value) : value}
-            </Typography>
-            {verified && (
-              <VerifiedIcon color="success" style={{ fontSize: 16, width: 16, marginLeft: 4, flexShrink: 0 }} />
-            )}
-          </Box>
-        </Typography>
-      </Tooltip>
-    ) : null;
-  }
-
-  return (
-    <Box sx={{ width: '100%' }} style={style}>
-      {label && (
-        <Typography variant="subtitle1" gutterBottom sx={{ mb: 0.5, fontSize: '12px', color: 'text.primary' }}>
-          {label}
-        </Typography>
-      )}
-      {content}
-    </Box>
-  );
-}
-
-export default EditableField;

package/src/UserCenter/components/fallback.tsx

@@ -1,57 +0,0 @@
-/**
- * 用户中心 fallback 组件，用于没有权限访问时展示的页面
- */
-
-import React from 'react';
-import Empty from '@arcblock/ux/lib/Empty';
-import { translate } from '@arcblock/ux/lib/Locale/util';
-import { useMemoizedFn } from 'ahooks';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-
-import { translations } from '../libs/locales';
-import { UserCenterTab } from '../../@types';
-import { useUserFollowersContext } from '../../contexts/user-followers';
-
-function Fallback({
-  currentActiveTab,
-  isMyself,
-  isSupportFollow = false,
-  children,
-}: {
-  currentActiveTab: UserCenterTab;
-  isMyself: boolean;
-  isSupportFollow?: boolean;
-  children: React.ReactNode;
-}) {
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  const { followed } = useUserFollowersContext();
-
-  // 自己的页面或公开内容，直接显示
-  if (isMyself || !currentActiveTab?.protected || currentActiveTab?.protected === 'all') {
-    return children;
-  }
-
-  const { protected: protection } = currentActiveTab;
-
-  // 如果还没有支持 follow 关系，但是已经设置了仅粉丝可见，则直接显示内容
-  if (!isSupportFollow && protection === 'follower-only') {
-    return children;
-  }
-  // 私密内容（仅自己可见）
-  if (protection === true || protection === 'private') {
-    return <Empty>{t('underProtected')}</Empty>;
-  }
-
-  // 仅粉丝可见内容
-  if (protection === 'follower-only') {
-    return followed ? children : <Empty>{t('followersOnly')}</Empty>;
-  }
-
-  // 未知的保护类型，默认不显示
-  return <Empty>{t('underProtected')}</Empty>;
-}
-
-export default Fallback;

package/src/UserCenter/components/nft-preview.tsx

@@ -1,84 +0,0 @@
-import { Modal } from '@mui/material';
-import styled from '@emotion/styled';
-import NFTDisplay, { getNFTData } from '@arcblock/ux/lib/NFTDisplay';
-
-export interface NftInfo {
-  address: string;
-  data: Record<string, any>;
-  display: Record<string, any>;
-  issuer: string;
-}
-
-export default function NftPreview({
-  visible,
-  onClose,
-  nft,
-}: {
-  visible: boolean;
-  onClose: () => void;
-  nft: NftInfo | null;
-}) {
-  if (!visible || !nft) {
-    return null;
-  }
-
-  return (
-    <NftPreviewRoot>
-      {/* Preview Modal */}
-      <Modal open={visible} onClose={onClose}>
-        <ModalRoot onClick={onClose}>
-          <NFTDisplay data={getNFTData(nft)} address={nft.address} inset />
-        </ModalRoot>
-      </Modal>
-    </NftPreviewRoot>
-  );
-}
-
-const NftPreviewRoot = styled.div`
-  position: relative;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-
-  &:hover {
-    .mask {
-      opacity: 1;
-    }
-  }
-
-  .mask {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.6);
-    opacity: 0;
-    transition: opacity 0.2s;
-  }
-`;
-
-const ModalRoot = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  width: 100vw;
-
-  img,
-  object {
-    max-width: 90vw;
-    max-height: 75vh;
-  }
-
-  .nft-display--inset {
-    > .MuiBox-root,
-    .nft-display__loading {
-      width: 75vmin;
-      height: 75vmin;
-    }
-  }
-`;

package/src/UserCenter/components/nft.tsx

@@ -1,279 +0,0 @@
-import { useState } from 'react';
-import { Box, Pagination, Skeleton, Typography, IconButton, Stack, alpha } from '@mui/material';
-import { useCreation, useMemoizedFn, useReactive, useRequest } from 'ahooks';
-import axios from 'axios';
-import { Icon } from '@iconify/react';
-import NFTDisplay, { getNFTData } from '@arcblock/ux/lib/NFTDisplay';
-import Empty from '@arcblock/ux/lib/Empty';
-import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
-import { translate } from '@arcblock/ux/lib/Locale/util';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { joinURL } from 'ufo';
-import SocialShare from '@arcblock/ux/lib/SocialShare';
-import { User } from '../../@types';
-import { translations } from '../libs/locales';
-import NftPreview, { NftInfo } from './nft-preview';
-
-// 直接定义 SharedProps 类型
-interface SharedProps {
-  title: string;
-  url: string;
-}
-
-const maskStyle = (theme: any) => ({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  backgroundColor: 'rgba(0, 0, 0, 0.6)',
-  opacity: 0,
-  transition: 'opacity 0.3s ease-in-out',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  zIndex: 1,
-  '& .mask-item': {
-    backgroundColor: alpha(theme.palette.background.paper, 0.9),
-    color: 'text.primary',
-    '&:hover': {
-      backgroundColor: alpha(theme.palette.background.paper, 1),
-    },
-  },
-});
-
-const CHAIN_EXPLORER_URL = 'https://main.abtnetwork.io/explorer';
-
-interface ResponseData {
-  assets: NftInfo[];
-  code: string;
-  page: { cursor: string; next: boolean; total: number };
-}
-
-interface PaginationProps {
-  page: number;
-  size: number;
-}
-
-export default function Nft({ user }: { user: User }) {
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-
-  const [previewProps, setPreviewProps] = useState<{ visible: boolean; nft: NftInfo | null }>({
-    visible: false,
-    nft: null,
-  });
-
-  const [shareProps, setShareProps] = useState<{ anchorEl: HTMLElement | null; props: SharedProps | null }>({
-    anchorEl: null,
-    props: null,
-  });
-
-  const handleLinkClick = (nftAddress: string) => {
-    const targetURL = joinURL(CHAIN_EXPLORER_URL, 'assets', nftAddress);
-    window.open(targetURL, '_blank');
-  };
-
-  const handleShareClick = (element: HTMLElement, nft: NftInfo) => {
-    let domain = '';
-    if (typeof nft.data?.value === 'string') {
-      domain = JSON.parse(nft.data?.value)?.domain;
-    } else {
-      domain = nft.data?.value?.domain;
-    }
-    setShareProps({
-      anchorEl: element,
-      props: {
-        title: domain ? `Hey, I just won an NFT at the ${domain} event!` : 'Hey, I just won an NFT!',
-        url: joinURL(CHAIN_EXPLORER_URL, 'assets', nft.address),
-      },
-    });
-  };
-
-  const handleViewClick = (nft: NftInfo) => {
-    setPreviewProps({
-      visible: true,
-      nft,
-    });
-  };
-
-  const paging = useReactive<PaginationProps>({
-    page: 1,
-    size: 20,
-  });
-  const userState = useRequest<ResponseData, [PaginationProps]>(
-    async (pagination: PaginationProps = paging) => {
-      const response = await axios.get(`${WELLKNOWN_SERVICE_PATH_PREFIX}/ocap/listAssets`, {
-        params: {
-          ownerAddress: user.did,
-          ...pagination,
-        },
-      });
-      return response.data;
-    },
-    {
-      defaultParams: [paging],
-      refreshDeps: [user.did, paging],
-    }
-  );
-
-  const { loading, data } = userState;
-
-  const dataPage = data?.page ?? { cursor: 0, next: false, total: 0 };
-
-  const handlePageChange = (event: React.ChangeEvent<unknown>, value: number) => {
-    paging.page = value;
-    userState.run(paging);
-  };
-
-  const content = useCreation(() => {
-    if (loading) {
-      const skeletonItems = ['skeleton-1', 'skeleton-2', 'skeleton-3', 'skeleton-4', 'skeleton-5'].map((id) => (
-        <Skeleton key={id} variant="rectangular" width="15%" height={166} sx={{ borderRadius: 1, flexShrink: 0 }} />
-      ));
-
-      return (
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 2,
-          }}>
-          <Skeleton width="20%" />
-          <Box
-            sx={{
-              display: 'flex',
-              flexDirection: 'row',
-              gap: 2,
-              flexWrap: 'nowrap',
-            }}>
-            {skeletonItems}
-          </Box>
-        </Box>
-      );
-    }
-    return (
-      <>
-        <Typography
-          sx={{
-            color: 'grey.A700',
-            fontWeight: 600,
-            mb: 2.5,
-          }}>
-          {t('common.nft')}
-        </Typography>
-
-        {data?.assets?.length === 0 && !loading && (
-          <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%', height: '100%' }}>
-            <Empty>{t('common.noNFT')}</Empty>
-          </Box>
-        )}
-        <Box
-          className="nft-list-wrapper"
-          sx={{
-            display: 'grid',
-            justifyItems: 'start',
-            gridTemplateColumns: {
-              xs: 'repeat(2, 1fr)',
-              sm: 'repeat(3, 1fr)',
-              md: 'repeat(3, 1fr)',
-              lg: 'repeat(5, 1fr)',
-            },
-            gap: 2.5,
-          }}>
-          {data?.assets?.map((item) => (
-            <Box
-              key={item.address}
-              sx={{
-                flexShrink: 0,
-                width: { xs: 120, sm: 120, md: 120, lg: 166 },
-                height: { xs: 120, sm: 120, md: 120, lg: 166 },
-                position: 'relative',
-                borderRadius: 1,
-                overflow: 'hidden',
-                cursor: 'pointer',
-                '&:hover .mask': {
-                  opacity: 1,
-                },
-              }}>
-              <NFTDisplay
-                data={getNFTData(item)}
-                address={item.address}
-                inset
-                imageFilter={{
-                  imageFilter: 'resize',
-                  w: '500',
-                  f: 'webp',
-                }}
-              />
-              <Box className="mask" sx={maskStyle}>
-                <Stack direction="row" spacing={1}>
-                  <IconButton
-                    size="small"
-                    className="mask-item"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleLinkClick(item.address);
-                    }}>
-                    <Icon icon="tabler:link" fontSize={18} />
-                  </IconButton>
-                  <IconButton
-                    size="small"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleShareClick(e.currentTarget, item);
-                    }}
-                    className="mask-item">
-                    <Icon icon="tabler:share-2" fontSize={18} />
-                  </IconButton>
-                  <IconButton
-                    size="small"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleViewClick(item);
-                    }}
-                    className="mask-item">
-                    <Icon icon="tabler:eye" fontSize={18} />
-                  </IconButton>
-                </Stack>
-              </Box>
-            </Box>
-          ))}
-        </Box>
-        {dataPage.next || paging.page > 1 ? (
-          <Pagination
-            sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              mt: 2,
-            }}
-            page={paging.page}
-            onChange={handlePageChange}
-            count={Math.ceil(dataPage.total / paging.size)}
-            size="small"
-          />
-        ) : null}
-
-        <NftPreview
-          visible={previewProps.visible && !!previewProps.nft}
-          nft={previewProps.nft}
-          onClose={() => {
-            setPreviewProps({ visible: false, nft: null });
-          }}
-        />
-
-        <SocialShare
-          anchorEl={shareProps.anchorEl}
-          onClose={() => {
-            setShareProps({ anchorEl: null, props: null });
-          }}
-          sharedProps={shareProps.props || { title: '', url: '' }}
-        />
-      </>
-    );
-  }, [loading, dataPage, paging.page, paging.size, handlePageChange, shareProps, previewProps]);
-
-  return <Box sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 1, p: 2, mb: 5 }}>{content}</Box>;
-}