@blocklet/ui-react 3.0.9 → 3.0.11

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

@@ -1,170 +1,164 @@
-import { jsx as n, jsxs as l, Fragment as W } from "react/jsx-runtime";
-import X from "@arcblock/ux/lib/Datatable";
-import { useReactive as L, useMemoizedFn as R, useMount as Y, useRequest as Z, useCreation as B } from "ahooks";
-import { translate as _ } from "@arcblock/ux/lib/Locale/util";
-import { useLocaleContext as N } from "@arcblock/ux/lib/Locale/context";
-import O from "@arcblock/ux/lib/RelativeTime";
-import C from "ua-parser-js";
-import { getVisitorId as ee } from "@arcblock/ux/lib/Util";
-import { useConfirm as te } from "@arcblock/ux/lib/Dialog";
-import oe from "p-queue";
-import { Box as u, Typography as c, CircularProgress as ne, useMediaQuery as re, Tooltip as ie, Button as j, RadioGroup as ae, FormControlLabel as z, Radio as I } from "@mui/material";
-import { memo as se, useEffect as le } from "react";
-import { mergeSx as H } from "@arcblock/ux/lib/Util/style";
-import ce from "../../hooks/use-mobile.js";
-import de from "./user-session-info.js";
-import { client as D } from "../../libs/client.js";
-import { translations as pe } from "../libs/locales.js";
-import { ip2Region as ue } from "../libs/utils.js";
-const E = (m) => new C(m, {
+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 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, {
   // eslint-disable-next-line no-useless-escape
-  browser: [[/(ArcWallet)\/([\w\.]+)/i], [C.BROWSER.NAME, C.BROWSER.VERSION]]
-}).getResult(), F = {
+  browser: [[/(ArcWallet)\/([\w\.]+)/i], [S.BROWSER.NAME, S.BROWSER.VERSION]]
+}).getResult(), O = {
   display: "flex",
   justifyContent: "flex-end",
   textAlign: "right"
-}, me = new oe({ concurrency: 1 }), ge = se(({ userSession: m, isMobile: y = !1 }) => {
-  const d = L({
+}, ce = new Z({ concurrency: 1 }), de = ne(({ userSession: u, isMobile: h = !1 }) => {
+  const l = z({
     loading: !0,
     ipRegion: ""
-  }), { t: x } = N();
-  return le(() => {
-    me.add(async () => {
+  }), { t: f } = j();
+  return re(() => {
+    ce.add(async () => {
       try {
-        d.ipRegion = await ue(m.lastLoginIp);
+        l.ipRegion = await le(u.lastLoginIp);
       } finally {
-        d.loading = !1;
+        l.loading = !1;
       }
     });
-  }, [d, m.lastLoginIp]), /* @__PURE__ */ n(
-    u,
+  }, [l, u.lastLoginIp]), /* @__PURE__ */ n(
+    d,
     {
-      ...y && {
+      ...h && {
         display: "flex",
         alignItems: "center",
         justifyContent: "flex-end",
         gap: 1,
         flexWrap: "wrap"
       },
-      children: d.ipRegion ? /* @__PURE__ */ l(W, { children: [
-        /* @__PURE__ */ n(c, { variant: "body2", children: d.ipRegion }),
-        /* @__PURE__ */ n(c, { variant: "body2", color: "grey", children: m.lastLoginIp || x("unknown") })
-      ] }) : /* @__PURE__ */ l(W, { children: [
-        /* @__PURE__ */ n(c, { children: m.lastLoginIp || x("unknown") }),
-        d.loading ? /* @__PURE__ */ n(c, { variant: "body2", color: "grey", sx: { textAlign: "center" }, children: /* @__PURE__ */ n(ne, { size: 12, color: "inherit" }) }) : null
+      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__ */ 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
       ] })
     }
   );
 });
-function Pe({
-  user: m,
-  showAction: y = !0,
-  showUser: d = !0,
-  getUserSessions: x,
-  showOffline: A = !1
+function Ae({
+  user: u,
+  showAction: h = !0,
+  showUser: l = !0,
+  getUserSessions: f,
+  showOffline: I = !1
 }) {
-  var k, M, P;
-  const r = L({
+  const r = z({
     status: "online",
     page: 1,
     pageSize: 10
-  }), g = L({
+  }), p = z({
     online: 0,
     expired: 0,
     offline: 0
-  }), w = ee(), { locale: v } = N(), f = ce({ key: "md" }), U = re((e) => e.breakpoints.down("lg")), { confirmApi: S, confirmHolder: V } = te(), o = R((e, t = {}) => _(pe, e, v, "en", t)), q = R(async () => {
-    var i;
-    const e = await x({
+  }), 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 () => {
+    const e = await f({
       page: r.page,
       pageSize: r.pageSize,
       status: r.status
-    }), t = ((i = e == null ? void 0 : e.paging) == null ? void 0 : i.total) || 0;
-    return g[r.status] = t, {
-      total: t,
-      list: (e == null ? void 0 : e.list) || []
+    }), o = e?.paging?.total || 0;
+    return p[r.status] = o, {
+      total: o,
+      list: e?.list || []
     };
   });
-  Y(async () => {
-    var i, s;
-    const e = await x({
+  $(async () => {
+    const e = await f({
       page: 1,
       pageSize: 1,
       status: "expired"
     });
-    g.expired = ((i = e == null ? void 0 : e.paging) == null ? void 0 : i.total) || 0;
-    const t = await x({
+    p.expired = e?.paging?.total || 0;
+    const o = await f({
       page: 1,
       pageSize: 1,
       status: "offline"
     });
-    g.offline = ((s = t == null ? void 0 : t.paging) == null ? void 0 : s.total) || 0;
+    p.offline = o?.paging?.total || 0;
   });
-  const p = Z(q, {
+  const c = J(E, {
     refreshDeps: [r.status, r.page, r.pageSize]
-  }), a = B(() => {
-    var e;
-    return ((e = p.data) == null ? void 0 : e.list) || [];
-  }, [(k = p.data) == null ? void 0 : k.list]), Q = B(() => {
+  }), i = v(() => c.data?.list || [], [c.data?.list]), F = v(() => {
     const e = r.status;
-    return e === "online" ? g[e] <= 1 : g[e] === 0;
-  }, [a, w]), h = B(() => H({}, f ? F : {}), [f]), G = R(({ visitorId: e }) => {
-    S.open({
-      title: o("logoutThisSession"),
-      content: o("logoutThisSessionConfirm"),
-      confirmButtonText: o("confirm"),
+    return e === "online" ? p[e] <= 1 : p[e] === 0;
+  }, [i, y]), x = v(() => M({}, m ? O : {}), [m]), N = w(({ visitorId: e }) => {
+    R.open({
+      title: t("logoutThisSession"),
+      content: t("logoutThisSessionConfirm"),
+      confirmButtonText: t("confirm"),
       confirmButtonProps: {
         color: "error"
       },
-      cancelButtonText: o("cancel"),
+      cancelButtonText: t("cancel"),
       onConfirm: async () => {
-        await D.user.logout({
+        await P.user.logout({
           visitorId: e,
           includeFederated: !0
         });
-        const { page: t = 0 } = r, { list: i = [] } = p.data || {}, s = i.length || 0;
-        t > 1 && s === 1 && (r.page = Math.max(t - 1, 1)), p.refresh(), S.close();
+        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();
       }
     });
-  }), $ = R(() => {
-    S.open({
-      title: o("logoutAllSession", {
-        type: o(r.status)
+  }), U = w(() => {
+    R.open({
+      title: t("logoutAllSession", {
+        type: t(r.status)
       }),
-      content: o("logoutAllSessionConfirm", {
-        type: o(r.status)
+      content: t("logoutAllSessionConfirm", {
+        type: t(r.status)
       }),
-      confirmButtonText: o("confirm"),
+      confirmButtonText: t("confirm"),
       confirmButtonProps: {
         color: "error"
       },
-      cancelButtonText: o("cancel"),
+      cancelButtonText: t("cancel"),
       onConfirm: async () => {
-        await D.user.logout({
+        await P.user.logout({
           status: r.status,
-          visitorId: w,
+          visitorId: y,
           includeFederated: !0
-        }), r.page = 1, p.refresh(), S.close();
+        }), r.page = 1, c.refresh(), R.close();
       }
     });
-  }), T = [];
-  y && T.push(
+  }), L = [];
+  h && L.push(
     /* @__PURE__ */ n(
-      ie,
+      te,
       {
-        title: o("logoutAllTips", {
-          type: o(r.status)
+        title: t("logoutAllTips", {
+          type: t(r.status)
         }),
         children: /* @__PURE__ */ n(
-          j,
+          k,
           {
             sx: { ml: 0.5 },
             size: "small",
             variant: "contained",
             color: "error",
-            onClick: $,
-            disabled: Q,
-            children: o("logoutAll", {
-              type: o(r.status)
+            onClick: U,
+            disabled: F,
+            children: t("logoutAll", {
+              type: t(r.status)
             })
           }
         )
@@ -172,103 +166,97 @@ function Pe({
       "logoutAll"
     )
   );
-  const J = B(() => {
-    var e;
-    return {
-      // viewColumns: false,
-      search: !1,
-      sort: !1,
-      download: !1,
-      filter: !1,
-      print: !1,
-      expandableRowsOnClick: !1,
-      searchDebounceTime: 600,
-      page: r.page - 1,
-      rowsPerPage: r.pageSize,
-      count: ((e = p.data) == null ? void 0 : e.total) || 0
-    };
-  }, [(M = p.data) == null ? void 0 : M.total, r.page, r.pageSize]), K = [
+  const V = v(() => ({
+    // viewColumns: false,
+    search: !1,
+    sort: !1,
+    download: !1,
+    filter: !1,
+    print: !1,
+    expandableRowsOnClick: !1,
+    searchDebounceTime: 600,
+    page: r.page - 1,
+    rowsPerPage: r.pageSize,
+    count: c.data?.total || 0
+  }), [c.data?.total, r.page, r.pageSize]), q = [
     {
-      label: o("platform"),
+      label: t("platform"),
       name: "platform",
       options: {
         customBodyRenderLite: (e) => {
-          var s, b;
-          const t = a[e], i = E(t == null ? void 0 : t.ua);
-          return /* @__PURE__ */ n(u, { sx: h, children: [(s = i.os) == null ? void 0 : s.name, (b = i.os) == null ? void 0 : b.version].filter(Boolean).join("/") || o("unknown") });
+          const o = i[e], g = W(o?.ua);
+          return /* @__PURE__ */ n(d, { sx: x, children: [g.os?.name, g.os?.version].filter(Boolean).join("/") || t("unknown") });
         }
       }
     },
     {
-      label: o("deviceType"),
+      label: t("deviceType"),
       name: "deviceType",
       options: {
         customBodyRenderLite: (e) => {
-          var s, b;
-          const t = a[e], i = E(t == null ? void 0 : t.ua);
-          return /* @__PURE__ */ n(u, { sx: h, children: [(s = i.browser) == null ? void 0 : s.name, (b = i.browser) == null ? void 0 : b.version].filter(Boolean).join("/") || o("unknown") });
+          const o = i[e], g = W(o?.ua);
+          return /* @__PURE__ */ n(d, { sx: x, children: [g.browser?.name, g.browser?.version].filter(Boolean).join("/") || t("unknown") });
         }
       }
     },
     {
-      label: o("walletOS"),
+      label: t("walletOS"),
       name: "walletOS",
       options: {
         customBodyRenderLite: (e) => {
-          var i;
-          const t = a[e];
-          return /* @__PURE__ */ n(u, { sx: h, children: ((i = t.extra) == null ? void 0 : i.walletOS) || o("unknown") });
+          const o = i[e];
+          return /* @__PURE__ */ n(d, { sx: x, children: o.extra?.walletOS || t("unknown") });
         }
       }
     },
-    d && {
-      label: o("user"),
+    l && {
+      label: t("user"),
       name: "user",
       options: {
         customBodyRenderLite: (e) => {
-          const t = a[e];
-          return /* @__PURE__ */ n(u, { sx: H({ minWidth: 150, maxWidth: 250 }, f ? F : {}), children: /* @__PURE__ */ n(de, { sessionUser: t.user, user: m }) });
+          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 }) });
         }
       }
     },
     {
-      label: o("createdAt"),
+      label: t("createdAt"),
       name: "createdAt",
       options: {
         customBodyRenderLite: (e) => {
-          const t = a[e];
-          return /* @__PURE__ */ n(u, { sx: h, children: t.createdAt ? /* @__PURE__ */ n(O, { value: t.createdAt, relativeRange: 3 * 86400 * 1e3, locale: v }) : o("unknown") });
+          const o = i[e];
+          return /* @__PURE__ */ n(d, { sx: x, children: o.createdAt ? /* @__PURE__ */ n(T, { value: o.createdAt, relativeRange: 3 * 86400 * 1e3, locale: b }) : t("unknown") });
         }
       }
     },
-    !A && {
-      label: o("updatedAt"),
+    !I && {
+      label: t("updatedAt"),
       name: "updatedAt",
       options: {
         customBodyRenderLite: (e) => {
-          const t = a[e];
-          return /* @__PURE__ */ n(u, { sx: h, children: t.status === "expired" ? o("expired") : /* @__PURE__ */ n(O, { value: t.updatedAt, relativeRange: 3 * 86400 * 1e3, locale: v }) });
+          const o = i[e];
+          return /* @__PURE__ */ n(d, { sx: x, children: o.status === "expired" ? t("expired") : /* @__PURE__ */ n(T, { value: o.updatedAt, relativeRange: 3 * 86400 * 1e3, locale: b }) });
         }
       }
     },
     {
-      label: o("lastLoginIp"),
+      label: t("lastLoginIp"),
       name: "lastLoginIp",
       options: {
         customBodyRenderLite: (e) => {
-          const t = a[e];
-          return /* @__PURE__ */ n(ge, { userSession: t, isMobile: f });
+          const o = i[e];
+          return /* @__PURE__ */ n(de, { userSession: o, isMobile: m });
         }
       }
     },
-    y && {
-      label: o("actions"),
+    h && {
+      label: t("actions"),
       name: "actions",
       options: {
         customBodyRenderLite: (e) => {
-          const t = a[e];
-          return /* @__PURE__ */ n(u, { sx: h, children: /* @__PURE__ */ n(
-            j,
+          const o = i[e];
+          return /* @__PURE__ */ n(d, { sx: x, children: /* @__PURE__ */ n(
+            k,
             {
               sx: {
                 whiteSpace: "nowrap",
@@ -276,25 +264,25 @@ function Pe({
                 lineHeight: "1.25",
                 px: 1
               },
-              disabled: w === t.visitorId,
+              disabled: y === o.visitorId,
               variant: "outlined",
               size: "small",
               color: "error",
-              onClick: () => G({ visitorId: t.visitorId }),
-              children: t.status === "expired" ? o("remove") : w === t.visitorId ? o("currentSession") : o("logout")
+              onClick: () => N({ visitorId: o.visitorId }),
+              children: o.status === "expired" ? t("remove") : y === o.visitorId ? t("currentSession") : t("logout")
             }
           ) });
         }
       }
     }
   ].filter(Boolean);
-  return /* @__PURE__ */ l(
-    u,
+  return /* @__PURE__ */ s(
+    d,
     {
       className: "pc-user-sessions",
       sx: {
-        maxWidth: f ? "unset" : U ? "calc(100vw - 300px)" : "100%",
-        ...f && {
+        maxWidth: m ? "unset" : H ? "calc(100vw - 300px)" : "100%",
+        ...m && {
           ".pc-user-sessions-table > div:nth-child(2)": {
             border: "1px solid",
             borderColor: "divider",
@@ -323,7 +311,7 @@ function Pe({
           paddingRight: "8px",
           paddingLeft: "8px",
           color: "text.secondary",
-          ...f && {
+          ...m && {
             padding: "8px !important",
             "&:first-child": {
               paddingTop: "20px!important"
@@ -335,20 +323,20 @@ function Pe({
         }
       },
       children: [
-        V,
+        D,
         /* @__PURE__ */ n(
-          X,
+          G,
           {
-            count: ((P = p.data) == null ? void 0 : P.total) || 0,
-            locale: v,
-            data: a,
-            columns: K,
-            customButtons: T,
-            options: J,
-            loading: p.loading,
+            count: c.data?.total || 0,
+            locale: b,
+            data: i,
+            columns: q,
+            customButtons: L,
+            options: V,
+            loading: c.loading,
             className: "pc-user-sessions-table",
-            title: /* @__PURE__ */ l(
-              ae,
+            title: /* @__PURE__ */ s(
+              oe,
               {
                 row: !0,
                 sx: { lineHeight: 1, ml: 1 },
@@ -357,45 +345,45 @@ function Pe({
                 },
                 children: [
                   /* @__PURE__ */ n(
-                    z,
+                    B,
                     {
                       value: "online",
-                      control: /* @__PURE__ */ n(I, { size: "small", sx: { lineHeight: 1, fontSize: 0 }, checked: r.status === "online" }),
-                      label: /* @__PURE__ */ l(c, { sx: { display: "flex", alignItems: "center" }, children: [
-                        o("online"),
-                        /* @__PURE__ */ l(c, { component: "span", sx: { ml: 0.5, color: "text.secondary" }, children: [
+                      control: /* @__PURE__ */ n(C, { size: "small", sx: { lineHeight: 1, fontSize: 0 }, checked: r.status === "online" }),
+                      label: /* @__PURE__ */ s(a, { sx: { display: "flex", alignItems: "center" }, children: [
+                        t("online"),
+                        /* @__PURE__ */ s(a, { component: "span", sx: { ml: 0.5, color: "text.secondary" }, children: [
                           "(",
-                          g.online,
+                          p.online,
                           ")"
                         ] })
                       ] })
                     }
                   ),
                   /* @__PURE__ */ n(
-                    z,
+                    B,
                     {
                       value: "expired",
-                      control: /* @__PURE__ */ n(I, { size: "small", sx: { lineHeight: 1, fontSize: 0 }, checked: r.status === "expired" }),
-                      label: /* @__PURE__ */ l(c, { sx: { display: "flex", alignItems: "center" }, children: [
-                        o("expired"),
-                        /* @__PURE__ */ l(c, { component: "span", sx: { ml: 0.5, color: "text.secondary" }, children: [
+                      control: /* @__PURE__ */ n(C, { size: "small", sx: { lineHeight: 1, fontSize: 0 }, checked: r.status === "expired" }),
+                      label: /* @__PURE__ */ s(a, { sx: { display: "flex", alignItems: "center" }, children: [
+                        t("expired"),
+                        /* @__PURE__ */ s(a, { component: "span", sx: { ml: 0.5, color: "text.secondary" }, children: [
                           "(",
-                          g.expired,
+                          p.expired,
                           ")"
                         ] })
                       ] })
                     }
                   ),
-                  A ? /* @__PURE__ */ n(
-                    z,
+                  I ? /* @__PURE__ */ n(
+                    B,
                     {
                       value: "offline",
-                      control: /* @__PURE__ */ n(I, { size: "small", sx: { lineHeight: 1, fontSize: 0 }, checked: r.status === "offline" }),
-                      label: /* @__PURE__ */ l(c, { sx: { display: "flex", alignItems: "center" }, children: [
-                        o("offline"),
-                        /* @__PURE__ */ l(c, { component: "span", sx: { ml: 0.5, color: "text.secondary" }, children: [
+                      control: /* @__PURE__ */ n(C, { size: "small", sx: { lineHeight: 1, fontSize: 0 }, checked: r.status === "offline" }),
+                      label: /* @__PURE__ */ s(a, { sx: { display: "flex", alignItems: "center" }, children: [
+                        t("offline"),
+                        /* @__PURE__ */ s(a, { component: "span", sx: { ml: 0.5, color: "text.secondary" }, children: [
                           "(",
-                          g.offline,
+                          p.offline,
                           ")"
                         ] })
                       ] })
@@ -414,5 +402,5 @@ function Pe({
   );
 }
 export {
-  Pe as default
+  Ae as default
 };