@arcblock/ux 2.8.26 → 2.9.0

package/es/SessionManager/components/user-info.js

@@ -1,143 +0,0 @@
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable react/prop-types */
-import { Box, Chip } from '@mui/material';
-import ShieldCheckIcon from '@iconify-icons/mdi/shield-check';
-import ExpandMoreIcon from '@iconify-icons/mdi/expand-more';
-import { Icon } from '@iconify/react';
-import { useCreation, useMemoizedFn } from 'ahooks';
-import DidAvatar from '../../Avatar';
-import DidAddress from '../../Address';
-import DID from '../../DID';
-import { getUserAvatar } from '../../Util';
-import { t as translate } from '../../Locale/util';
-import { translations } from '../libs/translation';
-import Typography from '../../Typography';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function UserInfo({
-  session,
-  locale,
-  onSwitchProfile,
-  onSwitchPassport,
-  switchProfile,
-  hasBindWallet
-}) {
-  const t = (key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  };
-  const avatar = getUserAvatar(session.user?.avatar?.replace(/\s/g, encodeURIComponent(' ')), 64);
-  const {
-    walletDid
-  } = session.useDid({
-    session
-  });
-  const currentRole = useCreation(() => session.user?.passports?.find(item => item.name === session.user.role), [session?.user?.passports, session?.user?.role]);
-  const userEmail = useCreation(() => session.user?.email, [session?.user]);
-  const canEdit = useCreation(() => {
-    if (onSwitchProfile instanceof Function) {
-      if (switchProfile && hasBindWallet) {
-        return true;
-      }
-    }
-    return false;
-  }, [onSwitchProfile, switchProfile, hasBindWallet, session.provider]);
-  const _onSwitchProfile = useMemoizedFn(() => {
-    if (window.blocklet?.appPid) {
-      window.location.href = '/.well-known/service/user/profile';
-    } else if (canEdit) {
-      onSwitchProfile();
-    }
-  });
-  return /*#__PURE__*/_jsxs(Box, {
-    sx: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: '12px',
-      padding: '15px'
-    },
-    children: [/*#__PURE__*/_jsx(Box, {
-      onClick: _onSwitchProfile,
-      "data-cy": "sessionManager-switch-profile-trigger",
-      sx: {
-        cursor: canEdit ? 'pointer' : 'default',
-        position: 'relative',
-        borderRadius: '100%',
-        overflow: 'hidden',
-        fontSize: 0,
-        '&:hover': canEdit ? {
-          '&::after': {
-            content: `"${t('switch')}"`,
-            position: 'absolute',
-            bottom: 0,
-            background: 'rgba(0, 0, 0, 0.2)',
-            left: 0,
-            right: 0,
-            height: '2.2em',
-            color: 'white',
-            textAlign: 'center',
-            fontSize: '12px',
-            lineHeight: '2em'
-          }
-        } : {}
-      },
-      children: /*#__PURE__*/_jsx(DidAvatar, {
-        variant: "circle",
-        did: session.user.did,
-        src: avatar,
-        size: 64,
-        shape: "circle"
-      })
-    }), /*#__PURE__*/_jsxs(Box, {
-      sx: {
-        flex: 1,
-        position: 'static',
-        overflow: 'hidden',
-        fontSize: '14px'
-      },
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: "h5",
-        fontWeight: "bold",
-        sx: {
-          wordBreak: 'break-all',
-          lineHeight: 1
-        },
-        children: session.user.fullName
-      }), /*#__PURE__*/_jsx(Chip, {
-        label: currentRole?.title || session.user?.role.toUpperCase(),
-        size: "small",
-        variant: "outlined",
-        sx: {
-          height: 'auto',
-          marginRight: 0,
-          fontWeight: 'bold',
-          fontSize: '12px',
-          margin: '6px 0 4px 0'
-        },
-        icon: /*#__PURE__*/_jsx(Icon, {
-          icon: ShieldCheckIcon,
-          height: "0.8em"
-        }),
-        deleteIcon: /*#__PURE__*/_jsx(Icon, {
-          icon: ExpandMoreIcon,
-          height: "1em"
-        })
-        // HACK: 必须设置 onDelete 函数，deleteIcon 才能显示出来
-        ,
-        onDelete: onSwitchPassport,
-        onClick: onSwitchPassport,
-        "data-cy": "sessionManager-switch-passport-trigger"
-      }), session.provider === 'auth0' ? walletDid ? /*#__PURE__*/_jsx(DID, {
-        responsive: false,
-        compact: true,
-        did: walletDid
-      }) : null : /*#__PURE__*/_jsx(DID, {
-        responsive: false,
-        compact: true,
-        did: session.user.did
-      }), userEmail ? /*#__PURE__*/_jsx(DidAddress, {
-        responsive: false,
-        children: userEmail
-      }) : null]
-    })]
-  });
-}

