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