feat: add tooltip and confirm to the button
This commit is contained in:
chenos
parent
12ba06f89a
commit
4860cb019f
@ -246,6 +246,7 @@ const schema: ISchema = {
|
||||
name: 'action',
|
||||
'x-component': 'Action',
|
||||
'x-component-props': {
|
||||
tooltip: '权限配置',
|
||||
className: 'nb-database-config',
|
||||
icon: 'LockOutlined',
|
||||
type: 'primary',
|
||||
|
||||
@ -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 (
|
||||
<Button
|
||||
className={cls('nb-designable-toggle', { active: designable })}
|
||||
type={'primary'}
|
||||
style={{ height: 46, border: 0 }}
|
||||
onClick={() => {
|
||||
setDesignable(!designable);
|
||||
}}
|
||||
>
|
||||
<HighlightOutlined />
|
||||
</Button>
|
||||
<Tooltip title={'界面配置'}>
|
||||
<Button
|
||||
className={cls('nb-designable-toggle', { active: designable })}
|
||||
type={'primary'}
|
||||
style={{ height: 46, border: 0 }}
|
||||
onClick={() => {
|
||||
setDesignable(!designable);
|
||||
}}
|
||||
>
|
||||
<HighlightOutlined />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -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?',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -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 = (
|
||||
<Button
|
||||
{...others}
|
||||
icon={<IconPicker type={icon} />}
|
||||
onClick={async () => {
|
||||
setVisible(true);
|
||||
await run();
|
||||
if (confirm) {
|
||||
Modal.confirm({
|
||||
...confirm,
|
||||
async onOk() {
|
||||
await run();
|
||||
},
|
||||
});
|
||||
} else {
|
||||
await run();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{schema.title}
|
||||
<DesignableBar path={getSchemaPath(schema)} />
|
||||
</Button>
|
||||
);
|
||||
if (tooltip) {
|
||||
button = <Tooltip {...getTooltipProps(tooltip)}>{button}</Tooltip>;
|
||||
}
|
||||
return (
|
||||
<ButtonComponentContext.Provider value={button}>
|
||||
<VisibleContext.Provider value={[visible, setVisible]}>
|
||||
|
||||
@ -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 }}',
|
||||
// },
|
||||
// },
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -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 (
|
||||
<div>
|
||||
<Button
|
||||
className={'nb-database-config'}
|
||||
style={{
|
||||
height: 46,
|
||||
borderRadius: 0,
|
||||
}}
|
||||
onClick={async () => {
|
||||
setVisible(true);
|
||||
// await run();
|
||||
if (field.value?.length === 0) {
|
||||
field.push({
|
||||
name: `t_${uid()}`,
|
||||
unsaved: true,
|
||||
generalFields: getDefaultFields(),
|
||||
});
|
||||
}
|
||||
}}
|
||||
type={'primary'}
|
||||
>
|
||||
<DatabaseOutlined />
|
||||
</Button>
|
||||
<Tooltip title={'数据表配置'}>
|
||||
<Button
|
||||
className={'nb-database-config'}
|
||||
style={{
|
||||
height: 46,
|
||||
borderRadius: 0,
|
||||
}}
|
||||
onClick={async () => {
|
||||
setVisible(true);
|
||||
// await run();
|
||||
if (field.value?.length === 0) {
|
||||
field.push({
|
||||
name: `t_${uid()}`,
|
||||
unsaved: true,
|
||||
generalFields: getDefaultFields(),
|
||||
});
|
||||
}
|
||||
}}
|
||||
type={'primary'}
|
||||
>
|
||||
<DatabaseOutlined />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Drawer
|
||||
width={'50%'}
|
||||
// bodyStyle={{
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@bgcolor: #F18B62;
|
||||
@bgcolor: #f18b62;
|
||||
|
||||
.designable-info {
|
||||
position: absolute;
|
||||
@ -38,13 +38,17 @@
|
||||
height: 16px !important;
|
||||
vertical-align: top;
|
||||
line-height: 16px !important;
|
||||
// font-size: 10px;
|
||||
// display: inline-flex;
|
||||
cursor: pointer;
|
||||
// font-size: 10px;
|
||||
// display: inline-flex;
|
||||
background-color: @bgcolor !important;
|
||||
border-bottom-left-radius: 1px;
|
||||
border-bottom-right-radius: 1px;
|
||||
// margin-left: 0 !important;
|
||||
// margin-right: 2px !important;
|
||||
// margin-left: 0 !important;
|
||||
// margin-right: 2px !important;
|
||||
&.anticon-drag {
|
||||
cursor: grab;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,6 +6,8 @@ import {
|
||||
useSensor,
|
||||
useSensors,
|
||||
rectIntersection,
|
||||
closestCenter,
|
||||
closestCorners,
|
||||
} from '@dnd-kit/core';
|
||||
import {
|
||||
SortableContext,
|
||||
|
||||
@ -668,7 +668,7 @@ Menu.DesignableBar = (props) => {
|
||||
overlayStyle={{
|
||||
minWidth: 150,
|
||||
}}
|
||||
trigger={['click']}
|
||||
trigger={['hover']}
|
||||
overlay={
|
||||
<AntdMenu
|
||||
onClick={async (info) => {
|
||||
|
||||
@ -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={<PlusOutlined />}
|
||||
icon={<SettingOutlined />}
|
||||
>
|
||||
配置操作
|
||||
</Button>
|
||||
@ -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 = () => {
|
||||
抽屉
|
||||
</Select.Option>
|
||||
<Select.Option value={'Action.Window'}>
|
||||
浏览器窗口
|
||||
窗口
|
||||
</Select.Option>
|
||||
</Select>{' '}
|
||||
内打开
|
||||
|
||||
Loading…
Reference in New Issue
Block a user