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