@arcblock/ux 2.9.91 → 2.10.0

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

@@ -1,85 +1,68 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = SessionUserSwitch;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _material = require("@mui/material");
-var _react = require("react");
-var _ahooks = require("ahooks");
-var _react2 = require("@iconify/react");
-var _addCircleOutlineRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/add-circle-outline-rounded"));
-var _expandMoreRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/expand-more-rounded"));
-var _swapHorizRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/swap-horiz-rounded"));
-var _pick = _interopRequireDefault(require("lodash/pick"));
-var _sessionUserItem = _interopRequireDefault(require("./session-user-item"));
-var _Colors = require("../../Colors");
-var _Util = require("../../Util");
-var _util = require("../../Locale/util");
-var _translation = require("../libs/translation");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function SessionUserSwitch(_ref) {
-  let {
-    session,
-    onSwitch,
-    isBlocklet,
-    locale
-  } = _ref;
-  const popperAnchorRef = (0, _react.useRef)(null);
-  const t = (0, _ahooks.useMemoizedFn)(function (key) {
-    let data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    return (0, _util.translate)(_translation.translations, key, locale, 'en', data);
+import PropTypes from 'prop-types';
+import { Box, ClickAwayListener, Divider, Fade, LinearProgress, MenuItem, MenuList, Paper, Popper } 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 { temp as colors } from '../../Colors';
+import { getVisitorId } from '../../Util';
+import { translate } from '../../Locale/util';
+import { translations } from '../libs/translation';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function SessionUserSwitch({
+  session,
+  onSwitch,
+  isBlocklet,
+  locale
+}) {
+  const popperAnchorRef = useRef(null);
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
   });
-  const currentState = (0, _ahooks.useReactive)({
+  const currentState = useReactive({
     open: false,
     userSessions: [],
     loadingSessionId: null
   });
-  (0, _ahooks.useMount)(async () => {
+  useMount(async () => {
     if (isBlocklet) {
       const userSessions = await session.getUserSessions();
       currentState.userSessions = userSessions;
     }
   });
-  const currentSession = (0, _ahooks.useCreation)(() => {
-    var _globalThis$blocklet2, _globalThis$env, _globalThis$blocklet3, _globalThis$env2, _session$user2;
-    const matchSession = (currentState.userSessions || []).find(item => {
-      var _globalThis$blocklet, _session$user;
-      return item.appPid === (globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$blocklet = globalThis.blocklet) === null || _globalThis$blocklet === void 0 ? void 0 : _globalThis$blocklet.appPid) && item.userDid === (session === null || session === void 0 ? void 0 : (_session$user = session.user) === null || _session$user === void 0 ? void 0 : _session$user.did);
-    });
+  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 === null || globalThis === void 0 ? void 0 : (_globalThis$blocklet2 = globalThis.blocklet) === null || _globalThis$blocklet2 === void 0 ? void 0 : _globalThis$blocklet2.appName) || (globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$env = globalThis.env) === null || _globalThis$env === void 0 ? void 0 : _globalThis$env.appName),
-      appPid: (globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$blocklet3 = globalThis.blocklet) === null || _globalThis$blocklet3 === void 0 ? void 0 : _globalThis$blocklet3.appPid) || (globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$env2 = globalThis.env) === null || _globalThis$env2 === void 0 ? void 0 : _globalThis$env2.appPid),
-      userDid: session === null || session === void 0 ? void 0 : (_session$user2 = session.user) === null || _session$user2 === void 0 ? void 0 : _session$user2.did,
-      visitorId: (0, _Util.getVisitorId)(),
+      appName: globalThis?.blocklet?.appName || globalThis?.env?.appName,
+      appPid: globalThis?.blocklet?.appPid || globalThis?.env?.appPid,
+      userDid: session?.user?.did,
+      visitorId: getVisitorId(),
       // passportId: '', // 无法从当前 session 获取 passportId 的值
       // updatedAt: '', // 当前 session 拼凑的信息无法得到 userSession 的更新时间
-      user: (0, _pick.default)(session === null || session === void 0 ? void 0 : session.user, ['did', 'sourceProvider', 'fullName', 'email', 'avatar', 'remark', 'sourceAppPid', 'role'])
+      user: pick(session?.user, ['did', 'sourceProvider', 'fullName', 'email', 'avatar', 'remark', 'sourceAppPid', 'role'])
     };
-  }, [currentState.userSessions, session === null || session === void 0 ? void 0 : session.user]);
-  const onTogglePopper = (0, _ahooks.useMemoizedFn)(function () {
-    let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !currentState.open;
+  }, [currentState.userSessions, session?.user]);
+  const onTogglePopper = useMemoizedFn((value = !currentState.open) => {
     currentState.open = value;
   });
