feat: modify pivot style & add operation menu to pivot item (#1726)

packages/component/src/ui/menu/MenuItem.tsx

@@ -6,12 +6,13 @@ export type IconMenuProps = PropsWithChildren<{
   isDir?: boolean;
   icon?: ReactElement;
   iconSize?: [number, number];
+  disabled?: boolean;
 }> &
   HTMLAttributes<HTMLButtonElement>;
 
 export const MenuItem = forwardRef<HTMLButtonElement, IconMenuProps>(
   ({ isDir = false, icon, iconSize, children, ...props }, ref) => {
-    const [iconWidth, iconHeight] = iconSize || [16, 16];
+    const [iconWidth, iconHeight] = iconSize || [20, 20];
     return (
       <StyledMenuItem ref={ref} {...props}>
         {icon &&
@@ -19,7 +20,7 @@ export const MenuItem = forwardRef<HTMLButtonElement, IconMenuProps>(
             width: iconWidth,
             height: iconHeight,
             style: {
-              marginRight: 14,
+              marginRight: 12,
               ...icon.props?.style,
             },
           })}

packages/component/src/ui/menu/PureMenu.tsx

@@ -0,0 +1,20 @@
+import type { CSSProperties } from 'react';
+
+import type { PurePopperProps } from '../popper';
+import { PurePopper } from '../popper';
+import { StyledMenuWrapper } from './styles';
+
+export const PureMenu = ({
+  children,
+  placement,
+  width,
+  ...otherProps
+}: PurePopperProps & { width?: CSSProperties['width'] }) => {
+  return (
+    <PurePopper placement={placement} {...otherProps}>
+      <StyledMenuWrapper width={width} placement={placement}>
+        {children}
+      </StyledMenuWrapper>
+    </PurePopper>
+  );
+};

packages/component/src/ui/menu/index.ts

@@ -1,3 +1,4 @@
 export * from './Menu';
 // export { StyledMenuItem as MenuItem } from './styles';
 export * from './MenuItem';
+export * from './PureMenu';

packages/component/src/ui/menu/styles.ts

@@ -28,7 +28,8 @@ export const StyledArrow = styled(ArrowRightSmallIcon)({
 
 export const StyledMenuItem = styled('button')<{
   isDir?: boolean;
-}>(({ theme, isDir = false }) => {
+  disabled?: boolean;
+}>(({ theme, isDir = false, disabled = false }) => {
   return {
     width: '100%',
     borderRadius: '5px',
@@ -39,10 +40,25 @@ export const StyledMenuItem = styled('button')<{
     cursor: isDir ? 'pointer' : '',
     position: 'relative',
     backgroundColor: 'transparent',
-    color: theme.colors.textColor,
-    ':hover': {
-      color: theme.colors.primaryColor,
-      backgroundColor: theme.colors.hoverBackground,
+    color: disabled ? theme.colors.disableColor : theme.colors.textColor,
+    svg: {
+      color: disabled ? theme.colors.disableColor : theme.colors.iconColor,
     },
+    ...(disabled
+      ? {
+          cursor: 'not-allowed',
+          pointerEvents: 'none',
+        }
+      : {}),
+
+    ':hover': disabled
+      ? {}
+      : {
+          color: theme.colors.primaryColor,
+          backgroundColor: theme.colors.hoverBackground,
+          svg: {
+            color: theme.colors.primaryColor,
+          },
+        },
   };
 });