@blocklet/ui-react 3.4.15 → 3.5.0

package/src/common/org-switch/index.jsx

@@ -1,407 +0,0 @@
-/**
- * orgs switch
- */
-import PropTypes from 'prop-types';
-import { useState, useRef, useMemo, useEffect } from 'react';
-import { useDebounce, useInfiniteScroll, useMemoizedFn, useRequest } from 'ahooks';
-import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
-import {
-  Box,
-  Button,
-  Typography,
-  Menu,
-  MenuItem,
-  TextField,
-  Divider,
-  Avatar,
-  ListItemAvatar,
-  ListItemText,
-  InputAdornment,
-} from '@mui/material';
-import { joinURL, withQuery } from 'ufo';
-import { KeyboardArrowDown, Search, Add, OpenInNew } from '@mui/icons-material';
-import { translate } from '@arcblock/ux/lib/Locale/util';
-
-import useOrg from './use-org';
-import { CreateOrgDialog } from './create';
-import translations from './locales';
-
-const PAGE_SIZE = 20;
-
-export default function OrgsSwitch({ session, locale = 'en' }) {
-  const [anchorEl, setAnchorEl] = useState(null);
-  const [searchText, setSearchText] = useState('');
-  const [visible, setVisible] = useState(false);
-  const buttonRef = useRef(null);
-
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-
-  const { getOrgs, getCurrentOrg } = useOrg(session);
-
-  const role = useMemo(() => {
-    return session?.user?.role || '';
-  }, [session?.user?.role]);
-
-  // 根据登录用户的 role 找到对应的 org
-  const { data: loggedOrg = {} } = useRequest(
-    () => {
-      return getCurrentOrg(role);
-    },
-    {
-      ready: !!role,
-      refreshDeps: [role],
-      onError: (error) => {
-        console.error('Failed to get organization role', error);
-      },
-    }
-  );
-
-  const currentOrg = useMemo(() => {
-    if (loggedOrg) {
-      return loggedOrg;
-    }
-    const passport = session?.user?.passports?.find((p) => p.name === role);
-    return {
-      name: passport?.title || role || '-',
-    };
-  }, [loggedOrg, role, session?.user?.passports]);
-
-  const debouncedSearchText = useDebounce(searchText, { wait: 500 });
-
-  const { data, loadMore, loadingMore, reload } = useInfiniteScroll(
-    async (d) => {
-      const page = d ? Math.ceil(d.list.length / PAGE_SIZE) + 1 : 1;
-      const params = { page, pageSize: PAGE_SIZE, search: searchText };
-      const response = await getOrgs(params);
-
-      const { orgs: resultOrgs = [], paging } = response || {};
-      return { list: resultOrgs, total: paging?.total || 0 };
-    },
-    {
-      ready: !!role,
-      reloadDeps: [debouncedSearchText],
-      isNoMore: (d) => {
-        if (!d?.list.length) return true;
-        return d.list.length >= d?.total;
-      },
-      onError: (error) => {
-        console.error('Failed to fetch organizations list', error);
-      },
-    }
-  );
-
-  const { list: allOrgs = [], total = 0 } = data || {};
-
-  const hasMore = allOrgs.length < total;
-
-  // 处理滚动事件
-  const handleListboxScroll = useMemoizedFn((event) => {
-    const listbox = event.target;
-    const { scrollTop, scrollHeight, clientHeight } = listbox;
-    // 当滚动到距离底部50px时开始加载
-    if (scrollHeight - scrollTop - clientHeight < 50 && !loadingMore && hasMore) {
-      loadMore();
-    }
-  });
-
-  const open = Boolean(anchorEl);
-
-  useEffect(() => {
-    if (open) {
-      reload();
-    }
-  }, [open, reload]);
-
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-    setVisible(false);
-    setSearchText('');
-  };
-
-  const handleOrgSelect = (org) => {
-    session.switchPassport(
-      () => {
-        window.location.reload();
-      },
-      { orgId: org.id }
-    );
-    handleClose();
-  };
-
-  const handleCreateNew = () => {
-    setVisible(true);
-  };
-
-  const handleViewAll = () => {
-    const targetUrl = withQuery(joinURL(WELLKNOWN_SERVICE_PATH_PREFIX, 'user/orgs'), { locale });
-    window.location.href = targetUrl;
-    handleClose();
-  };
-
-  // 渲染组织项目
-  const renderOrgItem = (org) => (
-    <MenuItem
-      key={org.id}
-      onClick={() => handleOrgSelect(org)}
-      selected={org.id === currentOrg.id}
-      sx={{
-        py: 1.5,
-        px: 2,
-        '&.Mui-selected': {
-          backgroundColor: 'action.selected',
-          '&:hover': {
-            backgroundColor: 'action.hover',
-          },
-        },
-      }}>
-      <ListItemAvatar sx={{ minWidth: 40 }}>
-        <Avatar
-          sx={{
-            width: 28,
-            height: 28,
-            fontSize: 14,
-            bgcolor: org.isOwner ? 'primary.main' : 'grey.400',
-          }}>
-          {org.name?.[0]}
-        </Avatar>
-      </ListItemAvatar>
-      <Box sx={{ display: 'flex', alignItems: 'center', flex: 1 }}>
-        <ListItemText
-          sx={{
-            '& .MuiListItemText-primary': {
-              mb: 0,
-            },
-            '& .MuiListItemText-secondary': {
-              mt: '-2px',
-            },
-          }}
-          primary={
-            <Typography variant="body2" sx={{ fontWeight: 500, lineHeight: 1.2 }}>
-              {org.name}
-            </Typography>
-          }
-          secondary={
-            <Typography variant="caption" color="text.secondary" sx={{ lineHeight: 1.1 }}>
-              {org.passports?.[0]?.title}
-            </Typography>
-          }
-        />
-        {org.id === currentOrg.id && (
-          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', ml: 1 }}>
-            <Typography variant="caption" color="primary" sx={{ fontSize: 10 }}>
-              ✓
-            </Typography>
-          </Box>
-        )}
-      </Box>
-    </MenuItem>
-  );
-
-  return (
-    <Box>
-      <Button
-        ref={buttonRef}
-        onClick={handleClick}
-        endIcon={<KeyboardArrowDown />}
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 1,
-          px: 2,
-          py: 1,
-          borderRadius: 1,
-          textTransform: 'none',
-          color: 'text.primary',
-          '&:hover': {
-            backgroundColor: 'action.hover',
-          },
-        }}
-        data-testid="org-switch-button">
-        <Avatar
-          sx={{
-            width: 24,
-            height: 24,
-            fontSize: 12,
-            bgcolor: 'primary.main',
-          }}>
-          {currentOrg.name?.[0]}
-        </Avatar>
-        <Typography variant="body2" sx={{ fontWeight: 500 }}>
-          {currentOrg.name}
-        </Typography>
-      </Button>
-
-      <Menu
-        anchorEl={anchorEl}
-        open={open}
-        onClose={handleClose}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'left',
-        }}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'left',
-        }}
-        PaperProps={{
-          sx: {
-            width: 340,
-            maxHeight: 480,
-            overflow: 'visible',
-            mt: 0.5,
-            borderRadius: 2,
-            boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.08)',
-            border: (theme) => `1px solid ${theme.palette.divider}`,
-          },
-        }}
-        MenuListProps={{
-          sx: { py: 0 },
-        }}>
-        {/* 搜索框 */}
-        <Box sx={{ p: 1.5, pb: 1 }}>
-          <TextField
-            fullWidth
-            size="small"
-            placeholder={t('search')}
-            value={searchText}
-            onChange={(e) => setSearchText(e.target.value)}
-            InputProps={{
-              startAdornment: (
-                <InputAdornment position="start">
-                  <Search fontSize="small" color="action" />
-                </InputAdornment>
-              ),
-            }}
-            onClick={(e) => e.stopPropagation()}
-            onKeyDown={(e) => e.stopPropagation()}
-            sx={{
-              '& .MuiOutlinedInput-root': {
-                borderRadius: 1,
-              },
-            }}
-          />
-        </Box>
-
-        {/* 组织标题 */}
-        <Box sx={{ px: 2, pb: 1 }}>
-          <Typography
-            variant="subtitle2"
-            color="text.secondary"
-            sx={{
-              fontSize: 11,
-              fontWeight: 600,
-              textTransform: 'uppercase',
-              letterSpacing: 0.5,
-            }}>
-            {t('orgs')}
-          </Typography>
-        </Box>
-
-        {/* 组织列表 */}
-        <Box sx={{ maxHeight: 240, overflow: 'auto' }} onScroll={handleListboxScroll}>
-          {allOrgs.length > 0 ? (
-            <>
-              {allOrgs.map((org, index) => {
-                const isLast = index === allOrgs.length - 1;
-                return (
-                  <Box key={org.id}>
-                    {renderOrgItem(org)}
-                    {/* 加载更多指示器 */}
-                    {isLast && hasMore && (
-                      <Box
-                        sx={{
-                          display: 'flex',
-                          justifyContent: 'center',
-                          py: 1,
-                          color: 'text.secondary',
-                          fontSize: '0.875rem',
-                        }}>
-                        {loadingMore ? t('loadingMore') : ''}
-                      </Box>
-                    )}
-                  </Box>
-                );
-              })}
-            </>
-          ) : (
-            <Box sx={{ px: 2, py: 3, textAlign: 'center' }}>
-              <Typography variant="body2" color="text.secondary">
-                {t('myJoinedEmpty')}
-              </Typography>
-            </Box>
-          )}
-        </Box>
-
-        <Divider />
-
-        {/* 创建新组织 */}
-        <MenuItem
-          onClick={handleCreateNew}
-          sx={{
-            py: 1.5,
-            px: 2,
-            '&:hover': {
-              backgroundColor: 'action.hover',
-            },
-          }}>
-          <ListItemAvatar sx={{ minWidth: 40 }}>
-            <Avatar
-              sx={{
-                width: 28,
-                height: 28,
-                bgcolor: 'success.main',
-                color: 'success.contrastText',
-              }}>
-              <Add fontSize="small" />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText
-            primary={
-              <Typography variant="body2" sx={{ fontWeight: 500 }}>
-                {t('createNew')}
-              </Typography>
-            }
-          />
-        </MenuItem>
-
-        <Divider />
-
-        {/* 查看所有组织链接 */}
-        <Box sx={{ p: 1.5 }}>
-          <Button
-            onClick={handleViewAll}
-            variant="text"
-            component="a"
-            size="small"
-            endIcon={<OpenInNew fontSize="small" />}
-            sx={{
-              color: 'primary.main',
-              fontWeight: 500,
-              p: 0,
-              fontSize: 14,
-              minWidth: 'auto',
-              '&:hover': {
-                backgroundColor: 'transparent',
-                textDecoration: 'underline',
-              },
-            }}>
-            {t('viewAll')}
-          </Button>
-        </Box>
-      </Menu>
-
-      {visible && <CreateOrgDialog onSuccess={handleViewAll} onCancel={() => setVisible(false)} locale={locale} />}
-    </Box>
-  );
-}
-
-OrgsSwitch.propTypes = {
-  session: PropTypes.object.isRequired,
-  locale: PropTypes.string,
-};

