@blocklet/ui-react 3.4.15 → 3.5.0

package/src/UserSessions/libs/utils.ts

@@ -1,82 +0,0 @@
-const RESERVED_IP = 'Reserved IP';
-const IP_REGION_CACHE = 'ip-region-cache';
-
-async function getIpRegionFromIpApi(ip: string): Promise<string> {
-  const url = `https://ipapi.co/${ip}/json/`;
-  const result = await fetch(url);
-  const data = await result.json();
-
-  let region = '';
-  if (data.error) {
-    if (data.reserved) {
-      region = RESERVED_IP;
-    }
-  } else {
-    region = [data.country_name, data.region, data.city].filter(Boolean).join('/');
-  }
-  return region;
-}
-async function getIpRegionFromIpSb(ip: string): Promise<string> {
-  const url = `https://api.ip.sb/geoip/${ip}`;
-  const result = await fetch(url);
-  const data = await result.json();
-
-  let region = '';
-  if (data.error) {
-    if (data.reserved) {
-      region = RESERVED_IP;
-    }
-  } else {
-    region = [data.country, data.region, data.city].filter(Boolean).join('/');
-  }
-  return region;
-}
-
-export async function ip2Region(ip: string): Promise<string> {
-  let region = '';
-  let ipRegionCache: Record<string, string> = {};
-  try {
-    const tmpCache = localStorage.getItem(IP_REGION_CACHE);
-    if (tmpCache) {
-      ipRegionCache = JSON.parse(tmpCache);
-    }
-  } catch {
-    ipRegionCache = {};
-  }
-  if (ipRegionCache[ip]) {
-    region = ipRegionCache[ip];
-  } else {
-    try {
-      region = await getIpRegionFromIpSb(ip);
-    } catch {
-      console.warn('Fail to get ip region from ip.sb');
-    }
-
-    if (!region) {
-      try {
-        region = await getIpRegionFromIpApi(ip);
-      } catch {
-        console.warn('Fail to get ip region from ip-api.co');
-      }
-    }
-  }
-
-  if (region) {
-    // NOTICE: 为了防止 cache 过大，将在 size 超过 100 时，删除最旧的数据
-    const ipList = Object.keys(ipRegionCache);
-    if (ipList.length > 100) {
-      delete ipRegionCache[ipList[0]];
-    }
-    if (ipRegionCache[ip]) {
-      delete ipRegionCache[ip];
-    }
-    ipRegionCache[ip] = region;
-    localStorage.setItem(IP_REGION_CACHE, JSON.stringify(ipRegionCache));
-  }
-  return region;
-}
-
-// eslint-disable-next-line require-await
-export async function batchIp2Region(ips: string[]): Promise<string[]> {
-  return Promise.all(ips.map((ip) => ip2Region(ip)));
-}

package/src/blocklets.js

@@ -1,195 +0,0 @@
-import { getUTMUrl } from '@arcblock/ux/lib/withTracker/libs/utm';
-import { mapRecursive, filterRecursive, isUrl, isMailProtocol } from './utils';
-
-export const publicPath = window?.blocklet?.groupPrefix || window?.blocklet?.prefix || '/';
-
-/**
- * 格式化 theme (目前仅考虑 background)
- */
-export const formatTheme = (theme) => {
-  const formatted = { ...theme };
-  const background = theme?.background;
-  if (typeof background === 'string') {
-    formatted.background = { header: background, footer: background, default: background };
-  } else if (background && typeof background === 'object') {
-    formatted.background = {
-      header: background.header || background.default,
-      footer: background.footer || background.default,
-      default: background.default,
-    };
-  }
-  return formatted;
-};
-
-export const getLink = (link, locale = 'en', defaultLocale = 'en') => {
-  if (typeof link === 'string') {
-    // http[s] 开头的 url
-    if (isUrl(link)) {
-      const url = new URL(link);
-      url.searchParams.set('locale', locale);
-      return url.href;
-    }
-    // 如果是 mailto 协议, 直接返回
-    if (isMailProtocol(link)) {
-      return link;
-    }
-    const url = new URL(link, window.location.origin);
-    url.searchParams.set('locale', locale);
-    return url.pathname + url.search;
-  }
-  if (typeof link === 'object') {
-    return link[locale] || link[defaultLocale] || link.en;
-  }
-  return link;
-};
-
-/**
- * 获取本地化后的导航菜单
- *
- * @param {Object} params
- * @param {Array<{
- *   title?: string | Record<string, string>,
- *   description?: string | Record<string, string>,
- *   link?: string | Record<string, string>,
- *   items?: any[],
- *   [key: string]: any
- * }>} params.navigation - 导航菜单数据
- * @param {string} params.locale - 当前语言
- * @param {string} params.defaultLocale - 默认语言
- * @param {'header' | 'footer'} [params.section='header'] - 导航区域，可选
- * @returns {Array} 本地化处理后的导航数据
- */
-export const getLocalizedNavigation = ({ navigation, locale, defaultLocale, section = 'header' }) => {
-  if (!navigation?.length) {
-    return navigation;
-  }
-  const trans = (text, _locale) => {
-    if (text && typeof text === 'object') {
-      return text[_locale] || text[defaultLocale] || text.en;
-    }
-
-    return text;
-  };
-
-  return mapRecursive(
-    navigation,
-    (item) => {
-      return {
-        ...item,
-        title: trans(item.title, locale),
-        description: trans(item.description, locale),
-        // 仅对叶结点进行处理
-        link: getUTMUrl(!item.items?.length ? getLink(item.link, locale, defaultLocale) : item.link, section),
-        _rawLink: item.link,
-      };
-    },
-    'items'
-  );
-};
-
-/**
- * 格式化 navigation
- *
- * - role 统一为数组形式
- */
-export const formatNavigation = (navigation) => {
-  return mapRecursive(
-    navigation,
-    (item) => {
-      if (item.role) {
-        return {
-          ...item,
-          role: Array.isArray(item.role) ? item.role : [item.role],
-        };
-      }
-      return item;
-    },
-    'items'
-  );
-};
-
-export const parseNavigation = (navigation) => {
-  if (!navigation?.length) {
-    return null;
-  }
-
-  const formattedNav = formatNavigation(navigation);
-
-  const sections = {
-    header: [],
-    footer: [],
-    // 对应 footer social media
-    social: [],
-    // 对应 footer 底部 links
-    bottom: [],
-    // 对应 dashboard#sidenav 导航
-    dashboard: [],
-    // session manager menus
-    sessionManager: [],
-    userCenter: [],
-  };
-
-  // 对 navigation 顶层元素按 section 分组
-  formattedNav.forEach((item) => {
-    // item#section 为空时, 表示只存在于 header
-    if (!item.section) {
-      sections.header.push(item);
-      // item 出现在指定几个 section 中 (array)
-    } else if (Array.isArray(item.section)) {
-      item.section.forEach((sectionKey) => {
-        sections[sectionKey]?.push(item);
-      });
-      // item 出现在指定的一个 section 中 (string)
-    } else if (typeof item.section === 'string') {
-      sections[item.section]?.push(item);
-    }
-  });
-
-  return sections;
-};
-
-/**
- * 格式化 blocklet info 数据
- */
-export const formatBlockletInfo = (blockletInfo) => {
-  if (!blockletInfo) {
-    return null;
-  }
-  const formatted = { ...blockletInfo };
-  // theme
-  formatted.theme = formatTheme(formatted.theme);
-  // navigation
-  formatted.navigation = parseNavigation(filterValidNavItems(formatted.navigation));
-  return formatted;
-};
-
-/**
- * 过滤掉无效结点 (无 link 且子元素为空)
- */
-export const filterValidNavItems = (navigation = []) => {
-  return filterRecursive(navigation, (item, context) => !!item.link || context.filteredChildren?.length, 'items');
-};
-
-/**
- * 根据 role 筛选 nav, 规则:
- * - 如果是枝结点, 必须至少存在一个符合条件的子结点
- * - role 未定义, 符合条件
- * - role 定义且包括当前的 userRole, 符合条件
- *
- * @param {object[]} nav 导航菜单数据
- * @param {string} userRole 当前用户 role
- * @returns 符合 role 权限的导航菜单数据
- */
-export const filterNavByRole = (nav, userRole) => {
-  return filterRecursive(
-    nav,
-    (item, context) => {
-      const isRoleMatched = !item.role || (userRole && (item.role.includes(userRole) || item.role.includes('guest')));
-      if (!context.isLeaf) {
-        return isRoleMatched && context.filteredChildren?.length;
-      }
-      return isRoleMatched;
-    },
-    'items'
-  );
-};

