@arcblock/ux 2.7.15 → 2.7.17

package/lib/Dialog/confirm.js

@@ -9,7 +9,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
 var _ahooks = require("ahooks");
 var _noop = _interopRequireDefault(require("lodash/noop"));
-var _context = require("../Locale/context");
 var _Button = _interopRequireDefault(require("../Button"));
 var _dialog = _interopRequireDefault(require("./dialog"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -106,16 +105,15 @@ Confirm.defaultProps = {
   PaperProps: {}
 };
 const ConfirmHolder = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const {
-    t
-  } = (0, _react.useContext)(_context.LocaleContext);
   const state = (0, _ahooks.useReactive)({
     show: false,
     title: '',
     content: '',
     onConfirm: _noop.default,
     onCancel: _noop.default,
-    loading: false
+    loading: false,
+    confirmButtonText: 'Confirm',
+    cancelButtonText: 'Cancel'
   });
   const open = (0, _ahooks.useMemoizedFn)(function () {
     let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -124,6 +122,8 @@ const ConfirmHolder = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     state.content = params.content;
     state.onConfirm = params.onConfirm || _noop.default;
     state.onCancel = params.onCancel || _noop.default;
+    if (params.confirmButtonText) state.confirmButtonText = params.confirmButtonText;
+    if (params.cancelButtonText) state.cancelButtonText = params.cancelButtonText;
     state.loading = false;
   });
   const reset = (0, _ahooks.useMemoizedFn)(() => {
@@ -131,6 +131,8 @@ const ConfirmHolder = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     state.content = '';
     state.onConfirm = _noop.default;
     state.onCancel = _noop.default;
+    state.confirmButtonText = 'Confirm';
+    state.cancelButtonText = 'Cancel';
   });
   const close = (0, _ahooks.useMemoizedFn)(() => {
     state.show = false;
@@ -162,7 +164,7 @@ const ConfirmHolder = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     onConfirm: onConfirm,
     onCancel: onCancel,
     confirmButton: {
-      text: t('common.confirm'),
+      text: state.confirmButtonText,
       props: {
         variant: 'contained',
         color: 'primary',
@@ -170,7 +172,7 @@ const ConfirmHolder = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
       }
     },
     cancelButton: {
-      text: t('common.cancel'),
+      text: state.cancelButtonText,
       props: {
         variant: 'outlined',
         color: 'primary'

package/lib/Img/index.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _SvgIcon = _interopRequireDefault(require("@mui/material/SvgIcon"));
 var _reactIntersectionObserver = require("react-intersection-observer");
-var _Alert = _interopRequireDefault(require("mdi-material-ui/Alert"));
-var _Image = _interopRequireDefault(require("mdi-material-ui/Image"));
+var _alert = _interopRequireDefault(require("@iconify-icons/mdi/alert"));
+var _image = _interopRequireDefault(require("@iconify-icons/mdi/image"));
+var _react2 = require("@iconify/react");
 var _Theme = require("../Theme");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["lazy", "width", "height", "repeat", "ratio", "alt", "size", "position", "src", "placeholder", "fallback", "style", "className", "onError", "onSuccess"];
@@ -173,15 +173,15 @@ function Img(_ref) {
         children: [!fallback && imgState === 'error' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "image--state",
           title: "loading image",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
-            component: _Alert.default,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+            icon: _alert.default,
             className: "image--icon"
           })
         }), !placeholder && imgState === 'loading' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "image--state",
           title: "Image load error",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
-            component: _Image.default,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+            icon: _image.default,
             className: "image--icon"
           })
         }), imgState === 'loaded' && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {

package/lib/SessionManager/account-item.js

@@ -0,0 +1,141 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = AccountItem;
+var _material = require("@mui/material");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("@iconify/react");
+var _check = _interopRequireDefault(require("@iconify-icons/mdi/check"));
+var _trashCanOutline = _interopRequireDefault(require("@iconify-icons/mdi/trash-can-outline"));
+var _ahooks = require("ahooks");
+var _Avatar = _interopRequireDefault(require("../Avatar"));
+var _DID = _interopRequireDefault(require("../DID"));
+var _util = require("../Locale/util");
+var _translation = require("./translation");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function AccountItem(_ref) {
+  let {
+    account,
+    active,
+    onDelete,
+    onChoose,
+    locale
+  } = _ref;
+  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);
+  });
+  const _onChoose = (0, _ahooks.useMemoizedFn)(() => onChoose(account, {
+    active
+  }));
+  const _onDelete = (0, _ahooks.useMemoizedFn)(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    onDelete(account, {
+      active
+    });
+  });
+  if (!(account !== null && account !== void 0 && account.did) || !(account !== null && account !== void 0 && account.appName)) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+    onClick: _onChoose,
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      overflow: 'hidden',
+      gap: '8px',
+      position: 'relative',
+      '.account-item-actions': {
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        bottom: 0,
+        marginRight: '12px',
+        display: 'flex',
+        alignItems: 'center'
+      },
+      '.account-item-action': {
+        alignItems: 'center',
+        display: 'none'
+      },
+      '&:hover .account-item-action': {
+        display: 'flex'
+      }
+    },
+    className: "session-manager-menu-item",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+      did: account.did,
+      size: 42
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        flex: 1,
+        overflow: 'hidden',
+        fontSize: 0,
+        '.did-address-avatar': {
+          display: 'none !important'
+        }
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DID.default, {
+        did: account.did,
+        copyable: false,
+        size: 14,
+        responsive: false,
+        compact: true,
+        sx: {
+          lineHeight: 1
+        }
+      }), account.sourceAppPid && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+        variant: "caption",
+        children: [t('from'), ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Link, {
+          href: account.appUrl,
+          target: "_blank",
+          underline: "none",
+          children: account.appName
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      className: "account-item-actions",
+      children: active ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        className: "account-item-action",
+        style: {
+          display: 'flex'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+          color: "success",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+            icon: _check.default,
+            color: "success"
+          })
+        })
+      }, "CheckIcon") : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        className: "account-item-action",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+          color: "error",
+          onClick: _onDelete,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+            icon: _trashCanOutline.default,
+            color: "error"
+          })
+        })
+      }, "TrashCanOutlineIcon")
+    })]
+  });
+}
+AccountItem.propTypes = {
+  account: _propTypes.default.object,
+  active: _propTypes.default.bool,
+  locale: _propTypes.default.string,
+  onChoose: _propTypes.default.func,
+  onDelete: _propTypes.default.func
+};
+AccountItem.defaultProps = {
+  account: null,
+  active: false,
+  locale: 'en',
+  onChoose: () => {},
+  onDelete: () => {}
+};

