From a0ebeeddfc31d8807476ea192ff03258079a613f Mon Sep 17 00:00:00 2001
From: rdmclin2 <rdmclin2@gmail.com>
Date: Fri, 9 Feb 2024 22:22:23 +0800
Subject: [PATCH] =?UTF-8?q?:recycle:=20refactor:=20=E9=87=8D=E6=9E=84=20Ac?=
 =?UTF-8?q?tionGroup=20=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ActionGroup/demos/basic.tsx     |   3 +-
 src/ActionGroup/demos/config.tsx    |  50 +------------
 src/ActionGroup/demos/custom.tsx    |   8 +--
 src/ActionGroup/demos/dropMenu.tsx  |  49 +------------
 src/ActionGroup/demos/items.tsx     |  84 ++++++++++++++++++++++
 src/ActionGroup/demos/type.tsx      |  20 +-----
 src/ActionGroup/demos/withPanel.tsx |   3 +-
 src/ActionGroup/index.tsx           | 104 ++++++++++------------------
 src/ActionGroup/index.zh-CN.md      |   6 +-
 src/ActionIcon/ActionIcon.tsx       |   2 +-
 src/ActionIcon/demos/basic.tsx      |   3 -
 src/ActionIcon/index.zh-CN.md       |   4 +-
 12 files changed, 139 insertions(+), 197 deletions(-)
 create mode 100644 src/ActionGroup/demos/items.tsx

diff --git a/src/ActionGroup/demos/basic.tsx b/src/ActionGroup/demos/basic.tsx
index 281124b8..dace3955 100644
--- a/src/ActionGroup/demos/basic.tsx
+++ b/src/ActionGroup/demos/basic.tsx
@@ -1,5 +1,6 @@
 import { ActionGroup } from '@ant-design/pro-editor';
+import { defaultItems } from './items';
 
 export default () => {
-  return <ActionGroup />;
+  return <ActionGroup items={defaultItems} />;
 };
