feat: support onRemove event for the menu component
This commit is contained in:
		
							parent
							
								
									85c052ba59
								
							
						
					
					
						commit
						3966c7f0f3
					
				| @ -10,5 +10,6 @@ export const menu = { | ||||
|     defaultSelectedKeys: '{{ selectedKeys }}', | ||||
|     sideMenuRef: '{{ sideMenuRef }}', | ||||
|     onSelect: '{{ onSelect }}', | ||||
|     onRemove: '{{ onMenuItemRemove }}', | ||||
|   }, | ||||
| }; | ||||
|  | ||||
| @ -33,6 +33,7 @@ import { | ||||
|   CollectionsProvider, | ||||
|   useCollectionsContext, | ||||
| } from '../../constate'; | ||||
| import { uid } from '@formily/shared'; | ||||
| 
 | ||||
| function DesignableToggle() { | ||||
|   const { designable, setDesignable } = useDesignableSwitchContext(); | ||||
| @ -58,7 +59,6 @@ interface LayoutWithMenuProps { | ||||
| function LayoutWithMenu(props: LayoutWithMenuProps) { | ||||
|   const { schema, defaultSelectedKeys } = props; | ||||
|   const match = useRouteMatch<any>(); | ||||
|   const location = useLocation(); | ||||
|   const sideMenuRef = useRef(); | ||||
|   const history = useHistory(); | ||||
|   const [activeKey, setActiveKey] = useState(match.params.name); | ||||
| @ -77,7 +77,12 @@ function LayoutWithMenu(props: LayoutWithMenuProps) { | ||||
|       } | ||||
|     } | ||||
|   }; | ||||
| 
 | ||||
|   useEffect(() => { | ||||
|     setActiveKey(match.params.name); | ||||
|   }, [match.params.name]); | ||||
|   const onMenuItemRemove = () => { | ||||
|     history.push(`/admin`); | ||||
|   }; | ||||
|   return ( | ||||
|     <Layout> | ||||
|       <Layout.Header style={{ display: 'flex' }}> | ||||
| @ -86,6 +91,7 @@ function LayoutWithMenu(props: LayoutWithMenuProps) { | ||||
|           scope={{ | ||||
|             sideMenuRef, | ||||
|             onSelect, | ||||
|             onMenuItemRemove, | ||||
|             selectedKeys: defaultSelectedKeys.filter(Boolean), | ||||
|           }} | ||||
|         /> | ||||
| @ -109,13 +115,13 @@ function LayoutWithMenu(props: LayoutWithMenuProps) { | ||||
| function Content({ activeKey }) { | ||||
|   const { designable } = useDesignableSwitchContext(); | ||||
|   const { collections } = useCollectionsContext(); | ||||
|   const { data = {}, loading, run } = useRequest( | ||||
|     `ui_schemas:getTree?filter[parentKey]=${activeKey}`, | ||||
|     { | ||||
|   const { | ||||
|     data = {}, | ||||
|     loading, | ||||
|   } = useRequest(`ui_schemas:getTree?filter[parentKey]=${activeKey}`, { | ||||
|     refreshDeps: [activeKey, collections, designable], | ||||
|     formatResult: (result) => result?.data, | ||||
|     }, | ||||
|   ); | ||||
|   }); | ||||
| 
 | ||||
|   if (loading) { | ||||
|     return <Spin />; | ||||
| @ -124,7 +130,8 @@ function Content({ activeKey }) { | ||||
|   return <SchemaRenderer schema={data} />; | ||||
| } | ||||
| 
 | ||||
| export function AdminLayout({ route }: any) { | ||||
| export function AdminLayout({ route, ...others }: any) { | ||||
|   const match = useRouteMatch<any>(); | ||||
|   const { data = {}, loading } = useRequest( | ||||
|     `ui_schemas:getTree/${route.uiSchemaKey}`, | ||||
|     { | ||||
| @ -132,7 +139,6 @@ export function AdminLayout({ route }: any) { | ||||
|       formatResult: (result) => result?.data, | ||||
|     }, | ||||
|   ); | ||||
|   const match = useRouteMatch<any>(); | ||||
| 
 | ||||
|   if (loading) { | ||||
|     return <Spin />; | ||||
|  | ||||
| @ -68,7 +68,13 @@ import { | ||||
| import { DndContext, DragOverlay } from '@dnd-kit/core'; | ||||
| import { createPortal } from 'react-dom'; | ||||
| 
 | ||||
| export interface MenuContextProps { | ||||
|   schema?: Schema; | ||||
|   onRemove?: any; | ||||
| } | ||||
| 
 | ||||
| export const MenuModeContext = createContext(null); | ||||
| export const MenuContext = createContext<MenuContextProps>(null); | ||||
| 
 | ||||
| const SideMenu = (props: any) => { | ||||
|   const { selectedKey, defaultSelectedKeys, onSelect, path } = props; | ||||
| @ -105,6 +111,7 @@ export const Menu: any = observer((props: any) => { | ||||
|     onSelect, | ||||
|     sideMenuRef, | ||||
|     defaultSelectedKeys = [], | ||||
|     onRemove, | ||||
|     ...others | ||||
|   } = props; | ||||
|   const { root, schema, insertAfter, remove } = useDesignable(); | ||||
| @ -152,8 +159,9 @@ export const Menu: any = observer((props: any) => { | ||||
|   }, [selectedKey]); | ||||
| 
 | ||||
|   const [dragOverlayContent, setDragOverlayContent] = useState(''); | ||||
| 
 | ||||
|   console.log('onRemove', onRemove) | ||||
|   return ( | ||||
|     <MenuContext.Provider value={{ schema, onRemove }}> | ||||
|       <DndContext | ||||
|         onDragStart={(event) => { | ||||
|           console.log({ event }); | ||||
| @ -226,6 +234,7 @@ export const Menu: any = observer((props: any) => { | ||||
|           )} | ||||
|         </MenuModeContext.Provider> | ||||
|       </DndContext> | ||||
|     </MenuContext.Provider> | ||||
|   ); | ||||
| }); | ||||
| 
 | ||||
| @ -638,10 +647,7 @@ Menu.DesignableBar = (props) => { | ||||
|   } = useDesignable(); | ||||
|   const formConfig = schemas[schema['x-component']]; | ||||
|   const isSubMenu = schema['x-component'] === 'Menu.SubMenu'; | ||||
| 
 | ||||
|   if (!designable) { | ||||
|     return null; | ||||
|   } | ||||
|   const ctx = useContext(MenuContext); | ||||
| 
 | ||||
|   return ( | ||||
|     <div className={cls('designable-bar', { active: visible })}> | ||||
| @ -927,6 +933,7 @@ Menu.DesignableBar = (props) => { | ||||
|                     onOk: async () => { | ||||
|                       const target = remove(); | ||||
|                       await removeSchema(target); | ||||
|                       ctx.onRemove && ctx.onRemove(target); | ||||
|                     }, | ||||
|                   }); | ||||
|                 }} | ||||
|  | ||||
		Loading…
	
		Reference in New Issue
	
	Block a user