package/es/SessionManager/components/user-popper.js

@@ -1,110 +0,0 @@
-import PropTypes from 'prop-types';
-import { IconButton, Paper, Popper, ClickAwayListener } from '@mui/material';
-import CloseIcon from '@iconify-icons/mdi/close';
-import { Icon } from '@iconify/react';
-import { styled } from '../../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function UserPopper({
-  anchorEl,
-  dark,
-  children,
-  open,
-  onClose,
-  autoClose
-}) {
-  return anchorEl && /*#__PURE__*/_jsx(StyledPopper, {
-    open: open,
-    disablePortal: true,
-    anchorEl: anchorEl,
-    placement: "bottom-end",
-    $dark: dark,
-    children: /*#__PURE__*/_jsx(Paper, {
-      sx: [theme => ({
-        borderColor: '#F0F0F0',
-        boxShadow: '0px 8px 12px rgba(92, 92, 92, 0.04)',
-        borderRadius: theme.spacing(2),
-        overflow: 'auto',
-        maxWidth: 'calc(100vw - 10px)',
-        maxHeight: 'calc(100vh - 80px)',
-        '& .MuiChip-root .MuiChip-icon': {
-          color: theme.palette.success.main
-        },
-        '& .MuiList-root': {
-          width: '320px'
-        }
-      }), dark && {
-        backgroundColor: '#27282c',
-        color: '#fff',
-        border: 0,
-        '& .MuiChip-root': {
-          borderColor: '#aaa'
-        },
-        '& .MuiListItem-root, & .MuiChip-label': {
-          color: '#aaa'
-        },
-        '& .MuiListItem-root:hover': {
-          backgroundColor: '#363434'
-        }
-      }],
-      variant: "outlined",
-      children: autoClose ? /*#__PURE__*/_jsx(ClickAwayListener, {
-        onClickAway: onClose,
-        children: children
-      }) : /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(IconButton, {
-          size: "small",
-          sx: {
-            cursor: 'pointer',
-            position: 'absolute',
-            right: 0,
-            top: 0,
-            zIndex: 1
-          },
-          onClick: onClose,
-          children: /*#__PURE__*/_jsx(Icon, {
-            icon: CloseIcon,
-            width: 20,
-            height: 20
-          })
-        }), children]
-      })
-    })
-  });
-}
-UserPopper.propTypes = {
-  anchorEl: PropTypes.instanceOf(Element),
-  dark: PropTypes.bool,
-  open: PropTypes.bool,
-  children: PropTypes.any.isRequired,
-  onClose: PropTypes.func,
-  autoClose: PropTypes.bool
-};
-UserPopper.defaultProps = {
-  anchorEl: null,
-  dark: false,
-  open: false,
-  onClose: () => {},
-  autoClose: true
-};
-const StyledPopper = styled(Popper)`
-  z-index: ${({
-  theme
-}) => {
-  return theme.zIndex.tooltip;
-}};
-
-  .session-manager-menu-item {
-    padding: 15px;
-    color: #777;
-    font-size: 16px;
-    &:hover {
-      background-color: #fbfbfb;
-    }
-  }
-  .session-manager-menu-icon {
-    color: #999;
-    margin-right: 8px;
-  }
-`;

