diff --git a/src/ActionGroup/demos/config.tsx b/src/ActionGroup/demos/config.tsx index 4d038371..fa0fa101 100644 --- a/src/ActionGroup/demos/config.tsx +++ b/src/ActionGroup/demos/config.tsx @@ -9,18 +9,20 @@ export default () => { <> {contextHolder} , onClick: () => { messageApi.info('复制！'); }, + label: '复制', }, { icon: , onClick: () => { messageApi.success('放大！'); }, + label: '放大！', }, { icon: , @@ -30,12 +32,14 @@ export default () => { onClick: () => { messageApi.success('缩小！'); }, + label: '缩小！', }, { icon: , onClick: () => { messageApi.loading('快速定位ing'); }, + label: '快速定位', }, ]} /> diff --git a/src/ActionGroup/demos/custom.tsx b/src/ActionGroup/demos/custom.tsx index 904c806b..a650b04e 100644 --- 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 ( { + render={(config) => { return ( { size="small" >

工具

- {defalutDom} +
+ {config.map((item, index) => { + return ( + { + alert('触发动作'); + }} + {...item} + /> + ); + })} +

内容

评分

diff --git a/src/ActionGroup/demos/dropMenu.tsx b/src/ActionGroup/demos/dropMenu.tsx new file mode 100644 index 00000000..a4d7a967 --- /dev/null +++ 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} + , + onClick: () => { + messageApi.info('复制！'); + }, + label: '复制', + }, + { + icon: , + onClick: () => { + messageApi.success('放大！'); + }, + label: '放大！', + }, + { + icon: , + style: { + color: '#1890ff', + }, + onClick: () => { + messageApi.success('缩小！'); + }, + label: '缩小！', + }, + { + type: 'divider', + }, + { + icon: , + onClick: () => { + messageApi.loading('快速定位ing'); + }, + label: '快速定位', + }, + ]} + /> + + ); +}; diff --git a/src/ActionGroup/demos/type.tsx b/src/ActionGroup/demos/type.tsx new file mode 100644 index 00000000..2402be69 --- /dev/null +++ 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('block'); + const [size, setSize] = useState('default'); + const [direction, setDirection] = useState<'row' | 'column' | any>('row'); + const [number, setNumber] = useState(24); + + return ( + + + + {size === 'number' && ( + { + setNumber(value); + }} + /> + )} + + + + + ); +}; diff --git a/src/ActionGroup/demos/withPanel.tsx b/src/ActionGroup/demos/withPanel.tsx index cfd436c5..8a0a12fd 100644 --- a/src/ActionGroup/demos/withPanel.tsx +++ b/src/ActionGroup/demos/withPanel.tsx @@ -35,7 +35,7 @@ export default () => { background: '#fff', }} > - + ); diff --git a/src/ActionGroup/index.md b/src/ActionGroup/index.md index 417d10c5..d5ff2174 100644 --- a/src/ActionGroup/index.md +++ b/src/ActionGroup/index.md @@ -20,6 +20,14 @@ group: 基础组件 +### 使用 dropdownMenu 扩展更多内容 + + + +### 类型、大小和方向调整 + + + ### 高度自定义 @@ -30,18 +38,24 @@ group: 基础组件 ## API -| 属性名 | 类型 | 描述 | -| ----------------- | ------------------------------------------------------------------------------- | -------------------------------- | -| className | `string` | 自定义的 classname | -| style | `React.CSSProperties` | 自定义 style | -| config | `[]` | 生成按钮的配置 config | -| render | `(defalutDom: React.ReactNode, config: Array) => React.ReactNode` | 用于渲染自定义能力的 render 方法 | -| onFullScreenClick | `() => void` | 全屏按钮点击的回掉 | -| onUndoClick | `() => void` | 撤销按钮点击的回掉 | -| onRedoClick | `() => void` | 重做按钮点击的回掉 | -| onDeleteClick | `() => void` | 删除按钮点击的回掉 | - -### ButtonConfig +| 属性名 | 类型 | 描述 | +| ------------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | +| className | `string` | 自定义的 classname | +| style | `React.CSSProperties` | 自定义 style | +| items | `[]` | 生成按钮的配置 config | +| dropdownMenu | `[]` | 生成 drowDownMenuList 内容的 config | +| dropdownProps | `[]` | 给 dropdownMenu 设置的自定义 Props，支持除了 Menu 外其余所有 antd dropdown Props 的设置 | +| dropdownMenuTrigger | `React.ReactNode` | 用于自定义 dropdownMenu 下拉的触发 Dom，默认为 DashOutlined 的 Icon | +| render | `(defalutDom: React.ReactNode, config: Array) => React.ReactNode` | 用于渲染自定义能力的 render 方法 | +| onFullScreenClick | `() => void` | 全屏按钮点击的回掉 | +| onUndoClick | `() => void` | 撤销按钮点击的回掉 | +| onRedoClick | `() => void` | 重做按钮点击的回掉 | +| onDeleteClick | `() => void` | 删除按钮点击的回掉 | +| type | `'ghost' \| 'block' \| 'pure'` | 整体的样式 | +| direction | `'row' \| 'column'` | 图标排列时候的方向 | +| size | `'default' \| 'large' \| number` | 图标尺寸 | + +### ActionGroupItem | 属性名 | 类型 | 描述 | | ------- | --------------------- | ---------------------- | @@ -49,3 +63,4 @@ group: 基础组件 | style | `React.CSSProperties` | 每个配置按钮的单独样式 | | key | `key` | 每个按钮单独的 key | | onClick | `() => void` | 按钮点击事件的回掉 | +| label | `string` | 用于展示按钮的提示文案 | diff --git a/src/ActionGroup/index.tsx b/src/ActionGroup/index.tsx index 2d053294..3873b486 100644 --- 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; + items?: Array; + /** + * @description 生成 drowDownMenuList 内容的 config + */ + dropdownMenu?: Array; + /** + * @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) => React.ReactNode; + render?: ( + config: Array, + dropdownMenu?: Array, + ) => 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: , onClick: onFullScreenClick }, { icon: , onClick: onUndoClick }, @@ -85,22 +131,51 @@ const ActionGroup = (props: ActionGroupProps) => { const ActionDomList = () => { const defalutDom = ( <> - {config.map((item: ButtonConfig, index) => { - return - + - + - + - - + + + + + `; exports[` > renders config.tsx correctly 1`] = ` .emotion-0 { + background-color: rgba(0, 0, 0, 0.04); + border: 1px solid transparent; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; - padding: 2px 4px; + padding: 1px 1px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + border-radius: 6px; +} + +.emotion-1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} + +.emotion-1:hover { + color: rgba(0, 0, 0, 0.88)!important; }
-
-
- - + - + - + -
-
+ + + + +
`; exports[` > renders custom.tsx correctly 1`] = ` .emotion-0 { + background-color: rgba(0, 0, 0, 0.04); + border: 1px solid transparent; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; - padding: 2px 4px; + padding: 1px 1px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + border-radius: 6px; +} + +.emotion-1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} + +.emotion-1:hover { + color: rgba(0, 0, 0, 0.88)!important; }
@@ -286,129 +361,229 @@ exports[` > renders custom.tsx correctly 1`] = ` class="studio-action-group-content emotion-0" >
-
-
- 操作工具箱 -
-
- -
-
+ 操作工具箱
-

- 工具 -

-
+
+
+

+ 工具 +

+
+ + + + +
+

+ 内容 +

+ +

+ 评分 +

+
    +
  • +
    +
    + + - - - -
    +
    • +
  • +
    - > renders custom.tsx correctly 1`] = ` width="1em" > - - -

    - 内容 -

    - -

    - 评分 -

    -
      -
    • +
      - -
      • -
    • + + +
    +
+ +
  • +
    +
    - -
    • -
  • + + +
    • +
    - - -
  • + + +
    • +
    + +
  • +
    +
    - -
    • -
  • + + +
    • + + +
  • +
    +
    - -
    • - - - + + + + + + + + + + + +`; + +exports[` > renders dropMenu.tsx correctly 1`] = ` +.emotion-0 { + background-color: rgba(0, 0, 0, 0.04); + border: 1px solid transparent; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + padding: 1px 1px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + border-radius: 6px; +} + +.emotion-1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} + +.emotion-1:hover { + color: rgba(0, 0, 0, 0.88)!important; +} + +
    +
    + + + + + +
    +
    +`; + +exports[` > renders type.tsx correctly 1`] = ` +.emotion-0 { + background-color: rgba(0, 0, 0, 0.04); + border: 1px solid transparent; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + padding: 1px 1px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + border-radius: 6px; +} + +.emotion-1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} + +.emotion-1:hover { + color: rgba(0, 0, 0, 0.88)!important; +} + +
    +
    +
    +
    +
    + + + +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    +
    +
    +
    + + +
    +
    +
    +
    +
    + + + +
    @@ -776,10 +1351,41 @@ exports[` > renders withPanel.tsx correctly 1`] = ` } .emotion-1 { + background-color: rgba(0, 0, 0, 0.04); + border: 1px solid transparent; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; - padding: 2px 4px; + padding: 1px 1px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + border-radius: 6px; +} + +.emotion-2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + width: 30px!important; + height: 30px!important; +} + +.emotion-2:hover { + color: rgba(0, 0, 0, 0.88)!important; }
    @@ -799,126 +1405,118 @@ exports[` > renders withPanel.tsx correctly 1`] = `
    -
    -
    - - + - + - + -
    -
    + + + + +