feat: support onRemove event for the menu component

This commit is contained in:
chenos 2021-08-08 16:13:02 +08:00
parent 85c052ba59
commit 3966c7f0f3
3 changed files with 101 additions and 87 deletions

View File

@ -10,5 +10,6 @@ export const menu = {
defaultSelectedKeys: '{{ selectedKeys }}', defaultSelectedKeys: '{{ selectedKeys }}',
sideMenuRef: '{{ sideMenuRef }}', sideMenuRef: '{{ sideMenuRef }}',
onSelect: '{{ onSelect }}', onSelect: '{{ onSelect }}',
onRemove: '{{ onMenuItemRemove }}',
}, },
}; };

View File

@ -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 />;

View File

@ -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);
}, },
}); });
}} }}