@arcblock/ux 3.1.36 → 3.1.37

package/lib/UserCard/Cards/social-actions.d.ts

@@ -1,7 +1,7 @@
 import { User, UserCardProps } from '../types';
-type SocialActionsProps = Pick<UserCardProps, 'showSocialActions' | 'session'> & {
+type SocialActionsProps = Pick<UserCardProps, 'showSocialActions' | 'session' | 'onFollowClick'> & {
     user: User;
 };
-declare function SocialActions({ showSocialActions, session, user }: SocialActionsProps): import("react/jsx-runtime").JSX.Element | null;
+declare function SocialActions({ showSocialActions, session, user, onFollowClick }: SocialActionsProps): import("react/jsx-runtime").JSX.Element | null;
 export default SocialActions;
 export declare const ButtonWrapper: import('@emotion/styled').StyledComponent<import('@mui/material').ButtonOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "action" | "disabled" | "color" | "className" | "style" | "classes" | "children" | "sx" | "variant" | "tabIndex" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "loading" | "loadingIndicator" | "loadingPosition" | "size" | "startIcon"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;

package/lib/UserCard/Cards/social-actions.js

@@ -1,16 +1,16 @@
-import { jsxs as m, jsx as s } from "react/jsx-runtime";
-import { useMemo as r } from "react";
-import { styled as C, Button as F, Box as M } from "@mui/material";
+import { jsxs as w, jsx as s } from "react/jsx-runtime";
+import { useMemo as l } from "react";
+import { styled as z, Button as C, Box as F } from "@mui/material";
 import { useMemoizedFn as u } from "ahooks";
-import { joinURL as z } from "ufo";
-import w from "lodash/noop";
-import { Icon as N } from "@iconify/react";
-import U from "@mui/icons-material/Notifications";
-import k from "@mui/icons-material/NotificationsOff";
-import v from "../use-follow.js";
-import { useLocaleContext as h } from "../../Locale/context.js";
-import { translate as g } from "../../Locale/util.js";
-import { isSupportFollow as L } from "../../Util/index.js";
+import { joinURL as N } from "ufo";
+import h from "lodash/noop";
+import { Icon as U } from "@iconify/react";
+import v from "@mui/icons-material/Notifications";
+import L from "@mui/icons-material/NotificationsOff";
+import P from "../use-follow.js";
+import { useLocaleContext as g } from "../../Locale/context.js";
+import { translate as y } from "../../Locale/util.js";
+import { isSupportFollow as j } from "../../Util/index.js";
 const _ = {
   zh: {
     chat: "聊天",
@@ -26,83 +26,84 @@ const _ = {
     follow_success: "Follow success",
     unfollow_success: "Unfollow success"
   }
-}, P = () => {
+}, B = () => {
   const { componentMountPoints: o = [] } = window.blocklet || {};
   return o.find((n) => n.name === "did-comments")?.mountPoint;
 };
-function j({
+function I({
   user: o,
   showSocialActions: t,
   session: n
 }) {
-  const { locale: i } = h() || { locale: "en" }, e = u((a, f = {}) => g(_, a, i, "en", f)), d = r(() => !!n?.user?.did, [n?.user?.did]), l = r(() => P(), []), c = u(() => {
-    if (!d) {
-      n?.login(w, {
+  const { locale: e } = g() || { locale: "en" }, i = u((d, m = {}) => y(_, d, e, "en", m)), r = l(() => !!n?.user?.did, [n?.user?.did]), c = l(() => B(), []), a = u(() => {
+    if (!r) {
+      n?.login(h, {
         openMode: "redirect",
         redirect: window.location.href
       });
       return;
     }
-    window.open(z(l, `/chat/dm/${o?.did}`), "_blank");
+    window.open(N(c, `/chat/dm/${o?.did}`), "_blank");
   });
-  return r(() => (typeof t == "boolean" ? !!t : t?.chat) && !!l, [t, l]) ? /* @__PURE__ */ m(
+  return l(() => (typeof t == "boolean" ? !!t : t?.chat) && !!c, [t, c]) ? /* @__PURE__ */ w(
     x,
     {
       className: "user-card__social-actions-chat",
       variant: "outlined",
       color: "primary",
       size: "small",
-      onClick: c,
+      onClick: a,
       children: [
-        /* @__PURE__ */ s(N, { icon: "tabler:message-dots", style: { marginRight: 4 } }),
-        e("chat")
+        /* @__PURE__ */ s(U, { icon: "tabler:message-dots", style: { marginRight: 4 } }),
+        i("chat")
       ]
     }
   ) : null;
 }
-function B({
+function $({
   user: o,
   showSocialActions: t,
-  session: n
+  session: n,
+  onFollowClick: e
 }) {
-  const { locale: i } = h() || { locale: "en" }, e = u((y, b = {}) => g(_, y, i, "en", b)), d = r(() => !!n?.user?.did, [n?.user?.did]), l = r(() => typeof t == "boolean" ? !!t : t?.follow, [t]), { followed: c, followUser: p, unfollowUser: a } = v({
+  const { locale: i } = g() || { locale: "en" }, r = u((p, M = {}) => y(_, p, i, "en", M)), c = l(() => !!n?.user?.did, [n?.user?.did]), a = l(() => typeof t == "boolean" ? !!t : t?.follow, [t]), { followed: f, followUser: d, unfollowUser: m } = P({
     user: o,
-    t: e,
+    t: r,
     isMySelf: !1,
-    visible: !!l
-  }), f = u(() => {
-    if (!d) {
-      n?.login(w, {
+    visible: !!a
+  }), b = u((p) => {
+    if (!c) {
+      n?.login(h, {
         openMode: "redirect",
         redirect: window.location.href
       });
       return;
     }
-    c ? a(o.did) : p(o.did);
+    f ? m(o.did) : d(o.did), e && typeof e == "function" && e(o, p);
   });
-  return l ? /* @__PURE__ */ m(
+  return a ? /* @__PURE__ */ w(
     x,
     {
       className: "user-card__social-actions-follow",
       variant: "outlined",
       color: "primary",
       size: "small",
-      onClick: f,
+      onClick: b,
       children: [
-        c ? /* @__PURE__ */ s(k, { sx: { fontSize: 14, mr: 0.5 } }) : /* @__PURE__ */ s(U, { sx: { fontSize: 14, mr: 0.5 } }),
-        e(c ? "unfollow" : "follow")
+        f ? /* @__PURE__ */ s(L, { sx: { fontSize: 14, mr: 0.5 } }) : /* @__PURE__ */ s(v, { sx: { fontSize: 14, mr: 0.5 } }),
+        r(f ? "unfollow" : "follow")
       ]
     }
   ) : null;
 }
-function Q({ showSocialActions: o, session: t, user: n }) {
-  const i = r(() => t?.user?.did === n?.did, [t?.user?.did, n?.did]), e = r(() => L(), []);
-  return i || !e || !o ? null : /* @__PURE__ */ m(M, { className: "user-card__social-actions", sx: { display: "flex", gap: 1 }, children: [
-    /* @__PURE__ */ s(j, { session: t, user: n, showSocialActions: o }),
-    /* @__PURE__ */ s(B, { session: t, user: n, showSocialActions: o })
+function S({ showSocialActions: o, session: t, user: n, onFollowClick: e = void 0 }) {
+  const i = l(() => t?.user?.did === n?.did, [t?.user?.did, n?.did]), r = l(() => j(), []);
+  return i || !r || !o ? null : /* @__PURE__ */ w(F, { className: "user-card__social-actions", sx: { display: "flex", gap: 1 }, children: [
+    /* @__PURE__ */ s(I, { session: t, user: n, showSocialActions: o }),
+    /* @__PURE__ */ s($, { onFollowClick: e, session: t, user: n, showSocialActions: o })
   ] });
 }
-const x = C(F)`
+const x = z(C)`
   color: ${({ theme: o }) => o.palette.text.primary};
   font-weight: 500;
   border-color: ${({ theme: o }) => o.palette.grey[300]};
@@ -110,5 +111,5 @@ const x = C(F)`
 `;
 export {
   x as ButtonWrapper,
-  Q as default
+  S as default
 };

package/lib/UserCard/Content/minimal.js

@@ -1,6 +1,6 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
 import { memo as g } from "react";
-import { useMediaQuery as y, Box as o, Typography as w, Divider as C } from "@mui/material";
+import { useMediaQuery as w, Box as n, Typography as y, Divider as C } from "@mui/material";
 import { DID as S } from "../../DID/index.js";
 import b from "./tooltip-avatar.js";
 import { renderTopRight as v } from "../components.js";
@@ -9,20 +9,20 @@ import j from "../Cards/social-actions.js";
 function D({ ...s }) {
   const {
     user: e,
-    showDid: d,
-    didProps: m,
-    avatarSize: c,
+    showDid: c,
+    didProps: d,
+    avatarSize: m,
     shouldShowHoverCard: p,
     renderCardContent: f,
-    renderTopRightContent: a,
+    renderTopRightContent: l,
     topRightMaxWidth: h,
     avatarProps: x,
     shortenLabelProps: u,
-    renderName: l,
-    ...n
-  } = s, r = y("(max-width:500px)");
-  return /* @__PURE__ */ i(
-    o,
+    renderName: a,
+    ...o
+  } = s, i = w("(max-width:500px)");
+  return /* @__PURE__ */ r(
+    n,
     {
       className: "user-card__avatar-content",
       sx: {
@@ -31,35 +31,35 @@ function D({ ...s }) {
         alignItems: "center"
       },
       children: [
-        /* @__PURE__ */ i(
-          o,
+        /* @__PURE__ */ r(
+          n,
           {
             sx: {
               display: "flex",
               justifyContent: "space-between",
-              flexDirection: r ? "column" : "row",
-              alignItems: r ? "flex-start" : "center",
-              gap: r ? 2 : 1,
+              flexDirection: i ? "column" : "row",
+              alignItems: i ? "flex-start" : "center",
+              gap: i ? 2 : 1,
               flex: 1,
               minWidth: 0,
               flexWrap: "wrap"
             },
             children: [
-              /* @__PURE__ */ i(o, { sx: { display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, flex: 1 }, children: [
+              /* @__PURE__ */ r(n, { sx: { display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, flex: 1 }, children: [
                 /* @__PURE__ */ t(
                   b,
                   {
                     user: e,
-                    avatarSize: c,
+                    avatarSize: m,
                     shouldShowHoverCard: p,
                     renderCardContent: f,
                     avatarProps: x,
-                    ...n
+                    ...o
                   }
                 ),
-                /* @__PURE__ */ i(o, { children: [
+                /* @__PURE__ */ r(n, { children: [
                   /* @__PURE__ */ t(
-                    w,
+                    y,
                     {
                       variant: "subtitle1",
                       className: "user-card__full-name-label",
@@ -70,10 +70,10 @@ function D({ ...s }) {
                         fontSize: 18,
                         lineHeight: 1.1
                       },
-                      children: l ? l(e) : /* @__PURE__ */ t(W, { sx: { fontWeight: 500 }, ...u, children: e.fullName || e.email || e.did })
+                      children: a ? a(e) : /* @__PURE__ */ t(W, { sx: { fontWeight: 500 }, ...u, children: e.fullName || e.email || e.did })
                     }
                   ),
-                  d && e.did ? /* @__PURE__ */ t(
+                  c && e.did ? /* @__PURE__ */ t(
                     S,
                     {
                       did: e.did,
@@ -82,17 +82,25 @@ function D({ ...s }) {
                       compact: !0,
                       locale: "en",
                       sx: { lineHeight: 1.5 },
-                      ...m ?? {}
+                      ...d ?? {}
                     }
                   ) : null
                 ] })
               ] }),
-              r ? /* @__PURE__ */ t(C, { sx: { width: "100%" } }) : null,
-              a ? null : /* @__PURE__ */ t(j, { showSocialActions: n.showSocialActions, user: e, session: n.session })
+              i ? /* @__PURE__ */ t(C, { sx: { width: "100%" } }) : null,
+              l ? null : /* @__PURE__ */ t(
+                j,
+                {
+                  onFollowClick: o.onFollowClick,
+                  showSocialActions: o.showSocialActions,
+                  user: e,
+                  session: o.session
+                }
+              )
             ]
           }
         ),
-        v(a, h)
+        v(l, h)
       ]
     }
   );

package/lib/UserCard/types.d.ts

@@ -123,5 +123,6 @@ export interface UserCardProps {
     popupShowSocialActions?: SocialActionProps | boolean;
     renderCustomContent?: () => React.ReactNode;
     onAvatarClick?: (user: User, e?: React.MouseEvent<HTMLDivElement>) => void;
+    onFollowClick?: (user: User, e?: React.MouseEvent) => void;
 }
 export {};

package/lib/package.json.js

@@ -1,4 +1,4 @@
-const e = "3.1.36", s = { "@blocklet/js-sdk": "^1.16.49-beta-20250823-082650-626c1473" }, t = {
+const e = "3.1.37", s = { "@blocklet/js-sdk": "^1.16.49-beta-20250823-082650-626c1473" }, t = {
   version: e,
   dependencies: s
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.1.36",
+  "version": "3.1.37",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -68,16 +68,16 @@
     "react": "^19.0.0",
     "react-router-dom": "^6.22.3"
   },
-  "gitHead": "84123be142078f9f78f9bc8868be873ea620c3a0",
+  "gitHead": "2b0893787889c20893e9ff1f8c7a016f386882b4",
   "dependencies": {
-    "@arcblock/bridge": "3.1.36",
+    "@arcblock/bridge": "3.1.37",
     "@arcblock/did": "^1.21.3",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.1.36",
-    "@arcblock/nft-display": "3.1.36",
-    "@arcblock/react-hooks": "3.1.36",
+    "@arcblock/icons": "3.1.37",
+    "@arcblock/nft-display": "3.1.37",
+    "@arcblock/react-hooks": "3.1.37",
     "@blocklet/js-sdk": "^1.16.49-beta-20250823-082650-626c1473",
-    "@blocklet/theme": "3.1.36",
+    "@blocklet/theme": "3.1.37",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",

package/src/UserCard/Cards/social-actions.tsx

@@ -13,7 +13,7 @@ import { useLocaleContext } from '../../Locale/context';
 import { translate } from '../../Locale/util';
 import { isSupportFollow } from '../../Util';
 
-type SocialActionsProps = Pick<UserCardProps, 'showSocialActions' | 'session'> & {
+type SocialActionsProps = Pick<UserCardProps, 'showSocialActions' | 'session' | 'onFollowClick'> & {
   user: User; // 当前卡片显示的用户，要与 session.user 区分开
 };
 
@@ -101,10 +101,12 @@ function Follow({
   user,
   showSocialActions,
   session,
+  onFollowClick,
 }: {
   user: SocialActionsProps['user'];
   showSocialActions: SocialActionsProps['showSocialActions'];
   session: SocialActionsProps['session'];
+  onFollowClick: SocialActionsProps['onFollowClick'];
 }) {
   const { locale } = useLocaleContext() || { locale: 'en' };
   const t = useMemoizedFn((key, data = {}) => {
@@ -126,7 +128,7 @@ function Follow({
     isMySelf: false,
     visible: !!showFollow,
   });
-  const handleFollowAction = useMemoizedFn(() => {
+  const handleFollowAction = useMemoizedFn((e) => {
     if (!isLogin) {
       session?.login(noop, {
         openMode: 'redirect',
@@ -139,6 +141,9 @@ function Follow({
     } else {
       followUser(user.did);
     }
+    if (onFollowClick && typeof onFollowClick === 'function') {
+      onFollowClick(user, e);
+    }
   });
 
   if (!showFollow) {
@@ -166,7 +171,7 @@ function Follow({
 // 按钮的显示逻辑
 // 通用逻辑： 1. user 和 session.user 不能是同一个用户, 2. 相关依赖支持，3. showSocialActions 为 true 或 为 object
 // 其他逻辑： 1. 如果 session 中没有用户信息，点击后需要重定向到登录页面
-function SocialActions({ showSocialActions, session, user }: SocialActionsProps) {
+function SocialActions({ showSocialActions, session, user, onFollowClick = undefined }: SocialActionsProps) {
   const isSameUser = useMemo(() => {
     return session?.user?.did === user?.did;
   }, [session?.user?.did, user?.did]);
@@ -183,7 +188,7 @@ function SocialActions({ showSocialActions, session, user }: SocialActionsProps)
   return (
     <Box className="user-card__social-actions" sx={{ display: 'flex', gap: 1 }}>
       <Chat session={session} user={user} showSocialActions={showSocialActions} />
-      <Follow session={session} user={user} showSocialActions={showSocialActions} />
+      <Follow onFollowClick={onFollowClick} session={session} user={user} showSocialActions={showSocialActions} />
     </Box>
   );
 }

package/src/UserCard/Content/minimal.tsx

@@ -95,7 +95,12 @@ function MinimalContent({ ...props }: MinimalContentProps) {
         </Box>
         {isSmallScreen ? <Divider sx={{ width: '100%' }} /> : null}
         {!renderTopRightContent ? (
-          <SocialActions showSocialActions={rest.showSocialActions} user={user!} session={rest.session} />
+          <SocialActions
+            onFollowClick={rest.onFollowClick}
+            showSocialActions={rest.showSocialActions}
+            user={user!}
+            session={rest.session}
+          />
         ) : null}
       </Box>
       {renderTopRight(renderTopRightContent, topRightMaxWidth)}

package/src/UserCard/types.ts

@@ -160,4 +160,6 @@ export interface UserCardProps {
 
   // 头像点击事件
   onAvatarClick?: (user: User, e?: React.MouseEvent<HTMLDivElement>) => void;
+  // 点击follow按钮回调
+  onFollowClick?: (user: User, e?: React.MouseEvent) => void;
 }