@arcblock/ux 2.8.25 → 2.9.0

package/src/SessionBlocklet/index.jsx

@@ -0,0 +1,181 @@
+import { useRef } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Box,
+  ClickAwayListener,
+  Fade,
+  IconButton,
+  List,
+  ListItem,
+  ListItemButton,
+  Paper,
+  Popper,
+  Typography,
+} from '@mui/material';
+import { Icon } from '@iconify/react';
+import DashboardOutlineRoundedIcon from '@iconify-icons/material-symbols/dashboard-outline-rounded';
+import WidgetsOutlineRoundedIcon from '@iconify-icons/material-symbols/widgets-outline-rounded';
+import { useMemoizedFn, useReactive } from 'ahooks';
+
+import Button from '../Button';
+import { temp as colors } from '../Colors';
+import { AUTH_SERVICE_PREFIX, NAVIGATION_URL } from '../Util/constant';
+import SessionPermission from '../SessionPermission';
+
+export default function SessionBlocklet({ session, locale, size }) {
+  const blocklet = window?.blocklet || {};
+  const sessionMenuList = (blocklet.navigation || [])
+    // HACK 过滤掉默认插入的 /sessionManager 菜单
+    .filter((item) => item.section === 'sessionManager' && !['/sessionManager'].includes(item.id))
+    .filter((item) => {
+      if ((item?.role || []).includes(session?.user?.role || 'guest')) {
+        return true;
+      }
+      return false;
+    })
+    .map((item) => {
+      const component = (blocklet?.componentMountPoints || []).find((x) => item.component === x.name);
+      return {
+        ...item,
+        component,
+      };
+    });
+  const popperAnchorRef = useRef(null);
+  const currentState = useReactive({
+    open: false,
+  });
+  const onTogglePopper = useMemoizedFn((value = !currentState.open) => {
+    currentState.open = value;
+  });
+
+  if (sessionMenuList.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <IconButton size="medium" ref={popperAnchorRef} onClick={() => onTogglePopper()}>
+        <Icon icon={DashboardOutlineRoundedIcon} fontSize={size} />
+      </IconButton>
+      <Popper
+        open={currentState.open}
+        onClose={() => onTogglePopper(false)}
+        anchorEl={popperAnchorRef.current}
+        transition
+        placement="bottom-end"
+        sx={{ zIndex: 1600 }}>
+        {({ TransitionProps }) => (
+          <ClickAwayListener
+            onClickAway={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onTogglePopper(false);
+            }}>
+            <Fade {...TransitionProps} timeout={350}>
+              <Paper
+                variant="outlined"
+                sx={{
+                  borderRadius: 3,
+                  width: 350,
+                  maxWidth: '90vw',
+                  borderColor: colors.lineStep,
+                  p: 2,
+                  border: '0 !important',
+                  boxShadow: `0px 8px 16px 0px ${colors.gray6}, 0px 0px 0px 1px ${colors.gray6}`,
+                }}>
+                <List
+                  sx={{
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(auto-fill, 100px)',
+                    gridAutoRows: 'minmax(100px, max-content)',
+                    justifyContent: 'space-between',
+                    maxHeight: 350,
+                    overflowY: 'auto',
+                    p: 0,
+                  }}>
+                  {sessionMenuList.map((item) => (
+                    <ListItem key={item.id} disablePadding>
+                      <ListItemButton
+                        href={item.link}
+                        sx={{
+                          p: 1,
+                          display: 'flex',
+                          flexDirection: 'column',
+                          alignItems: 'center',
+                          gap: 1,
+                          width: '100%',
+                          height: '100%',
+                          borderRadius: 2,
+                          '&:hover': {
+                            backgroundColor: colors.surfacePrimarySubtitle,
+                          },
+                        }}>
+                        {item?.component?.did ? (
+                          <Box
+                            component="img"
+                            src={`${AUTH_SERVICE_PREFIX}/blocklet/logo-bundle/${item.component.did}`}
+                            sx={{
+                              borderRadius: 2,
+                              width: 50,
+                              height: 50,
+                              objectFit: 'contain',
+                            }}
+                          />
+                        ) : (
+                          <Icon
+                            fontSize={50}
+                            icon={item.icon || WidgetsOutlineRoundedIcon}
+                            color={colors.textSubtitle}
+                          />
+                        )}
+
+                        <Typography
+                          sx={{
+                            fontSize: '12px',
+                            color: colors.textBase,
+                            textAlign: 'center',
+                            lineHeight: 'normal',
+                          }}>
+                          {item.title?.zh || item.title}
+                        </Typography>
+                      </ListItemButton>
+                    </ListItem>
+                  ))}
+                </List>
+                <SessionPermission session={session}>
+                  <Button
+                    variant="outlined"
+                    fullWidth
+                    href={NAVIGATION_URL}
+                    sx={{
+                      mt: 1,
+                      borderRadius: 2,
+                      color: colors.textBase,
+                      borderColor: colors.lineBorderStrong,
+                      '&:hover': {
+                        color: colors.primaryBase,
+                        borderColor: colors.primaryBase,
+                      },
+                    }}>
+                    {locale === 'zh' ? '管理' : 'Manage'}
+                  </Button>
+                </SessionPermission>
+              </Paper>
+            </Fade>
+          </ClickAwayListener>
+        )}
+      </Popper>
+    </>
+  );
+}
+
+SessionBlocklet.propTypes = {
+  session: PropTypes.object.isRequired,
+  locale: PropTypes.string,
+  size: PropTypes.number,
+};
+
+SessionBlocklet.defaultProps = {
+  locale: 'en',
+  size: 24,
+};

