Commit f5b34755 authored by 陈帅's avatar 陈帅

fix type error

parent 57487480
import React from 'react';
import pathToRegexp from 'path-to-regexp';
import Link from 'umi/link';
import { formatMessage } from 'umi-plugin-react/locale';
import { urlToList } from '../_utils/pathTools';
import { PageHeaderWrapperProps } from '.';
import { MenuDataItem } from '../SiderMenu';
import { BreadcrumbProps as AntdBreadcrumbProps } from 'antd/lib/breadcrumb';
type BreadcrumbProps = PageHeaderWrapperProps;
// 渲染Breadcrumb 子节点
// Render the Breadcrumb child node
const itemRender: AntdBreadcrumbProps['itemRender'] = (route, params, routes, paths) => {
const last = routes.indexOf(route) === routes.length - 1;
return last || !route.component ? (
<span>{route.breadcrumbName}</span>
) : (
<Link to={paths.join('/')}>{route.breadcrumbName}</Link>
);
};
const renderItemLocal = (item: MenuDataItem): string => {
if (item.locale) {
return formatMessage({
id: item.locale,
defaultMessage: item.name,
});
}
return item.name as string;
};
export const getBreadcrumb = (
breadcrumbNameMap: PageHeaderWrapperProps['breadcrumbNameMap'],
url: string,
): MenuDataItem => {
if (!breadcrumbNameMap) {
return {
path: '',
};
}
let breadcrumb = breadcrumbNameMap[url];
if (!breadcrumb) {
Object.keys(breadcrumbNameMap).forEach(item => {
if (pathToRegexp(item).test(url)) {
breadcrumb = breadcrumbNameMap[item];
}
});
}
return breadcrumb || { path: '' };
};
export const getBreadcrumbProps = (props: BreadcrumbProps): PageHeaderWrapperProps => {
const { location, breadcrumbNameMap } = props;
return {
location,
breadcrumbNameMap,
};
};
// Generated according to props
const conversionFromProps = (props: BreadcrumbProps): AntdBreadcrumbProps['routes'] => {
const { breadcrumbList = [] } = props;
return breadcrumbList
.map(item => {
const { title, href } = item;
return {
path: href,
breadcrumbName: title,
};
})
.filter(item => item.path);
};
const conversionFromLocation = (
routerLocation: PageHeaderWrapperProps['location'],
breadcrumbNameMap: PageHeaderWrapperProps['breadcrumbNameMap'],
props: BreadcrumbProps,
): AntdBreadcrumbProps['routes'] => {
if (!routerLocation) {
return [];
}
const { home } = props;
// Convert the url to an array
const pathSnippets = urlToList(routerLocation.pathname);
// Loop data mosaic routing
const extraBreadcrumbItems: AntdBreadcrumbProps['routes'] = pathSnippets
.map(url => {
const currentBreadcrumb = getBreadcrumb(breadcrumbNameMap, url);
if (currentBreadcrumb.inherited) {
return { path: '', breadcrumbName: '' };
}
const name = renderItemLocal(currentBreadcrumb);
const { hideInBreadcrumb } = currentBreadcrumb;
return name && !hideInBreadcrumb
? {
path: url,
breadcrumbName: name,
}
: { path: '', breadcrumbName: '' };
})
.filter(item => item && item.path);
// Add home breadcrumbs to your head if defined
if (home) {
extraBreadcrumbItems.unshift({
path: '/',
breadcrumbName: home,
});
}
return extraBreadcrumbItems;
};
/**
* 将参数转化为面包屑
* Convert parameters into breadcrumbs
*/
export const conversionBreadcrumbList = (props: BreadcrumbProps): AntdBreadcrumbProps => {
const { breadcrumbList } = props;
const { location, breadcrumbNameMap } = getBreadcrumbProps(props);
if (breadcrumbList && breadcrumbList.length) {
return {
routes: conversionFromProps(props),
itemRender,
};
}
// 根据 location 生成 面包屑
// Generate breadcrumbs based on location
if (location && location.pathname) {
return {
routes: conversionFromLocation(location, breadcrumbNameMap, props),
itemRender,
};
}
return {
routes: [],
};
};
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment