@blocklet/ui-react 3.1.26 → 3.1.28

package/lib/utils.js

@@ -1,61 +1,62 @@
 import H from "semver";
-const d = (n, r, e = "children") => n.map((t) => Array.isArray(t[e]) ? r({
+const d = (e, r, n = "children") => e.map((t) => Array.isArray(t[n]) ? r({
   ...t,
-  [e]: d(t[e], r, e)
-}) : r(t)), C = (n, r = "children") => {
-  const e = [];
-  return d(n, (t) => e.push(t), r), e;
-}, S = (n, r = "children") => {
-  let e = 0;
-  return d(n, () => e++, r), e;
-}, R = (n, r, e = "children") => n.map((t) => ({ ...t })).filter((t) => {
-  const s = t[e];
+  [n]: d(t[n], r, n)
+}) : r(t)), C = (e, r = "children") => {
+  const n = [];
+  return d(e, (t) => n.push(t), r), n;
+}, P = (e, r = "children") => {
+  let n = 0;
+  return d(e, () => n++, r), n;
+}, R = (e, r, n = "children") => e.map((t) => ({ ...t })).filter((t) => {
+  const s = t[n];
   if (Array.isArray(s)) {
-    const o = R(s, r, e);
-    t[e] = o?.length ? o : void 0;
+    const o = R(s, r, n);
+    t[n] = o?.length ? o : void 0;
   }
-  const c = { filteredChildren: t[e], isLeaf: !s?.length };
+  const c = { filteredChildren: t[n], isLeaf: !s?.length };
   return r(t, c);
-}), x = (n) => /^https?:\/\//.test(n), P = (n) => /^[\w-]+:[\w-]+$/.test(n), V = (n) => {
-  if (!n || !n?.startsWith("/"))
+}), S = (e) => /^https?:\/\//.test(e), x = (e) => /^mailto:/i.test(e.trim()), W = (e) => /^[\w-]+:[\w-]+$/.test(e), V = (e) => {
+  if (!e || !e?.startsWith("/"))
     return !1;
