✨ feat: ActionGroup add comman OnClick & add Divder Config

ant-design · Aug 29, 2023 · 234ef98 · 234ef98
1 parent 2576f1c
commit 234ef98
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 16 deletions.
diff --git a/src/ActionGroup/demos/config.tsx b/src/ActionGroup/demos/config.tsx
@@ -34,6 +34,9 @@ export default () => {
             },
             label: '缩小！',
           },
+          {
+            type: 'divider',
+          },
           {
             icon: <DragOutlined />,
             onClick: () => {

diff --git 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 () => {
       )}
 
       <Segmented options={['row', 'column']} value={direction} onChange={setDirection} />
-      <ActionGroup type={type} size={size === 'number' ? number : size} direction={direction} />
+      <ActionGroup
+        type={type}
+        size={size === 'number' ? number : size}
+        direction={direction}
+        items={[
+          {
+            icon: <CopyOutlined />,
+          },
+          {
+            icon: <ZoomInOutlined />,
+          },
+          {
+            icon: <ZoomOutOutlined />,
+          },
+          {
+            type: 'divider',
+          },
+          {
+            icon: <DragOutlined />,
+          },
+        ]}
+      />
     </Space>
   );
 };
diff --git 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<ActionIconGroupItem>;
+  items?: Array<ActionIconGroupItem | { type: 'divider' }>;
   /**
    * @description 生成 drowDownMenuList 内容的 config
    */
@@ -64,9 +64,13 @@ interface ActionGroupProps {
    * @description 用于渲染自定义能力的render方法
    */
   render?: (
-    config: Array<ActionIconGroupItem>,
+    config: Array<ActionIconGroupItem | { type: 'divider' }>,
     dropdownMenu?: Array<ActionIconGroupItem | { type: 'divider' }>,
   ) => 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: <FullscreenOutlined />, onClick: onFullScreenClick },
-        { icon: <UndoOutlined />, onClick: onUndoClick },
-        { icon: <RedoOutlined />, onClick: onRedoClick },
-        { icon: <DeleteOutlined />, onClick: onDeleteClick },
-      ];
+  const DefalutItemConfig = [
+    { icon: <FullscreenOutlined />, onClick: onFullScreenClick },
+    { icon: <UndoOutlined />, onClick: onUndoClick },
+    { icon: <RedoOutlined />, onClick: onRedoClick },
+    { icon: <DeleteOutlined />, onClick: onDeleteClick },
+  ];
+
+  const config = items || DefalutItemConfig;
 
   const ActionDomList = () => {
     const defalutDom = (
       <>
-        {config.map((item: ActionIconGroupItem, index) => {
+        {config.map((item, index) => {
+          if (item?.type)
+            return (
+              <Divider
+                type={direction === 'row' ? 'vertical' : 'horizontal'}
+                style={{
+                  margin: `${direction === 'row' ? '0 4px' : '4px 0'}`,
+                }}
+              />
+            );
           return (
             <ActionIcon
               key={`action-btn-${index}`}
               title={item?.label}
               size={size}
+              {...item}
               onClick={() => {
-                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
@@ -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(