package/lib/SessionManager/add-account-item.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = AddAccountItem;
+var _react = require("@iconify/react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _material = require("@mui/material");
+var _iosAddCircleOutline = _interopRequireDefault(require("@iconify-icons/ion/ios-add-circle-outline"));
+var _ahooks = require("ahooks");
+var _react2 = require("react");
+var _util = require("../Locale/util");
+var _translation = require("./translation");
+var _federated = require("../Util/federated");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function AddAccountItem(_ref) {
+  let {
+    onAdd,
+    locale
+  } = _ref;
+  const addRef = (0, _react2.useRef)(null);
+  const state = (0, _ahooks.useReactive)({
+    open: false
+  });
+  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);
+  });
+  const apps = (0, _ahooks.useCreation)(() => {
+    var _window;
+    const appList = [];
+    if (typeof window === 'undefined') {
+      return appList;
+    }
+    const blocklet = (_window = window) === null || _window === void 0 ? void 0 : _window.blocklet;
+    const masterApp = (0, _federated.getFederatedApp)(blocklet);
+    const currentApp = (0, _federated.getCurrentApp)(blocklet);
+    if (currentApp) {
+      appList.push(currentApp);
+    }
+    if (masterApp && (masterApp === null || masterApp === void 0 ? void 0 : masterApp.appId) !== (currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId)) {
+      appList.push(masterApp);
+    }
+    // NOTICE: masterApp 应该排在前面
+    return appList.reverse();
+  }, [window.blocklet]);
+  const _onAdd = (0, _ahooks.useMemoizedFn)(() => {
+    if (apps.length <= 1) {
+      onAdd(apps[0]);
+    } else {
+      state.open = true;
+    }
+  });
+  const onClose = (0, _ahooks.useMemoizedFn)(() => {
+    state.open = false;
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+      ref: addRef,
+      onClick: _onAdd,
+      className: "session-manager-menu-item",
+      sx: {
+        display: 'flex',
+        gap: '8px'
+      },
+      "data-cy": "sessionManager-switch-trigger",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+        icon: _iosAddCircleOutline.default,
+        width: 24,
+        height: 24
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        children: t('addAnotherAccount')
+      })]
+    }), addRef.current ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Menu, {
+      anchorEl: addRef.current,
+      open: state.open,
+      onClose: onClose,
+      elevation: 0,
+      PaperProps: {
+        variant: 'outlined'
+      },
+      anchorOrigin: {
+        vertical: 'top',
+        horizontal: 'left'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'left'
+      },
+      children: apps.map(app => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        onClick: () => onAdd(app),
+        children: t('connectWithAccount', {
+          name: app.appName
+        })
+      }, app.appId))
+    }) : null]
+  });
+}
+AddAccountItem.propTypes = {
+  onAdd: _propTypes.default.func,
+  locale: _propTypes.default.string
+};
+AddAccountItem.defaultProps = {
+  onAdd: () => {},
+  locale: 'en'
+};

