@arcblock/ux 2.13.70 → 3.0.1

package/lib/SessionUser/components/un-login.js

@@ -1,235 +1,209 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, CircularProgress, Divider, Fade, IconButton, LinearProgress, MenuItem, MenuList, Paper, Popper, useTheme } from '@mui/material';
-import { Icon } from '@iconify/react';
-import UserIcon from '@iconify-icons/tabler/user';
-import { Fragment, useEffect, useRef } from 'react';
-import { useMemoizedFn, useReactive } from 'ahooks';
-import noop from 'lodash/noop';
-import DidBrandLogo from '@arcblock/icons/lib/DidBrandLogo';
-import { useBrowser } from '@arcblock/react-hooks';
-import { joinURL } from 'ufo';
-import CloseButton from '../../CloseButton';
-import { translate } from '../../Locale/util';
-import { translations } from '../libs/translation';
-import Typography from '../../Typography';
-import QuickLoginItem from './quick-login-item';
-import { getFederatedEnabled, getMaster } from '../../Util/federated';
-import { BLOCKLET_SERVICE_PATH_PREFIX } from '../../Util/constant';
-export default function UnLogin({
-  session,
-  onLogin = noop,
-  size = 24,
-  dark = false,
-  locale = 'en'
-}) {
-  const {
-    palette
-  } = useTheme();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  const searchParams = new URLSearchParams(window.location.search);
-  const browser = useBrowser();
-  const isFirstLoading = false;
-  const userAnchorRef = useRef(null);
-  const currentState = useReactive({
-    open: false,
+import { jsxs as s, Fragment as I, jsx as r } from "react/jsx-runtime";
+import { useTheme as P, IconButton as B, Popper as F, Fade as R, Paper as U, Box as z, MenuList as T, MenuItem as M, LinearProgress as $, Divider as D } from "@mui/material";
+import { Icon as W } from "@iconify/react";
+import _ from "@iconify-icons/tabler/user";
+import { useRef as j, useEffect as A, Fragment as N } from "react";
+import { useMemoizedFn as a, useReactive as O } from "ahooks";
+import Q from "lodash/noop";
+import H from "@arcblock/icons/lib/DidBrandLogo";
+import { useBrowser as K } from "@arcblock/react-hooks";
+import { joinURL as V } from "ufo";
+import X from "../../CloseButton/index.js";
+import { translate as q } from "../../Locale/util.js";
+import { translations as G } from "../libs/translation.js";
+import J from "../../Typography/index.js";
+import Y from "./quick-login-item.js";
+import { getFederatedEnabled as Z, getMaster as oo } from "../../Util/federated.js";
+import { BLOCKLET_SERVICE_PATH_PREFIX as eo } from "../../Util/constant.js";
+function wo({ session: l, onLogin: f = Q, size: g = 24, dark: h = !1, locale: d = "en" }) {
+  const { palette: u } = P(), x = a((o, n = {}) => q(G, o, d, "en", n)), L = new URLSearchParams(window.location.search), b = K(), c = j(null), e = O({
+    open: !1,
     userSessions: [],
     loadingSessionId: null,
-    loadAppLogoError: false
-  });
-  const onTogglePopper = useMemoizedFn((value = !currentState.open) => {
-    currentState.open = value;
-  });
-  const _onLogin = useMemoizedFn(({
-    openMode
-  } = {}) => {
-    if (isFirstLoading) {
-      return;
-    }
-    session.login(onLogin, {
-      openMode
-    });
-  });
-  const blocklet = window?.blocklet;
-  const federatedEnabled = getFederatedEnabled(blocklet);
-  const masterSite = getMaster(blocklet);
-  const loginApp = federatedEnabled && masterSite ? masterSite : blocklet;
-  const loginAppName = loginApp?.appName || 'DID Connect';
-  const loginAppLogo = joinURL(loginApp?.appUrl || '/', loginApp?.appLogo || `${BLOCKLET_SERVICE_PATH_PREFIX}/blocklet/logo?imageFilter=convert&f=png&h=80`);
-  useEffect(() => {
-    let timer;
-
-    // NOTICE: ArcSphere 中使用原生的快捷登录
-    if (!browser.arcSphere && searchParams.get('showQuickConnect') !== 'false') {
-      timer = setTimeout(async () => {
-        currentState.userSessions = await session.getUserSessions();
-        if (currentState.userSessions.length > 0) {
-          currentState.open = true;
-        }
-      }, 1500);
-    }
-    return () => {
-      clearTimeout(timer);
+    loadAppLogoError: !1
+  }), w = a((o = !e.open) => {
+    e.open = o;
+  }), v = a(({ openMode: o } = {}) => {
+    l.login(f, { openMode: o });
+  }), i = window == null ? void 0 : window.blocklet, S = Z(i), p = oo(i), t = S && p ? p : i, y = (t == null ? void 0 : t.appName) || "DID Connect", m = V(
+    (t == null ? void 0 : t.appUrl) || "/",
+    (t == null ? void 0 : t.appLogo) || `${eo}/blocklet/logo?imageFilter=convert&f=png&h=80`
+  );
+  A(() => {
+    let o;
+    return !b.arcSphere && L.get("showQuickConnect") !== "false" && (o = setTimeout(async () => {
+      e.userSessions = await l.getUserSessions(), e.userSessions.length > 0 && (e.open = !0);
+    }, 1500)), () => {
+      clearTimeout(o);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  const handleLogin = useMemoizedFn(async userSession => {
-    currentState.loadingSessionId = userSession.id;
+  const E = a(async (o) => {
+    e.loadingSessionId = o.id;
     try {
-      await session.loginUserSession({
-        ...userSession,
-        appPid: blocklet?.appPid
-      });
-    } catch (err) {
-      console.error('session.loginUserSession.error', err);
+      await l.loginUserSession({ ...o, appPid: i == null ? void 0 : i.appPid });
+    } catch (n) {
+      console.error("session.loginUserSession.error", n);
     } finally {
-      currentState.loadingSessionId = null;
+      e.loadingSessionId = null;
     }
   });
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(IconButton, {
-      ref: userAnchorRef,
-      "data-cy": "sessionManager-login",
-      className: "arc-session-user-unlogin",
-      size: "medium",
-      onClick: _onLogin,
-      "aria-label": "Login button",
-      children: isFirstLoading ? /*#__PURE__*/_jsx(Box, {
-        width: size,
-        height: size,
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        children: /*#__PURE__*/_jsx(CircularProgress, {
-          style: {
-            width: size - 4,
-            height: size - 4,
-            color: dark ? '#fff' : ''
+  return /* @__PURE__ */ s(I, { children: [
+    /* @__PURE__ */ r(
+      B,
+      {
+        ref: c,
+        "data-cy": "sessionManager-login",
+        className: "arc-session-user-unlogin",
+        size: "medium",
+        onClick: v,
+        "aria-label": "Login button",
+        children: /* @__PURE__ */ r(
+          W,
+          {
+            icon: _,
+            fontSize: g,
+            color: h ? "#fff" : "inherit",
+            style: { transform: "scale(1.25)" }
           }
-        })
-      }) : /*#__PURE__*/_jsx(Icon, {
-        icon: UserIcon,
-        fontSize: size,
-        color: dark ? '#fff' : 'inherit',
-        style: {
-          transform: 'scale(1.25)'
-        }
-      })
-    }), /*#__PURE__*/_jsx(Popper, {
-      open: currentState.open,
-      anchorEl: userAnchorRef.current,
-      transition: true,
-      sx: {
-        zIndex: theme => theme.zIndex.appBar
-      },
-      placement: "bottom-end",
-      modifiers: [{
-        name: 'offset',
-        options: {
-          offset: [0, 10] // [水平偏移, 垂直偏移]
-        }
-      }],
-      children: ({
-        TransitionProps
-      }) => /*#__PURE__*/_jsx(Fade, {
-        ...TransitionProps,
-        children: /*#__PURE__*/_jsxs(Paper, {
-          variant: "outlined",
-          sx: {
-            borderRadius: 1,
-            width: 400,
-            maxWidth: '90vw',
-            borderColor: 'divider',
-            border: '0 !important',
-            boxShadow: 4,
-            overflow: 'hidden'
-          },
-          children: [/*#__PURE__*/_jsxs(Box, {
-            sx: {
-              display: 'flex',
-              alignItems: 'center',
-              gap: 1,
-              p: 2,
-              borderBottom: '1px solid',
-              borderColor: 'divider'
-            },
-            children: [loginAppLogo && !currentState.loadAppLogoError ? /*#__PURE__*/_jsx("img", {
-              src: loginAppLogo,
-              style: {
-                height: 20,
-                maxWidth: 100
-              },
-              onError: () => {
-                currentState.loadAppLogoError = true;
-              },
-              alt: "Login App Logo"
-            }) : /*#__PURE__*/_jsx(DidBrandLogo, {
-              height: 24,
-              width: 24
-            }), /*#__PURE__*/_jsx(Typography, {
-              fontSize: "auto",
-              sx: {
-                fontSize: '16',
-                flex: 1,
-                color: 'text.secondary',
-                // 最多展示三行
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                display: '-webkit-box',
-                WebkitLineClamp: 3,
-                WebkitBoxOrient: 'vertical'
-              },
-              children: t('useQuickLogin', {
-                name: loginAppName
-              })
-            }), /*#__PURE__*/_jsx(CloseButton, {
-              onClose: () => onTogglePopper(false)
-            })]
-          }), /*#__PURE__*/_jsx(MenuList, {
+        )
+      }
+    ),
+    /* @__PURE__ */ r(
+      F,
+      {
+        open: e.open,
+        anchorEl: c.current,
+        transition: !0,
+        sx: {
+          zIndex: (o) => o.zIndex.appBar
+        },
+        placement: "bottom-end",
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: [0, 10]
+              // [水平偏移, 垂直偏移]
+            }
+          }
+        ],
+        children: ({ TransitionProps: o }) => /* @__PURE__ */ r(R, { ...o, children: /* @__PURE__ */ s(
+          U,
+          {
+            variant: "outlined",
             sx: {
-              p: 0,
-              overflow: 'hidden'
+              borderRadius: 1,
+              width: 400,
+              maxWidth: "90vw",
+              borderColor: "divider",
+              border: "0 !important",
+              boxShadow: 4,
+              overflow: "hidden"
             },
-            children: currentState.userSessions.map((userSessionItem, index) => {
-              const isLoading = currentState.loadingSessionId === userSessionItem.id;
-              return /*#__PURE__*/_jsxs(Fragment, {
-                children: [/*#__PURE__*/_jsxs(MenuItem, {
+            children: [
+              /* @__PURE__ */ s(
+                z,
+                {
                   sx: {
-                    overflow: 'hidden',
-                    position: 'relative',
-                    p: 0,
-                    bgcolor: 'background.paper',
-                    '&:hover': {
-                      bgcolor: `${palette.action.hover} !important`
-                    }
-                  },
-                  onClick: () => {
-                    handleLogin(userSessionItem);
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 1,
+                    p: 2,
+                    borderBottom: "1px solid",
+                    borderColor: "divider"
                   },
-                  children: [isLoading && /*#__PURE__*/_jsx(LinearProgress, {
-                    sx: {
-                      height: '2px',
-                      position: 'absolute',
-                      top: 0,
-                      left: 0,
-                      right: 0
-                    }
-                  }), /*#__PURE__*/_jsx(QuickLoginItem, {
-                    userSession: userSessionItem,
-                    locale: locale
-                  })]
-                }, userSessionItem.id), index < currentState.userSessions.length - 1 ? /*#__PURE__*/_jsx(Divider, {
-                  sx: {
-                    mx: 2,
-                    my: '0px !important'
-                  }
-                }, `${userSessionItem.id}-divider`) : null]
-              }, `${userSessionItem.id}-root`);
-            })
-          })]
-        })
-      })
-    })]
-  });
-}
+                  children: [
+                    m && !e.loadAppLogoError ? /* @__PURE__ */ r(
+                      "img",
+                      {
+                        src: m,
+                        style: {
+                          height: 20,
+                          maxWidth: 100
+                        },
+                        onError: () => {
+                          e.loadAppLogoError = !0;
+                        },
+                        alt: "Login App Logo"
+                      }
+                    ) : /* @__PURE__ */ r(H, { height: 24, width: 24 }),
+                    /* @__PURE__ */ r(
+                      J,
+                      {
+                        fontSize: "auto",
+                        sx: {
+                          fontSize: "16",
+                          flex: 1,
+                          color: "text.secondary",
+                          // 最多展示三行
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          display: "-webkit-box",
+                          WebkitLineClamp: 3,
+                          WebkitBoxOrient: "vertical"
+                        },
+                        children: x("useQuickLogin", { name: y })
+                      }
+                    ),
+                    /* @__PURE__ */ r(X, { onClose: () => w(!1) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ r(T, { sx: { p: 0, overflow: "hidden" }, children: e.userSessions.map((n, C) => {
+                const k = e.loadingSessionId === n.id;
+                return /* @__PURE__ */ s(N, { children: [
+                  /* @__PURE__ */ s(
+                    M,
+                    {
+                      sx: {
+                        overflow: "hidden",
+                        position: "relative",
+                        p: 0,
+                        bgcolor: "background.paper",
+                        "&:hover": {
+                          bgcolor: `${u.action.hover} !important`
+                        }
+                      },
+                      onClick: () => {
+                        E(n);
+                      },
+                      children: [
+                        k && /* @__PURE__ */ r(
+                          $,
+                          {
+                            sx: {
+                              height: "2px",
+                              position: "absolute",
+                              top: 0,
+                              left: 0,
+                              right: 0
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ r(Y, { userSession: n, locale: d })
+                      ]
+                    },
+                    n.id
+                  ),
+                  C < e.userSessions.length - 1 ? /* @__PURE__ */ r(
+                    D,
+                    {
+                      sx: {
+                        mx: 2,
+                        my: "0px !important"
+                      }
+                    },
+                    `${n.id}-divider`
+                  ) : null
+                ] }, `${n.id}-root`);
+              }) })
+            ]
+          }
+        ) })
+      }
+    )
+  ] });
+}
+export {
+  wo as default
+};

package/lib/SessionUser/components/user-info.d.ts

@@ -1,4 +1,4 @@
-import type { Locale, Session } from '../../type';
+import { Locale, Session } from '../../type';
 export interface UserInfoProps {
     session: Session;
     onSwitchPassport: () => void;