♻️ refactor: 重构 ActionGroup 文档

ant-design · Feb 9, 2024 · a0ebeed · a0ebeed
1 parent 6c89538
commit a0ebeed
Show file tree

Hide file tree

Showing 12 changed files with 139 additions and 197 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
   );