diff --git a/src/ActionGroup/demos/config.tsx b/src/ActionGroup/demos/config.tsx
index 3a8940fc..8ca9a03b 100644
--- a/src/ActionGroup/demos/config.tsx
+++ b/src/ActionGroup/demos/config.tsx
@@ -1,52 +1,6 @@
-import { CopyOutlined, DragOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
 import { ActionGroup } from '@ant-design/pro-editor';
-import { message } from 'antd';
+import { customItems } from './items';
 
 export default () => {
-  const [messageApi, contextHolder] = message.useMessage();
-
-  return (
-    <>
-      {contextHolder}
-      <ActionGroup
-        items={[
-          {
-            icon: <CopyOutlined />,
-            placement: 'bottom',
-            onClick: () => {
-              messageApi.info('复制！');
-            },
-            label: '复制',
-          },
-          {
-            icon: <ZoomInOutlined />,
-            onClick: () => {
-              messageApi.success('放大！');
-            },
-            label: '放大！',
-          },
-          {
-            icon: <ZoomOutOutlined />,
-            style: {
-              color: '#1890ff',
-            },
-            onClick: () => {
-              messageApi.success('缩小！');
-            },
-            label: '缩小！',
-          },
-          {
-            type: 'divider',
-          },
-          {
-            icon: <DragOutlined />,
-            onClick: () => {
-              messageApi.loading('快速定位ing');
-            },
-            label: '快速定位',
-          },
-        ]}
-      />
-    </>
-  );
+  return <ActionGroup items={customItems} />;
 };
diff --git a/src/ActionGroup/demos/custom.tsx b/src/ActionGroup/demos/custom.tsx
index acbf7c05..d14fb575 100644
--- a/src/ActionGroup/demos/custom.tsx
+++ b/src/ActionGroup/demos/custom.tsx
@@ -1,10 +1,11 @@
-import { ActionGroup, ActionIcon, ActionIconGroupItemType } from '@ant-design/pro-editor';
+import { ActionGroup, ActionIcon } from '@ant-design/pro-editor';
 import { Card, Input, Rate, Switch } from 'antd';
+import { defaultItems } from './items';
 
 export default () => {
   return (
     <ActionGroup
-      render={(config) => {
+      render={() => {
         return (
           <Card
             title="操作工具箱"
@@ -19,11 +20,10 @@ export default () => {
                 flexDirection: 'row',
               }}
             >
-              {config.map((item: ActionIconGroupItemType, index) => {
+              {defaultItems.map((item, index) => {
                 return (
                   <ActionIcon
                     key={`action-btn-${index}`}
-                    title={item?.label}
                     onClick={() => {
                       alert('触发动作');
                     }}
diff --git a/src/ActionGroup/demos/dropMenu.tsx b/src/ActionGroup/demos/dropMenu.tsx
index a4d7a967..3fb31ac4 100644
--- a/src/ActionGroup/demos/dropMenu.tsx
+++ b/src/ActionGroup/demos/dropMenu.tsx
@@ -1,51 +1,6 @@
-import { CopyOutlined, DragOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
 import { ActionGroup } from '@ant-design/pro-editor';
-import { message } from 'antd';
+import { defaultItems, dropdownMenuItems } from './items';
 
 export default () => {
-  const [messageApi, contextHolder] = message.useMessage();
-
-  return (
-    <>
-      {contextHolder}
-      <ActionGroup
-        dropdownMenu={[
-          {
-            icon: <CopyOutlined />,
-            onClick: () => {
-              messageApi.info('复制！');
-            },
-            label: '复制',
-          },
-          {
-            icon: <ZoomInOutlined />,
-            onClick: () => {
-              messageApi.success('放大！');
-            },
-            label: '放大！',
-          },
-          {
-            icon: <ZoomOutOutlined />,
-            style: {
-              color: '#1890ff',
-            },
-            onClick: () => {
-              messageApi.success('缩小！');
-            },
-            label: '缩小！',
-          },
-          {
-            type: 'divider',
-          },
-          {
-            icon: <DragOutlined />,
-            onClick: () => {
-              messageApi.loading('快速定位ing');
-            },
-            label: '快速定位',
-          },
-        ]}
-      />
-    </>
-  );
+  return <ActionGroup items={defaultItems} dropdownMenu={dropdownMenuItems} />;
 };
diff --git a/src/ActionGroup/demos/items.tsx b/src/ActionGroup/demos/items.tsx
new file mode 100644
index 00000000..e2ae1e84
--- /dev/null
+++ b/src/ActionGroup/demos/items.tsx
@@ -0,0 +1,84 @@
+import {
+  CopyOutlined,
+  DeleteOutlined,
+  DragOutlined,
+  FullscreenOutlined,
+  RedoOutlined,
+  UndoOutlined,
+  ZoomInOutlined,
+  ZoomOutOutlined,
+} from '@ant-design/icons';
+import { ActionIconGroupItemType } from '@ant-design/pro-editor';
+import { message } from 'antd';
+
+const defaultItems = [
+  { icon: <FullscreenOutlined />, title: '全屏' },
+  { icon: <UndoOutlined />, title: '撤销' },
+  { icon: <RedoOutlined />, title: '重做' },
+  { icon: <DeleteOutlined />, title: '删除' },
+];
+
+const customItems: ActionIconGroupItemType[] = [
+  {
+    icon: <CopyOutlined />,
+    placement: 'bottom',
+    title: '复制',
+  },
+  {
+    icon: <ZoomInOutlined />,
+    title: '放大！',
+  },
+  {
+    icon: <ZoomOutOutlined />,
+    style: {
+      color: '#1890ff',
+    },
+    title: '缩小！',
+  },
+  {
+    type: 'divider',
+  },
+  {
+    icon: <DragOutlined />,
+    title: '快速定位',
+  },
+];
+
+const dropdownMenuItems: ActionIconGroupItemType[] = [
+  {
+    icon: <CopyOutlined />,
+    onClick: () => {
+      message.info('复制！');
+    },
+    label: '复制',
+  },
+  {
+    icon: <ZoomInOutlined />,
+    onClick: () => {
+      message.success('放大！');
+    },
+    label: '放大！',
+  },
+  {
+    icon: <ZoomOutOutlined />,
+    style: {
+      color: '#1890ff',
+    },
+    onClick: () => {
+      message.success('缩小！');
+    },
+    label: '缩小！',
+  },
+  {
+    type: 'divider',
+  },
+  {
+    icon: <DragOutlined />,
+    onClick: () => {
+      message.loading('快速定位ing');
+    },
+    label: '快速定位',
+  },
+];
+
+export { customItems, defaultItems, dropdownMenuItems };
diff --git a/src/ActionGroup/demos/type.tsx b/src/ActionGroup/demos/type.tsx
index 97f12db6..a6df3376 100644
--- a/src/ActionGroup/demos/type.tsx
+++ b/src/ActionGroup/demos/type.tsx
@@ -1,7 +1,7 @@
-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';
+import { customItems } from './items';
 
 export default () => {
   const [type, setType] = useState<string | any>('block');
@@ -29,23 +29,7 @@ export default () => {
         type={type}
         size={size === 'number' ? number : size}
         direction={direction}
-        items={[
-          {
-            icon: <CopyOutlined />,
-          },
-          {
-            icon: <ZoomInOutlined />,
-          },
-          {
-            icon: <ZoomOutOutlined />,
-          },
-          {
-            type: 'divider',
-          },
-          {
-            icon: <DragOutlined />,
-          },
-        ]}
+        items={customItems}
       />
     </Space>
   );
diff --git a/src/ActionGroup/demos/withPanel.tsx b/src/ActionGroup/demos/withPanel.tsx
index 8a0a12fd..b8c73e3b 100644
--- a/src/ActionGroup/demos/withPanel.tsx
+++ b/src/ActionGroup/demos/withPanel.tsx
@@ -1,6 +1,7 @@
 import type { Position } from '@ant-design/pro-editor';
 import { ActionGroup, DraggablePanel } from '@ant-design/pro-editor';
 import { useLocalStorageState } from 'ahooks';
+import { defaultItems } from './items';
 
 export default () => {
   const [position, setPos] = useLocalStorageState<Position>('demo-pos');
@@ -35,7 +36,7 @@ export default () => {
           background: '#fff',
         }}
       >
-        <ActionGroup size={30} />
+        <ActionGroup size={30} items={defaultItems} />
       </DraggablePanel>
     </div>
   );
diff --git a/src/ActionGroup/index.tsx b/src/ActionGroup/index.tsx
index 508fc44a..d1ce7060 100644
--- a/src/ActionGroup/index.tsx
+++ b/src/ActionGroup/index.tsx
@@ -1,39 +1,33 @@
-import {
-  DashOutlined,
-  DeleteOutlined,
-  FullscreenOutlined,
-  RedoOutlined,
-  UndoOutlined,
-} from '@ant-design/icons';
+import { DashOutlined } from '@ant-design/icons';
 import { ActionIcon, ActionIconProps, ConfigProvider } from '@ant-design/pro-editor';
 import { Divider, Dropdown, DropdownProps } from 'antd';
 import { useStyle } from './style';
 
-export type ActionIconGroupItemType = ActionIconProps & {
-  /**
-   * @description 展示的 icon
-   */
-  icon: React.ReactNode;
-  /**
-   * @description 样式
-   * @ignore
-   */
-  style?: React.CSSProperties;
-  /**
-   * @description 每个按钮单独的key
-   */
-  key?: string;
-  /**
-   * @description 按钮点击事件的回调
-   */
-  onClick?: () => void;
-  /**
-   * @description 用于展示按钮的提示文案
-   */
-  label?: string;
-};
-
-type ActionIconGroupItemTypeWithDivider = ActionIconGroupItemType | { type: 'divider' };
+export type ActionIconGroupItemType =
+  | (ActionIconProps & {
+      /**
+       * @description 展示的 icon
+       */
+      icon: React.ReactNode;
+      /**
+       * @description 样式
+       * @ignore
+       */
+      style?: React.CSSProperties;
+      /**
+       * @description 每个按钮单独的key
+       */
+      key?: string;
+      /**
+       * @description 按钮点击事件的回调
+       */
+      onClick?: () => void;
+      /**
+       * @description 用于展示按钮的提示文案
+       */
+      label?: string;
+    })
+  | { type: 'divider' };
 
 interface ActionGroupProps {
   /**
@@ -49,11 +43,11 @@ interface ActionGroupProps {
   /**
    * @description 生成按钮的配置config
    */
-  items?: Array<ActionIconGroupItemTypeWithDivider>;
+  items?: Array<ActionIconGroupItemType>;
   /**
    * @description 生成 drowDownMenuList 内容的 config
    */
-  dropdownMenu?: Array<ActionIconGroupItemTypeWithDivider>;
+  dropdownMenu?: Array<ActionIconGroupItemType>;
   /**
    * @description 给 dropdownMenu 设置的自定义 Props，支持除了 Menu 外其余所有 antd dropdown Props 的设置
    */
@@ -66,29 +60,14 @@ interface ActionGroupProps {
    * @description 用于渲染自定义能力的render方法
    */
   render?: (
-    config: Array<ActionIconGroupItemTypeWithDivider>,
-    dropdownMenu?: Array<ActionIconGroupItemTypeWithDivider>,
+    config: Array<ActionIconGroupItemType>,
+    dropdownMenu?: Array<ActionIconGroupItemType>,
   ) => JSX.Element;
   /**
    * @description 通用的 Click 触发
    */
   onClick?: (key?: string) => void;
-  /**
-   * @description 全屏按钮点击的回调
-   */
-  onFullScreenClick?: () => void;
-  /**
-   * @description 撤销按钮点击的回调
-   */
-  onUndoClick?: () => void;
-  /**
-   * @description 重做按钮点击的回调
-   */
-  onRedoClick?: () => void;
-  /**
-   * @description 删除按钮点击的回调
-   */
-  onDeleteClick?: () => void;
+
   /**
    * @description The type of the group
    * @default "block"
@@ -114,31 +93,18 @@ const ActionGroup = (props: ActionGroupProps) => {
     style,
     render,
     dropdownMenu,
-    items,
+    items = [],
     onClick = () => {},
-    onFullScreenClick,
-    onUndoClick,
-    onRedoClick,
-    onDeleteClick,
     dropdownProps,
     dropdownMenuTrigger,
   } = props;
   const { styles, cx } = useStyle({ direction, type });
 
-  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, index) => {
-          if (item?.type)
+        {items.map((item, index) => {
+          if (item?.type === 'divider')
             return (
               <Divider
                 key={`action-divider-${index}`}
@@ -166,7 +132,7 @@ const ActionGroup = (props: ActionGroupProps) => {
       </>
     );
     if (render) {
-      return render(config, dropdownMenu);
+      return render(items, dropdownMenu);
     }
     return defalutDom;
   };
diff --git a/src/ActionGroup/index.zh-CN.md b/src/ActionGroup/index.zh-CN.md
index d2f8c144..659919d3 100644
--- a/src/ActionGroup/index.zh-CN.md
+++ b/src/ActionGroup/index.zh-CN.md
@@ -14,12 +14,12 @@ demo:
 
 ## 代码演示
 
-<code src="./demos/basic.tsx" ></code>
-<code src="./demos/config.tsx" title='配置使用' description= "通过配置 `items` 渲染整个内容，你可以通过在 items 声明 type 为 divider 来渲染一个分隔符"></code>
+<code src="./demos/basic.tsx" title="基本使用" description="通过配置 `items` 渲染"></code>
+<code src="./demos/config.tsx" title='配置使用' description= "声明 `type` 为 `divider` 来渲染分隔符"></code>
 <code src="./demos/dropMenu.tsx" title="dropdown" description="通过配置 `dropdownMenu` 可以在尾部渲染一个下拉内容"></code>
 <code src="./demos/type.tsx" title="模式配置"></code>
 <code src="./demos/custom.tsx" title='自定义' description= "通过 `render` 可以自定义渲染特殊的操作内容" ></code>
-<code src="./demos/withPanel.tsx" iframe title="浮动面板中使用" description="配合 DraggablePanel 可以使得整个面板可浮动拖拽"></code>
+<code src="./demos/withPanel.tsx" iframe title="浮动面板中使用" description="配合 `DraggablePanel` 可以使得整个面板可浮动拖拽"></code>
 
 ## API
 
diff --git a/src/ActionIcon/ActionIcon.tsx b/src/ActionIcon/ActionIcon.tsx
index af30c37c..f2b38729 100644
--- a/src/ActionIcon/ActionIcon.tsx
+++ b/src/ActionIcon/ActionIcon.tsx
@@ -6,7 +6,7 @@ import { useStyles } from './style';
 
 /**
  * @title 动作图标属性
- * @description 继承自 `Button` 组件所有属性，除了 `title` 和 `size`
+ * @description 继承自 `Button` 组件所有属性，除了 `title`, `type` 和 `size`
  */
 export interface ActionIconProps extends Omit<ButtonProps, 'title' | 'size'> {
   /**
diff --git a/src/ActionIcon/demos/basic.tsx b/src/ActionIcon/demos/basic.tsx
index f02c9e0f..fcabbd20 100644
--- a/src/ActionIcon/demos/basic.tsx
+++ b/src/ActionIcon/demos/basic.tsx
@@ -1,6 +1,3 @@
-/**
- * title: Basic
- */
 import { SmileOutlined } from '@ant-design/icons';
 import { ActionIcon } from '@ant-design/pro-editor';
 
diff --git a/src/ActionIcon/index.zh-CN.md b/src/ActionIcon/index.zh-CN.md
index 3410be67..86f3b967 100644
--- a/src/ActionIcon/index.zh-CN.md
+++ b/src/ActionIcon/index.zh-CN.md
@@ -17,8 +17,8 @@ demo:
 
 ## 代码演示
 
-<code src="./demos/basic.tsx" ></code>
-<code src="./demos/preset.tsx" ></code>
+<code src="./demos/basic.tsx" title="基础示例" description="`icon` 设置动作图标, `title` 设置动作说明"></code>
+<code src="./demos/preset.tsx" title="预设动作" description="我们预设了一些编辑器常用动作图标，可以根据需求新增"></code>
 
 ## API