package/src/SessionManager/index.jsx

@@ -1,370 +1,3 @@
-/* eslint-disable react/prop-types */
-/* eslint-disable react/jsx-no-bind */
-import { useEffect, useMemo, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import { Box, IconButton, MenuList, Button, CircularProgress, Divider } from '@mui/material';
-import AccountIcon from '@arcblock/icons/lib/Account';
-import noop from 'lodash/noop';
-import cloneDeep from 'lodash/cloneDeep';
-import { useLatest, useMemoizedFn } from 'ahooks';
+import SessionUser from '../SessionUser';
 
-import DidAvatar from '../Avatar';
-import { getUserAvatar, sleep } from '../Util';
-import FederatedLoginDetecter from './components/federated-login-detecter';
-import UserInfo from './components/user-info';
-import ResponsivePopper from './components/responsive-popper';
-import { translate } from '../Locale/util';
-import ManageAccounts from './components/manage-accounts';
-import ManageBlocklet from './components/manage-blocklet';
-import { translations } from './libs/translation';
-import { getConnectedAccounts, getSourceProvider } from './libs/utils';
-import useConfig from './hooks/use-config';
-import { getCurrentApp, getFederatedApp } from '../Util/federated';
-
-function SessionManager({
-  session,
-  locale,
-  showText,
-  showRole,
-  switchDid,
-  switchProfile,
-  switchPassport,
-  disableLogout,
-  onLogin,
-  onLogout,
-  onSwitchDid,
-  onSwitchProfile,
-  onSwitchPassport,
-  onBindWallet,
-  menu,
-  menuRender,
-  dark,
-  size,
-  showManageBlocklet,
-  ...rest
-}) {
-  const latestSession = useLatest(session);
-  const { connectAccount, config, setConfig, deleteAccount } = useConfig();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  const userAnchorRef = useRef(null);
-  const { logoutOAuth, switchOAuthPassport } = session.useOAuth();
-  const [userOpen, setUserOpen] = useState(false);
-
-  // base64 img maybe have some blank char, need encodeURIComponent to transform it
-  const avatar = getUserAvatar(session.user?.avatar?.replace(/\s/g, encodeURIComponent(' ')));
-
-  const isRawWalletAccount = getSourceProvider(session.user) === 'wallet';
-  const connectedAccounts = getConnectedAccounts(session.user);
-
-  const isFirstLoading = useMemo(() => {
-    return session?.initialized === false && session?.loading === true;
-  }, [session?.initialized, session?.loading]);
-
-  let hasBindWallet = false;
-  let hasBindAccount = false;
-  if (isRawWalletAccount) {
-    if (connectedAccounts.some((item) => item.provider !== 'wallet')) {
-      hasBindAccount = true;
-    }
-    hasBindWallet = true;
-  } else if (connectedAccounts.some((item) => item.provider === 'wallet')) {
-    hasBindAccount = true;
-    hasBindWallet = true;
-  }
-
-  const _connectAccount = useMemoizedFn(async () => {
-    // HACK: 强制等待组件渲染一轮，以拿到最新的 session 值
-    await sleep();
-    if (!latestSession.current?.user) {
-      return;
-    }
-    if (typeof window === 'undefined') {
-      return;
-    }
-    const blocklet = window?.blocklet;
-    const currentApp = getCurrentApp(blocklet);
-    const masterApp = getFederatedApp(blocklet);
-    const targetApp = latestSession.current.user.sourceAppPid ? masterApp : currentApp;
-    if (targetApp) {
-      const loginAccount = {
-        ...targetApp,
-        did: latestSession.current.user.did,
-        avatar: latestSession.current.user.avatar,
-        provider: latestSession.current.provider || targetApp.provider,
-        walletOS: latestSession.current.walletOS,
-      };
-      connectAccount(loginAccount);
-    }
-  });
-
-  // HACK: 用于处理 统一登录 的自动登录情况，添加一个已连接的账号
-  // 同时可用于以前的站点，会自动生成一个已连接的账号
-  useEffect(() => {
-    if (session.user) {
-      _connectAccount();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [session.user]);
-
-  if (!session.user) {
-    return (
-      <>
-        {showText ? (
-          <Button
-            ref={userAnchorRef}
-            sx={[{ borderRadius: '100vw' }, dark && { color: '#fff', borderColor: '#fff' }]}
-            variant="outlined"
-            onClick={_onLogin}
-            role="button"
-            aria-label="Login button"
-            {...rest}
-            data-cy="sessionManager-login">
-            {isFirstLoading ? <CircularProgress /> : <AccountIcon />}
-            <span style={{ lineHeight: '25px' }}>{t('connect')}</span>
-          </Button>
-        ) : (
-          <IconButton
-            ref={userAnchorRef}
-            {...rest}
-            onClick={_onLogin}
-            data-cy="sessionManager-login"
-            size="medium"
-            role="button"
-            aria-label="Login button">
-            {isFirstLoading ? (
-              <Box width={size} height={size} display="flex" justifyContent="center" alignItems="center">
-                <CircularProgress style={{ width: size - 4, height: size - 4, color: dark ? '#fff' : '' }} />
-              </Box>
-            ) : (
-              <AccountIcon style={{ width: size, height: size, color: dark ? '#fff' : '' }} />
-            )}
-          </IconButton>
-        )}
-
-        <FederatedLoginDetecter locale={locale} dark={dark} session={session} anchorEl={userAnchorRef.current} />
-      </>
-    );
-  }
-
-  function onToggleUser() {
-    setUserOpen((prevOpen) => !prevOpen);
-  }
-
-  function close() {
-    setUserOpen(false);
-  }
-
-  function onCloseUser(e) {
-    if (userAnchorRef.current && userAnchorRef.current.contains(e.target)) {
-      return;
-    }
-    close();
-  }
-
-  function _onLogin() {
-    if (!isFirstLoading) {
-      session.login((...args) => {
-        _connectAccount();
-        onLogin(...args);
-      });
-    }
-  }
-  function _onLogout() {
-    return new Promise((resolve, reject) => {
-      logoutOAuth({ session, hack: true })
-        .catch((err) => {
-          console.error(err);
-          reject(err);
-        })
-        .finally(() => {
-          session.logout((...args) => {
-            onLogout(...args);
-            resolve();
-            close();
-          });
-        });
-    });
-  }
-  /**
-   * @name 切换账户
-   * @description 该功能仅在登录后才能使用，目前仅用于切换普通登录和统一登录的账户，所以会增加一些与统一登录相关的逻辑
-   */
-
-  function _onSwitchProfile() {
-    session.switchProfile((...args) => {
-      close();
-      onSwitchProfile(...args);
-    });
-  }
-
-  function _onSwitchPassport() {
-    const { user, provider } = session;
-    if (['auth0'].includes(provider)) {
-      switchOAuthPassport(user);
-    } else {
-      close();
-      session.switchPassport((...args) => {
-        close();
-        onSwitchPassport(...args);
-      });
-    }
-  }
-
-  return (
-    <>
-      <IconButton
-        ref={userAnchorRef}
-        onClick={onToggleUser}
-        {...rest}
-        data-cy="sessionManager-logout-popup"
-        size="medium"
-        role="button"
-        aria-label="User info button"
-        style={{ lineHeight: 1 }}>
-        <DidAvatar variant="circle" did={session.user.did} src={avatar} size={size} shape="circle" />
-      </IconButton>
-
-      <ResponsivePopper open={userOpen} onClose={onCloseUser} anchorEl={userAnchorRef.current} dark={dark}>
-        <MenuList sx={{ p: 0 }}>
-          <UserInfo
-            session={session}
-            size={size}
-            locale={locale}
-            onSwitchProfile={() => {
-              close();
-              _onSwitchProfile();
-            }}
-            onSwitchPassport={() => {
-              close();
-              _onSwitchPassport();
-            }}
-            close={close}
-            switchProfile={switchProfile}
-            hasBindWallet={hasBindWallet}
-          />
-
-          <Divider />
-
-          <ManageAccounts
-            session={session}
-            locale={locale}
-            onBindWallet={onBindWallet}
-            onSwitchDid={onSwitchDid}
-            connectAccount={_connectAccount}
-            close={close}
-            hasBindAccount={hasBindAccount}
-            onLogout={_onLogout}
-            expanded={config.expandAccount}
-            onExpand={(value) => {
-              const cloneConfig = cloneDeep(config);
-              cloneConfig.expandAccount = value;
-              setConfig(cloneConfig);
-            }}
-            deleteAccount={deleteAccount}
-            accounts={config.accounts}
-          />
-
-          {/* 为了避免控制台出现警告，采用数组的方式 */}
-          {/* MUI:The Menu component doesn't accept a Fragment as a child. Consider providing an array instead. */}
-          {showManageBlocklet
-            ? [
-                <Divider key="divider" />,
-                <ManageBlocklet
-                  key="manageBlocklet"
-                  menu={menu}
-                  menuRender={menuRender}
-                  locale={locale}
-                  expanded={config.expandBlocklet}
-                  onExpand={(value) => {
-                    const cloneConfig = cloneDeep(config);
-                    cloneConfig.expandBlocklet = value;
-                    setConfig(cloneConfig);
-                  }}
-                />,
-              ]
-            : null}
-        </MenuList>
-      </ResponsivePopper>
-    </>
-  );
-}
-
-SessionManager.propTypes = {
-  session: PropTypes.shape({
-    federatedMaster: PropTypes.object,
-    provider: PropTypes.oneOf(['wallet', 'auth0', '']),
-    user: PropTypes.shape({
-      did: PropTypes.string.isRequired,
-      role: PropTypes.string.isRequired,
-      fullName: PropTypes.string,
-      email: PropTypes.string,
-      avatar: PropTypes.string,
-      sourceProvider: PropTypes.string,
-      connectedAccounts: PropTypes.arrayOf(
-        PropTypes.shape({
-          provider: PropTypes.string.isRequired,
-          did: PropTypes.string.isRequired,
-          id: PropTypes.string,
-        })
-      ),
-      passports: PropTypes.arrayOf(
-        PropTypes.shape({
-          name: PropTypes.string.isRequired,
-          title: PropTypes.string.isRequired,
-        })
-      ),
-      // Deprecated
-      extraConfigs: PropTypes.object,
-    }),
-    login: PropTypes.func.isRequired,
-    logout: PropTypes.func.isRequired,
-    switchDid: PropTypes.func.isRequired,
-    switchProfile: PropTypes.func.isRequired,
-    switchPassport: PropTypes.func.isRequired,
-    bindWallet: PropTypes.func.isRequired,
-    refresh: PropTypes.func.isRequired,
-  }).isRequired,
-  locale: PropTypes.string,
-  showText: PropTypes.bool,
-  showRole: PropTypes.bool,
-  switchDid: PropTypes.bool,
-  switchProfile: PropTypes.bool,
-  switchPassport: PropTypes.bool,
-  disableLogout: PropTypes.bool,
-  onLogin: PropTypes.func,
-  onLogout: PropTypes.func,
-  onSwitchDid: PropTypes.func,
-  onSwitchProfile: PropTypes.func,
-  onSwitchPassport: PropTypes.func,
-  onBindWallet: PropTypes.func,
-  menu: PropTypes.array,
-  menuRender: PropTypes.func,
-  dark: PropTypes.bool,
-  size: PropTypes.number,
-  showManageBlocklet: PropTypes.bool,
-};
-
-SessionManager.defaultProps = {
-  locale: 'en',
-  showText: false,
-  showRole: false,
-  switchDid: true,
-  switchProfile: true,
-  switchPassport: true,
-  disableLogout: false,
-  menu: [],
-  menuRender: noop,
-  onLogin: noop,
-  onLogout: noop,
-  onSwitchDid: noop,
-  onSwitchProfile: noop,
-  onSwitchPassport: noop,
-  onBindWallet: noop,
-  dark: false,
-  size: 24,
-  showManageBlocklet: true,
-};
-
-export default SessionManager;
+export default SessionUser;

package/src/SessionPermission/index.jsx

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types';
+import { useCreation } from 'ahooks';
+
+const roleList = ['owner', 'admin', 'member', 'guest'];
+
+export default function SessionPermission({ session, roles, children }) {
+  const hasPermission = useCreation(() => {
+    return roles.includes(session?.user?.role || 'guest');
+  }, [session?.user?.role, roles]);
+
+  if (typeof children === 'function') {
+    return children({ hasPermission });
+  }
+
+  if (hasPermission) {
+    return children;
+  }
+}
+
+SessionPermission.propTypes = {
+  children: PropTypes.any.isRequired,
+  session: PropTypes.object.isRequired,
+  roles: PropTypes.arrayOf(PropTypes.oneOf(roleList)),
+};
+
+SessionPermission.defaultProps = {
+  roles: ['owner', 'admin'],
+};