From 3966c7f0f363064ad3d5f96b64497bf16ea908db Mon Sep 17 00:00:00 2001 From: chenos Date: Sun, 8 Aug 2021 16:13:02 +0800 Subject: [PATCH] feat: support onRemove event for the menu component --- packages/api/src/migrations/ui-schema/menu.ts | 1 + .../src/components/admin-layout/index.tsx | 28 +-- packages/client/src/schemas/menu/index.tsx | 159 +++++++++--------- 3 files changed, 101 insertions(+), 87 deletions(-) diff --git a/packages/api/src/migrations/ui-schema/menu.ts b/packages/api/src/migrations/ui-schema/menu.ts index 7a5382a4f..6a6660631 100644 --- a/packages/api/src/migrations/ui-schema/menu.ts +++ b/packages/api/src/migrations/ui-schema/menu.ts @@ -10,5 +10,6 @@ export const menu = { defaultSelectedKeys: '{{ selectedKeys }}', sideMenuRef: '{{ sideMenuRef }}', onSelect: '{{ onSelect }}', + onRemove: '{{ onMenuItemRemove }}', }, }; diff --git a/packages/client/src/components/admin-layout/index.tsx b/packages/client/src/components/admin-layout/index.tsx index 9b5294532..580baf163 100644 --- a/packages/client/src/components/admin-layout/index.tsx +++ b/packages/client/src/components/admin-layout/index.tsx @@ -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(); - 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 ( @@ -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}`, - { - refreshDeps: [activeKey, collections, designable], - formatResult: (result) => result?.data, - }, - ); + const { + data = {}, + loading, + } = useRequest(`ui_schemas:getTree?filter[parentKey]=${activeKey}`, { + refreshDeps: [activeKey, collections, designable], + formatResult: (result) => result?.data, + }); if (loading) { return ; @@ -124,7 +130,8 @@ function Content({ activeKey }) { return ; } -export function AdminLayout({ route }: any) { +export function AdminLayout({ route, ...others }: any) { + const match = useRouteMatch(); 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(); if (loading) { return ; diff --git a/packages/client/src/schemas/menu/index.tsx b/packages/client/src/schemas/menu/index.tsx index cc48f905c..367c006cc 100644 --- a/packages/client/src/schemas/menu/index.tsx +++ b/packages/client/src/schemas/menu/index.tsx @@ -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(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,80 +159,82 @@ export const Menu: any = observer((props: any) => { }, [selectedKey]); const [dragOverlayContent, setDragOverlayContent] = useState(''); - + console.log('onRemove', onRemove) return ( - { - console.log({ event }); - setDragOverlayContent(event.active.data?.current?.title || ''); - }} - onDragEnd={async (event) => { - console.log({ event }); - const path1 = event.active?.data?.current?.path; - const path2 = event.over?.data?.current?.path; - const data = moveToAfter(path1, path2); - await updateSchema(data); - }} - > - {createPortal( - - {dragOverlayContent} - , - document.body, - )} - - { - if (mode === 'mix') { - setSelectedKey(info.key); - } - const selectedSchema = schema.properties[info.key]; - console.log({ selectedSchema }); - onSelect && onSelect({ ...info, schema: selectedSchema }); - }} - > - - - {/* */} - - - - {mode === 'mix' && ( -
- { - const keyPath = [selectedKey, ...[...info.keyPath].reverse()]; - const selectedSchema = findPropertyByPath(schema, keyPath); - console.log('keyPath', keyPath, selectedSchema); - onSelect && - onSelect({ ...info, keyPath, schema: selectedSchema }); - }} - defaultSelectedKeys={defaultSelectedKeys || []} - selectedKey={selectedKey} - sideMenuRef={sideMenuRef} - /> -
+ + { + console.log({ event }); + setDragOverlayContent(event.active.data?.current?.title || ''); + }} + onDragEnd={async (event) => { + console.log({ event }); + const path1 = event.active?.data?.current?.path; + const path2 = event.over?.data?.current?.path; + const data = moveToAfter(path1, path2); + await updateSchema(data); + }} + > + {createPortal( + + {dragOverlayContent} + , + document.body, )} -
-
+ + { + if (mode === 'mix') { + setSelectedKey(info.key); + } + const selectedSchema = schema.properties[info.key]; + console.log({ selectedSchema }); + onSelect && onSelect({ ...info, schema: selectedSchema }); + }} + > + + + {/* */} + + + + {mode === 'mix' && ( +
+ { + const keyPath = [selectedKey, ...[...info.keyPath].reverse()]; + const selectedSchema = findPropertyByPath(schema, keyPath); + console.log('keyPath', keyPath, selectedSchema); + onSelect && + onSelect({ ...info, keyPath, schema: selectedSchema }); + }} + defaultSelectedKeys={defaultSelectedKeys || []} + selectedKey={selectedKey} + sideMenuRef={sideMenuRef} + /> +
+ )} +
+ + ); }); @@ -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 (
@@ -927,6 +933,7 @@ Menu.DesignableBar = (props) => { onOk: async () => { const target = remove(); await removeSchema(target); + ctx.onRemove && ctx.onRemove(target); }, }); }}