diff --git a/src/ActionGroup/demos/config.tsx b/src/ActionGroup/demos/config.tsx
index fa0fa101..52c05314 100644
--- a/src/ActionGroup/demos/config.tsx
+++ b/src/ActionGroup/demos/config.tsx
@@ -34,6 +34,9 @@ export default () => {
},
label: '缩小!',
},
+ {
+ type: 'divider',
+ },
{
icon: ,
onClick: () => {
diff --git a/src/ActionGroup/demos/type.tsx b/src/ActionGroup/demos/type.tsx
index 2402be69..97f12db6 100644
--- a/src/ActionGroup/demos/type.tsx
+++ b/src/ActionGroup/demos/type.tsx
@@ -1,3 +1,4 @@
+import { CopyOutlined, DragOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
import { ActionGroup } from '@ant-design/pro-editor';
import { InputNumber, Segmented, Space } from 'antd';
import { useState } from 'react';
@@ -24,7 +25,28 @@ export default () => {
)}
-
+ ,
+ },
+ {
+ icon: ,
+ },
+ {
+ icon: ,
+ },
+ {
+ type: 'divider',
+ },
+ {
+ icon: ,
+ },
+ ]}
+ />
);
};
diff --git a/src/ActionGroup/index.tsx b/src/ActionGroup/index.tsx
index 3873b486..bcc0fd31 100644
--- a/src/ActionGroup/index.tsx
+++ b/src/ActionGroup/index.tsx
@@ -6,7 +6,7 @@ import {
UndoOutlined,
} from '@ant-design/icons';
import { ActionIcon, getPrefixCls } from '@ant-design/pro-editor';
-import { Dropdown, DropdownProps } from 'antd';
+import { Divider, Dropdown, DropdownProps } from 'antd';
import { useStyle } from './style';
type ActionIconGroupItem = {
@@ -47,7 +47,7 @@ interface ActionGroupProps {
/**
* @description 生成按钮的配置config
*/
- items?: Array;
+ items?: Array;
/**
* @description 生成 drowDownMenuList 内容的 config
*/
@@ -64,9 +64,13 @@ interface ActionGroupProps {
* @description 用于渲染自定义能力的render方法
*/
render?: (
- config: Array,
+ config: Array,
dropdownMenu?: Array,
) => React.ReactNode;
+ /**
+ * @description 通用的 Click 触发
+ */
+ onClick?: (key?: string) => void;
/**
* @description 全屏按钮点击的回掉
*/
@@ -109,6 +113,7 @@ const ActionGroup = (props: ActionGroupProps) => {
render,
dropdownMenu,
items,
+ onClick = () => {},
onFullScreenClick,
onUndoClick,
onRedoClick,
@@ -119,28 +124,38 @@ const ActionGroup = (props: ActionGroupProps) => {
const prefixCls = getPrefixCls('action-group');
const { styles, cx } = useStyle({ prefixCls, direction, type });
- const config = items
- ? items
- : [
- { icon: , onClick: onFullScreenClick },
- { icon: , onClick: onUndoClick },
- { icon: , onClick: onRedoClick },
- { icon: , onClick: onDeleteClick },
- ];
+ const DefalutItemConfig = [
+ { icon: , onClick: onFullScreenClick },
+ { icon: , onClick: onUndoClick },
+ { icon: , onClick: onRedoClick },
+ { icon: , onClick: onDeleteClick },
+ ];
+
+ const config = items || DefalutItemConfig;
const ActionDomList = () => {
const defalutDom = (
<>
- {config.map((item: ActionIconGroupItem, index) => {
+ {config.map((item, index) => {
+ if (item?.type)
+ return (
+
+ );
return (
{
- alert('触发动作');
+ item?.onClick();
+ onClick(item?.key);
}}
- {...item}
/>
);
})}
@@ -161,7 +176,7 @@ const ActionGroup = (props: ActionGroupProps) => {
{...dropdownProps}
menu={{
items: dropdownMenu.map((item: any) => {
- if (item.type) return item;
+ if (item?.type) return item;
return {
...item,
icon: item.icon,
diff --git a/src/ActionGroup/style.ts b/src/ActionGroup/style.ts
index bd2702bb..f1237843 100644
--- a/src/ActionGroup/style.ts
+++ b/src/ActionGroup/style.ts
@@ -16,6 +16,7 @@ export const useStyle = createStyles(({ token, css, cx }, { prefixCls, type, dir
display: flex;
flex-direction: ${direction};
border-radius: ${token.borderRadius}px;
+ align-items: center;
`,
),
button: cx(