package/lib/SessionManager/federated-login-detecter.js

@@ -9,8 +9,9 @@ var _react = require("react");
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
 var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
-var _SvgIcon = _interopRequireDefault(require("@mui/material/SvgIcon"));
-var _ShieldCheck = _interopRequireDefault(require("mdi-material-ui/ShieldCheck"));
+var _shieldCheck = _interopRequireDefault(require("@iconify-icons/mdi/shield-check"));
+var _react2 = require("@iconify/react");
+var _ahooks = require("ahooks");
 var _userPopper = _interopRequireDefault(require("./user-popper"));
 var _Avatar = _interopRequireDefault(require("../Avatar"));
 var _Address = _interopRequireDefault(require("../Address"));
@@ -48,54 +49,60 @@ const translations = {
   }
 };
 function FederatedLoginDetecter(_ref3) {
-  var _session$federatedMas, _session$federatedMas2, _userInfo$role, _userInfo$role2;
+  var _federatedMaster$site2, _federatedMaster$user, _federatedMaster$user2;
   let {
     session,
     anchorEl,
     dark,
     locale: _locale
   } = _ref3;
-  const [federatedLoginOpen, setFederatedLoginOpen] = (0, _react.useState)(true);
-  const siteInfo = (_session$federatedMas = session.federatedMaster) === null || _session$federatedMas === void 0 ? void 0 : _session$federatedMas.site;
-  const userInfo = (_session$federatedMas2 = session.federatedMaster) === null || _session$federatedMas2 === void 0 ? void 0 : _session$federatedMas2.user;
+  const state = (0, _ahooks.useReactive)({
+    open: true
+  });
+  const federatedMaster = (0, _ahooks.useCreation)(() => {
+    return session.federatedMaster;
+  }, [session === null || session === void 0 ? void 0 : session.federatedMaster]);
   const localeList = Object.keys(translations);
   const locale = localeList.includes(_locale) ? _locale : localeList[0];
   const onLoginFederated = (0, _react.useCallback)(() => {
+    var _federatedMaster$site;
     session === null || session === void 0 ? void 0 : session.login(err => {
       if (err) {
         _Toast.default.error(err || translations[_locale].loginFederatedFailed);
       } else {
-        setFederatedLoginOpen(false);
+        state.open = false;
       }
     }, {
-      provider: 'federated',
-      mode: userInfo ? 'auto' : 'manual'
+      sourceAppPid: federatedMaster === null || federatedMaster === void 0 ? void 0 : (_federatedMaster$site = federatedMaster.site) === null || _federatedMaster$site === void 0 ? void 0 : _federatedMaster$site.appPid,
+      mode: federatedMaster !== null && federatedMaster !== void 0 && federatedMaster.user ? 'auto' : 'manual'
     });
-  }, [session, userInfo, _locale]);
+  }, [session, federatedMaster === null || federatedMaster === void 0 ? void 0 : (_federatedMaster$site2 = federatedMaster.site) === null || _federatedMaster$site2 === void 0 ? void 0 : _federatedMaster$site2.appPid, federatedMaster === null || federatedMaster === void 0 ? void 0 : federatedMaster.user, _locale, state]);
   let appLogoUrl;
