@blocklet/ui-react 3.1.25 → 3.1.27

package/lib/UserCenter/components/user-info/social-actions/follow.js

@@ -0,0 +1,19 @@
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { Button as s } from "@mui/material";
+import { useMemoizedFn as p } from "ahooks";
+import { translate as a } from "@arcblock/ux/lib/Locale/util";
+import { useLocaleContext as c } from "@arcblock/ux/lib/Locale/context";
+import u from "@mui/icons-material/Notifications";
+import x from "@mui/icons-material/NotificationsOff";
+import { translations as w } from "../../../libs/locales.js";
+import { useUserFollowersContext as d } from "../../../../contexts/user-followers.js";
+function R() {
+  const { locale: i } = c(), t = p((l, f = {}) => a(w, l, i, "en", f)), { followed: o, followUser: n, unfollowUser: e } = d();
+  return /* @__PURE__ */ m(s, { variant: "contained", onClick: () => o ? e() : n(), fullWidth: !0, children: [
+    o ? /* @__PURE__ */ r(x, { sx: { fontSize: "14px", marginRight: "4px" } }) : /* @__PURE__ */ r(u, { sx: { fontSize: "14px", marginRight: "4px" } }),
+    t(o ? "profile.unfollow" : "profile.follow")
+  ] });
+}
+export {
+  R as default
+};

package/lib/UserCenter/components/user-info/social-actions/index.d.ts

@@ -0,0 +1,5 @@
+import { User } from '../../../../@types';
+declare function SocialActions({ user }: {
+    user: User;
+}): import("react/jsx-runtime").JSX.Element;
+export default SocialActions;

package/lib/UserCenter/components/user-info/social-actions/index.js

@@ -0,0 +1,13 @@
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { Box as i } from "@mui/material";
+import m from "./chat.js";
+import f from "./follow.js";
+function x({ user: r }) {
+  return /* @__PURE__ */ t(i, { sx: { display: "flex", gap: 1 }, children: [
+    /* @__PURE__ */ o(m, { user: r }),
+    /* @__PURE__ */ o(f, {})
+  ] });
+}
+export {
+  x as default
+};

package/lib/UserCenter/components/user-info/user-basic-info.js

@@ -1,12 +1,12 @@
 import { jsxs as c, jsx as r, Fragment as E } from "react/jsx-runtime";
-import { Box as l, Typography as y, Divider as B, IconButton as N, Collapse as T } from "@mui/material";
+import { Box as l, Typography as S, Divider as B, IconButton as N, Collapse as T } from "@mui/material";
 import F from "@arcblock/ux/lib/Avatar";
 import K from "@arcblock/ux/lib/DID";
 import { useMemoizedFn as W } from "ahooks";
 import { translate as O } from "@arcblock/ux/lib/Locale/util";
 import { useLocaleContext as Q } from "@arcblock/ux/lib/Locale/context";
 import V from "lodash/noop";
-import { useState as S, useEffect as U } from "react";
+import { useState as U, useEffect as y } from "react";
 import C from "@arcblock/ux/lib/Toast";
 import { parseURL as Y, joinURL as $ } from "ufo";
 import { KeyboardArrowUp as q, KeyboardArrowDown as G } from "@mui/icons-material";
@@ -18,29 +18,30 @@ import P from "./metadata.js";
 import M from "./user-status.js";
 import tt from "./user-info.js";
 import { client as j } from "../../../libs/client.js";
