@arcblock/ux 2.8.26 → 2.9.0

package/lib/SessionManager/components/user-drawer.js

@@ -1,75 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = UserDrawer;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _material = require("@mui/material");
-var _close = _interopRequireDefault(require("@iconify-icons/mdi/close"));
-var _react = require("@iconify/react");
-var _noop = _interopRequireDefault(require("lodash/noop"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function UserDrawer(_ref) {
-  let {
-    children,
-    open,
-    onOpen,
-    onClose
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Drawer, {
-    anchor: "bottom",
-    open: open,
-    onClose: onClose,
-    onOpen: onOpen,
-    sx: theme => ({
-      '& .MuiDrawer-paper.MuiPaper-root': {
-        width: '100%',
-        height: '90vh',
-        borderTopLeftRadius: '16px',
-        borderTopRightRadius: '16px'
-      },
-      '& .MuiChip-root .MuiChip-icon': {
-        color: theme.palette.success.main
-      },
-      '& .session-manager-menu-item': {
-        padding: '15px',
-        color: '#777',
-        fontSize: '16px',
-        '&:hover': {
-          backgroundColor: '#fbfbfb'
-        }
-      },
-      '& .session-manager-menu-icon': {
-        color: '#999',
-        marginRight: '8px'
-      }
-    }),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
-      sx: {
-        cursor: 'pointer',
-        position: 'absolute',
-        right: '8px',
-        top: '8px',
-        zIndex: 1
-      },
-      onClick: onClose,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
-        icon: _close.default,
-        width: 28,
-        height: 28
-      })
-    }), children]
-  });
-}
-UserDrawer.propTypes = {
-  children: _propTypes.default.any.isRequired,
-  open: _propTypes.default.bool.isRequired,
-  onOpen: _propTypes.default.func,
-  onClose: _propTypes.default.func
-};
-UserDrawer.defaultProps = {
-  onOpen: _noop.default,
-  onClose: _noop.default
-};

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

