@arcblock/ux 3.4.15 → 3.5.1

package/src/NavMenu/style.ts

@@ -1,258 +0,0 @@
-import { styled } from '../Theme';
-
-type NavMenuProps = {
-  $bgColor: string;
-  $textColor: string;
-};
-
-// .navmenu
-export const NavMenuStyled = styled('nav', {
-  shouldForwardProp: (prop) => prop !== '$bgColor' && prop !== '$textColor',
-})<NavMenuProps>(({ $textColor, theme }) => ({
-  position: 'relative',
-  padding: '0 16px',
-  minWidth: '50px',
-  // FIXME: @zhanghan 这个只是临时的解决方案，会导致 header align right 不能真正的右对齐，需要修改 header 才能真正解决这个问题
-  flexGrow: 100,
-  color: $textColor,
-  fontSize: '16px',
-  '&.navmenu--inline': {
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-
-// .navmenu-root
-export const NavMenuRoot = styled('ul')(() => ({
-  listStyle: 'none',
-  margin: 0,
-  padding: 0,
-  display: 'flex',
-  alignItems: 'center',
-  // inline 布局
-  '&.navmenu-root--inline ': {
-    flexDirection: 'column',
-    alignItems: 'stretch',
-  },
-}));
-
-type NavMenuItemProps = {
-  $activeTextColor: string;
-};
-// 菜单项 .navmenu-item
-export const NavMenuItem = styled('li', {
-  shouldForwardProp: (prop) => prop !== '$activeTextColor',
-})<NavMenuItemProps>(({ $activeTextColor, theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  position: 'relative',
-  padding: '8px 12px',
-  whiteSpace: 'nowrap',
-  cursor: 'pointer',
-  transition: theme.transitions.create('color', {
-    duration: theme.transitions.duration.standard,
-  }),
-  WebkitTapHighlightColor: 'transparent', // 禁用触摸反馈
-  // 间距调整
-  '&:first-of-type': {
-    paddingLeft: 0,
-  },
-  '&:last-of-type': {
-    paddingRight: 0,
-  },
-  // 内部链接
-  a: {
-    whiteSpace: 'nowrap',
-    color: 'inherit',
-    textDecoration: 'none',
-    // 扩大点击区域
-    '&::before': {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-      backgroundColor: 'transparent',
-      content: '""',
-    },
-  },
-  // 图标
-  '.navmenu-item__icon': {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: '4px',
-    '& > *': {
-      width: '22px',
-      height: '22px',
-      maxHeight: '22px',
-      fontSize: '1.5em',
-    },
-  },
-  // 右侧内容
-  '.navmenu-item__content': {
-    height: '32px',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'flex-start',
-    gap: '5px',
-  },
-  '.navmenu-item__label': {
-    display: 'flex',
-    alignItems: 'center',
-    '&-arrow': {
-      marginLeft: '6px',
-      fontSize: '14px',
-      opacity: 0,
-      transition: theme.transitions.create('opacity', {
-        duration: theme.transitions.duration.standard,
-      }),
-    },
-  },
-  '.navmenu-item__desc': {
-    fontSize: '14px',
-  },
-  // 悬停状态下
-  '&:hover': {
-    color: $activeTextColor,
-  },
-  // 选中状态下
-  '&.navmenu-item--active': {
-    color: $activeTextColor,
-  },
-  // Panel 形态下
-  '&.navmenu-item--panel': {
-    padding: '8px 16px',
-    borderRadius: '8px',
-    '.navmenu-item__icon': {
-      flexShrink: 0,
-      width: '32px',
-      height: '32px',
-      marginRight: '16px',
-      border: '1px solid',
-      borderColor: theme.palette.grey[200],
-      borderRadius: '4px',
-      color: theme.palette.grey[500],
-    },
-    '.navmenu-item__label': {
-      fontSize: '14px',
-      lineHeight: 1,
-      color: theme.palette.text.primary,
-    },
-    '.navmenu-item__desc': {
-      fontSize: '12px',
-      lineHeight: 1,
-      color: theme.palette.text.secondary,
-    },
-    '&:hover': {
-      background: theme.palette.action.hover,
-      transition: theme.transitions.create('background', {
-        duration: theme.transitions.duration.standard,
-      }),
-      '.navmenu-item__label-arrow': {
-        opacity: 1,
-      },
-      '.navmenu-item__desc': {
-        color: theme.palette.text.primary,
-        transition: theme.transitions.create('color', {
-          duration: theme.transitions.duration.standard,
-        }),
-      },
-    },
-    '&.navmenu-item--active': {
-      background: theme.palette.action.hover,
-    },
-    // Force clear hover state when not actually hovering
-    '&:not(:hover).navmenu-item--active': {
-      background: 'transparent',
-      transition: theme.transitions.create('background', {
-        duration: theme.transitions.duration.standard,
-      }),
-    },
-  },
-  // inline 布局中
-  '&.navmenu-item--inline': {
-    margin: 0,
-    padding: 0,
-    minHeight: '48px',
-    lineHeight: '48px',
-    flexWrap: 'wrap',
-  },
-}));
-
-// 包含子菜单的导航项 .navmenu-item .navmenu-sub
-export const NavMenuSub = styled(NavMenuItem)(({ theme }) => ({
-  '.navmenu-item': {
-    marginLeft: 0,
-    overflow: 'hidden',
-  },
-  '& .navmenu-sub__container': {
-    pointerEvents: 'none',
-    opacity: 0,
-    position: 'absolute',
-    top: '100%',
-    left: 0,
-    zIndex: 1,
-  },
-  '&.navmenu-sub--opened > .navmenu-sub__container': {
-    pointerEvents: 'auto',
-    opacity: 1,
-    transition: theme.transitions.create('opacity', {
-      duration: theme.transitions.duration.standard,
-      easing: theme.transitions.easing.easeOut,
-    }),
-  },
-  // 扩展图标
-  '.navmenu-sub__expand-icon': {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginLeft: '8px',
-    '& > *': {
-      width: '0.8em',
-      height: '0.8em',
-      transition: theme.transitions.create('transform', {
-        duration: theme.transitions.duration.standard,
-      }),
-    },
-    '.navmenu-item--inline &': {
-      marginLeft: 'auto',
-    },
-  },
-  // inline 布局
-  '&.navmenu-item--inline': {
-    '.navmenu-sub__container': {
-      position: 'static',
-      transform: 'none',
-      flex: '1 0 100%',
-      padding: 0,
-      height: 0,
-      overflow: 'hidden',
-      transition: theme.transitions.create('height', {
-        duration: theme.transitions.duration.standard,
-      }),
-    },
-    '&.navmenu-sub--opened > .navmenu-sub__container': {
-      height: 'auto',
-    },
-    '.navmenu-sub__list': {
-      padding: 0,
-      paddingLeft: '24px',
-      boxShadow: 'none',
-    },
-    '.navmenu-item__content': {
-      height: '48px',
-    },
-  },
-}));
-
-// 下拉子菜单 .navmenu-sub__list
-export const NavMenuSubList = styled('ul')(({ theme }) => ({
-  margin: 0,
-  padding: '16px',
-  borderRadius: '4px',
-  backgroundColor: theme.palette.background.paper,
-  '& .navmenu-item + .navmenu-item': {
-    marginTop: '8px',
-  },
-}));

package/src/NavMenu/sub-container.tsx

@@ -1,125 +0,0 @@
-import { useThrottleFn } from 'ahooks';
-import React, { useEffect, useRef, useState } from 'react';
-
-interface SubContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  inline?: false | true;
-}
-
-const paddingTop = 8;
-
-// 下拉子菜单容器
-export function SubContainer({ children, inline = false, ...props }: SubContainerProps) {
-  const rootRef = useRef<HTMLDivElement>(null);
-  const contentRef = useRef<HTMLDivElement>(null);
-  const [positionUpdated, setPositionUpdated] = useState(false);
-  const [position, setPosition] = useState(0); // 只需要保存水平偏移量
-
-  const { run: updatePosition } = useThrottleFn(
-    () => {
-      // 移动端无需计算
-      if (inline) {
-        setPosition(0);
-        if (!positionUpdated) {
-          setPositionUpdated(true);
-        }
-        return;
-      }
-      if (!rootRef.current || !contentRef.current) return;
-      const anchor = rootRef.current.parentElement; // 以父容器作为参照
-      if (!anchor) return;
-
-      const anchorRect = anchor.getBoundingClientRect();
-      const contentRect = contentRef.current.getBoundingClientRect();
-      const windowWidth = window.innerWidth;
-      const padding = 32;
-
-      // 1. 计算相对于父元素的水平居中位置
-      let left = (anchorRect.width - contentRect.width) / 2;
-
-      // 2. 检查容器在视口中的绝对位置
-      const absoluteLeft = anchorRect.left + left;
-
-      // 3. 调整水平位置确保不超出窗口
-      if (absoluteLeft < 0) {
-        // 如果超出左边界，向右偏移
-        left = left - absoluteLeft + padding;
-      } else if (absoluteLeft + contentRect.width > windowWidth) {
-        // 如果超出右边界，向左偏移
-        left -= absoluteLeft + contentRect.width - windowWidth + padding;
-      }
-
-      setPosition(left);
-      if (!positionUpdated) {
-        setPositionUpdated(true);
-      }
-    },
-    {
-      wait: 100,
-    }
-  );
-
-  // 监听自身大小变化
-  useEffect(() => {
-    const resizeObserver = new ResizeObserver(() => {
-      updatePosition();
-    });
-
-    resizeObserver.observe(rootRef.current!);
-
-    return () => resizeObserver.disconnect();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // 监听 anchor 的大小变化
-  useEffect(() => {
-    const anchor = rootRef.current?.parentElement;
-    let resizeObserver: ResizeObserver | null = null;
-
-    if (anchor) {
-      resizeObserver = new ResizeObserver(() => {
-        updatePosition();
-      });
-
-      resizeObserver.observe(anchor);
-    }
-
-    return () => resizeObserver?.disconnect();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // 监听窗口大小变化
-  useEffect(() => {
-    const handleResize = () => {
-      updatePosition();
-    };
-
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <div
-      ref={rootRef}
-      className="navmenu-sub__container"
-      style={{
-        width: '100%',
-        paddingTop: `${paddingTop}px`,
-        transform: `translateX(${position}px)`,
-        overflow: positionUpdated ? 'visible' : 'hidden',
-      }}
-      {...props}>
-      <div
-        style={{
-          display: inline ? 'block' : 'inline-block',
-          boxShadow: inline ? 'none' : '0px 40px 60px rgba(0, 0, 0, 0.08)',
-        }}
-        ref={contentRef}>
-        {children}
-      </div>
-    </div>
-  );
-}
-
-export default SubContainer;

package/src/NavMenu/sub-item-group.tsx

@@ -1,42 +0,0 @@
-import { Box, BoxProps } from '@mui/material';
-import { styled } from '../Theme';
-
-const Group = styled(Box)`
-  padding: 16px 24px;
-  border-radius: 8px;
-  background-color: ${({ theme }) => theme.palette.background.paper};
-  cursor: auto;
-
-  .group-label {
-    margin-bottom: 8px;
-    color: ${({ theme }) => theme.palette.grey[600]};
-    font-size: 12px;
-  }
-
-  .nav {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-`;
-
-export interface NavMenuSubItemGroupProps extends BoxProps {
-  label: React.ReactNode;
-}
-
-export default function NavMenuSubItemGroup({
-  label,
-  children,
-  className = '',
-  sx,
-  ...rest
-}: NavMenuSubItemGroupProps) {
-  return (
-    <Group className={`nav-menu-sub-item-group ${className}`} sx={{ ...sx }} {...rest}>
-      <Box className="group-label">{label}</Box>
-      <Box component="ul" className="nav">
-        {children}
-      </Box>
-    </Group>
-  );
-}

package/src/OrgTransfer/index.tsx

@@ -1,53 +0,0 @@
-import { useRef, cloneElement } from 'react';
-import { Button } from '@mui/material';
-import { useMemoizedFn } from 'ahooks';
-import OrgTransferSelector from './selector';
-import { OrgTransferProps } from './type';
-import translations from './locales';
-import { translate } from '../Locale/util';
-
-/**
- * org transfer 弹框
- */
-export default function Index({
-  org,
-  onSuccess,
-  resourceId,
-  buttonProps,
-  buttonText,
-  locale = 'en',
-  dialogProps,
-  children,
-}: OrgTransferProps) {
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  const dialogRef = useRef(null);
-
-  const handleClick = () => {
-    if (dialogRef.current) {
-      (dialogRef.current as any).open({ selectedOrg: org });
-    }
-  };
-
-  return (
-    <>
-      {children ? (
-        cloneElement(children as React.ReactElement, { ...buttonProps, onClick: handleClick } as any)
-      ) : (
-        <Button {...buttonProps} onClick={handleClick}>
-          {buttonText || t('transferOrg')}
-        </Button>
-      )}
-
-      <OrgTransferSelector
-        locale={locale}
-        org={org}
-        ref={dialogRef}
-        resourceId={resourceId}
-        onSuccess={onSuccess}
-        dialogProps={dialogProps}
-      />
-    </>
-  );
-}

package/src/OrgTransfer/locales.ts

@@ -1,25 +0,0 @@
-export default {
-  en: {
-    transferOrg: 'Transfer to Other Organization',
-    cancel: 'Cancel',
-    confirm: 'Confirm',
-    tranferSuccess: 'Transfer success',
-    placeholder: 'Select an organization to transfer',
-    loading: 'Loading...',
-    noResults: 'No More',
-    resourceIdRequired: 'Please select the resource to transfer',
-    organizationSameAsCurrent:
-      'The selected organization is the same as the current organization, please select other organizations',
-  },
-  zh: {
-    transferOrg: '转移至其他组织',
-    cancel: '取消',
-    confirm: '确认',
-    tranferSuccess: '转移成功',
-    placeholder: '请选择要转移的组织',
-    loading: '加载中...',
-    noResults: '没有更多了',
-    resourceIdRequired: '请选择要转移的资源',
-    organizationSameAsCurrent: '选择的组织与当前组织相同，请选择其他组织',
-  },
-};