-  if (siteInfo) {
-    appLogoUrl = new URL(siteInfo.appLogo, siteInfo.appUrl);
+  if (federatedMaster !== null && federatedMaster !== void 0 && federatedMaster.site) {
+    appLogoUrl = new URL(federatedMaster.site.appLogo, federatedMaster.site.appUrl);
     appLogoUrl.searchParams.set('imageFilter', 'resize');
     // HACK: 保持跟其他地方使用的尺寸一致，可以复用同一资源的缓存，减少网络请求
     appLogoUrl.searchParams.set('w', '80');
     appLogoUrl.searchParams.set('h', '80');
   }
-  return siteInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_userPopper.default, {
-    open: federatedLoginOpen,
+  return (federatedMaster === null || federatedMaster === void 0 ? void 0 : federatedMaster.site) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_userPopper.default, {
+    open: state.open,
     anchorEl: anchorEl,
     dark: dark,
     autoClose: false,
-    onClose: () => setFederatedLoginOpen(false),
+    onClose: () => {
+      state.open = false;
+    },
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
       p: 2,
-      children: [siteInfo && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      children: [federatedMaster.site && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
         display: "flex",
         alignItems: "center",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
           component: "img",
           mr: 2,
           src: appLogoUrl.href,
-          alt: siteInfo.appName,
+          alt: federatedMaster.site.appName,
           width: "30px",
           height: "30px"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
@@ -105,7 +112,7 @@ function FederatedLoginDetecter(_ref3) {
           children: translations[locale].useToConnect({
             master: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
               component: "a",
-              href: siteInfo.appUrl,
+              href: federatedMaster.site.appUrl,
               target: "_blank",
               sx: {
                 textDecoration: 'none',
@@ -113,22 +120,22 @@ function FederatedLoginDetecter(_ref3) {
                 color: 'primary.main',
                 fontSize: '1.2em'
               },
-              children: siteInfo.appName
+              children: federatedMaster.site.appName
             }),
             member: window.blocklet.appName
           })
         })]
-      }), siteInfo && userInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+      }), (federatedMaster === null || federatedMaster === void 0 ? void 0 : federatedMaster.site) && (federatedMaster === null || federatedMaster === void 0 ? void 0 : federatedMaster.user) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
         style: {
           margin: '15px 0 10px 0'
         }
-      }), userInfo && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      }), (federatedMaster === null || federatedMaster === void 0 ? void 0 : federatedMaster.user) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
         display: "flex",
         alignItems: "center",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
           variant: "circle",
-          did: userInfo.did,
-          src: (0, _Util.getUserAvatar)(userInfo.avatar),
+          did: federatedMaster.user.did,
+          src: (0, _Util.getUserAvatar)(federatedMaster.user.avatar),
           size: 28,
           shape: "circle"
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
@@ -139,9 +146,9 @@ function FederatedLoginDetecter(_ref3) {
             alignItems: "center",
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
               fontSize: 18,
-              children: userInfo.fullName
-            }), ((_userInfo$role = userInfo.role) === null || _userInfo$role === void 0 ? void 0 : _userInfo$role.toUpperCase()) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
-              label: (_userInfo$role2 = userInfo.role) === null || _userInfo$role2 === void 0 ? void 0 : _userInfo$role2.toUpperCase(),
+              children: federatedMaster.user.fullName
+            }), ((_federatedMaster$user = federatedMaster.user.role) === null || _federatedMaster$user === void 0 ? void 0 : _federatedMaster$user.toUpperCase()) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+              label: (_federatedMaster$user2 = federatedMaster.user.role) === null || _federatedMaster$user2 === void 0 ? void 0 : _federatedMaster$user2.toUpperCase(),
               size: "small",
               variant: "outlined",
               sx: {
@@ -149,19 +156,17 @@ function FederatedLoginDetecter(_ref3) {
                 marginRight: 0,
                 fontSize: 12
               },
-              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
-                component: _ShieldCheck.default,
-                style: {
-                  fontSize: '14px'
-                }
+              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+                icon: _shieldCheck.default,
+                fontSize: 14
               })
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
             responsive: false,
-            children: userInfo.did
+            children: federatedMaster.user.did
           })]
         })]
-      }), siteInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      }), (federatedMaster === null || federatedMaster === void 0 ? void 0 : federatedMaster.site) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
         display: "flex",
         justifyContent: "center",
         mt: 2,