Merge pull request #59 from ant-design/feat/tips

feat: add more ActionGroupApi support
ant-design · Aug 15, 2023 · 5eccdfa · 5eccdfa
2 parents 3722481 + 4bb1c01
commit 5eccdfa
Show file tree

Hide file tree

Showing 9 changed files with 1,565 additions and 765 deletions.
diff --git a/src/ActionGroup/demos/config.tsx b/src/ActionGroup/demos/config.tsx
@@ -9,18 +9,20 @@ export default () => {
     <>
       {contextHolder}
       <ActionGroup
-        config={[
+        items={[
           {
             icon: <CopyOutlined />,
             onClick: () => {
               messageApi.info('复制！');
             },
+            label: '复制',
           },
           {
             icon: <ZoomInOutlined />,
             onClick: () => {
               messageApi.success('放大！');
             },
+            label: '放大！',
           },
           {
             icon: <ZoomOutOutlined />,
@@ -30,12 +32,14 @@ export default () => {
             onClick: () => {
               messageApi.success('缩小！');
             },
+            label: '缩小！',
           },
           {
             icon: <DragOutlined />,
             onClick: () => {
               messageApi.loading('快速定位ing');
             },
+            label: '快速定位',
           },
         ]}
       />

diff --git a/src/ActionGroup/demos/custom.tsx b/src/ActionGroup/demos/custom.tsx
@@ -1,10 +1,10 @@
-import { ActionGroup } from '@ant-design/pro-editor';
+import { ActionGroup, ActionIcon } from '@ant-design/pro-editor';
 import { Card, Input, Rate, Switch } from 'antd';
 
 export default () => {
   return (
     <ActionGroup
-      render={(defalutDom) => {
+      render={(config) => {
         return (
           <Card
             title="操作工具箱"
@@ -13,7 +13,25 @@ export default () => {
             size="small"
           >
             <p>工具</p>
-            {defalutDom}
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'row',
+              }}
+            >
+              {config.map((item, index) => {
+                return (
+                  <ActionIcon
+                    key={`action-btn-${index}`}
+                    title={item?.label}
+                    onClick={() => {
+                      alert('触发动作');
+                    }}
+                    {...item}
+                  />
+                );
+              })}
+            </div>
             <p>内容</p>
             <Input placeholder="请输入编辑器内容" />
             <p>评分</p>

diff --git a/src/ActionGroup/demos/dropMenu.tsx b/src/ActionGroup/demos/dropMenu.tsx
@@ -0,0 +1,51 @@
+import { CopyOutlined, DragOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
+import { ActionGroup } from '@ant-design/pro-editor';
+import { message } from 'antd';
+
+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: '快速定位',
+          },
+        ]}
+      />
+    </>
+  );
+};
diff --git a/src/ActionGroup/demos/type.tsx b/src/ActionGroup/demos/type.tsx
@@ -0,0 +1,30 @@
+import { ActionGroup } from '@ant-design/pro-editor';
+import { InputNumber, Segmented, Space } from 'antd';
+import { useState } from 'react';
+
+export default () => {
+  const [type, setType] = useState<string | any>('block');
+  const [size, setSize] = useState<string | number | any>('default');
+  const [direction, setDirection] = useState<'row' | 'column' | any>('row');
+  const [number, setNumber] = useState<number>(24);
+
+  return (
+    <Space direction="vertical">
+      <Segmented options={['pure', 'ghost', 'block']} value={type} onChange={setType} />
+      <Segmented options={['default', 'large', 'number']} value={size} onChange={setSize} />
+      {size === 'number' && (
+        <InputNumber
+          min={18}
+          max={200}
+          defaultValue={24}
+          onChange={(value) => {
+            setNumber(value);
+          }}
+        />
+      )}
+
+      <Segmented options={['row', 'column']} value={direction} onChange={setDirection} />
+      <ActionGroup type={type} size={size === 'number' ? number : size} direction={direction} />
+    </Space>
+  );
+};
diff --git a/src/ActionGroup/demos/withPanel.tsx b/src/ActionGroup/demos/withPanel.tsx
@@ -35,7 +35,7 @@ export default () => {
           background: '#fff',
         }}
       >
-        <ActionGroup />
+        <ActionGroup size={30} />
       </DraggablePanel>
     </div>
   );

diff --git a/src/ActionGroup/index.md b/src/ActionGroup/index.md
@@ -20,6 +20,14 @@ group: 基础组件
 
 <code src="./demos/config.tsx" ></code>
 
+### 使用 dropdownMenu 扩展更多内容
+
+<code src="./demos/dropMenu.tsx" ></code>
+
+### 类型、大小和方向调整
+
+<code src="./demos/type.tsx" ></code>
+
 ### 高度自定义
 
 <code src="./demos/custom.tsx" ></code>
@@ -30,22 +38,29 @@ group: 基础组件
 
 ## API
 
-| 属性名            | 类型                                                                            | 描述                             |
-| ----------------- | ------------------------------------------------------------------------------- | -------------------------------- |
-| className         | `string`                                                                        | 自定义的 classname               |
-| style             | `React.CSSProperties`                                                           | 自定义 style                     |
-| config            | `[]<ButtonConfig>`                                                              | 生成按钮的配置 config            |
-| render            | `(defalutDom: React.ReactNode, config: Array<ButtonConfig>) => React.ReactNode` | 用于渲染自定义能力的 render 方法 |
-| onFullScreenClick | `() => void`                                                                    | 全屏按钮点击的回掉               |
-| onUndoClick       | `() => void`                                                                    | 撤销按钮点击的回掉               |
-| onRedoClick       | `() => void`                                                                    | 重做按钮点击的回掉               |
-| onDeleteClick     | `() => void`                                                                    | 删除按钮点击的回掉               |
-
-### ButtonConfig
+| 属性名              | 类型                                                                            | 描述                                                                                    |
+| ------------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
+| className           | `string`                                                                        | 自定义的 classname                                                                      |
+| style               | `React.CSSProperties`                                                           | 自定义 style                                                                            |
+| items               | `[]<ActionIconItem>`                                                            | 生成按钮的配置 config                                                                   |
+| dropdownMenu        | `[]<ActionGroupItem>`                                                           | 生成 drowDownMenuList 内容的 config                                                     |
+| dropdownProps       | `[]<ActionGroupItem \| { type: 'divider' }>`                                    | 给 dropdownMenu 设置的自定义 Props，支持除了 Menu 外其余所有 antd dropdown Props 的设置 |
+| dropdownMenuTrigger | `React.ReactNode`                                                               | 用于自定义 dropdownMenu 下拉的触发 Dom，默认为 DashOutlined 的 Icon                     |
+| render              | `(defalutDom: React.ReactNode, config: Array<ButtonConfig>) => React.ReactNode` | 用于渲染自定义能力的 render 方法                                                        |
+| onFullScreenClick   | `() => void`                                                                    | 全屏按钮点击的回掉                                                                      |
+| onUndoClick         | `() => void`                                                                    | 撤销按钮点击的回掉                                                                      |
+| onRedoClick         | `() => void`                                                                    | 重做按钮点击的回掉                                                                      |
+| onDeleteClick       | `() => void`                                                                    | 删除按钮点击的回掉                                                                      |
+| type                | `'ghost' \| 'block' \| 'pure'`                                                  | 整体的样式                                                                              |
+| direction           | `'row' \| 'column'`                                                             | 图标排列时候的方向                                                                      |
+| size                | `'default' \| 'large' \| number`                                                | 图标尺寸                                                                                |
+
+### ActionGroupItem
 
 | 属性名  | 类型                  | 描述                   |
 | ------- | --------------------- | ---------------------- |
 | icon    | `React.ReactNode`     | 展示的 icon            |
 | style   | `React.CSSProperties` | 每个配置按钮的单独样式 |
 | key     | `key`                 | 每个按钮单独的 key     |
 | onClick | `() => void`          | 按钮点击事件的回掉     |
+| label   | `string`              | 用于展示按钮的提示文案 |
diff --git a/src/ActionGroup/index.tsx b/src/ActionGroup/index.tsx
@@ -1,9 +1,15 @@
-import { DeleteOutlined, FullscreenOutlined, RedoOutlined, UndoOutlined } from '@ant-design/icons';
-import { getPrefixCls } from '@ant-design/pro-editor';
-import { Button, Space } from 'antd';
+import {
+  DashOutlined,
+  DeleteOutlined,
+  FullscreenOutlined,
+  RedoOutlined,
+  UndoOutlined,
+} from '@ant-design/icons';
+import { ActionIcon, getPrefixCls } from '@ant-design/pro-editor';
+import { Dropdown, DropdownProps } from 'antd';
 import { useStyle } from './style';
 
-type ButtonConfig = {
+type ActionIconGroupItem = {
   /**
    * @description 展示的 icon
    */
@@ -21,6 +27,10 @@ type ButtonConfig = {
    * @description 按钮点击事件的回掉
    */
   onClick?: () => void;
+  /**
+   * @description 用于展示按钮的提示文案
+   */
+  label?: string;
 };
 
 interface ActionGroupProps {
@@ -37,11 +47,26 @@ interface ActionGroupProps {
   /**
    * @description 生成按钮的配置config
    */
-  config?: Array<ButtonConfig>;
+  items?: Array<ActionIconGroupItem>;
+  /**
+   * @description 生成 drowDownMenuList 内容的 config
+   */
+  dropdownMenu?: Array<ActionIconGroupItem | { type: 'divider' }>;
+  /**
+   * @description 给 dropdownMenu 设置的自定义 Props，支持除了 Menu 外其余所有 antd dropdown Props 的设置
+   */
+  dropdownProps?: DropdownProps;
+  /**
+   * @description 用于自定义 dropdownMenu 下拉的触发 Dom，默认为 DashOutlined 的 Icon
+   */
+  dropdownMenuTrigger?: React.ReactNode;
   /**
    * @description 用于渲染自定义能力的render方法
    */
-  render?: (defalutDom: React.ReactNode, config: Array<ButtonConfig>) => React.ReactNode;
+  render?: (
+    config: Array<ActionIconGroupItem>,
+    dropdownMenu?: Array<ActionIconGroupItem | { type: 'divider' }>,
+  ) => React.ReactNode;
   /**
    * @description 全屏按钮点击的回掉
    */
@@ -58,23 +83,44 @@ interface ActionGroupProps {
    * @description 删除按钮点击的回掉
    */
   onDeleteClick?: () => void;
+  /**
+   * @description The type of the group
+   * @default "block"
+   */
+  type?: 'ghost' | 'block' | 'pure';
+  /**
+   * @description The direction of the icons
+   * @default "row"
+   */
+  direction?: 'row' | 'column';
+  /**
+   * @title 图标尺寸
+   */
+  size?: 'default' | 'large' | number;
 }
 
 const ActionGroup = (props: ActionGroupProps) => {
-  const prefixCls = getPrefixCls('action-group');
-  const { styles, cx } = useStyle(prefixCls);
   const {
+    type = 'block',
+    direction = 'row',
+    size,
     className,
     style,
     render,
-    config: outConfig,
+    dropdownMenu,
+    items,
     onFullScreenClick,
     onUndoClick,
     onRedoClick,
     onDeleteClick,
+    dropdownProps,
+    dropdownMenuTrigger,
   } = props;
-  const config = outConfig
-    ? outConfig
+  const prefixCls = getPrefixCls('action-group');
+  const { styles, cx } = useStyle({ prefixCls, direction, type });
+
+  const config = items
+    ? items
     : [
         { icon: <FullscreenOutlined />, onClick: onFullScreenClick },
         { icon: <UndoOutlined />, onClick: onUndoClick },
@@ -85,22 +131,51 @@ const ActionGroup = (props: ActionGroupProps) => {
   const ActionDomList = () => {
     const defalutDom = (
       <>
-        {config.map((item: ButtonConfig, index) => {
-          return <Button key={`action-group-btn-${index}`} type="text" {...item} />;
+        {config.map((item: ActionIconGroupItem, index) => {
+          return (
+            <ActionIcon
+              key={`action-btn-${index}`}
+              title={item?.label}
+              size={size}
+              onClick={() => {
+                alert('触发动作');
+              }}
+              {...item}
+            />
+          );
         })}
       </>
     );
     if (render) {
-      return render(defalutDom, config);
+      return render(config, dropdownMenu);
     }
     return defalutDom;
   };
 
   return (
     <div className={cx(styles.content, className)} style={style}>
-      <Space>
-        <ActionDomList />
-      </Space>
+      <ActionDomList />
+      {dropdownMenu && (
+        <Dropdown
+          trigger={['click']}
+          {...dropdownProps}
+          menu={{
+            items: dropdownMenu.map((item: any) => {
+              if (item.type) return item;
+              return {
+                ...item,
+                icon: item.icon,
+              };
+            }),
+          }}
+        >
+          {dropdownMenuTrigger ? (
+            dropdownMenuTrigger
+          ) : (
+            <ActionIcon icon={<DashOutlined />} key="more" size={size} />
+          )}
+        </Dropdown>
+      )}
     </div>
   );
 };