@arcblock/ux 2.13.70 → 3.0.0

package/lib/SessionUser/components/session-user-switch.js

@@ -1,211 +1,211 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, ClickAwayListener, Divider, Fade, LinearProgress, MenuItem, MenuList, Paper, Popper, useTheme } from '@mui/material';
-import { useRef } from 'react';
-import { useCreation, useMemoizedFn, useReactive, useSize, useMount } from 'ahooks';
-import { Icon } from '@iconify/react';
-import AddCircleOutlineRoundedIcon from '@iconify-icons/material-symbols/add-circle-outline-rounded';
-import ExpandMoreRoundedIcon from '@iconify-icons/material-symbols/expand-more-rounded';
-import SwapHorizRoundedIcon from '@iconify-icons/material-symbols/swap-horiz-rounded';
-import pick from 'lodash/pick';
-import SessionUserItem from './session-user-item';
-import { getVisitorId } from '../../Util';
-import { translate } from '../../Locale/util';
-import { translations } from '../libs/translation';
-export default function SessionUserSwitch({
-  session,
-  onSwitch,
-  isBlocklet = true,
-  locale = 'en'
+import { jsx as t, jsxs as c, Fragment as M } from "react/jsx-runtime";
+import { useTheme as T, Box as S, Popper as D, ClickAwayListener as N, Fade as $, Paper as z, MenuList as L, MenuItem as I, LinearProgress as F, Divider as U } from "@mui/material";
+import { useRef as j } from "react";
+import { useMemoizedFn as l, useReactive as E, useMount as H, useCreation as _, useSize as O } from "ahooks";
+import { Icon as f } from "@iconify/react";
+import V from "@iconify-icons/material-symbols/add-circle-outline-rounded";
+import q from "@iconify-icons/material-symbols/expand-more-rounded";
+import B from "@iconify-icons/material-symbols/swap-horiz-rounded";
+import G from "lodash/pick";
+import h from "./session-user-item.js";
+import { getVisitorId as J } from "../../Util/index.js";
+import { translate as K } from "../../Locale/util.js";
+import { translations as Q } from "../libs/translation.js";
+function sr({
+  session: o,
+  onSwitch: g,
+  isBlocklet: x = !0,
+  locale: P = "en"
 }) {
-  const popperAnchorRef = useRef(null);
-  const {
-    palette
-  } = useTheme();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  const currentState = useReactive({
-    open: false,
+  const d = j(null), { palette: n } = T(), A = l((r, e = {}) => K(Q, r, P, "en", e)), i = E({
+    open: !1,
     userSessions: [],
     loadingSessionId: null
   });
-  useMount(async () => {
-    if (isBlocklet) {
-      const userSessions = await session.getUserSessions();
-      currentState.userSessions = userSessions;
+  H(async () => {
+    if (x) {
+      const r = await o.getUserSessions();
+      i.userSessions = r;
     }
   });
-  const currentSession = useCreation(() => {
-    const matchSession = (currentState.userSessions || []).find(item => item.appPid === globalThis?.blocklet?.appPid && item.userDid === session?.user?.did);
-    if (matchSession) {
-      return matchSession;
-    }
-    return {
-      __isDefault: true,
-      appName: globalThis?.blocklet?.appName || globalThis?.env?.appName,
-      appPid: globalThis?.blocklet?.appPid || globalThis?.env?.appPid,
-      userDid: session?.user?.did,
-      visitorId: getVisitorId(),
+  const u = _(() => {
+    var e, s, a, v, y;
+    const r = (i.userSessions || []).find(
+      (C) => {
+        var k, w;
+        return C.appPid === ((k = globalThis == null ? void 0 : globalThis.blocklet) == null ? void 0 : k.appPid) && C.userDid === ((w = o == null ? void 0 : o.user) == null ? void 0 : w.did);
+      }
+    );
+    return r || {
+      __isDefault: !0,
+      appName: ((e = globalThis == null ? void 0 : globalThis.blocklet) == null ? void 0 : e.appName) || ((s = globalThis == null ? void 0 : globalThis.env) == null ? void 0 : s.appName),
+      appPid: ((a = globalThis == null ? void 0 : globalThis.blocklet) == null ? void 0 : a.appPid) || ((v = globalThis == null ? void 0 : globalThis.env) == null ? void 0 : v.appPid),
+      userDid: (y = o == null ? void 0 : o.user) == null ? void 0 : y.did,
+      visitorId: J(),
       // passportId: '', // 无法从当前 session 获取 passportId 的值
       // updatedAt: '', // 当前 session 拼凑的信息无法得到 userSession 的更新时间
-      user: pick(session?.user, ['did', 'sourceProvider', 'fullName', 'email', 'avatar', 'remark', 'sourceAppPid', 'role'])
+      user: G(o == null ? void 0 : o.user, [
+        "did",
+        "sourceProvider",
+        "fullName",
+        "email",
+        "avatar",
+        "remark",
+        "sourceAppPid",
+        "role"
+      ])
     };
-  }, [currentState.userSessions, session?.user]);
-  const onTogglePopper = useMemoizedFn((value = !currentState.open) => {
-    currentState.open = value;
-  });
-  const size = useSize(popperAnchorRef.current);
-  const handleAddAccount = useMemoizedFn(() => {
-    onTogglePopper(false);
-    onSwitch();
-  });
-  const handleSwitch = useMemoizedFn(async userSession => {
+  }, [i.userSessions, o == null ? void 0 : o.user]), p = l((r = !i.open) => {
+    i.open = r;
+  }), m = O(d.current), b = l(() => {
+    p(!1), g();
+  }), R = l(async (r) => {
     try {
-      currentState.loadingSessionId = userSession?.id;
-      await onSwitch({
-        userSession
-      });
-      onTogglePopper(false);
+      i.loadingSessionId = r == null ? void 0 : r.id, await g({ userSession: r }), p(!1);
     } finally {
-      currentState.loadingSessionId = null;
+      i.loadingSessionId = null;
     }
   });
-  if (!isBlocklet) {
-    return /*#__PURE__*/_jsx(SessionUserItem, {
-      sessionItem: currentSession,
-      statusContent: /*#__PURE__*/_jsx(Icon, {
-        icon: SwapHorizRoundedIcon,
-        color: palette.text.hint
-      }),
-      sx: {
-        borderRadius: 1,
-        cursor: 'pointer',
-        py: 1.25,
-        px: 1.5
-      },
-      "data-cy": "sessionManager-switch-trigger",
-      onClick: handleAddAccount,
-      ref: popperAnchorRef
-    });
-  }
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(SessionUserItem, {
-      sessionItem: currentSession,
-      statusContent: /*#__PURE__*/_jsx(Box, {
-        component: Icon,
-        icon: ExpandMoreRoundedIcon,
-        className: "session-user-switch-icon",
+  return x ? /* @__PURE__ */ c(M, { children: [
+    /* @__PURE__ */ t(
+      h,
+      {
+        sessionItem: u,
+        statusContent: /* @__PURE__ */ t(
+          S,
+          {
+            component: f,
+            icon: q,
+            className: "session-user-switch-icon",
+            sx: {
+              transform: "scale(1.5) rotate(-90deg)",
+              transition: "transform 0.2s ease"
+            }
+          }
+        ),
         sx: {
-          transform: 'scale(1.5) rotate(-90deg)',
-          transition: 'transform 0.2s ease'
-        }
-      }),
-      sx: {
-        borderRadius: 1,
-        cursor: 'pointer',
-        py: 1.25,
-        px: 2,
-        '&:hover': {
-          backgroundColor: `${palette.grey[200]} !important`,
-          '.session-user-switch-icon': {
-            transform: 'scale(1.5)'
+          borderRadius: 1,
+          cursor: "pointer",
+          py: 1.25,
+          px: 2,
+          "&:hover": {
+            backgroundColor: `${n.grey[200]} !important`,
+            ".session-user-switch-icon": {
+              transform: "scale(1.5)"
+            }
           }
-        }
-      },
-      onClick: () => onTogglePopper(),
-      ref: popperAnchorRef
-    }), /*#__PURE__*/_jsx(Popper, {
-      open: currentState.open,
-      anchorEl: popperAnchorRef.current,
-      transition: true,
-      sx: {
-        zIndex: 1600
-      },
-      children: ({
-        TransitionProps
-      }) => /*#__PURE__*/_jsx(ClickAwayListener, {
-        onClickAway: e => {
-          e.preventDefault();
-          e.stopPropagation();
-          onTogglePopper(false);
         },
-        children: /*#__PURE__*/_jsx(Fade, {
-          ...TransitionProps,
-          timeout: 350,
-          children: /*#__PURE__*/_jsx(Paper, {
+        onClick: () => p(),
+        ref: d
+      }
+    ),
+    /* @__PURE__ */ t(D, { open: i.open, anchorEl: d.current, transition: !0, sx: { zIndex: 1600 }, children: ({ TransitionProps: r }) => /* @__PURE__ */ t(
+      N,
+      {
+        onClickAway: (e) => {
+          e.preventDefault(), e.stopPropagation(), p(!1);
+        },
+        children: /* @__PURE__ */ t($, { ...r, timeout: 350, children: /* @__PURE__ */ t(
+          z,
+          {
             variant: "outlined",
             sx: {
               borderRadius: 3,
-              width: size?.width || 0,
-              borderColor: 'divider',
+              width: (m == null ? void 0 : m.width) || 0,
+              borderColor: "divider",
               mt: 0.5,
-              border: '0 !important',
-              boxShadow: `0px 8px 16px 0px ${palette.grey[100]}, 0px 0px 0px 1px ${palette.grey[100]}`
+              border: "0 !important",
+              boxShadow: `0px 8px 16px 0px ${n.grey[100]}, 0px 0px 0px 1px ${n.grey[100]}`
             },
-            children: /*#__PURE__*/_jsxs(MenuList, {
-              sx: {
-                p: 0.5
-              },
-              children: [currentState.userSessions.map(userSessionItem => {
-                const isLoading = currentState.loadingSessionId === userSessionItem.id;
-                const isActive = userSessionItem.id === currentSession.id;
-                return /*#__PURE__*/_jsxs(MenuItem, {
-                  sx: {
-                    position: 'relative',
-                    p: 0,
-                    '&:hover': {
-                      backgroundColor: `${palette.grey[200]} !important`
-                    }
-                  },
-                  onClick: () => {
-                    if (!isActive) {
-                      handleSwitch(userSessionItem);
-                    }
-                  },
-                  children: [isLoading && /*#__PURE__*/_jsx(LinearProgress, {
+            children: /* @__PURE__ */ c(L, { sx: { p: 0.5 }, children: [
+              i.userSessions.map((e) => {
+                const s = i.loadingSessionId === e.id, a = e.id === u.id;
+                return /* @__PURE__ */ c(
+                  I,
+                  {
                     sx: {
-                      height: '2px',
-                      position: 'absolute',
-                      top: 0,
-                      left: 0,
-                      right: 0
-                    }
-                  }), /*#__PURE__*/_jsx(SessionUserItem, {
-                    sessionItem: userSessionItem,
-                    active: isActive
-                  })]
-                }, userSessionItem.id);
-              }), currentState.userSessions.length > 0 ? /*#__PURE__*/_jsx(Divider, {
-                sx: {
-                  m: '0!important',
-                  borderColor: 'divider'
-                }
-              }) : null, /*#__PURE__*/_jsxs(MenuItem, {
-                sx: {
-                  color: 'secondary.main',
-                  borderRadius: 1,
-                  '&:hover': {
-                    backgroundColor: `${palette.grey[200]} !important`
+                      position: "relative",
+                      p: 0,
+                      "&:hover": {
+                        backgroundColor: `${n.grey[200]} !important`
+                      }
+                    },
+                    onClick: () => {
+                      a || R(e);
+                    },
+                    children: [
+                      s && /* @__PURE__ */ t(
+                        F,
+                        {
+                          sx: {
+                            height: "2px",
+                            position: "absolute",
+                            top: 0,
+                            left: 0,
+                            right: 0
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ t(h, { sessionItem: e, active: a })
+                    ]
                   },
-                  px: 1,
-                  py: 1.5,
-                  lineHeight: 1
-                },
-                onClick: handleAddAccount,
-                "data-cy": "sessionManager-switch-trigger",
-                children: [/*#__PURE__*/_jsx(Box, {
-                  component: Icon,
-                  icon: AddCircleOutlineRoundedIcon,
-                  fontSize: 20,
+                  e.id
+                );
+              }),
+              i.userSessions.length > 0 ? /* @__PURE__ */ t(U, { sx: { m: "0!important", borderColor: "divider" } }) : null,
+              /* @__PURE__ */ c(
+                I,
+                {
                   sx: {
-                    mr: 0.5
-                  }
-                }), t('addAnotherAccount')]
-              })]
-            })
-          })
-        })
-      })
-    })]
-  });
-}
+                    color: "secondary.main",
+                    borderRadius: 1,
+                    "&:hover": {
+                      backgroundColor: `${n.grey[200]} !important`
+                    },
+                    px: 1,
+                    py: 1.5,
+                    lineHeight: 1
+                  },
+                  onClick: b,
+                  "data-cy": "sessionManager-switch-trigger",
+                  children: [
+                    /* @__PURE__ */ t(
+                      S,
+                      {
+                        component: f,
+                        icon: V,
+                        sx: {
+                          fontSize: 20,
+                          mr: 0.5
+                        }
+                      }
+                    ),
+                    A("addAnotherAccount")
+                  ]
+                }
+              )
+            ] })
+          }
+        ) })
+      }
+    ) })
+  ] }) : /* @__PURE__ */ t(
+    h,
+    {
+      sessionItem: u,
+      statusContent: /* @__PURE__ */ t(f, { icon: B, color: n.text.hint }),
+      sx: {
+        borderRadius: 1,
+        cursor: "pointer",
+        py: 1.25,
+        px: 1.5
+      },
+      "data-cy": "sessionManager-switch-trigger",
+      onClick: b,
+      ref: d
+    }
+  );
+}
+export {
+  sr as default
+};