✅ feat: change action & group as pro-editor

package.json

@@ -60,6 +60,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5",
+    "@ant-design/pro-editor": "latest",
     "@babel/runtime": "^7",
     "ahooks": "^3",
     "chroma-js": "^2",
@@ -86,7 +87,6 @@
     "zustand-utils": "^1.3.1"
   },
   "devDependencies": {
-    "@ant-design/pro-editor": "latest",
     "@commitlint/cli": "^17",
     "@lobehub/ui": "^1",
     "@testing-library/react": "^14",

src/ActionIcon/index.tsx

@@ -4,10 +4,12 @@ import { forwardRef, useMemo } from 'react';
 import Icon, { type IconProps } from '@/Icon';
 import Spotlight from '@/components/Spotlight';
 import { DivProps } from '@/types';
-import { Tooltip, type TooltipProps } from 'antd';
+import { type TooltipProps } from 'antd';
 
 import { useStyles } from './style';
 
+import { ActionIcon as ProEditorActionIcon } from '@ant-design/pro-editor';
+
 export type ActionIconSize =
   | 'large'
   | 'normal'
@@ -125,14 +127,10 @@ const ActionIcon = forwardRef<HTMLDivElement, ActionIconProps>(
       size = 'normal',
       style,
       glass,
-      title,
-      placement,
-      arrow = false,
       spotlight,
       onClick,
       children,
       loading,
-      tooltipDelay = 0.5,
       ...props
     },
     ref,
@@ -173,19 +171,7 @@ const ActionIcon = forwardRef<HTMLDivElement, ActionIconProps>(
       </div>
     );
 
-    if (!title) return actionIconBlock;
-
-    return (
-      <Tooltip
-        arrow={arrow}
-        mouseEnterDelay={tooltipDelay}
-        overlayStyle={{ pointerEvents: 'none' }}
-        placement={placement}
-        title={title}
-      >
-        {actionIconBlock}
-      </Tooltip>
-    );
+    return <ProEditorActionIcon {...props} icon={actionIconBlock} />;
   },
 );
 

src/ActionIconGroup/index.tsx

@@ -1,15 +1,14 @@
 import ActionIcon, { ActionIconProps } from '@/ActionIcon';
 import Icon from '@/Icon';
 import Spotlight from '@/components/Spotlight';
+import { ActionGroup as ProEditorActionGroup } from '@ant-design/pro-editor';
 
-import { Dropdown } from 'antd';
-import { MoreHorizontal, type LucideIcon } from 'lucide-react';
+import { DropdownProps } from 'antd';
+import { type LucideIcon } from 'lucide-react';
 import { memo } from 'react';
 
 import { DivProps } from '@/types';
 
-import { useStyles } from './style';
-
 export interface ActionIconGroupItems {
   icon: LucideIcon;
   key: string;
@@ -64,60 +63,59 @@ const ActionIconGroup = memo<ActionIconGroupProps>(
     direction = 'row',
     dropdownMenu = [],
     onActionClick,
-    ...props
+    className,
+    style,
   }) => {
-    const { styles } = useStyles({ direction, type });
-
     const tooltipsPlacement = placement || (direction === 'column' ? 'right' : 'top');
 
+    const mergeDropDownList = dropdownMenu?.map((item: any) => {
+      return {
+        ...item,
+        icon: <Icon icon={item.icon} size="small" />,
+        onClick: onActionClick
+          ? (info: ActionEvent) =>
+              onActionClick({
+                item,
+                key: info.key,
+                keyPath: info.keyPath,
+              })
+          : undefined,
+      };
+    });
+
     return (
-      <div className={styles.container} {...props}>
-        {spotlight && <Spotlight />}
-        {items?.length > 0 &&
-          items.map((item) => (
-            <ActionIcon
-              icon={item.icon}
-              key={item.key}
-              onClick={
-                onActionClick
-                  ? () => onActionClick?.({ item, key: item.key, keyPath: [item.key] })
-                  : undefined
-              }
-              placement={tooltipsPlacement}
-              size="small"
-              title={item.label}
-            />
-          ))}
-        {dropdownMenu?.length > 0 && (
-          <Dropdown
-            menu={{
-              items: dropdownMenu.map((item: any) => {
-                if (item.type) return item;
-                return {
-                  ...item,
-                  icon: <Icon icon={item.icon} size="small" />,
-                  onClick: onActionClick
-                    ? (info: ActionEvent) =>
-                        onActionClick({
-                          item,
-                          key: info.key,
-                          keyPath: info.keyPath,
-                        })
-                    : undefined,
-                };
-              }),
-            }}
-            trigger={['click']}
-          >
-            <ActionIcon
-              icon={MoreHorizontal}
-              key="more"
-              placement={tooltipsPlacement}
-              size="small"
-            />
-          </Dropdown>
-        )}
-      </div>
+      <ProEditorActionGroup
+        className={className}
+        direction={direction}
+        type={type}
+        dropdownProps={{
+          placement: tooltipsPlacement as DropdownProps['placement'],
+        }}
+        style={style}
+        dropdownMenu={mergeDropDownList}
+        render={() => {
+          return (
+            <>
+              {spotlight && <Spotlight />}
+              {items?.length > 0 &&
+                items.map((item) => (
+                  <ActionIcon
+                    icon={item.icon}
+                    key={item.key}
+                    onClick={
+                      onActionClick
+                        ? () => onActionClick?.({ item, key: item.key, keyPath: [item.key] })
+                        : undefined
+                    }
+                    placement={tooltipsPlacement}
+                    size="small"
+                    title={item.label}
+                  />
+                ))}
+            </>
+          );
+        }}
+      />
     );
   },
 );