feat: add tooltip and confirm to the button
This commit is contained in:
		
							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,6 +44,7 @@ import { AuthProvider } from './Auth'; | ||||
| function DesignableToggle() { | ||||
|   const { designable, setDesignable } = useDesignableSwitchContext(); | ||||
|   return ( | ||||
|     <Tooltip title={'界面配置'}> | ||||
|       <Button | ||||
|         className={cls('nb-designable-toggle', { active: designable })} | ||||
|         type={'primary'} | ||||
| @ -53,6 +55,7 @@ function DesignableToggle() { | ||||
|       > | ||||
|         <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); | ||||
|         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,6 +108,7 @@ export const DatabaseCollection = observer((props) => { | ||||
| 
 | ||||
|   return ( | ||||
|     <div> | ||||
|       <Tooltip title={'数据表配置'}> | ||||
|         <Button | ||||
|           className={'nb-database-config'} | ||||
|           style={{ | ||||
| @ -128,6 +130,7 @@ export const DatabaseCollection = observer((props) => { | ||||
|         > | ||||
|           <DatabaseOutlined /> | ||||
|         </Button> | ||||
|       </Tooltip> | ||||
|       <Drawer | ||||
|         width={'50%'} | ||||
|         // bodyStyle={{
 | ||||
|  | ||||
| @ -1,4 +1,4 @@ | ||||
| @bgcolor: #F18B62; | ||||
| @bgcolor: #f18b62; | ||||
| 
 | ||||
| .designable-info { | ||||
|   position: absolute; | ||||
| @ -38,6 +38,7 @@ | ||||
|       height: 16px !important; | ||||
|       vertical-align: top; | ||||
|       line-height: 16px !important; | ||||
|       cursor: pointer; | ||||
|       //   font-size: 10px; | ||||
|       //   display: inline-flex; | ||||
|       background-color: @bgcolor !important; | ||||
| @ -45,6 +46,9 @@ | ||||
|       border-bottom-right-radius: 1px; | ||||
|       //   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