package/src/common/org-switch/locales.js

@@ -1,52 +0,0 @@
-const translations = {
-  en: {
-    search: 'Search',
-    orgs: 'Organizations',
-    loadingMore: 'Loading more',
-    myJoinedEmpty: 'You have not joined any organizations yet',
-    createNew: 'Create New Organization',
-    viewAll: 'View All Organizations',
-    nameEmpty: 'Name cannot be empty',
-    nameTooLong: 'Name must be less than {length} characters',
-    descriptionTooLong: 'Description must be less than {length} characters',
-    avatarEmpty: 'Avatar cannot be empty',
-    cancel: 'Cancel',
-    create: 'Create',
-    upload: 'Upload',
-    avatar: 'Avatar',
-    mutate: {
-      title: '{mode} Organization',
-      name: 'Name',
-      description: 'Description',
-      avatarRequired: 'Avatar is required',
-      uploadAvatarTitle: 'Upload Avatar',
-      uploadAvatarTip: 'Click to upload an avatar for your organization',
-    },
-  },
-  zh: {
-    search: '搜索',
-    orgs: '组织',
-    loadingMore: '加载更多',
-    myJoinedEmpty: '您还没有加入任何组织',
-    createNew: '创建新组织',
-    viewAll: '查看所有组织',
-    nameEmpty: '名称不能为空',
-    nameTooLong: '名称不能超过{length}个字符',
-    descriptionTooLong: '描述不能超过{length}个字符',
-    avatarEmpty: '头像不能为空',
-    upload: '上传',
-    cancel: '取消',
-    create: '创建',
-    avatar: '头像',
-    mutate: {
-      title: '{mode}组织',
-      name: '组织名称',
-      description: '组织描述',
-      avatarRequired: '头像为必填项',
-      uploadAvatarTitle: '上传头像',
-      uploadAvatarTip: '点击上传组织头像',
-    },
-  },
-};
-
-export default translations;