package/es/SessionManager/hooks/use-config.js

@@ -1,34 +0,0 @@
-import { useLocalStorageState, useMemoizedFn } from 'ahooks';
-import cloneDeep from 'lodash/cloneDeep';
-export default function useConfig() {
-  const [config, setConfig] = useLocalStorageState('blocklet:sessionManager:config', {
-    defaultValue: {
-      accounts: [],
-      expandAccount: true,
-      expandBlocklet: true
-    }
-  });
-  const connectAccount = useMemoizedFn(account => {
-    const cloneConfig = cloneDeep(config);
-    const accountIndex = cloneConfig.accounts.findIndex(x => x.did === account.did);
-    if (accountIndex >= 0) {
-      cloneConfig.accounts.splice(accountIndex, 1);
-    }
-    cloneConfig.accounts.unshift(account);
-    setConfig(cloneConfig);
-  });
-  const deleteAccount = useMemoizedFn(account => {
-    const cloneConfig = cloneDeep(config);
-    const findIndex = cloneConfig.accounts.findIndex(item => item.did === account.did);
-    if (findIndex >= 0) {
-      cloneConfig.accounts.splice(findIndex, 1);
-    }
-    setConfig(cloneConfig);
-  });
-  return {
-    config,
-    setConfig,
-    connectAccount,
-    deleteAccount
-  };
-}

package/es/SessionManager/libs/translation.js

@@ -1,52 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-export const translations = {
-  en: {
-    switch: 'Switch',
-    account: 'account',
-    switchDid: 'Switch DID',
-    switchTo: 'Switch to',
-    switchProfile: 'Switch Profile',
-    switchPassport: 'Switch Passport',
-    disconnect: 'Disconnect',
-    connect: 'Connect',
-    openInWallet: 'Open DID Wallet',
-    alreadyBindOAuth: 'Already bind Auth0',
-    bind: 'Bind ',
-    thirdParty: 'Third Party Login',
-    addAppAccount: 'Add {appName} account',
-    accounts: 'Accounts',
-    blocklet: 'Blocklet',
-    from: 'From',
-    addAnotherAccount: 'Add another account',
-    deleteAccountTitle: 'Remove this account ?',
-    deleteAccountContent: 'After delete account, you can add it again',
-    confirm: 'Confirm',
-    cancel: 'Cancel',
-    noneMenu: 'Empty menu, maybe you should switch to another role'
-  },
-  zh: {
-    switch: '切换',
-    account: '账号',
-    switchDid: '切换账户',
-    switchTo: '切换至',
-    switchProfile: '切换用户信息',
-    switchPassport: '切换通行证',
-    disconnect: '退出登录',
-    connect: '登录',
-    openInWallet: '打开 DID 钱包',
-    // NOTE: 目前只有 Auth0，展示出具体的第三方名字会更好
-    alreadyBindOAuth: '已绑定 Auth0 账号',
-    bind: '绑定',
-    thirdParty: '第三方登录',
-    addAppAccount: '添加 {appName} 账户',
-    accounts: '账户',
-    blocklet: '应用',
-    from: '连接至',
-    addAnotherAccount: '添加账号',
-    deleteAccountTitle: '是否删除账户？',
-    deleteAccountContent: '账户删除后，可再次添加',
-    confirm: '确认',
-    cancel: '取消',
-    noneMenu: '无操作项，请尝试切换角色'
-  }
-};

package/es/SessionManager/libs/utils.js

@@ -1,2 +0,0 @@
-export const getSourceProvider = user => user?.sourceProvider || user?.extraConfigs?.sourceProvider || 'wallet';
-export const getConnectedAccounts = user => user?.connectedAccounts || user?.extraConfigs?.connectedAccounts || [];

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

