@arcblock/ux 2.7.15 → 2.7.17

package/es/SessionManager/manage-blocklet.js

@@ -0,0 +1,70 @@
+/* eslint-disable react/no-array-index-key */
+import PropTypes from 'prop-types';
+import { useMemoizedFn } from 'ahooks';
+import { Icon } from '@iconify/react';
+import AppsIcon from '@iconify-icons/mdi/apps';
+import { MenuItem, SvgIcon } from '@mui/material';
+import MenuAccordion from './menu-accordion';
+import { translate } from '../Locale/util';
+import { translations } from './translation';
+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 ManageBlocklet({
+  menu,
+  menuRender,
+  locale,
+  expanded,
+  onExpand
+}) {
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  return /*#__PURE__*/_jsxs(MenuAccordion, {
+    expanded: expanded,
+    locale: locale,
+    onChange: onExpand,
+    title: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Icon, {
+        icon: AppsIcon,
+        width: 24,
+        height: 24,
+        className: "session-manager-menu-icon"
+      }), t('blocklet')]
+    }),
+    children: [Array.isArray(menu) && menu.map((menuItem, index) => {
+      const {
+        svgIcon,
+        ...menuProps
+      } = menuItem;
+      return /*#__PURE__*/_jsxs(MenuItem, {
+        className: "session-manager-menu-item",
+        ...menuProps,
+        icon: undefined,
+        label: undefined,
+        children: [svgIcon ? svgIcon && /*#__PURE__*/_jsx(SvgIcon, {
+          component: svgIcon,
+          className: "session-manager-menu-icon"
+        }) : menuItem.icon, menuItem.label]
+      }, index);
+    }), menuRender({
+      classes: {
+        menuItem: 'session-manager-menu-item',
+        menuIcon: 'session-manager-menu-icon'
+      }
+    })]
+  });
+}
+ManageBlocklet.propTypes = {
+  menu: PropTypes.array,
+  menuRender: PropTypes.func,
+  locale: PropTypes.string.isRequired,
+  expanded: PropTypes.bool,
+  onExpand: PropTypes.func
+};
+ManageBlocklet.defaultProps = {
+  menu: [],
+  menuRender: () => {},
+  expanded: true,
+  onExpand: () => {}
+};

package/es/SessionManager/menu-accordion.js

@@ -0,0 +1,104 @@
+import PropTypes from 'prop-types';
+import { Accordion, AccordionDetails, AccordionSummary, MenuItem } from '@mui/material';
+import ExpandMoreIcon from '@iconify-icons/mdi/expand-more';
+import { Icon } from '@iconify/react';
+import isEmpty from 'lodash/isEmpty';
+import isNil from 'lodash/isNil';
+import { useCreation, useMemoizedFn } from 'ahooks';
+import { translate } from '../Locale/util';
+import { translations } from './translation';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function isEmptyNode(node) {
+  if (isNil(node)) {
+    return true;
+  }
+  if (isEmpty(node)) {
+    return true;
+  }
+  if (Array.isArray(node)) {
+    return node.every(item => isEmptyNode(item));
+  }
+  return false;
+}
+export default function MenuAccordion({
+  title,
+  children,
+  locale,
+  expanded,
+  onChange
+}) {
+  const isEmptyChildren = useCreation(() => isEmptyNode(children), [children]);
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  return /*#__PURE__*/_jsxs(Accordion, {
+    expanded: expanded,
+    disableGutters: true,
+    elevation: 0,
+    onChange: (e, value) => {
+      onChange(value);
+    },
+    sx: {
+      '&.MuiAccordion-root:before': {
+        content: 'unset'
+      },
+      '.MuiAccordionSummary-root': {
+        minHeight: 'auto',
+        width: '100%'
+      },
+      '.MuiAccordionSummary-content': {
+        margin: 0
+      },
+      '.MuiAccordionDetails-root': {
+        padding: 0,
+        paddingLeft: '30px',
+        '.session-manager-menu-item': {
+          fontSize: '15px',
+          padding: '12px 15px',
+          whiteSpace: 'normal'
+        },
+        '.session-manager-menu-icon': {
+          height: '21px',
+          widht: '21px'
+        }
+      }
+    },
+    children: [/*#__PURE__*/_jsx(MenuItem, {
+      sx: {
+        padding: 0,
+        width: '100%'
+      },
+      children: /*#__PURE__*/_jsx(AccordionSummary, {
+        className: "session-manager-menu-item",
+        expandIcon: /*#__PURE__*/_jsx(Icon, {
+          icon: ExpandMoreIcon,
+          width: 24,
+          height: 24
+        }),
+        children: title
+      })
+    }), /*#__PURE__*/_jsx(AccordionDetails, {
+      children: isEmptyChildren ? /*#__PURE__*/_jsx(MenuItem, {
+        disabled: true,
+        className: "session-manager-menu-item",
+        sx: {
+          justifyContent: 'center'
+        },
+        children: t('noneMenu')
+      }, "empty") : children
+    })]
+  });
+}
+MenuAccordion.propTypes = {
+  title: PropTypes.any.isRequired,
+  children: PropTypes.any.isRequired,
+  locale: PropTypes.string,
+  expanded: PropTypes.bool,
+  onChange: PropTypes.func
+};
+MenuAccordion.defaultProps = {
+  locale: 'en',
+  expanded: true,
+  onChange: () => {}
+};