package/src/common/org-switch/use-org.jsx

@@ -1,79 +0,0 @@
-import { useMemoizedFn } from 'ahooks';
-import Toast from '@arcblock/ux/lib/Toast';
-import { getBlockletSDK } from '@blocklet/js-sdk';
-
-import { formatAxiosError } from '../../UserCenter/libs/utils';
-
-export default function useOrg(session) {
-  const client = getBlockletSDK();
-  const getOrgs = useMemoizedFn(async ({ search, page = 1, pageSize = 20 }) => {
-    try {
-      const response = await client.user.getOrgs({ search, page, pageSize });
-      return response;
-    } catch (error) {
-      console.error(error);
-      return {
-        orgs: [],
-        paging: {
-          page,
-          pageSize,
-          total: 0,
-        },
-      };
-    }
-  });
-
-  const createOrg = useMemoizedFn(async ({ name, description, avatar }) => {
-    try {
-      const response = await client.user.createOrg({ name, description, avatar });
-      return response.data;
-    } catch (error) {
-      console.error(error);
-      Toast.error(formatAxiosError(error));
-      return null;
-    }
-  });
-
-  const updateOrg = useMemoizedFn(async (orgId, { name, description, avatar }) => {
-    try {
-      const response = await client.user.updateOrg(orgId, { name, description, avatar });
-      return response.data;
-    } catch (error) {
-      console.error(error);
-      Toast.error(formatAxiosError(error));
-      return null;
-    }
-  });
-
-  const getOrg = useMemoizedFn(async (orgId) => {
-    try {
-      const data = await client.user.getOrg(orgId);
-      return data;
-    } catch (error) {
-      session.logout();
-      console.error(error);
-      return null;
-    }
-  });
-
-  const getCurrentOrg = useMemoizedFn(async (roleName) => {
-    try {
-      const response = await client.user.getRole(roleName);
-      if (response.orgId) {
-        const org = await getOrg(response.orgId);
-        return org;
-      }
-      return null;
-    } catch (error) {
-      console.error(error);
-      return null;
-    }
-  });
-
-  return {
-    getOrgs,
-    createOrg,
-    updateOrg,
-    getCurrentOrg,
-  };
-}