@@ -1,219 +0,0 @@
-"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 _appleIos = _interopRequireDefault(require("@iconify-icons/mdi/apple-ios"));
-var _android = _interopRequireDefault(require("@iconify-icons/mdi/android"));
-var _web = _interopRequireDefault(require("@iconify-icons/mdi/web"));
-var _api = _interopRequireDefault(require("@iconify-icons/mdi/api"));
-var _auth0Icon = _interopRequireDefault(require("@iconify-icons/logos/auth0-icon"));
-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("../libs/translation");
-var _federated = require("../../Util/federated");
-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 federatedEnabled = (0, _federated.getFederatedEnabled)();
-  const _onChoose = (0, _ahooks.useMemoizedFn)(() => onChoose(account, {
-    active
-  }));
-  const _onDelete = (0, _ahooks.useMemoizedFn)(e => {
-    e.preventDefault();
-    e.stopPropagation();
-    onDelete(account, {
-      active
-    });
-  });
-  const stopPropagation = (0, _ahooks.useMemoizedFn)(e => {
-    e.stopPropagation();
-  });
-  const walletIcon = (0, _ahooks.useCreation)(() => {
-    const {
-      walletOS,
-      provider
-    } = account;
-    if (provider === 'auth0') {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
-        icon: _auth0Icon.default,
-        width: 10,
-        height: 10,
-        style: {
-          color: 'black'
-        }
-      });
-    }
-    if (walletOS === 'ios') {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
-        icon: _appleIos.default,
-        width: 16,
-        height: 16,
-        style: {
-          color: 'black'
-        }
-      });
-    }
-    if (walletOS === 'android') {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
-        icon: _android.default,
-        width: 14,
-        height: 14,
-        style: {
-          color: 'black'
-        }
-      });
-    }
-    if (walletOS === 'web') {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
-        icon: _web.default,
-        style: {
-          color: 'black'
-        }
-      });
-    }
-    if (walletOS === 'api') {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
-        icon: _api.default,
-        width: 14,
-        height: 14,
-        style: {
-          color: 'black'
-        }
-      });
-    }
-    return null;
-  }, [account.walletOS]);
-  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
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
-        variant: "caption",
-        display: "flex",
-        alignItems: "center",
-        gap: 0.5,
-        children: [walletIcon, federatedEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [t('from'), ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Link, {
-            href: account.appUrl,
-            target: "_blank",
-            onClick: stopPropagation,
-            sx: {
-              textDecoration: 'none',
-              '&:hover': {
-                textDecoration: 'underline'
-              }
-            },
-            children: account.appName
-          })]
-        }) :
-        // HACK: 用于在有 icon 的情况下，该该行的高度撑高为文字高度
-        walletIcon && '　']
-      })]
-    }), /*#__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/components/add-account-item.js

@@ -1,66 +0,0 @@
-"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 _util = require("../../Locale/util");
-var _translation = require("../libs/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,
-    session
-  } = _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 apps = (0, _ahooks.useCreation)(() => {
-    return (0, _federated.getApps)();
-  }, []);
-  const _onAdd = (0, _ahooks.useMemoizedFn)(() => {
-    var _session$user;
-    // HACK: 如果是非统一登录应用，则 sourceAppPid 的值为 null
-    const sourceAppPid = (session === null || session === void 0 ? void 0 : (_session$user = session.user) === null || _session$user === void 0 ? void 0 : _session$user.sourceAppPid) || null;
-    const app = apps.find(x => x.appPid === sourceAppPid);
-    if (app) {
-      onAdd(app);
-    } else {
-      onAdd(apps[0]);
-    }
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
-    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')
-    })]
-  });
-}
-AddAccountItem.propTypes = {
-  onAdd: _propTypes.default.func,
-  locale: _propTypes.default.string,
-  session: _propTypes.default.object.isRequired
-};
-AddAccountItem.defaultProps = {
-  onAdd: () => {},
-  locale: 'en'
-};