-function St({
+import rt from "./social-actions/index.js";
+function Ct({
   user: t,
-  isMyself: a = !0,
+  isMyself: e = !0,
   showFullDid: f = !0,
   switchPassport: I,
   switchProfile: R,
-  isMobile: o = !1,
+  isMobile: a = !1,
   onlyProfile: s = !1,
   refreshProfile: u,
   ...m
 }) {
-  const { locale: x } = Q(), [h, g] = S(void 0), w = W((n, e = {}) => O(H, n, x, "en", e)), [d, v] = S(!o || s);
-  U(() => {
+  const { locale: x } = Q(), [h, g] = U(void 0), w = W((n, o = {}) => O(H, n, x, "en", o)), [d, v] = U(!a || s);
+  y(() => {
     g(t?.metadata?.status);
-  }, [t]), U(() => {
-    v(!o || s);
-  }, [o, s]);
+  }, [t]), y(() => {
+    v(!a || s);
+  }, [a, s]);
   const A = async (n) => {
-    if (a)
+    if (e)
       try {
         if (n) {
-          const e = X(n);
-          n.dateRange = e.length > 0 ? e : h?.dateRange ?? [];
+          const o = X(n);
+          n.dateRange = o.length > 0 ? o : h?.dateRange ?? [];
         }
         g(n), await j.user.saveProfile({
           // @ts-ignore
@@ -49,8 +50,8 @@ function St({
             status: n || {}
           }
         }), u();
-      } catch (e) {
-        console.error(e), C.error(z(e));
+      } catch (o) {
+        console.error(o), C.error(z(o));
       }
   }, b = () => {
     v(!d);
@@ -58,11 +59,11 @@ function St({
   if (!t)
     return null;
   const D = async (n) => {
-    if (!a)
+    if (!e)
       return;
-    const { metadata: e, address: L } = n;
+    const { metadata: o, address: L } = n;
     try {
-      const p = e?.links?.map((i) => {
+      const p = o?.links?.map((i) => {
         if (!i.url || !Z(i.url)) return null;
         try {
           return Y(i.url).protocol || (i.url = $("https://", i.url)), i;
@@ -70,7 +71,7 @@ function St({
           return console.error("Invalid URL:", i.url), null;
         }
       }).filter((i) => !!i) || [];
-      e.links = p, await j.user.saveProfile({ metadata: e, address: L }), u();
+      o.links = p, await j.user.saveProfile({ metadata: o, address: L }), u();
     } catch (p) {
       console.error(p), C.error(z(p));
     }
@@ -90,7 +91,7 @@ function St({
             className: "user-info",
             sx: {
               display: "flex",
-              flexDirection: o ? "row" : "column",
+              flexDirection: a ? "row" : "column",
               gap: 2
             },
             children: [
@@ -110,7 +111,7 @@ function St({
                       {
                         src: t?.avatar,
                         did: t?.did,
-                        size: m.size || (o ? 64 : 100),
+                        size: m.size || (a ? 64 : 100),
                         variant: "circle",
                         shape: "circle",
                         sx: {
@@ -119,7 +120,7 @@ function St({
                           position: "relative",
                           overflow: "hidden",
                           flexShrink: 0,
-                          ...a ? {
+                          ...e ? {
                             cursor: "pointer",
                             "&::after": {
                               content: `"${w("switchProfile")}"`,
@@ -137,15 +138,15 @@ function St({
                             }
                           } : {}
                         },
-                        onClick: a ? R : V
+                        onClick: e ? R : V
                       }
                     ),
                     /* @__PURE__ */ r(
                       M,
                       {
-                        isMobile: o,
-                        size: m.size || (o ? 64 : 100),
-                        isMyself: a,
+                        isMobile: a,
+                        size: m.size || (a ? 64 : 100),
+                        isMyself: e,
                         timezone: t?.metadata?.timezone || J,
                         status: h,
                         onChange: A
@@ -163,7 +164,7 @@ function St({
                   },
                   children: [
                     /* @__PURE__ */ c(
-                      y,
+                      S,
                       {
                         variant: "h6",
                         component: "div",
@@ -188,7 +189,7 @@ function St({
                               children: t?.fullName
                             }
                           ),
-                          a ? /* @__PURE__ */ r(_, { user: t, switchPassport: I }) : null
+                          e ? /* @__PURE__ */ r(_, { user: t, switchPassport: I }) : null
                         ]
                       }
                     ),
@@ -199,10 +200,11 @@ function St({
             ]
           }
         ),
-        /* @__PURE__ */ r(P, { isMobile: o, isMyself: a, user: t, onSave: D }),
-        a ? /* @__PURE__ */ c(E, { children: [
-          /* @__PURE__ */ r(B, { sx: { my: o ? 1 : 3 } }),
-          o && !s ? /* @__PURE__ */ r(
+        e ? null : /* @__PURE__ */ r(l, { sx: { mt: 2 }, children: /* @__PURE__ */ r(rt, { user: t }) }),
+        /* @__PURE__ */ r(P, { isMobile: a, isMyself: e, user: t, onSave: D }),
+        e ? /* @__PURE__ */ c(E, { children: [
+          /* @__PURE__ */ r(B, { sx: { my: a ? 1 : 3 } }),
+          a && !s ? /* @__PURE__ */ r(
             l,
             {
               sx: {
@@ -229,7 +231,7 @@ function St({
           ) : null,
           /* @__PURE__ */ c(T, { in: d, timeout: "auto", children: [
             /* @__PURE__ */ r(
-              y,
+              S,
               {
                 component: "p",
                 sx: {
@@ -240,7 +242,7 @@ function St({
                 children: w("profile.justForYou")
               }
             ),
-            /* @__PURE__ */ r(tt, { user: t, isMySelf: a })
+            /* @__PURE__ */ r(tt, { user: t, isMySelf: e })
           ] })
         ] }) : null
       ]
@@ -248,5 +250,5 @@ function St({
   );
 }
 export {
-  St as default
+  Ct as default
 };

package/lib/UserCenter/libs/locales.d.ts

@@ -25,10 +25,12 @@ export declare const translations: {
         emptyField: string;
         emptyContent: string;
         underProtected: string;
+        followersOnly: string;
         noUserFound: string;
         notificationManagement: string;
         privacyManagement: string;
         storageManagement: string;
+        userFollowers: string;
         webhook: {
             url: string;
             slack: string;
@@ -159,6 +161,11 @@ export declare const translations: {
                 invalidPostalCode: string;
             };
             maxLinkCount: string;
+            chat: string;
+            follow: string;
+            unfollow: string;
+            follow_success: string;
+            unfollow_success: string;
         };
         destroyMyself: {
             title: string;
@@ -201,8 +208,10 @@ export declare const translations: {
         notificationManagement: string;
         privacyManagement: string;
         storageManagement: string;
+        userFollowers: string;
         emptyContent: string;
         underProtected: string;
+        followersOnly: string;
         noUserFound: string;
         webhook: {
             url: string;
@@ -335,6 +344,11 @@ export declare const translations: {
                 invalidPostalCode: string;
             };
             maxLinkCount: string;
+            chat: string;
+            follow: string;
+            unfollow: string;
+            follow_success: string;
+            unfollow_success: string;
         };
         destroyMyself: {
             title: string;

package/lib/UserCenter/libs/locales.js

@@ -25,10 +25,12 @@ const e = {
     emptyField: "未填写",
     emptyContent: "暂无内容",
     underProtected: "用户已设置隐私保护",
+    followersOnly: "用户已设置仅粉丝可见，关注用户后可查看",
     noUserFound: "未找到指定的用户",
     notificationManagement: "通知管理",
     privacyManagement: "隐私管理",
     storageManagement: "DID Spaces",
+    userFollowers: "关注 & 粉丝",
     webhook: {
       url: "自定义URL",
       slack: "Slack"
@@ -158,7 +160,12 @@ const e = {
         postalCode: "邮政编码",
         invalidPostalCode: "邮政编码格式不正确"
       },
-      maxLinkCount: "最多可添加 {count} 个社交链接"
+      maxLinkCount: "最多可添加 {count} 个社交链接",
+      chat: "聊天",
+      follow: "关注",
+      unfollow: "取消关注",
+      follow_success: "关注成功",
+      unfollow_success: "取消关注成功"
     },
     destroyMyself: {
       title: "删除账户",
@@ -201,8 +208,10 @@ const e = {
     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",
@@ -334,7 +343,12 @@ const e = {
         postalCode: "Postal Code",
         invalidPostalCode: "Postal code is invalid"
       },
-      maxLinkCount: "Up to {count} social links can be added"
+      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/lib/contexts/user-followers.d.ts

@@ -0,0 +1,13 @@
+declare const UserFollowersContext: import('react').Context<UserFollowersContextType>;
+type UserFollowersContextType = {
+    followed: boolean;
+    followUser: () => void;
+    unfollowUser: () => void;
+};
+declare function UserFollowersProvider({ isMySelf, userDid, children, }: {
+    children: React.ReactNode;
+    isMySelf: boolean;
+    userDid: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare function useUserFollowersContext(): UserFollowersContextType;
+export { UserFollowersContext, useUserFollowersContext, UserFollowersProvider };

package/lib/contexts/user-followers.js

@@ -0,0 +1,40 @@
+import { jsx as c } from "react/jsx-runtime";
+import { createContext as w, useContext as a } from "react";
+import { translate as p } from "@arcblock/ux/lib/Locale/util";
+import { useMemoizedFn as x } from "ahooks";
+import { useLocaleContext as U } from "@arcblock/ux/lib/Locale/context";
+import d from "../hooks/use-follow.js";
+import { translations as C } from "../UserCenter/libs/locales.js";
+const e = w({
+  followed: !1,
+  followUser: () => {
+  },
+  unfollowUser: () => {
+  }
+}), { Provider: F } = e;
+function g({
+  isMySelf: o,
+  userDid: r,
+  children: t
+}) {
+  const { locale: s } = U(), l = x((i, u = {}) => p(C, i, s, "en", u)), { followed: n, followUser: f, unfollowUser: m } = d({ userDid: r, t: l, isMySelf: o });
+  return /* @__PURE__ */ c(
+    F,
+    {
+      value: {
+        followed: n,
+        followUser: f,
+        unfollowUser: m
+      },
+      children: t
+    }
+  );
+}
+function h() {
+  return a(e);
+}
+export {
+  e as UserFollowersContext,
+  g as UserFollowersProvider,
+  h as useUserFollowersContext
+};

package/lib/hooks/use-follow.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 登录用户与当前用户（userDid）的关注关系
+ */
+export default function useFollow({ userDid, t, isMySelf, }: {
+    userDid: string;
+    t: (k: string) => string;
+    isMySelf: boolean;
+}): {
+    followed: boolean;
+    followUser: (this: unknown, followUserDid?: string | undefined) => Promise<void>;
+    unfollowUser: (this: unknown, unfollowUserDid?: string | undefined) => Promise<void>;
+};

package/lib/hooks/use-follow.js

@@ -0,0 +1,47 @@
+import { useState as p, useEffect as F } from "react";
+import { useMemoizedFn as n } from "ahooks";
+import c from "@arcblock/ux/lib/Toast";
+import { client as l } from "../libs/client.js";
+import { formatAxiosError as u } from "../UserCenter/libs/utils.js";
+function E({
+  userDid: o,
+  t: a,
+  isMySelf: e
+}) {
+  const [i, f] = p(!1), t = n(async () => {
+    try {
+      if (e) {
+        f(!0);
+        return;
+      }
+      const r = await l.user.isFollowingUser({ userDid: o });
+      f(r);
+    } catch (r) {
+      console.error(r);
+    }
+  }), m = n(async (r = o) => {
+    if (!(e && r === o))
+      try {
+        await l.user.followUser({ userDid: r }), c.success(a("profile.follow_success")), t();
+      } catch (s) {
+        console.error(s), c.error(u(s));
+      }
+  }), w = n(async (r = o) => {
+    if (!(e && r === o))
+      try {
+        await l.user.unfollowUser({ userDid: r }), c.success(a("profile.unfollow_success")), t();
+      } catch (s) {
+        console.error(s), c.error(u(s));
+      }
+  });
+  return F(() => {
+    o && !e && t();
+  }, [t, o, e]), {
+    followed: i,
+    followUser: m,
+    unfollowUser: w
+  };
+}
+export {
+  E as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "3.1.25",
+  "version": "3.1.27",
   "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.25",
-    "@arcblock/icons": "3.1.25",
-    "@arcblock/react-hooks": "3.1.25",
+    "@arcblock/bridge": "3.1.27",
+    "@arcblock/icons": "3.1.27",
+    "@arcblock/react-hooks": "3.1.27",
     "@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.25",
+    "@arcblock/did-connect-react": "3.1.27",
     "@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": "21e3ce1d9ffe647acec7b604f5202d0352dc3dee"
+  "gitHead": "9cbf9135aa96ce8d13481db7b21f755d009d2f9f"
 }

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/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 : (