@@ -1,160 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = UserInfo;
-var _material = require("@mui/material");
-var _shieldCheck = _interopRequireDefault(require("@iconify-icons/mdi/shield-check"));
-var _expandMore = _interopRequireDefault(require("@iconify-icons/mdi/expand-more"));
-var _react = require("@iconify/react");
-var _ahooks = require("ahooks");
-var _Avatar = _interopRequireDefault(require("../../Avatar"));
-var _Address = _interopRequireDefault(require("../../Address"));
-var _DID = _interopRequireDefault(require("../../DID"));
-var _Util = require("../../Util");
-var _util = require("../../Locale/util");
-var _translation = require("../libs/translation");
-var _Typography = _interopRequireDefault(require("../../Typography"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable react/prop-types */
-
-function UserInfo(_ref) {
-  var _session$user, _session$user$avatar, _session$user3, _session$user4, _session$user6;
-  let {
-    session,
-    locale,
-    onSwitchProfile,
-    onSwitchPassport,
-    switchProfile,
-    hasBindWallet
-  } = _ref;
-  const t = function t(key) {
-    let data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    return (0, _util.t)(_translation.translations, key, locale, 'en', data);
-  };
-  const avatar = (0, _Util.getUserAvatar)((_session$user = session.user) === null || _session$user === void 0 ? void 0 : (_session$user$avatar = _session$user.avatar) === null || _session$user$avatar === void 0 ? void 0 : _session$user$avatar.replace(/\s/g, encodeURIComponent(' ')), 64);
-  const {
-    walletDid
-  } = session.useDid({
-    session
-  });
-  const currentRole = (0, _ahooks.useCreation)(() => {
-    var _session$user2, _session$user2$passpo;
-    return (_session$user2 = session.user) === null || _session$user2 === void 0 ? void 0 : (_session$user2$passpo = _session$user2.passports) === null || _session$user2$passpo === void 0 ? void 0 : _session$user2$passpo.find(item => item.name === session.user.role);
-  }, [session === null || session === void 0 ? void 0 : (_session$user3 = session.user) === null || _session$user3 === void 0 ? void 0 : _session$user3.passports, session === null || session === void 0 ? void 0 : (_session$user4 = session.user) === null || _session$user4 === void 0 ? void 0 : _session$user4.role]);
-  const userEmail = (0, _ahooks.useCreation)(() => {
-    var _session$user5;
-    return (_session$user5 = session.user) === null || _session$user5 === void 0 ? void 0 : _session$user5.email;
-  }, [session === null || session === void 0 ? void 0 : session.user]);
-  const canEdit = (0, _ahooks.useCreation)(() => {
-    if (onSwitchProfile instanceof Function) {
-      if (switchProfile && hasBindWallet) {
-        return true;
-      }
-    }
-    return false;
-  }, [onSwitchProfile, switchProfile, hasBindWallet, session.provider]);
-  const _onSwitchProfile = (0, _ahooks.useMemoizedFn)(() => {
-    var _window$blocklet;
-    if ((_window$blocklet = window.blocklet) !== null && _window$blocklet !== void 0 && _window$blocklet.appPid) {
-      window.location.href = '/.well-known/service/user/profile';
-    } else if (canEdit) {
-      onSwitchProfile();
-    }
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-    sx: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: '12px',
-      padding: '15px'
-    },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.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: "\"".concat(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__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
-        variant: "circle",
-        did: session.user.did,
-        src: avatar,
-        size: 64,
-        shape: "circle"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-      sx: {
-        flex: 1,
-        position: 'static',
-        overflow: 'hidden',
-        fontSize: '14px'
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-        variant: "h5",
-        fontWeight: "bold",
-        sx: {
-          wordBreak: 'break-all',
-          lineHeight: 1
-        },
-        children: session.user.fullName
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
-        label: (currentRole === null || currentRole === void 0 ? void 0 : currentRole.title) || ((_session$user6 = session.user) === null || _session$user6 === void 0 ? void 0 : _session$user6.role.toUpperCase()),
-        size: "small",
-        variant: "outlined",
-        sx: {
-          height: 'auto',
-          marginRight: 0,
-          fontWeight: 'bold',
-          fontSize: '12px',
-          margin: '6px 0 4px 0'
-        },
-        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
-          icon: _shieldCheck.default,
-          height: "0.8em"
-        }),
-        deleteIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
-          icon: _expandMore.default,
-          height: "1em"
-        })
-        // HACK: 必须设置 onDelete 函数，deleteIcon 才能显示出来
-        ,
-        onDelete: onSwitchPassport,
-        onClick: onSwitchPassport,
-        "data-cy": "sessionManager-switch-passport-trigger"
-      }), session.provider === 'auth0' ? walletDid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DID.default, {
-        responsive: false,
-        compact: true,
-        did: walletDid
-      }) : null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_DID.default, {
-        responsive: false,
-        compact: true,
-        did: session.user.did
-      }), userEmail ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
-        responsive: false,
-        children: userEmail
-      }) : null]
-    })]
-  });
-}

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

@@ -1,104 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = UserPopper;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _material = require("@mui/material");
-var _close = _interopRequireDefault(require("@iconify-icons/mdi/close"));
-var _react = require("@iconify/react");
-var _Theme = require("../../Theme");
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-function UserPopper(_ref) {
-  let {
-    anchorEl,
-    dark,
-    children,
-    open,
-    onClose,
-    autoClose
-  } = _ref;
-  return anchorEl && /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPopper, {
-    open: open,
-    disablePortal: true,
-    anchorEl: anchorEl,
-    placement: "bottom-end",
-    $dark: dark,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.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__*/(0, _jsxRuntime.jsx)(_material.ClickAwayListener, {
-        onClickAway: onClose,
-        children: children
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
-          size: "small",
-          sx: {
-            cursor: 'pointer',
-            position: 'absolute',
-            right: 0,
-            top: 0,
-            zIndex: 1
-          },
-          onClick: onClose,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
-            icon: _close.default,
-            width: 20,
-            height: 20
-          })
-        }), children]
-      })
-    })
-  });
-}
-UserPopper.propTypes = {
-  anchorEl: _propTypes.default.instanceOf(Element),
-  dark: _propTypes.default.bool,
-  open: _propTypes.default.bool,
-  children: _propTypes.default.any.isRequired,
-  onClose: _propTypes.default.func,
-  autoClose: _propTypes.default.bool
-};
-UserPopper.defaultProps = {
-  anchorEl: null,
-  dark: false,
-  open: false,
-  onClose: () => {},
-  autoClose: true
-};
-const StyledPopper = (0, _Theme.styled)(_material.Popper)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n\n  .session-manager-menu-item {\n    padding: 15px;\n    color: #777;\n    font-size: 16px;\n    &:hover {\n      background-color: #fbfbfb;\n    }\n  }\n  .session-manager-menu-icon {\n    color: #999;\n    margin-right: 8px;\n  }\n"])), _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.zIndex.tooltip;
-});

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