package/es/SessionManager/translation.js

@@ -0,0 +1,52 @@
+/* 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 agian',
+    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/use-config.js

@@ -0,0 +1,34 @@
+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/user-info.js

@@ -0,0 +1,147 @@
+/* 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 './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(' ')));
+  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 || 'lancelot_lewis@163.com', [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 (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__*/_jsxs(Box, {
+        display: "flex",
+        alignItems: "center",
+        gap: "4px",
+        mb: 0.5,
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "h5",
+          fontWeight: "bold",
+          fontSize: "auto",
+          sx: {
+            flex: 1,
+            wordBreak: 'break-all'
+          },
+          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'
+          },
+          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/user-popper.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import { IconButton, Paper, Popper, ClickAwayListener } from '@mui/material';
-import { Close as CloseIcon } from '@mui/icons-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";
@@ -58,7 +59,11 @@ export default function UserPopper({
             zIndex: 1
           },
           onClick: onClose,
-          children: /*#__PURE__*/_jsx(CloseIcon, {})
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: CloseIcon,
+            width: 20,
+            height: 20
+          })
         }), children]
       })
     })
@@ -86,58 +91,10 @@ const StyledPopper = styled(Popper)`
   return theme.zIndex.tooltip;
 }};
   .MuiList-root {
-    /* HACK: 需要288px 才能将 did 展示完整 */
-    width: 290px;
-  }
-  .session-manager-user {
-    font-size: 12px;
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 24px 24px 10px;
-  }
-  .session-manager-user-name {
-    font-size: 20px;
-    color: ${({
-  $dark
-}) => $dark ? '#aaa' : '#222'};
-    font-weight: bold;
-    margin-bottom: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  .session-manager-id-item {
-    position: relative;
-    padding-left: 8px;
-    /* HACK: 当前元素既是第一个，也是最后一个，即只有一个同级元素 */
-    &:first-of-type:last-of-type {
-      padding-left: 0;
-      &:before,
-      &:after {
-        content: unset;
-      }
-    }
-    &:before {
-      position: absolute;
-      content: '';
-      left: 0px;
-      top: 50%;
-      width: 6px;
-      height: 1px;
-      background-color: #aeaeae;
-    }
-    &:not(:last-of-type):after {
-      position: absolute;
-      content: '';
-      left: 0px;
-      top: 50%;
-      height: 100%;
-      width: 1px;
-      background-color: #aeaeae;
-    }
+    width: 320px;
   }
   .session-manager-menu-item {
-    padding: 18.5px 24px;
+    padding: 15px;
     color: #777;
     font-size: 16px;
     &:hover {
@@ -146,6 +103,6 @@ const StyledPopper = styled(Popper)`
   }
   .session-manager-menu-icon {
     color: #999;
-    margin-right: 16px;
+    margin-right: 8px;
   }
 `;

package/es/SessionManager/utils.js

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

package/es/Typography/index.js

@@ -0,0 +1,89 @@
+import PropTyps from 'prop-types';
+import { Box, Typography as MuiTypography, Skeleton } from '@mui/material';
+import { useReactive, useSize } from 'ahooks';
+import { useEffect, useRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function Typography({
+  minFontSize,
+  fontSize,
+  children,
+  sx,
+  ...rest
+}) {
+  const refMock = useRef(null);
+  const refContainer = useRef(null);
+  const state = useReactive({
+    fontSize,
+    loading: true,
+    initialSize: undefined
+  });
+  const mockSize = useSize(refMock.current);
+  const containerSize = useSize(refContainer.current);
+  useEffect(() => {
+    if (state.loading) {
+      if (fontSize === 'auto') {
+        if (mockSize && !state.initialSize) {
+          const styleSize = getComputedStyle(refMock.current).fontSize;
+          state.initialSize = Number(styleSize.replace('px', ''));
+          state.fontSize = state.initialSize;
+        }
+        if (containerSize && mockSize) {
+          if (containerSize.width < mockSize.width && state.fontSize > minFontSize) {
+            state.fontSize--;
+          } else {
+            state.loading = false;
+          }
+        }
+      } else {
+        state.loading = false;
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fontSize, mockSize?.width, containerSize?.width]);
+  return state.loading ? /*#__PURE__*/_jsxs(Box, {
+    ref: refContainer,
+    flex: 1,
+    children: [/*#__PURE__*/_jsx(MuiTypography, {
+      ...rest,
+      sx: sx,
+      noWrap: true,
+      children: /*#__PURE__*/_jsx(Skeleton, {
+        variant: "text",
+        sx: {
+          fontSize: '1rem'
+        }
+      })
+    }), /*#__PURE__*/_jsx(MuiTypography, {
+      ref: refMock,
+      ...rest,
+      sx: {
+        ...sx,
+        fontSize: `${state.fontSize}px !important`,
+        position: 'fixed',
+        top: -1000,
+        left: -1000
+      },
+      noWrap: true,
+      children: children
+    })]
+  }) : /*#__PURE__*/_jsx(MuiTypography, {
+    ...rest,
+    sx: {
+      ...sx,
+      fontSize: `${state.fontSize}px !important`
+    },
+    children: children
+  });
+}
+Typography.propTypes = {
+  fontSize: PropTyps.oneOfType([PropTyps.string, PropTyps.number]),
+  children: PropTyps.any.isRequired,
+  minFontSize: PropTyps.number,
+  sx: PropTyps.object
+};
+Typography.defaultProps = {
+  fontSize: undefined,
+  minFontSize: 12,
+  sx: {}
+};

package/es/Util/federated.js

@@ -0,0 +1,65 @@
+import isEmpty from 'lodash/isEmpty';
+export function getMaster(blocklet = window.blocklet) {
+  const federated = blocklet?.settings?.federated || {};
+  return federated.master;
+}
+export function getConfig(blocklet = window.blocklet) {
+  const federated = blocklet?.settings?.federated || {};
+  return federated.config;
+}
+export function getAutoLoginFederated(blocklet = window.blocklet) {
+  const config = getConfig(blocklet);
+  return Boolean(config?.autoLogin) && config?.status === 'approved';
+}
+export function getSourceAppPid(blocklet = window.blocklet) {
+  const master = getMaster(blocklet);
+  return master?.appPid;
+}
+export function getFederatedApp(blocklet = window.blocklet) {
+  const master = getMaster(blocklet);
+  const isFederatedMode = !isEmpty(master);
+  return isFederatedMode ? {
+    appId: master.appId,
+    appName: master.appName,
+    appDescription: master.appDescription,
+    appLogo: master.appLogo,
+    appPid: master.appPid,
+    appUrl: master.appUrl,
+    version: master.version,
+    sourceAppPid: master.appPid,
+    provider: 'wallet'
+  } : null;
+}
+export function getCurrentApp(blocklet = window.blocklet) {
+  // 适用于 blocklet 项目
+  if (blocklet) {
+    return {
+      appId: blocklet.appId,
+      appName: blocklet.appName,
+      appDescription: blocklet.appDescription,
+      appLogo: blocklet.appLogo,
+      appPid: blocklet.appPid,
+      appUrl: blocklet.appUrl,
+      version: blocklet.version,
+      // NOTICE: null 代表该值置空
+      sourceAppPid: null,
+      provider: 'wallet'
+    };
+  }
+  // HACK: 适用于 blockelt-server
+  if (window.env) {
+    // eslint-disable-next-line no-param-reassign
+    blocklet = window.env;
+    return {
+      appId: blocklet.appId,
+      appName: blocklet.appName,
+      appDescription: blocklet.appDescription,
+      appUrl: blocklet.baseUrl,
+      // NOTICE: null 代表该值置空
+      sourceAppPid: null,
+      provider: 'wallet',
+      type: 'server'
+    };
+  }
+  return null;
+}

package/es/Util/index.js

@@ -295,4 +295,11 @@ export const getUserAvatar = (avatar, size = 48) => {
     });
   }
   return avatar;
+};
+export const sleep = (time = 0) => {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve();
+    }, time);
+  });
 };