From 4860cb019f99248be679082b18c36751409aba96 Mon Sep 17 00:00:00 2001 From: chenos Date: Wed, 25 Aug 2021 12:21:11 +0800 Subject: [PATCH] feat: add tooltip and confirm to the button --- .../admin-layout/Permissions/index.tsx | 1 + .../src/components/admin-layout/index.tsx | 23 +++++----- packages/client/src/schemas/action/index.md | 4 ++ packages/client/src/schemas/action/index.tsx | 32 +++++++++++-- packages/client/src/schemas/add-new/index.tsx | 26 ++++++----- .../src/schemas/database-field/index.tsx | 45 ++++++++++--------- .../src/schemas/designable-bar/style.less | 14 +++--- packages/client/src/schemas/kanban/index.tsx | 2 + packages/client/src/schemas/menu/index.tsx | 2 +- packages/client/src/schemas/table/index.tsx | 9 +++- 10 files changed, 105 insertions(+), 53 deletions(-) diff --git a/packages/client/src/components/admin-layout/Permissions/index.tsx b/packages/client/src/components/admin-layout/Permissions/index.tsx index 86a41573e..fe9ee3f47 100644 --- a/packages/client/src/components/admin-layout/Permissions/index.tsx +++ b/packages/client/src/components/admin-layout/Permissions/index.tsx @@ -246,6 +246,7 @@ const schema: ISchema = { name: 'action', 'x-component': 'Action', 'x-component-props': { + tooltip: '权限配置', className: 'nb-database-config', icon: 'LockOutlined', type: 'primary', diff --git a/packages/client/src/components/admin-layout/index.tsx b/packages/client/src/components/admin-layout/index.tsx index ed7b02a6a..7f9a65741 100644 --- a/packages/client/src/components/admin-layout/index.tsx +++ b/packages/client/src/components/admin-layout/index.tsx @@ -8,6 +8,7 @@ import { Menu, Collapse, Dropdown, + Tooltip, } from 'antd'; import isEmpty from 'lodash/isEmpty'; import { @@ -43,16 +44,18 @@ import { AuthProvider } from './Auth'; function DesignableToggle() { const { designable, setDesignable } = useDesignableSwitchContext(); return ( - + + + ); } diff --git a/packages/client/src/schemas/action/index.md b/packages/client/src/schemas/action/index.md index 6290fe12e..33e1c41b0 100644 --- a/packages/client/src/schemas/action/index.md +++ b/packages/client/src/schemas/action/index.md @@ -102,6 +102,10 @@ const schema = { 'x-designable-bar': 'Action.DesignableBar', 'x-component-props': { useAction: '{{ useAction }}', + tooltip: '提示信息', + confirm: { + title: 'Do you Want to delete these items?', + }, }, }; diff --git a/packages/client/src/schemas/action/index.tsx b/packages/client/src/schemas/action/index.tsx index e6f98f1f1..2edc96e21 100644 --- a/packages/client/src/schemas/action/index.tsx +++ b/packages/client/src/schemas/action/index.tsx @@ -20,6 +20,7 @@ import { Drawer, Modal, Select, + Tooltip, } from 'antd'; import { Link, useHistory, LinkProps, Switch } from 'react-router-dom'; import { @@ -49,8 +50,21 @@ import { useDisplayedMapContext } from '../../constate'; export const ButtonComponentContext = createContext(null); +function getTooltipProps(tooltip) { + if (typeof tooltip === 'string') { + return { title: tooltip }; + } + return tooltip; +} + export const Action: any = observer((props: any) => { - const { useAction = useDefaultAction, icon, ...others } = props; + const { + tooltip, + confirm, + useAction = useDefaultAction, + icon, + ...others + } = props; const { run } = useAction(); const field = useField(); const { schema, DesignableBar } = useDesignable(); @@ -59,19 +73,31 @@ export const Action: any = observer((props: any) => { const isDropdownOrPopover = child && ['Action.Dropdown', 'Action.Popover'].includes(child['x-component']); - const button = ( + let button = ( ); + if (tooltip) { + button = {button}; + } return ( diff --git a/packages/client/src/schemas/add-new/index.tsx b/packages/client/src/schemas/add-new/index.tsx index 8bb2f1528..fe2a0aa5d 100644 --- a/packages/client/src/schemas/add-new/index.tsx +++ b/packages/client/src/schemas/add-new/index.tsx @@ -175,6 +175,10 @@ function generateCardItemSchema(component) { 'x-component': 'Action', 'x-designable-bar': 'Table.Action.DesignableBar', 'x-component-props': { + confirm: { + title: '删除数据', + content: '删除后无法恢复,确定要删除吗?' + }, useAction: '{{ Table.useTableDestroyAction }}', }, }, @@ -312,17 +316,17 @@ function generateCardItemSchema(component) { }, }, }, - [uid()]: { - type: 'void', - title: '删除', - 'x-component': 'Action', - 'x-designable-bar': 'Table.Action.DesignableBar', - 'x-action-type': 'destroy', - 'x-component-props': { - type: 'link', - useAction: '{{ Table.useTableDestroyAction }}', - }, - }, + // [uid()]: { + // type: 'void', + // title: '删除', + // 'x-component': 'Action', + // 'x-designable-bar': 'Table.Action.DesignableBar', + // 'x-action-type': 'destroy', + // 'x-component-props': { + // type: 'link', + // useAction: '{{ Table.useTableDestroyAction }}', + // }, + // }, }, }, }, diff --git a/packages/client/src/schemas/database-field/index.tsx b/packages/client/src/schemas/database-field/index.tsx index 568aa3917..92972d79c 100644 --- a/packages/client/src/schemas/database-field/index.tsx +++ b/packages/client/src/schemas/database-field/index.tsx @@ -26,6 +26,7 @@ import { message, Drawer, Space, + Tooltip, } from 'antd'; import { options, interfaces, getDefaultFields } from './interfaces'; import { @@ -107,27 +108,29 @@ export const DatabaseCollection = observer((props) => { return (
- + + + { overlayStyle={{ minWidth: 150, }} - trigger={['click']} + trigger={['hover']} overlay={ { diff --git a/packages/client/src/schemas/table/index.tsx b/packages/client/src/schemas/table/index.tsx index 23c7e2983..f259418d2 100644 --- a/packages/client/src/schemas/table/index.tsx +++ b/packages/client/src/schemas/table/index.tsx @@ -942,6 +942,10 @@ function generateActionSchema(type) { 'x-component': 'Action', 'x-designable-bar': 'Table.Action.DesignableBar', 'x-component-props': { + confirm: { + title: '删除数据', + content: '删除后无法恢复,确定要删除吗?' + }, useAction: '{{ Table.useTableDestroyAction }}', }, }, @@ -1111,7 +1115,7 @@ function AddActionButton() { className={'designable-btn designable-btn-dash'} style={{ marginLeft: 8 }} type={'dashed'} - icon={} + icon={} > 配置操作 @@ -1779,6 +1783,7 @@ Table.Action.DesignableBar = () => { bordered={false} size={'small'} defaultValue={popupComponent} + style={{ width: 100 }} onChange={(value) => { const s = Object.values(schema.properties).shift(); s['x-component'] = value; @@ -1795,7 +1800,7 @@ Table.Action.DesignableBar = () => { 抽屉 - 浏览器窗口 + 窗口 {' '} 内打开