@blocklet/ui-react 3.1.24 → 3.1.25

package/lib/UserSessions/components/user-sessions.d.ts

@@ -1,12 +1,13 @@
 import { UserSession } from '@blocklet/js-sdk';
 import { User } from '../../@types';
-export default function UserSessions({ user, showAction, showUser, getUserSessions, showOffline, }: {
+export default function UserSessions({ user, showAction, showUser, getUserSessions, showOffline, showAppPid, }: {
     readonly user: User & {
         userSessions?: any[];
     };
     readonly showAction?: boolean;
     readonly showUser?: boolean;
     readonly showOffline?: boolean;
+    readonly showAppPid?: boolean;
     readonly getUserSessions: (params: {
         page: number;
         pageSize: number;

package/lib/UserSessions/components/user-sessions.js

@@ -1,42 +1,43 @@
 import { jsx as n, jsxs as s, Fragment as A } from "react/jsx-runtime";
-import G from "@arcblock/ux/lib/Datatable";
-import { useReactive as z, useMemoizedFn as w, useMount as $, useRequest as J, useCreation as v } from "ahooks";
-import { translate as K } from "@arcblock/ux/lib/Locale/util";
-import { useLocaleContext as j } from "@arcblock/ux/lib/Locale/context";
+import $ from "@arcblock/ux/lib/Datatable";
+import { useReactive as z, useMemoizedFn as v, useMount as J, useRequest as K, useCreation as w } from "ahooks";
+import { translate as X } from "@arcblock/ux/lib/Locale/util";
+import { useLocaleContext as O } from "@arcblock/ux/lib/Locale/context";
 import T from "@arcblock/ux/lib/RelativeTime";
 import S from "ua-parser-js";
-import { getVisitorId as X } from "@arcblock/ux/lib/Util";
-import { useConfirm as Y } from "@arcblock/ux/lib/Dialog";
-import Z from "p-queue";
-import { Box as d, Typography as a, CircularProgress as _, useMediaQuery as ee, Tooltip as te, Button as k, RadioGroup as oe, FormControlLabel as B, Radio as C } from "@mui/material";
-import { memo as ne, useEffect as re } from "react";
-import { mergeSx as M } from "@arcblock/ux/lib/Util/style";
-import ie from "../../hooks/use-mobile.js";
-import se from "./user-session-info.js";
-import { client as P } from "../../libs/client.js";
-import { translations as ae } from "../libs/locales.js";
-import { ip2Region as le } from "../libs/utils.js";
-const W = (u) => new S(u, {
+import { getVisitorId as Y } from "@arcblock/ux/lib/Util";
+import { useConfirm as Z } from "@arcblock/ux/lib/Dialog";
+import _ from "@arcblock/ux/lib/DID";
+import ee from "p-queue";
+import { Box as d, Typography as a, CircularProgress as te, useMediaQuery as oe, Tooltip as ne, Button as k, RadioGroup as re, FormControlLabel as B, Radio as C } from "@mui/material";
+import { memo as ie, useEffect as se } from "react";
+import { mergeSx as P } from "@arcblock/ux/lib/Util/style";
+import ae from "../../hooks/use-mobile.js";
+import le from "./user-session-info.js";
+import { client as M } from "../../libs/client.js";
+import { translations as ce } from "../libs/locales.js";
+import { ip2Region as de } from "../libs/utils.js";
+const W = (p) => new S(p, {
   // eslint-disable-next-line no-useless-escape
   browser: [[/(ArcWallet)\/([\w\.]+)/i], [S.BROWSER.NAME, S.BROWSER.VERSION]]
-}).getResult(), O = {
+}).getResult(), D = {
   display: "flex",
   justifyContent: "flex-end",
   textAlign: "right"
-}, ce = new Z({ concurrency: 1 }), de = ne(({ userSession: u, isMobile: h = !1 }) => {
+}, pe = new ee({ concurrency: 1 }), ue = ie(({ userSession: p, isMobile: h = !1 }) => {
   const l = z({
     loading: !0,
     ipRegion: ""
-  }), { t: f } = j();
-  return re(() => {
-    ce.add(async () => {
+  }), { t: f } = O();
+  return se(() => {
+    pe.add(async () => {
       try {
-        l.ipRegion = await le(u.lastLoginIp);
+        l.ipRegion = await de(p.lastLoginIp);
       } finally {
         l.loading = !1;
       }
     });
-  }, [l, u.lastLoginIp]), /* @__PURE__ */ n(
+  }, [l, p.lastLoginIp]), /* @__PURE__ */ n(
     d,
     {
       ...h && {
@@ -48,60 +49,61 @@ const W = (u) => new S(u, {
       },
       children: l.ipRegion ? /* @__PURE__ */ s(A, { children: [
         /* @__PURE__ */ n(a, { variant: "body2", children: l.ipRegion }),
-        /* @__PURE__ */ n(a, { variant: "body2", color: "grey", children: u.lastLoginIp || f("unknown") })
+        /* @__PURE__ */ n(a, { variant: "body2", color: "grey", children: p.lastLoginIp || f("unknown") })
       ] }) : /* @__PURE__ */ s(A, { children: [
-        /* @__PURE__ */ n(a, { children: u.lastLoginIp || f("unknown") }),
-        l.loading ? /* @__PURE__ */ n(a, { variant: "body2", color: "grey", sx: { textAlign: "center" }, children: /* @__PURE__ */ n(_, { size: 12, color: "inherit" }) }) : null
+        /* @__PURE__ */ n(a, { children: p.lastLoginIp || f("unknown") }),
+        l.loading ? /* @__PURE__ */ n(a, { variant: "body2", color: "grey", sx: { textAlign: "center" }, children: /* @__PURE__ */ n(te, { size: 12, color: "inherit" }) }) : null
       ] })
     }
   );
 });
-function Ae({
-  user: u,
+function Pe({
+  user: p,
   showAction: h = !0,
   showUser: l = !0,
   getUserSessions: f,
-  showOffline: I = !1
+  showOffline: I = !1,
+  showAppPid: j = !1
 }) {
   const r = z({
     status: "online",
     page: 1,
     pageSize: 10
-  }), p = z({
+  }), u = z({
     online: 0,
     expired: 0,
     offline: 0
-  }), y = X(), { locale: b } = j(), m = ie({ key: "md" }), H = ee((e) => e.breakpoints.down("lg")), { confirmApi: R, confirmHolder: D } = Y(), t = w((e, o = {}) => K(ae, e, b, "en", o)), E = w(async () => {
+  }), y = Y(), { locale: b } = O(), m = ae({ key: "md" }), H = oe((e) => e.breakpoints.down("lg")), { confirmApi: R, confirmHolder: E } = Z(), t = v((e, o = {}) => X(ce, e, b, "en", o)), F = v(async () => {
     const e = await f({
       page: r.page,
       pageSize: r.pageSize,
       status: r.status
     }), o = e?.paging?.total || 0;
-    return p[r.status] = o, {
+    return u[r.status] = o, {
       total: o,
       list: e?.list || []
     };
   });
-  $(async () => {
+  J(async () => {
     const e = await f({
       page: 1,
       pageSize: 1,
       status: "expired"
     });
-    p.expired = e?.paging?.total || 0;
+    u.expired = e?.paging?.total || 0;
     const o = await f({
       page: 1,
       pageSize: 1,
       status: "offline"
     });
-    p.offline = o?.paging?.total || 0;
+    u.offline = o?.paging?.total || 0;
   });
-  const c = J(E, {
+  const c = K(F, {
     refreshDeps: [r.status, r.page, r.pageSize]
-  }), i = v(() => c.data?.list || [], [c.data?.list]), F = v(() => {
+  }), i = w(() => c.data?.list || [], [c.data?.list]), N = w(() => {
     const e = r.status;
-    return e === "online" ? p[e] <= 1 : p[e] === 0;
-  }, [i, y]), x = v(() => M({}, m ? O : {}), [m]), N = w(({ visitorId: e }) => {
+    return e === "online" ? u[e] <= 1 : u[e] === 0;
+  }, [i, y]), x = w(() => P({}, m ? D : {}), [m]), U = v(({ visitorId: e }) => {
     R.open({
       title: t("logoutThisSession"),
       content: t("logoutThisSessionConfirm"),
@@ -111,15 +113,15 @@ function Ae({
       },
       cancelButtonText: t("cancel"),
       onConfirm: async () => {
-        await P.user.logout({
+        await M.user.logout({
           visitorId: e,
           includeFederated: !0
         });
-        const { page: o = 0 } = r, { list: g = [] } = c.data || {}, Q = g.length || 0;
-        o > 1 && Q === 1 && (r.page = Math.max(o - 1, 1)), c.refresh(), R.close();
+        const { page: o = 0 } = r, { list: g = [] } = c.data || {}, G = g.length || 0;
+        o > 1 && G === 1 && (r.page = Math.max(o - 1, 1)), c.refresh(), R.close();
       }
     });
-  }), U = w(() => {
+  }), V = v(() => {
     R.open({
       title: t("logoutAllSession", {
         type: t(r.status)
@@ -133,7 +135,7 @@ function Ae({
       },
       cancelButtonText: t("cancel"),
       onConfirm: async () => {
-        await P.user.logout({
+        await M.user.logout({
           status: r.status,
           visitorId: y,
           includeFederated: !0
@@ -143,7 +145,7 @@ function Ae({
   }), L = [];
   h && L.push(
     /* @__PURE__ */ n(
-      te,
+      ne,
       {
         title: t("logoutAllTips", {
           type: t(r.status)
@@ -155,8 +157,8 @@ function Ae({
             size: "small",
             variant: "contained",
             color: "error",
-            onClick: U,
-            disabled: F,
+            onClick: V,
+            disabled: N,
             children: t("logoutAll", {
               type: t(r.status)
             })
@@ -166,7 +168,7 @@ function Ae({
       "logoutAll"
     )
   );
-  const V = v(() => ({
+  const q = w(() => ({
     // viewColumns: false,
     search: !1,
     sort: !1,
@@ -178,7 +180,7 @@ function Ae({
     page: r.page - 1,
     rowsPerPage: r.pageSize,
     count: c.data?.total || 0
-  }), [c.data?.total, r.page, r.pageSize]), q = [
+  }), [c.data?.total, r.page, r.pageSize]), Q = [
     {
       label: t("platform"),
       name: "platform",
@@ -209,13 +211,23 @@ function Ae({
         }
       }
     },
+    j && {
+      label: "App Pid",
+      name: "appPid",
+      options: {
+        customBodyRenderLite: (e) => {
+          const o = i[e];
+          return o.appPid ? /* @__PURE__ */ n(_, { size: 14, responsive: !1, compact: !0, did: o.appPid }) : null;
+        }
+      }
+    },
     l && {
       label: t("user"),
       name: "user",
       options: {
         customBodyRenderLite: (e) => {
           const o = i[e];
-          return /* @__PURE__ */ n(d, { sx: M({ minWidth: 150, maxWidth: 250 }, m ? O : {}), children: /* @__PURE__ */ n(se, { sessionUser: o.user, user: u }) });
+          return /* @__PURE__ */ n(d, { sx: P({ minWidth: 150, maxWidth: 250 }, m ? D : {}), children: /* @__PURE__ */ n(le, { sessionUser: o.user, user: p }) });
         }
       }
     },
@@ -245,7 +257,7 @@ function Ae({
       options: {
         customBodyRenderLite: (e) => {
           const o = i[e];
-          return /* @__PURE__ */ n(de, { userSession: o, isMobile: m });
+          return /* @__PURE__ */ n(ue, { userSession: o, isMobile: m });
         }
       }
     },
@@ -268,7 +280,7 @@ function Ae({
               variant: "outlined",
               size: "small",
               color: "error",
-              onClick: () => N({ visitorId: o.visitorId }),
+              onClick: () => U({ visitorId: o.visitorId }),
               children: o.status === "expired" ? t("remove") : y === o.visitorId ? t("currentSession") : t("logout")
             }
           ) });
@@ -323,20 +335,20 @@ function Ae({
         }
       },
       children: [
-        D,
+        E,
         /* @__PURE__ */ n(
-          G,
+          $,
           {
             count: c.data?.total || 0,
             locale: b,
             data: i,
-            columns: q,
+            columns: Q,
             customButtons: L,
-            options: V,
+            options: q,
             loading: c.loading,
             className: "pc-user-sessions-table",
             title: /* @__PURE__ */ s(
-              oe,
+              re,
               {
                 row: !0,
                 sx: { lineHeight: 1, ml: 1 },
@@ -353,7 +365,7 @@ function Ae({
                         t("online"),
                         /* @__PURE__ */ s(a, { component: "span", sx: { ml: 0.5, color: "text.secondary" }, children: [
                           "(",
-                          p.online,
+                          u.online,
                           ")"
                         ] })
                       ] })
@@ -368,7 +380,7 @@ function Ae({
                         t("expired"),
                         /* @__PURE__ */ s(a, { component: "span", sx: { ml: 0.5, color: "text.secondary" }, children: [
                           "(",
-                          p.expired,
+                          u.expired,
                           ")"
                         ] })
                       ] })
@@ -383,7 +395,7 @@ function Ae({
                         t("offline"),
                         /* @__PURE__ */ s(a, { component: "span", sx: { ml: 0.5, color: "text.secondary" }, children: [
                           "(",
-                          p.offline,
+                          u.offline,
                           ")"
                         ] })
                       ] })
@@ -402,5 +414,5 @@ function Ae({
   );
 }
 export {
-  Ae as default
+  Pe as default
 };

package/package.json

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

package/src/UserSessions/components/user-sessions.tsx

@@ -8,6 +8,7 @@ import RelativeTime from '@arcblock/ux/lib/RelativeTime';
 import UAParser from 'ua-parser-js';
 import { getVisitorId } from '@arcblock/ux/lib/Util';
 import { useConfirm } from '@arcblock/ux/lib/Dialog';
+import DidAddress from '@arcblock/ux/lib/DID';
 import PQueue from 'p-queue';
 import {
   Box,
@@ -102,6 +103,7 @@ export default function UserSessions({
   showUser = true,
   getUserSessions,
   showOffline = false,
+  showAppPid = false,
 }: {
   readonly user: User & {
     userSessions?: any[];
@@ -109,6 +111,7 @@ export default function UserSessions({
   readonly showAction?: boolean;
   readonly showUser?: boolean;
   readonly showOffline?: boolean;
+  readonly showAppPid?: boolean;
   readonly getUserSessions: (params: {
     page: number;
     pageSize: number;
@@ -319,6 +322,16 @@ export default function UserSessions({
         },
       },
     },
+    showAppPid && {
+      label: 'App Pid',
+      name: 'appPid',
+      options: {
+        customBodyRenderLite: (rawIndex: number) => {
+          const x = safeData[rawIndex];
+          return x.appPid ? <DidAddress size={14} responsive={false} compact did={x.appPid} /> : null;
+        },
+      },
+    },
     showUser && {
       label: t('user'),
       name: 'user',