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 }}',
sideMenuRef: '{{ sideMenuRef }}',
onSelect: '{{ onSelect }}',
onRemove: '{{ onMenuItemRemove }}',
},
};

View File

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

View File

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