package/src/common/domain-warning.jsx

@@ -1,178 +0,0 @@
-import { useMemo, useState, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { Box, Typography, Button, Dialog, DialogActions, DialogContent } from '@mui/material';
-import { useMemoizedFn } from 'ahooks';
-import { translate } from '@arcblock/ux/lib/Locale/util';
-import { joinURL } from 'ufo';
-
-import useMobile from '../hooks/use-mobile';
-
-const isAdmin = ['admin', 'owner'];
-
-const isIpEcho = (hostname) => {
-  return hostname.endsWith('.ip.abtnet.io');
-};
-
-const isDidDomain = (hostname) => {
-  return hostname.endsWith('.did.abtnet.io');
-};
-
-const translations = {
-  en: {
-    guest: {
-      title: 'Notice: You are using a temporary domain',
-      description:
-        'You are accessing this site through a temporary domain. For a better experience, please contact the site administrator to configure a custom domain. Using a custom domain not only makes access more convenient but also ensures your access is more secure.',
-    },
-    owner: {
-      title: 'Enhance Your Website Security',
-      description: 'Dear administrator, we recommend configuring your custom domain immediately, which will:',
-      benefits1: 'Automatically obtain HTTPS certificates to ensure secure data transmission',
-      benefits2: 'Create an exclusive brand image and increase website credibility',
-      benefits3: 'Get a shorter, more memorable access address',
-      benefits4: 'Provide visitors with a more professional experience',
-      benefits5: 'Domain configuration takes just minutes to complete, taking your website to the next level!',
-    },
-    skip: 'Remind Me Later',
-    bindDomain: 'Configure Domain',
-  },
-  zh: {
-    guest: {
-      title: '温馨提示：当前使用的是临时域名',
-      description:
-        '您正在通过临时域名访问本站点。为了获得更好的访问体验，请联系站点管理员配置自定义域名。使用自定义域名不仅访问更便捷，还能确保您的访问更加安全。',
-    },
-    owner: {
-      title: '提升网站安全性与专业度',
-      description: '尊敬的管理员，我们建议您尽快配置自定义域名，这样可以：',
-      benefits1: '自动获取 HTTPS 证书，确保数据传输安全',
-      benefits2: '打造专属品牌形象，提升网站可信度',
-      benefits3: '获得更简短、易记的访问地址',
-      benefits4: '为访客提供更专业的访问体验',
-      benefits5: '只需几分钟即可完成域名配置，全面提升您的网站品质！',
-    },
-    skip: '稍后提醒',
-    bindDomain: '配置域名',
-  },
-};
-
-const ONE_MONTH = 1000 * 60 * 60 * 24 * 30;
-
-const DASHBOARD_DOMAIN = '.well-known/service/admin/domains';
-
-export default function DomainWarning({ locale = 'en', session = {} }) {
-  const user = session?.user;
-  const isMobile = useMobile();
-
-  const [open, setOpen] = useState(() => {
-    const skip = window.localStorage.getItem('domain-warning-skip');
-    if (!skip) return true;
-
-    const now = +new Date();
-    const skipTime = +new Date(skip);
-    return now - skipTime > ONE_MONTH;
-  });
-
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-
-  const host = useMemo(() => {
-    try {
-      const { hostname } = new URL(window.location.href);
-      return hostname;
-    } catch (error) {
-      return '';
-    }
-  }, []);
-
-  const benefits = useMemo(
-    () => [
-      t('owner.benefits1'),
-      t('owner.benefits2'),
-      t('owner.benefits3'),
-      t('owner.benefits4'),
-      t('owner.benefits5'),
-    ],
-    [t]
-  );
-
-  const handleSkip = useCallback(() => {
-    window.localStorage.setItem('domain-warning-skip', new Date().toISOString());
-    setOpen(false);
-  }, []);
-
-  const handleDomainConfig = useCallback(() => {
-    const adminUrl = joinURL(window.location.origin, DASHBOARD_DOMAIN);
-    if (adminUrl.startsWith('http')) {
-      window.open(adminUrl, '_blank');
-    }
-    setOpen(false);
-  }, []);
-
-  const isOwner = user?.role && isAdmin.includes(user.role);
-
-  if (window.location.href.includes(DASHBOARD_DOMAIN)) {
-    return null;
-  }
-
-  if (isMobile) {
-    return null;
-  }
-
-  if (!isIpEcho(host) && !isDidDomain(host)) {
-    return null;
-  }
-
-  return (
-    <Dialog open={open} disableEscapeKeyDown fullWidth maxWidth="sm" onClose={() => setOpen(false)}>
-      <DialogContent sx={{ padding: '20px !important' }}>
-        <Typography
-          sx={{
-            fontSize: '20px',
-            fontWeight: '500',
-          }}>
-          {isOwner ? t('owner.title') : t('guest.title')}
-        </Typography>
-        <Typography
-          sx={{
-            marginTop: '20px',
-            fontSize: '14px',
-            color: 'text.secondary',
-          }}>
-          {isOwner ? t('owner.description') : t('guest.description')}
-        </Typography>
-
-        {isOwner && (
-          <Box component="ul">
-            {benefits.map((benefit) => (
-              <Typography
-                component="li"
-                key={benefit}
-                sx={{
-                  fontSize: '14px',
-                  color: 'text.secondary',
-                }}>
-                {benefit}
-              </Typography>
-            ))}
-          </Box>
-        )}
-      </DialogContent>
-      <DialogActions sx={{ px: '12px !important' }}>
-        <Button onClick={handleSkip}>{t('skip')}</Button>
-
-        {isOwner && (
-          <Button variant="contained" onClick={handleDomainConfig}>
-            {t('bindDomain')}
-          </Button>
-        )}
-      </DialogActions>
-    </Dialog>
-  );
-}
-
-DomainWarning.propTypes = {
-  locale: PropTypes.string,
-  session: PropTypes.object,
-};

package/src/common/header-addons.jsx

@@ -1,119 +0,0 @@
-import 'iconify-icon';
-
-import PropTypes from 'prop-types';
-import { createElement, use } from 'react';
-
-// FIXME: 直接从 react 中 import  Fragment 可能会在 vite 下出错，先暂时从 react/jsx-runtime 导入 Fragment 来跳过这个问题
-import { SessionContext } from '@arcblock/did-connect-react/lib/Session';
-import ThemeModeToggle from '@arcblock/ux/lib/Config/theme-mode-toggle';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import LocaleSelector from '@arcblock/ux/lib/Locale/selector';
-import SessionBlocklet from '@arcblock/ux/lib/SessionBlocklet';
-import SessionUser from '@arcblock/ux/lib/SessionUser';
-import { Fragment } from 'react/jsx-runtime';
-
-import { filterNavByRole, getLocalizedNavigation } from '../blocklets';
-import { SessionManagerProps } from '../types';
-import DomainWarning from './domain-warning';
-import NotificationAddon from './notification-addon';
-
-const hasNotification = () => {
-  const navigations = window?.blocklet?.navigation ?? [];
-  return !!navigations.find((n) => n.id === '/userCenter/notification');
-};
-
-// eslint-disable-next-line no-shadow
-export default function HeaderAddons({
-  formattedBlocklet,
-  addons = null,
-  showDomainWarningDialog = true,
-  sessionManagerProps = { showRole: true },
-}) {
-  const sessionCtx = use(SessionContext);
-  const { locale, languages, defaultLocale } = useLocaleContext() || {};
-  const { enableConnect = true, enableLocale = true } = formattedBlocklet;
-  const authenticated = !!sessionCtx?.session?.user;
-  let localizedNav =
-    getLocalizedNavigation({
-      navigation: formattedBlocklet?.navigation?.sessionManager,
-      locale,
-      defaultLocale,
-    }) || [];
-  // 根据 role 筛选 nav 数据
-  localizedNav = filterNavByRole(localizedNav, sessionCtx?.session?.user?.role);
-
-  const renderAddons = () => {
-    // 不关心内置的 session manager 和 locale selector, 直接覆盖 UX Header 的 addons
-    if (addons && typeof addons !== 'function') {
-      return Array.isArray(addons) ? addons : [addons];
-    }
-    let addonsArray = [];
-
-    if (hasNotification()) {
-      addonsArray.push(<NotificationAddon key="notification-addon" session={sessionCtx.session} />);
-    }
-
-    // 启用了多语言，且检测到了 locale context，且有多种语言可以切换
-    if (enableLocale && locale && languages.length > 1) {
-      addonsArray.push(<LocaleSelector key="locale-selector" showText={false} />);
-    }
-
-    // 切换明暗主题
-    addonsArray.push(<ThemeModeToggle key="theme-mode-toggle" />);
-
-    // 启用了连接钱包并且检测到了 session context
-    if (enableConnect && sessionCtx) {
-      const menu = [];
-      if (authenticated) {
-        const navList = localizedNav ? localizedNav.slice(0, 5) : [];
-        navList.forEach((x) => {
-          menu.push({
-            label: x.title,
-            icon: x.icon ? <iconify-icon icon={x.icon} height={24} style={{ marginRight: 8 }} /> : null,
-            component: 'a',
-            href: x.link,
-            key: x.link,
-          });
-        });
-      }
-
-      addonsArray.push(<SessionBlocklet key="session-blocklet" session={sessionCtx.session} locale={locale} />);
-
-      addonsArray.push(
-        <SessionUser
-          key="session-user"
-          session={sessionCtx.session}
-          locale={locale}
-          menu={menu}
-          showRole
-          {...sessionManagerProps}
-        />
-      );
-    }
-
-    if (typeof addons === 'function') {
-      addonsArray = addons(addonsArray) || [];
-    }
-
-    return addonsArray;
-  };
-
-  const renderedAddons = renderAddons();
-  const nodes = Array.isArray(renderedAddons) ? renderedAddons : [renderedAddons];
-  const mergedNodes = [
-    showDomainWarningDialog ? <DomainWarning session={sessionCtx?.session} locale={locale} /> : null,
-    ...nodes,
-  ].filter(Boolean);
-
-  return createElement(Fragment, null, ...mergedNodes);
-}
-
-HeaderAddons.propTypes = {
-  formattedBlocklet: PropTypes.object.isRequired,
-  // 需要考虑 定制的 addons 与内置的 连接钱包/选择语言 addons 共存的情况
-  // - PropTypes.func: 可以把自定义 addons 插在 session-manager 或 locale-selector (如果存在的话) 前/中/后
-  // - PropTypes.node: 将 addons 原样传给 UX Header 组件
-  addons: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-  sessionManagerProps: SessionManagerProps,
-  showDomainWarningDialog: PropTypes.bool,
-};

package/src/common/link-blocker.jsx

@@ -1,20 +0,0 @@
-function hasParentOfType(node, type) {
-  if (!node) return false;
-  if (type === node.nodeName) return true;
-  return hasParentOfType(node.parentNode, type);
-}
-
-/**
- * 适用于 header/footer/dashboard "preview mode", 阻止内部组件中所有 link 的默认点击行为
- */
-function LinkBlocker({ ...rest }) {
-  const handleOnClick = (e) => {
-    const isInsideLink = hasParentOfType(e.target, 'A');
-    if (isInsideLink) {
-      e.preventDefault();
-    }
-  };
-  return <div onClick={handleOnClick} {...rest} />;
-}
-
-export default LinkBlocker;