xf-web/src/components/DashboardLayout/AppBreadcrumb.tsx

43 lines
969 B
TypeScript

import { Breadcrumb } from 'antd';
import React, { useMemo } from 'react'
import { Link } from 'react-router-dom';
import { MenuItem } from '../../models/_/defs';
const AppBreadcrumb: React.FC<{
menu: MenuItem[];
menuIndexes: string[];
}> = ({ menu, menuIndexes }) => {
const menulist = useMemo(() => {
const ret: MenuItem[] = [];
let o: MenuItem[] = menu;
for (const id of menuIndexes) {
const hit = o.find((m: any) => m.id === id);
if (hit) {
ret.push(hit);
o = hit.children || [];
}
}
return ret;
}, [menu, menuIndexes])
return (
<div className="app-breadcrumb">
<Breadcrumb >
{
menulist.map((m: any) => (
<Breadcrumb.Item key={m.id}>
{
m.path ? <Link to={m.path}>{m.title}</Link> : m.title
}
</Breadcrumb.Item>
))
}
</Breadcrumb>
</div>
)
}
export default AppBreadcrumb