package/src/common/overridable-theme-provider.jsx

@@ -1,17 +0,0 @@
-import PropTypes from 'prop-types';
-import { createTheme, ThemeProvider } from '@arcblock/ux/lib/Theme';
-
-const defaultTheme = createTheme();
-
-/**
- * 允许 theme 被覆盖的 ThemeProvider 组件, 默认使用 ux default theme, 可以传入 theme 进行覆盖
- */
-export default function OverridableThemeProvider({ theme: themeOverrides = null, children }) {
-  const theme = themeOverrides ? createTheme(themeOverrides) : defaultTheme;
-  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
-}
-
-OverridableThemeProvider.propTypes = {
-  children: PropTypes.any.isRequired,
-  theme: PropTypes.object,
-};

package/src/common/wallet-hidden-topbar.js

@@ -1,14 +0,0 @@
-import { useEffect } from 'react';
-import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
-import bridge from '@arcblock/bridge';
-
-// 在 wallet webview 环境中, 隐藏 wallet topbar
-// eslint-disable-next-line import/prefer-default-export
-export const useWalletHiddenTopbar = () => {
-  const browser = useBrowser();
-  useEffect(() => {
-    if (browser.wallet || browser.arcSphere) {
-      bridge.call('arcHideTopBar', '{}');
-    }
-  }, [browser]);
-};