-  const size = (0, _ahooks.useSize)(popperAnchorRef.current);
-  const handleAddAccount = (0, _ahooks.useMemoizedFn)(() => {
+  const size = useSize(popperAnchorRef.current);
+  const handleAddAccount = useMemoizedFn(() => {
     onTogglePopper(false);
     onSwitch();
   });
-  const handleSwitch = (0, _ahooks.useMemoizedFn)(async userSession => {
+  const handleSwitch = useMemoizedFn(async userSession => {
     try {
-      currentState.loadingSessionId = userSession === null || userSession === void 0 ? void 0 : userSession.id;
+      currentState.loadingSessionId = userSession?.id;
       await onSwitch({
         userSession
       });
@@ -89,11 +72,11 @@ function SessionUserSwitch(_ref) {
     }
   });
   if (!isBlocklet) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sessionUserItem.default, {
+    return /*#__PURE__*/_jsx(SessionUserItem, {
       sessionItem: currentSession,
-      statusContent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
-        icon: _swapHorizRounded.default,
-        color: _Colors.temp.textMuted
+      statusContent: /*#__PURE__*/_jsx(Icon, {
+        icon: SwapHorizRoundedIcon,
+        color: colors.textMuted
       }),
       sx: {
         borderRadius: 2,
@@ -106,12 +89,12 @@ function SessionUserSwitch(_ref) {
       ref: popperAnchorRef
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sessionUserItem.default, {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(SessionUserItem, {
       sessionItem: currentSession,
-      statusContent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-        component: _react2.Icon,
-        icon: _expandMoreRounded.default,
+      statusContent: /*#__PURE__*/_jsx(Box, {
+        component: Icon,
+        icon: ExpandMoreRoundedIcon,
         className: "session-user-switch-icon",
         sx: {
           transform: 'scale(1.5) rotate(-90deg)',
@@ -124,7 +107,7 @@ function SessionUserSwitch(_ref) {
         py: 1.25,
         px: 2,
         '&:hover': {
-          backgroundColor: "".concat(_Colors.temp.surfacePrimarySubtitle, " !important"),
+          backgroundColor: `${colors.surfacePrimarySubtitle} !important`,
           '.session-user-switch-icon': {
             transform: 'scale(1.5)'
           }
@@ -132,7 +115,7 @@ function SessionUserSwitch(_ref) {
       },
       onClick: () => onTogglePopper(),
       ref: popperAnchorRef
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Popper, {
+    }), /*#__PURE__*/_jsx(Popper, {
       open: currentState.open,
       onClose: () => onTogglePopper(false),
       anchorEl: popperAnchorRef.current,
@@ -140,101 +123,99 @@ function SessionUserSwitch(_ref) {
       sx: {
         zIndex: 1600
       },
-      children: _ref2 => {
-        let {
-          TransitionProps
-        } = _ref2;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ClickAwayListener, {
-          onClickAway: e => {
-            e.preventDefault();
-            e.stopPropagation();
-            onTogglePopper(false);
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Fade, _objectSpread(_objectSpread({}, TransitionProps), {}, {
-            timeout: 350,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
-              variant: "outlined",
+      children: ({
+        TransitionProps
+      }) => /*#__PURE__*/_jsx(ClickAwayListener, {
+        onClickAway: e => {
+          e.preventDefault();
+          e.stopPropagation();
+          onTogglePopper(false);
+        },
+        children: /*#__PURE__*/_jsx(Fade, {
+          ...TransitionProps,
+          timeout: 350,
+          children: /*#__PURE__*/_jsx(Paper, {
+            variant: "outlined",
+            sx: {
+              borderRadius: 3,
+              width: size?.width || 0,
+              borderColor: colors.lineStep,
+              mt: 0.5,
+              border: '0 !important',
+              boxShadow: `0px 8px 16px 0px ${colors.gray6}, 0px 0px 0px 1px ${colors.gray6}`
+            },
+            children: /*#__PURE__*/_jsxs(MenuList, {
               sx: {
-                borderRadius: 3,
-                width: (size === null || size === void 0 ? void 0 : size.width) || 0,
-                borderColor: _Colors.temp.lineStep,
-                mt: 0.5,
-                border: '0 !important',
-                boxShadow: "0px 8px 16px 0px ".concat(_Colors.temp.gray6, ", 0px 0px 0px 1px ").concat(_Colors.temp.gray6)
+                p: 0.5
               },
-              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuList, {
-                sx: {
-                  p: 0.5
-                },
-                children: [currentState.userSessions.map(userSessionItem => {
-                  const isLoading = currentState.loadingSessionId === userSessionItem.id;
-                  const isActive = userSessionItem.id === currentSession.id;
-                  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
-                    sx: {
-                      position: 'relative',
-                      p: 0,
-                      '&:hover': {
-                        backgroundColor: "".concat(_Colors.temp.surfacePrimarySubtitle, " !important")
-                      }
-                    },
-                    onClick: () => {
-                      if (!isActive) {
-                        handleSwitch(userSessionItem);
-                      }
-                    },
-                    children: [isLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.LinearProgress, {
-                      sx: {
-                        height: '2px',
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        right: 0
-                      }
-                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sessionUserItem.default, {
-                      sessionItem: userSessionItem,
-                      active: isActive
-                    })]
-                  }, userSessionItem.id);
-                }), currentState.userSessions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
+              children: [currentState.userSessions.map(userSessionItem => {
+                const isLoading = currentState.loadingSessionId === userSessionItem.id;
+                const isActive = userSessionItem.id === currentSession.id;
+                return /*#__PURE__*/_jsxs(MenuItem, {
                   sx: {
-                    m: '0!important',
-                    borderColor: _Colors.temp.lineStep
-                  }
-                }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
-                  sx: {
-                    color: _Colors.temp.primaryBase,
-                    borderRadius: 2,
+                    position: 'relative',
+                    p: 0,
                     '&:hover': {
-                      backgroundColor: "".concat(_Colors.temp.surfacePrimarySubtitle, " !important")
-                    },
-                    px: 1,
-                    py: 1.5,
-                    lineHeight: 1
+                      backgroundColor: `${colors.surfacePrimarySubtitle} !important`
+                    }
                   },
-                  onClick: handleAddAccount,
-                  "data-cy": "sessionManager-switch-trigger",
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-                    component: _react2.Icon,
-                    icon: _addCircleOutlineRounded.default,
-                    fontSize: 20,
+                  onClick: () => {
+                    if (!isActive) {
+                      handleSwitch(userSessionItem);
+                    }
+                  },
+                  children: [isLoading && /*#__PURE__*/_jsx(LinearProgress, {
                     sx: {
-                      mr: 0.5
+                      height: '2px',
+                      position: 'absolute',
+                      top: 0,
+                      left: 0,
+                      right: 0
                     }
-                  }), t('addAnotherAccount')]
-                })]
-              })
+                  }), /*#__PURE__*/_jsx(SessionUserItem, {
+                    sessionItem: userSessionItem,
+                    active: isActive
+                  })]
+                }, userSessionItem.id);
+              }), currentState.userSessions.length > 0 ? /*#__PURE__*/_jsx(Divider, {
+                sx: {
+                  m: '0!important',
+                  borderColor: colors.lineStep
+                }
+              }) : null, /*#__PURE__*/_jsxs(MenuItem, {
+                sx: {
+                  color: colors.primaryBase,
+                  borderRadius: 2,
+                  '&:hover': {
+                    backgroundColor: `${colors.surfacePrimarySubtitle} !important`
+                  },
+                  px: 1,
+                  py: 1.5,
+                  lineHeight: 1
+                },
+                onClick: handleAddAccount,
+                "data-cy": "sessionManager-switch-trigger",
+                children: [/*#__PURE__*/_jsx(Box, {
+                  component: Icon,
+                  icon: AddCircleOutlineRoundedIcon,
+                  fontSize: 20,
+                  sx: {
+                    mr: 0.5
+                  }
+                }), t('addAnotherAccount')]
+              })]
             })
-          }))
-        });
-      }
+          })
+        })
+      })
     })]
   });
 }
 SessionUserSwitch.propTypes = {
-  session: _propTypes.default.object.isRequired,
-  onSwitch: _propTypes.default.func.isRequired,
-  isBlocklet: _propTypes.default.bool,
-  locale: _propTypes.default.string
+  session: PropTypes.object.isRequired,
+  onSwitch: PropTypes.func.isRequired,
+  isBlocklet: PropTypes.bool,
+  locale: PropTypes.string
 };
 SessionUserSwitch.defaultProps = {
   isBlocklet: true,

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

@@ -1,55 +1,47 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = UnLogin;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _material = require("@mui/material");
-var _react = require("@iconify/react");
-var _personOutlineRounded = _interopRequireDefault(require("iconify-icons-material-symbols-400/person-outline-rounded"));
-var _react2 = require("react");
-var _ahooks = require("ahooks");
-var _noop = _interopRequireDefault(require("lodash/noop"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function UnLogin(_ref) {
-  let {
-    session,
-    onLogin,
-    size,
-    dark
-  } = _ref;
+import PropTypes from 'prop-types';
+import { Box, CircularProgress, IconButton } from '@mui/material';
+import { Icon } from '@iconify/react';
+import PersonOutlineRoundedIcon from 'iconify-icons-material-symbols-400/person-outline-rounded';
+import { useRef } from 'react';
+import { useMemoizedFn } from 'ahooks';
+import noop from 'lodash/noop';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function UnLogin({
+  session,
+  onLogin,
+  size,
+  dark
+}) {
   const isFirstLoading = false;
-  const userAnchorRef = (0, _react2.useRef)(null);
-  const _onLogin = (0, _ahooks.useMemoizedFn)(() => {
+  const userAnchorRef = useRef(null);
+  const _onLogin = useMemoizedFn(() => {
     if (isFirstLoading) {
       return;
     }
     session.login(onLogin);
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+  return /*#__PURE__*/_jsx(Box, {
+    children: /*#__PURE__*/_jsx(IconButton, {
       ref: userAnchorRef,
       onClick: _onLogin,
       "data-cy": "sessionManager-login",
       size: "medium",
       "aria-label": "Login button",
-      children: isFirstLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      children: isFirstLoading ? /*#__PURE__*/_jsx(Box, {
         width: size,
         height: size,
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+        children: /*#__PURE__*/_jsx(CircularProgress, {
           style: {
             width: size - 4,
             height: size - 4,
             color: dark ? '#fff' : ''
           }
         })
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
-        icon: _personOutlineRounded.default,
+      }) : /*#__PURE__*/_jsx(Icon, {
+        icon: PersonOutlineRoundedIcon,
         fontSize: size,
         color: dark ? '#fff' : 'inherit',
         style: {
@@ -60,13 +52,13 @@ function UnLogin(_ref) {
   });
 }
 UnLogin.propTypes = {
-  session: _propTypes.default.object.isRequired,
-  onLogin: _propTypes.default.func,
-  size: _propTypes.default.number,
-  dark: _propTypes.default.bool
+  session: PropTypes.object.isRequired,
+  onLogin: PropTypes.func,
+  size: PropTypes.number,
+  dark: PropTypes.bool
 };
 UnLogin.defaultProps = {
-  onLogin: _noop.default,
+  onLogin: noop,
   size: 24,
   dark: false
 };