@@ -1,41 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useConfig;
-var _ahooks = require("ahooks");
-var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function useConfig() {
-  const [config, setConfig] = (0, _ahooks.useLocalStorageState)('blocklet:sessionManager:config', {
-    defaultValue: {
-      accounts: [],
-      expandAccount: true,
-      expandBlocklet: true
-    }
-  });
-  const connectAccount = (0, _ahooks.useMemoizedFn)(account => {
-    const cloneConfig = (0, _cloneDeep.default)(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 = (0, _ahooks.useMemoizedFn)(account => {
-    const cloneConfig = (0, _cloneDeep.default)(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/lib/SessionManager/libs/translation.js

@@ -1,59 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.translations = void 0;
-/* eslint-disable import/prefer-default-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: '无操作项，请尝试切换角色'
-  }
-};
-exports.translations = translations;

package/src/SessionManager/components/account-item.jsx

@@ -1,156 +0,0 @@
-import { Box, IconButton, Link, MenuItem, Typography } from '@mui/material';
-import PropTypes from 'prop-types';
-import { Icon } from '@iconify/react';
-import CheckIcon from '@iconify-icons/mdi/check';
-import AppleIOSIcon from '@iconify-icons/mdi/apple-ios';
-import AndroidIcon from '@iconify-icons/mdi/android';
-import WebIcon from '@iconify-icons/mdi/web';
-import ApiIcon from '@iconify-icons/mdi/api';
-import Auth0Icon from '@iconify-icons/logos/auth0-icon';
-import TrashCanOutlineIcon from '@iconify-icons/mdi/trash-can-outline';
-import { useCreation, useMemoizedFn } from 'ahooks';
-
-import Avatar from '../../Avatar';
-import DID from '../../DID';
-import { translate } from '../../Locale/util';
-import { translations } from '../libs/translation';
-import { getFederatedEnabled } from '../../Util/federated';
-
-export default function AccountItem({ account, active, onDelete, onChoose, locale }) {
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-
-  const federatedEnabled = getFederatedEnabled();
-
-  const _onChoose = useMemoizedFn(() => onChoose(account, { active }));
-
-  const _onDelete = useMemoizedFn((e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    onDelete(account, { active });
-  });
-
-  const stopPropagation = useMemoizedFn((e) => {
-    e.stopPropagation();
-  });
-
-  const walletIcon = useCreation(() => {
-    const { walletOS, provider } = account;
-    if (provider === 'auth0') {
-      return <Icon icon={Auth0Icon} width={10} height={10} style={{ color: 'black' }} />;
-    }
-    if (walletOS === 'ios') {
-      return <Icon icon={AppleIOSIcon} width={16} height={16} style={{ color: 'black' }} />;
-    }
-    if (walletOS === 'android') {
-      return <Icon icon={AndroidIcon} width={14} height={14} style={{ color: 'black' }} />;
-    }
-    if (walletOS === 'web') {
-      return <Icon icon={WebIcon} style={{ color: 'black' }} />;
-    }
-    if (walletOS === 'api') {
-      return <Icon icon={ApiIcon} width={14} height={14} style={{ color: 'black' }} />;
-    }
-    return null;
-  }, [account.walletOS]);
-
-  if (!account?.did || !account?.appName) {
-    return null;
-  }
-
-  return (
-    <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">
-      <Avatar did={account.did} size={42} />
-      <Box
-        sx={{
-          flex: 1,
-          overflow: 'hidden',
-          fontSize: 0,
-          '.did-address-avatar': {
-            display: 'none !important',
-          },
-        }}>
-        <DID did={account.did} copyable={false} size={14} responsive={false} compact sx={{ lineHeight: 1 }} />
-        <Typography variant="caption" display="flex" alignItems="center" gap={0.5}>
-          {walletIcon}
-          {federatedEnabled ? (
-            <>
-              {t('from')}{' '}
-              <Link
-                href={account.appUrl}
-                target="_blank"
-                onClick={stopPropagation}
-                sx={{
-                  textDecoration: 'none',
-                  '&:hover': {
-                    textDecoration: 'underline',
-                  },
-                }}>
-                {account.appName}
-              </Link>
-            </>
-          ) : (
-            // HACK: 用于在有 icon 的情况下，该该行的高度撑高为文字高度
-            walletIcon && '　'
-          )}
-        </Typography>
-      </Box>
-      <Box className="account-item-actions">
-        {active ? (
-          <Box className="account-item-action" style={{ display: 'flex' }} key="CheckIcon">
-            <IconButton color="success">
-              <Icon icon={CheckIcon} color="success" />
-            </IconButton>
-          </Box>
-        ) : (
-          <Box className="account-item-action" key="TrashCanOutlineIcon">
-            <IconButton color="error" onClick={_onDelete}>
-              <Icon icon={TrashCanOutlineIcon} color="error" />
-            </IconButton>
-          </Box>
-        )}
-      </Box>
-    </MenuItem>
-  );
-}
-
-AccountItem.propTypes = {
-  account: PropTypes.object,
-  active: PropTypes.bool,
-  locale: PropTypes.string,
-  onChoose: PropTypes.func,
-  onDelete: PropTypes.func,
-};
-AccountItem.defaultProps = {
-  account: null,
-  active: false,
-  locale: 'en',
-  onChoose: () => {},
-  onDelete: () => {},
-};

package/src/SessionManager/components/add-account-item.jsx

@@ -1,49 +0,0 @@
-import { Icon } from '@iconify/react';
-import PropTypes from 'prop-types';
-import { MenuItem, Typography } from '@mui/material';
-import AddIcon from '@iconify-icons/ion/ios-add-circle-outline';
-import { useCreation, useMemoizedFn } from 'ahooks';
-import { translate } from '../../Locale/util';
-import { translations } from '../libs/translation';
-import { getApps } from '../../Util/federated';
-
-export default function AddAccountItem({ onAdd, locale, session }) {
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  const apps = useCreation(() => {
-    return getApps();
-  }, []);
-
-  const _onAdd = useMemoizedFn(() => {
-    // HACK: 如果是非统一登录应用，则 sourceAppPid 的值为 null
-    const sourceAppPid = session?.user?.sourceAppPid || null;
-    const app = apps.find((x) => x.appPid === sourceAppPid);
-    if (app) {
-      onAdd(app);
-    } else {
-      onAdd(apps[0]);
-    }
-  });
-
-  return (
-    <MenuItem
-      onClick={_onAdd}
-      className="session-manager-menu-item"
-      sx={{ display: 'flex', gap: '8px' }}
-      data-cy="sessionManager-switch-trigger">
-      <Icon icon={AddIcon} width={24} height={24} />
-      <Typography>{t('addAnotherAccount')}</Typography>
-    </MenuItem>
-  );
-}
-
-AddAccountItem.propTypes = {
-  onAdd: PropTypes.func,
-  locale: PropTypes.string,
-  session: PropTypes.object.isRequired,
-};
-AddAccountItem.defaultProps = {
-  onAdd: () => {},
-  locale: 'en',
-};