-  const r = (s) => s.endsWith("/") ? s : `${s}/`, e = r(window.location.pathname), t = r(new URL(n, window.location.origin).pathname);
-  return e.startsWith(t);
-}, W = (n = []) => {
-  const r = n.map((t, s) => ({ path: t, index: s })).filter((t) => V(t.path));
+  const r = (s) => s.endsWith("/") ? s : `${s}/`, n = r(window.location.pathname), t = r(new URL(e, window.location.origin).pathname);
+  return n.startsWith(t);
+}, k = (e = []) => {
+  const r = e.map((t, s) => ({ path: t, index: s })).filter((t) => V(t.path));
   return r?.length ? r.slice(1).reduce((t, s) => t.path.length >= s.path.length ? t : s, r[0]).index : -1;
-}, k = (n, r = {}) => {
-  const { columns: e = 1, breakInside: t = !1, groupHeight: s = 48, itemHeight: c = 24, childrenKey: o = "items" } = r, p = n.reduce((u, g) => u + s + (g[o]?.length || 0) * c, 0), l = Math.ceil(p / e), h = [[]];
+}, v = (e, r = {}) => {
+  const { columns: n = 1, breakInside: t = !1, groupHeight: s = 48, itemHeight: c = 24, childrenKey: o = "items" } = r, p = e.reduce((u, g) => u + s + (g[o]?.length || 0) * c, 0), h = Math.ceil(p / n), l = [[]];
   let i = 0, a = 0;
-  const m = l * 0.2, f = (u) => a > l - m && i < e - 1 && a + u > l + m;
-  return n.forEach((u) => {
+  const m = h * 0.2, f = (u) => a > h - m && i < n - 1 && a + u > h + m;
+  return e.forEach((u) => {
     const g = s + (u[o]?.length || 0) * c;
-    t && f(s) && (i++, a = 0, h[i] = []), !t && a > 0 && f(g) && (i++, a = 0, h[i] = []), h[i].push({
+    t && f(s) && (i++, a = 0, l[i] = []), !t && a > 0 && f(g) && (i++, a = 0, l[i] = []), l[i].push({
       ...u,
       group: !0
     }), a += s, u[o] && u[o].forEach((w) => {
-      t && f(c) && (i++, a = 0, h[i] = []), h[i].push({
+      t && f(c) && (i++, a = 0, l[i] = []), l[i].push({
         ...w,
         group: !1
       }), a += c;
     });
-  }), h;
-}, v = (n, r) => {
-  const e = (c) => {
+  }), l;
+}, E = (e, r) => {
+  const n = (c) => {
     const o = c.match(/^(\d+\.\d+\.\d+(?:-[^-]+?-\d{8}))/);
     return o ? o[1] : c;
-  }, t = e(n), s = e(r);
-  return t === s && n !== r ? !1 : H.gte(t, s);
+  }, t = n(e), s = n(r);
+  return t === s && e !== r ? !1 : H.gte(t, s);
 };
 export {
-  v as compareVersions,
-  S as countRecursive,
+  E as compareVersions,
+  P as countRecursive,
   R as filterRecursive,
   C as flatRecursive,
-  P as isIconifyString,
-  x as isUrl,
+  W as isIconifyString,
+  x as isMailProtocol,
+  S as isUrl,
   d as mapRecursive,
   V as matchPath,
-  W as matchPaths,
-  k as splitNavColumns
+  k as matchPaths,
+  v as splitNavColumns
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "3.1.26",
+  "version": "3.1.28",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -35,9 +35,9 @@
   "dependencies": {
     "@abtnode/constant": "^1.16.48",
     "@abtnode/util": "^1.16.48",
-    "@arcblock/bridge": "3.1.26",
-    "@arcblock/icons": "3.1.26",
-    "@arcblock/react-hooks": "3.1.26",
+    "@arcblock/bridge": "3.1.28",
+    "@arcblock/icons": "3.1.28",
+    "@arcblock/react-hooks": "3.1.28",
     "@arcblock/ws": "^1.21.3",
     "@blocklet/constant": "^1.16.48",
     "@blocklet/did-space-react": "^1.1.16",
@@ -84,7 +84,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@arcblock/did-connect-react": "3.1.26",
+    "@arcblock/did-connect-react": "3.1.28",
     "@types/dompurify": "^3.2.0",
     "@types/ua-parser-js": "^0.7.39",
     "@types/validator": "^13.15.2",
@@ -92,5 +92,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "2c9fa3385e138df1e652ef111353d1986e37b360"
+  "gitHead": "8a62be8796c0ab9129b24a08ecc051d1ac23e0de"
 }

package/src/@types/index.ts

@@ -130,7 +130,7 @@ export type UserCenterTab = {
   value: string;
   label: string;
   url: string;
-  protected: boolean;
+  protected: boolean | string;
   icon?: string;
   isPrivate?: boolean; // 如果为 true 则不应该出现在隐私设置中
 };

package/src/Footer/links.jsx

@@ -9,7 +9,7 @@ import clsx from 'clsx';
 import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
 import Icon from '../Icon';
 import useMobile from '../hooks/use-mobile';
-import { splitNavColumns } from '../utils';
+import { splitNavColumns, isMailProtocol } from '../utils';
 
 /**
  * footer 中的 links (支持分组, 最多支持 2 级)
@@ -28,14 +28,17 @@ export default function Links({ links = [], flowLayout = false, columns, ...rest
       result = render({ label, link, props });
     } else if (link && isString(link)) {
       const isExternal = link.startsWith('http') || link.startsWith('//');
+      const isMail = isMailProtocol(link);
+
+      const otherProps = isMail
+        ? {}
+        : {
+            target: isExternal ? '_blank' : '_self',
+            rel: isExternal ? 'noreferrer noopener' : undefined,
+          };
 
       result = (
-        <a
-          href={link}
-          aria-label={`Footer link for ${label}`}
-          target={isExternal ? '_blank' : '_self'}
-          rel={isExternal ? 'noreferrer noopener' : undefined}
-          {...props}>
+        <a href={link} aria-label={`Footer link for ${label}`} {...otherProps} {...props}>
           {label}
         </a>
       );

package/src/UserCenter/components/fallback.tsx

@@ -0,0 +1,51 @@
+/**
+ * 用户中心 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,
+  children,
+}: {
+  currentActiveTab: UserCenterTab;
+  isMyself: 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;
+
+  // 私密内容（仅自己可见）
+  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/user-center.tsx

@@ -35,10 +35,13 @@ import useMobile from '../../hooks/use-mobile';
 import { ConfigUserSpaceProvider } from '../../contexts/config-user-space';
 import DidSpace from './storage';
 import Nft from './nft';
+import { UserFollowersProvider } from '../../contexts/user-followers';
+import Fallback from './fallback';
 
 const nftsLink = joinURL(PROFILE_URL, '/nfts');
 const settingsLink = joinURL(PROFILE_URL, '/settings');
 const didSpacesLink = joinURL(PROFILE_URL, '/did-spaces');
+const userFollowersLink = joinURL(PROFILE_URL, '/user-followers');
 
 interface NavigationTabProps {
   label: string;
@@ -217,7 +220,14 @@ export default function UserCenter({
       value: nftsLink,
       url: getLink(nftsLink, locale),
     };
-    let tabs: NavigationTabProps[] = [nftTab];
+    const userFollowersTab = {
+      label: t('userFollowers'),
+      protected: false,
+      isPrivate: false,
+      value: userFollowersLink,
+      url: getLink(userFollowersLink, locale),
+    };
+    let tabs: NavigationTabProps[] = [nftTab, userFollowersTab];
     if (isMyself) {
       tabs = [
         nftTab,
@@ -235,6 +245,7 @@ export default function UserCenter({
           value: didSpacesLink,
           url: getLink(didSpacesLink, locale),
         },
+        userFollowersTab,
       ];
     }
     return tabs;
@@ -254,6 +265,7 @@ export default function UserCenter({
           url: x.link || x.url,
           protected: privacyState?.data?.[value] ?? false,
           isPrivate: x.isPrivate || x.private || (x?._rawLink?.includes('/customer') ?? false), // FIXME: HACK: 隐藏 /customer 菜单, 需要一个通用的解决方案，在嵌入的时候就决定是否是私有的
+          followersOnly: x.component === 'did-comments', // 是否开启仅粉丝可查看的功能，目前只对 discuss kit 开启
           // icon: x.icon,
         };
       })
@@ -429,16 +441,10 @@ export default function UserCenter({
     }
 
     return (
-      // eslint-disable-next-line react/jsx-no-useless-fragment
       <Box sx={{ flex: 1 }}>
-        {currentActiveTab?.protected && !isMyself ? (
-          <Box>
-            <Empty>{t('underProtected')}</Empty>
-          </Box>
-        ) : (
-          // eslint-disable-next-line react/jsx-no-useless-fragment
-          <>{children ? <Box {...contentProps}>{renderChildrenWithProps(children)}</Box> : <>{renderDefaultTab}</>}</>
-        )}
+        <Fallback currentActiveTab={currentActiveTab as UserCenterTab} isMyself={isMyself}>
+          {children ? <Box {...contentProps}>{renderChildrenWithProps(children)}</Box> : renderDefaultTab}
+        </Fallback>
       </Box>
     );
   }, [privacyState, currentActiveTab, isMyself, children, contentProps, renderDefaultTab, locale]);
@@ -681,7 +687,9 @@ export default function UserCenter({
         </Helmet>
         <Header style={{ display: 'none' }} />
         <Main>
-          {content}
+          <UserFollowersProvider isMySelf={isMyself} userDid={userState.data?.did ?? ''}>
+            {content}
+          </UserFollowersProvider>
           {confirmHolder}
         </Main>
       </Box>
@@ -700,7 +708,9 @@ export default function UserCenter({
       </Helmet>
       <Header bordered {...headerProps} maxWidth="100%" />
       <Main>
-        {content}
+        <UserFollowersProvider isMySelf={isMyself} userDid={userState.data?.did ?? ''}>
+          {content}
+        </UserFollowersProvider>
         {confirmHolder}
       </Main>
       {hideFooter ? null : (

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

@@ -0,0 +1,42 @@
+import { useMemo } from 'react';
+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 { joinURL } from 'ufo';
+import { User } from '../../../../@types';
+
+import { translations } from '../../../libs/locales';
+
+const getDiscussKitMountPoint = () => {
+  const { componentMountPoints = [] } = window.blocklet || {};
+  const component = componentMountPoints.find((c: any) => c.name === 'did-comments');
+  return component?.mountPoint;
+};
+
+function Chat({ user }: { user: User }) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  // 获取 discuss kit 的挂载点
+  const discussKitMountPoint = useMemo(() => getDiscussKitMountPoint(), []);
+
+  const onNavigateToChat = useMemoizedFn(() => {
+    window.open(joinURL(discussKitMountPoint, `/chat/dm/${user?.did}`), '_blank');
+  });
+
+  if (!discussKitMountPoint) {
+    return null;
+  }
+
+  return (
+    <Button fullWidth variant="outlined" color="inherit" onClick={onNavigateToChat}>
+      <i className="iconify" data-icon="mi:message-alt" style={{ fontSize: '15px', marginRight: '4px' }} />
+      {t('profile.chat')}
+    </Button>
+  );
+}
+
+export default Chat;

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

@@ -0,0 +1,30 @@
+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 NotificationsIcon from '@mui/icons-material/Notifications';
+import NotificationsOffIcon from '@mui/icons-material/NotificationsOff';
+
+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 ? (
+        <NotificationsOffIcon sx={{ fontSize: '14px', marginRight: '4px' }} />
+      ) : (
+        <NotificationsIcon sx={{ fontSize: '14px', marginRight: '4px' }} />
+      )}
+      {followed ? t('profile.unfollow') : t('profile.follow')}
+    </Button>
+  );
+}
+
+export default Follow;

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

@@ -0,0 +1,17 @@
+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/user-basic-info.tsx

@@ -24,6 +24,7 @@ import UserMetadataComponent from './metadata';
 import UserStatus from './user-status';
 import UserInfo from './user-info';
 import { client } from '../../../libs/client';
+import SocialActions from './social-actions';
 
 export default function UserBasicInfo({
   user,
@@ -225,6 +226,11 @@ export default function UserBasicInfo({
           <DID did={user.did} showQrcode copyable compact={!showFullDid} responsive={!showFullDid} locale={locale} />
         </Box>
       </Box>
+      {!isMyself ? (
+        <Box sx={{ mt: 2 }}>
+          <SocialActions user={user} />
+        </Box>
+      ) : null}
       <UserMetadataComponent isMobile={isMobile} isMyself={isMyself} user={user} onSave={onSave} />
       {isMyself ? (
         <>

package/src/UserCenter/libs/locales.ts

@@ -25,10 +25,12 @@ export const translations = {
     emptyField: '未填写',
     emptyContent: '暂无内容',
     underProtected: '用户已设置隐私保护',
+    followersOnly: '用户已设置仅粉丝可见，关注用户后可查看',
     noUserFound: '未找到指定的用户',
     notificationManagement: '通知管理',
     privacyManagement: '隐私管理',
     storageManagement: 'DID Spaces',
+    userFollowers: '关注 & 粉丝',
     webhook: {
       url: '自定义URL',
       slack: 'Slack',
@@ -161,6 +163,11 @@ export const translations = {
         invalidPostalCode: '邮政编码格式不正确',
       },
       maxLinkCount: '最多可添加 {count} 个社交链接',
+      chat: '聊天',
+      follow: '关注',
+      unfollow: '取消关注',
+      follow_success: '关注成功',
+      unfollow_success: '取消关注成功',
     },
     destroyMyself: {
       title: '删除账户',
@@ -203,8 +210,10 @@ export const translations = {
     notificationManagement: 'Notifications',
     privacyManagement: 'Privacy',
     storageManagement: 'DID Spaces',
+    userFollowers: 'Following & Followers',
     emptyContent: 'Empty',
     underProtected: 'This page has protected privacy',
+    followersOnly: 'This page is only visible to followers, follow the user to view',
     noUserFound: 'No user found',
     webhook: {
       url: 'Custom url',
@@ -340,6 +349,11 @@ export const translations = {
         invalidPostalCode: 'Postal code is invalid',
       },
       maxLinkCount: 'Up to {count} social links can be added',
+      chat: 'Chat',
+      follow: 'Follow',
+      unfollow: 'Unfollow',
+      follow_success: 'Follow successfully',
+      unfollow_success: 'Unfollow successfully',
     },
     destroyMyself: {
       title: 'Delete Account',

package/src/blocklets.js

@@ -1,4 +1,4 @@
-import { mapRecursive, filterRecursive, isUrl } from './utils';
+import { mapRecursive, filterRecursive, isUrl, isMailProtocol } from './utils';
 
 export const publicPath = window?.blocklet?.groupPrefix || window?.blocklet?.prefix || '/';
 
@@ -28,6 +28,10 @@ export const getLink = (link, locale = 'en') => {
       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;

package/src/contexts/user-followers.tsx

@@ -0,0 +1,54 @@
+import { createContext, useContext } from 'react';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { useMemoizedFn } from 'ahooks';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+
+import useFollow from '../hooks/use-follow';
+import { translations } from '../UserCenter/libs/locales';
+
+const UserFollowersContext = createContext<UserFollowersContextType>({
+  followed: false,
+  followUser: () => {},
+  unfollowUser: () => {},
+});
+const { Provider } = UserFollowersContext;
+
+type UserFollowersContextType = {
+  followed: boolean;
+  followUser: () => void;
+  unfollowUser: () => void;
+};
+
+function UserFollowersProvider({
+  isMySelf,
+  userDid,
+  children,
+}: {
+  children: React.ReactNode;
+  isMySelf: boolean;
+  userDid: string;
+}) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  const { followed, followUser, unfollowUser } = useFollow({ userDid, t, isMySelf });
+
+  return (
+    <Provider
+      value={{
+        followed,
+        followUser,
+        unfollowUser,
+      }}>
+      {children}
+    </Provider>
+  );
+}
+
+function useUserFollowersContext() {
+  const res = useContext(UserFollowersContext);
+  return res;
+}
+
+export { UserFollowersContext, useUserFollowersContext, UserFollowersProvider };

package/src/hooks/use-follow.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useState } from 'react';
+import { useMemoizedFn } from 'ahooks';
+import Toast from '@arcblock/ux/lib/Toast';
+
+import type { AxiosError } from 'axios';
+import { client } from '../libs/client';
+import { formatAxiosError } from '../UserCenter/libs/utils';
+
+/**
+ * 登录用户与当前用户（userDid）的关注关系
+ */
+export default function useFollow({
+  userDid,
+  t,
+  isMySelf,
+}: {
+  userDid: string;
+  t: (k: string) => string;
+  isMySelf: boolean;
+}) {
+  const [followed, setFollowed] = useState(false);
+
+  const isFollowingUser = useMemoizedFn(async () => {
+    try {
+      if (isMySelf) {
+        setFollowed(true);
+        return;
+      }
+      const res = await client.user.isFollowingUser({ userDid });
+      setFollowed(res);
+    } catch (error) {
+      console.error(error);
+    }
+  });
+
+  const followUser = useMemoizedFn(async (followUserDid: string = userDid) => {
+    if (isMySelf && followUserDid === userDid) {
+      return;
+    }
+    try {
+      await client.user.followUser({ userDid: followUserDid });
+      Toast.success(t('profile.follow_success'));
+      isFollowingUser();
+    } catch (error) {
+      console.error(error);
+      Toast.error(formatAxiosError(error as AxiosError));
+    }
+  });
+  const unfollowUser = useMemoizedFn(async (unfollowUserDid: string = userDid) => {
+    if (isMySelf && unfollowUserDid === userDid) {
+      return;
+    }
+    try {
+      await client.user.unfollowUser({ userDid: unfollowUserDid });
+      Toast.success(t('profile.unfollow_success'));
+      isFollowingUser();
+    } catch (error) {
+      console.error(error);
+      Toast.error(formatAxiosError(error as AxiosError));
+    }
+  });
+
+  useEffect(() => {
+    if (userDid && !isMySelf) {
+      isFollowingUser();
+    }
+  }, [isFollowingUser, userDid, isMySelf]);
+
+  return {
+    followed,
+    followUser,
+    unfollowUser,
+  };
+}

package/src/utils.js

@@ -47,6 +47,11 @@ export const isUrl = (str) => {
   return /^https?:\/\//.test(str);
 };
 
+// 链接是否是 mailto 协议
+export const isMailProtocol = (str) => {
+  return /^mailto:/i.test(str.trim());
+};
+
 /**
  * @description 检测是否是 Iconify 格式的字符串
  * @deprecated